Always with you ! GENKI

Always with you ! GENKI

カテゴリー: WordPress

別のページに”ジャ~ンプ”

【同じページ内のリンク】方法はこちら

ブログやホームページを書いていて
「ここから別のページに飛びたいなあ」
と思う事があります。
例えば、上の
同じページ内のリンク】方法はこちら
をクリックすると、
「ページ内リンク:好きなところへ”ジャ~ンプ”」
というページに飛びます。
やってみてください!
ページは「新しいタブで開く」ように設定していますので、こちらのページにはすぐに戻れます。


では、その手順を見ていきましょう。
手順は【私仕様】なので必要ない部分は飛ばしてください。

書いている途中で
「あっ!ここから関連ページを作って飛びたいなあ」
と思った時、

現在作成中のページを保存

下書きページはいくつ作っても大丈夫です。
「思い立ったが吉日」
なので、先に関連ページの下準備をしておきましょう。
保存しておかないと次に開いた時に続きが???になってしまいます。

②作りたい関連ページを作成

とりあえず、下書きとしてページを作成します。
このページにジャンプしたいので、このページのURLが必要になります。
題名もURLも後から直せますが、この時点で決定すればなお楽です。

関連ページの右側の「文書」の下側にある
投稿を表示」のURLが必要になります。
このURLをコピーします。
コピーはURL部分を右クリックして
リンクのアドレスをコピー
をクリックします。
続いて「下書き保存」してください。

【参考】
「URLの最後の部分」と「URLスラッグ」は同じです。
検索ロボットは日本語が苦手な部分があります。
できるだけ半角英数字で書く方がいいでしょう。

元のページを開きます。

リンクを貼りたい箇所
ここでは「こちら」を選択して青く反転させます。

ブロック上側の鎖の部分(リンク)をクリックし、コピーしてきたURLを貼り付けます。

すると上のような画面になるので、【URL】という所をクリックします。
この時に「新しいタブで開く」の左側のボタンをクリックしてもいいです。
新しいタブが必要なければ無視ですし、ここでクリックしなくても次の画面でも選択できます。

URL変更の場合も同じ画面

このような画面に切り替わります。
ここでも「新しいタブで開く」の選択ができます。
これで設定が済んだので、何もない所をクリックすれば通常の作業に戻れます。

上のように「こちら」の文字の色が変わり、リンクが貼られたことがわかります。
また、記述したURLを変更したい時は、このリンクを貼った文字上をクリックすると上の
URL変更の場合も同じ画面
という画面になります。
ここで「編集」すればOKです。

それではページをプレビューして確認してください。
万一リンクがおかしい場合は、リンクのアドレスを再度確認してください。

ページ内リンク:好きなところへ”ジャ~ンプ”

別のページに”ジャ~ンプ”方法はこちら

ブログをやっていて
「同じページ内の【ある場所】から【別の場所】に直接ジャンプしたいな」
などと感じたことがあると思います。
例えば下の【ジャ~~~ンプ】をクリックすると
【飛んできたよ~~~】まで移動します。

【ジャ~~~ンプ】


このようにページ内で移動をしたいわけです。
では、どうすればいいか・・・

①移動する出発点と移動先に記述をする。
②移動先位置がずれる場合(思った位置に移動しない)の対処

①移動する出発点と移動先に記述をする。

例えば
上の【ジャ~~~ンプ】が出発点
下の【飛んできたよ~~~】が移動先です。

最初に【飛んできたよ~~~】のところに
「ここへ来てね」という指示を書きます。

現在(2020年7月)のWordPressのブロックに文字を書くと上のようになります。
右上の「3点」をクリックし、
「HTMLとして編集」をクリックします。

すると、表示が下のようになるのでそこに文字を追加します。

<p><div id=”〇〇〇”>【飛んできたよ~~~】</div></p>

赤文字を追加するのですが、「〇〇〇」は自分がわかるもの、
例えば「jump」とか半角文字で書きます。
(注)上記の赤文字をコピペするとうまく動かないかもしれません。その時は半角で書き直してください。
追加する場所は、指定する文字の前後 です。
すると、下のような感じになります。
プレ」となっている所をクリックすると
普通のブロックの表示になります。
このままHTML表示でも問題はありません。
ページのプレビューをクリックして確認するといいでしょう。

次に出発点【ジャ~~~ンプ】にリンクを設定します。

ブロックの上側の「鎖のようなところ(リンク)」をクリックして、
#jump】と書き、
赤枠部の「internal」をクリックします。
#jump】は移動先に設定した文字です。
これでページ内リンクが完成です。
ページをプレビューして確認してください。
作成ページでは確認できません。

もし、「動かない!!!」場合
①移動先に指定した文字「〇〇〇」と出発点のリンク文字が同じかどうか確認。
移動先の文字の綴りが合っているかどうか確認。

「まだ動かない!!!」場合
②-1 移動先に記述した文字位置
(例:【飛んできたよ~~~】の直前・直後に記述されているか確認。
②-2 移動先に記述した文字を再度半角で書き直してみる。
(コピペした場合、意外と「”」が全角だったりします。なぜそうなるかは不明)
それ以外は一度メールをください。
自分の経験上、上記を見直すと動きました。

②移動先位置がずれる場合(思った位置に移動しない)の対処

対処方法はいくつかあります。
〇 プラグインを利用する。
〇 jQueryなどを追加する。
〇 テーマによっては「設定」で変更できる。など

今回は一番一般的で簡単にできるプラグインを利用します。
2020年にWordPressが大型バージョンアップをやってから、投稿作成が「ブロック」という区切りで行われるようになりました。
これはこれでとても便利なのですが、HTMLの記述などがうまくいかないときがあります。
作成ページの右上の「3点」のところにも「コードエディター」がありますが、そこを触ってもスムーズに反応してくれないことがあります。
(私の勉強不足も多いにあるのですが…)

そうなってくると頼みの綱は「プラグイン」となってしまう訳ですが…
プラグイン否定派の方にはお勧めできません。

今回使用するのは
Easy Smooth Scroll Links-Smooth Scrolling Anchor
というプラグインです。

検索で「smooth 」と入れるだけでも
出てきます。

「インストール」「有効化」と進みます。

赤枠のsettingをクリック

もしくは

ダッシュボードの「設定」「Easy Smooth Scroll Links」

から、設定画面を開きます。

赤枠部が「Offset(default is 20)」となっています。
一度このままで試してみて「まだだめだ」となったら
数値を変更してください。
ちなみに私は「40」で設定しています。

その下
Scrolling Animation Effects
には移動パターンがいろいろあります。
本ブログは「easeInCirc」を使っています。
どれも同じような気もしないでもないですが、微妙に違うようです。


【飛んできたよ~~~】

いや~飛んできましたね(笑)
では帰りましょう!
下の【元の位置に帰る】をクリックしてください。
【元の位置に帰る】

WORD PRESSに広告表示:「アドセンス広告」を選択

WordPressでブログを作成しました。
でも、広告ってどうやって付けるの?

広告を付けるには手順があります。

①「Google Adsense」に登録申請。(方法はこちら:制作中)
②「Google Adsense」から許可が下りたら「Google Adsense」の設定(方法はこちら:制作中)
③ WordPressに広告用のプラグイン配置
④ ブログに広告表示される。

ここでは③のプラグイン配置をやります。
プラグインの「新規追加」で好みと思われる「Adsense(広告)」のプラグインをインストールします。
「プラグインの新規追加」の「キーワード」に「ads」などと入れるといろいろなプラグインが出てきます。
今回は「advanced Ads-Ad Manager & Adsense」を使います。

「今すぐインストール」➡「有効化」と進みます。
左側の「Advanced Ads」をクリックすると下の画面になります。
この時、「タイトル」を付けて先に進んでも良いのですが、左側の「Advanced Ads」➡「設定」に移行して設定をしましょう。(「設定」はこちら
どちらが先でも私の経験では「異常なし」でした。

広告コードが取得できる場合
「プレーンテキストとコード」を利用します。
直接 Google Adsense を使用するときは
下側の「アドセンス広告」をクリックすると簡単です。

「タイトルを追加」:自分がわかる名前(例 google など)を入力
(上記のどのタイプを使用するにしてもタイトル名は必要です。)

今回は簡単に済ませることを前提としていますので
アドセンス広告」を選択
「次へ」をクリック

🌸 途中ですが 🌸
設定途中などで「う~ん。どうしよう」「どれにしよう」などとウロウロしていると設定画面ではなくなったりすることがあります。
でも大丈夫!
左側の「Advanced Ads」➡「広告」と進めば作成した「タイトル」が出てきます。
出てこなければまだ作っていないという事になります。
その場合は上側の「新しい広告」をクリックすればタイトル設定画面に移動します。

完全に広告設定を終えていない場合は
「下書き」
となっています。

継続して設定する場合・変更する場合は触りたい「タイトル」をクリックすれば設定画面に移動します。

では、「アドセンス広告」のやり方です。

結果から言うと、広告のタイトルを決めて位置を決めれば何もしなくていいです。(笑)

🌸 1 🌸
タイトル設定画面で
「タイトル」入力・「アドセンス広告」を選択して「次へ」をクリックすると
「広告パラメーター」が出てきます。
Google Adsense」で自分の広告を設定していれば
下の画面が出てくると思います。
出てこなかったら🌸 2 🌸に進みます。🌸 2 🌸はこちら

🌸 1 🌸

とりあえずサイズはGoogleに決定してもらうように
Responsive で設定した「ad-1」を選択しました。
「Load」をクリック。
(この広告パラメーターの作り方はこちら:制作中)
この時何も選択しなくてもOKです。(Googleさんにお任せ状態)
「次へ」をクリックすると
🌸 3 🌸 に進みます。(🌸 3 🌸に移動
広告パラメーターが 🌸 1 🌸 以外の方は 🌸 2 🌸 に進みます。

🌸 途中ですが 🌸 レスポンシブ(Responsive)広告とは
広告枠に合わせて広告のサイズ、表示形式、フォーマットが自動調整される広告です。そのため、ある広告枠としては小さいテキスト広告として表示された同じレスポンシブ広告が、別の広告枠では大きいイメージ広告として表示される可能性があります。

🌸 2 🌸
「広告パラメーター」が以下のような場合

パターン1
パターン2

どちらの場合もこのままでもOKです。
何もしなければ、
「🌸 1 🌸」で「何もしない状態」
と同じ事になります。
〇「パターン1」の「詳細を取得」をクリックすると「パターン3」に移行し、「Advanced Ads」の「設定」が終わっていれば、「パブリッシャーID」が表示されるはずです。
もし表示されなければまだ設定が終わっていないのかもしれません。
〇「パターン2」の「Insert new Adsense code」をクリックすると、「パターン1」が表示されます。
〇「パターン2」の「Connect to Adsense」をクリックすると、「パターン4」が表示されます。

パターン3
パターン4

Google Adsense」で自分の広告を設定していれば,
「show all ad units」をクリックすると、「🌸 1 🌸」が表示されます。

🌸 3 🌸
 🌸 1 🌸・ 🌸 2 🌸の続きです。

ここではとりあえず何もしなくていいと思います。
設置してみて必要になればまたここへ来てください。
「次へ」をクリック。

配置場所を選択

この「Google2」というタイトルの広告表示はサイトのページの最終部分に入れたいので、左から3番目を選択。(広告配置のそれぞれの説明はこちら)
さらに下へ移動して

左右の「位置」を決めます。

「位置」は「既定」でも構いませんが、
限定したい場合は3種類のどれかを選択します。
(ちなみに私は真ん中を選択しています。)
さらに赤枠部分を✔します。
✔を入れることにより
広告が入る部分に文字がある場合、
広告で文字が回り込んで、文章が分断されるのを防ぎます。
「レスポンシブ」で設定しているので、他は触る必要はないかと思いますが、ご自分で調べてみるのもありだとおもいます!
「更新」をクリック。

「おめでとうございます。」となって「フロントエンド」に表示すると書いてあります。
広告パラメータには選んだ広告名があります。
ちなみに何も選ばなかった場合は広告名が無い状態でこの画面になります。

サイトに広告が掲載されているかどうか確認した時

まだ、ページを公開していない場合など、確認しても広告が表示されない場合があります。
この時、意図した部分に「スポンサーリンク」という文字(「Advanced Ads」➡「設定」で設定した名称:制作中)が表示されていればページを公開すれば表示されます。


また、Google Adsense側の時間差がありますので、「スポンサーリンク」という文字があるのに、表示されない場合は焦らず長くて1週間ぐらい待ってみてください。

サイト内の広告が多すぎる!!
置きたくないところに広告がある!
そんな場合は こちら
:制作中

子テーマ作成:手動作成で子テーマ作成に失敗する場合

WordPressを使用するにあたって、最初自分のブログの大骨「テーマ」を決定します。
それをいろいろ変更したり追加したりして発展させていくのですが、
「テーマ」や「WordPress」がバージョンアップをすると、せっかく良く出来ていた我がブログが「ゼロ」の状態に戻されることがあります
それを防ぐために「子テーマ」を作成して、それを改良していけば大型バージョンアップがあっても、そのまま使い続けることができるのです。

今回のブログテーマは「Godhuli」(ゴデュリ)です。

余談ですが「Godhuli」というのはバングラディシュに関係がありそうですね。
テーマは決めましたが、「Twenty」シリーズと同様だと思って手動で子テーマをアップロードしましたがうまく動きませんでした。
何故かな????

「親テーマ」はインストールしています。
いろいろ手直ししたり何回もチャレンジしましたが、上記の表示は消えず子テーマがつくれません。

何か不足しているものがあるのだろうか?
「足りない部分がある」と書いてある。
そこで色々調べた結果
「Twenty」シリーズ以外のテーマを使用するときは、あるプラグインを使用すると簡単に子テーマを作成できるということがわかりました!
その名も

Child Theme Configurator

作り終えたら削除してもよいプラグインです。
他にも良いプラグインがあると思いますが、今回はこれを使用します。
とりあえずこれを使って子テーマを作り、どんどん発展させましょう!
Child Theme Configuratorの使い方

子テーマを作成したら
「外観」➡「テーマ」➡「作成した子テーマ」を有効
にして「子テーマ」を発展させます。

「Godhuli」(ゴデュリ)の説明はこちら(ただ今制作中)

Child Theme Configuratorの使い方(Parent/Child)

「Child Theme Configurator」を使用することで、子テーマが簡単に作れます。
ただし、今回は必要最低限の「子テーマを使用できる状態」にするまでを説明します。
今回親テーマは参考として「Hello Elementor」を使用します。
まず、プラグインの新規追加で「Child Theme Configurator」をインストールし、有効にします。

有効にすると次の画面になります。
ならないときは、「ツール」の「Child Theme」をクリックします。

① 新しい子テーマ作成の場合、ボタンにチェックを入れます。
 (最初からボタンが青くなっているかもしれません)

②「親テーマ」がインストールされていれば、▼をクリックすると「親テーマの名前」が表示されます。
テーマ名を確認して「analyze」をクリックすると、したの画面になります。

では順番に説明していきます。
上段の「Parent/Child」が子テーマ作成に必要な部分です。
そのほかのところは別ページで解説予定です。

③ 「analyze」をクリックして直下に現れた「緑色✔」が③の部分です。
親テーマを分析して問題があれば何かしらの表示が出るものと思われます。
現在時点において問題が発生したテーマが見つかっていないので、見つかり次第ブログ更新しようと考えています。

④が「hello elementor-child」となっているのがわかります。
ここでは名前変更はできません。
変更したい場合は、⑦で行います。

⑤ 最初は上の「Primary Stylesheet(style.css)」でOKです。
下は子テーマ作成した後に別保存する場合選択します。

⑥通常は一番上の「Use the WordPress style queue」でOKです。
・2番目は子テーマのstyle.cssで「@import」を使用する場合にチェックしますが、WordPressの大型バージョンアップから「@import」の使用は推奨していません。
親テーマのstyle.cssがロードできない場合ここをチェックします。
・3番目は親テーマが反映されない場合ここをチェックと書いてあります。
現時点では問題点が出現していないので当面関係ないと思われます。
判明次第ブログ更新の予定です。
・その下は「高度な処理オプション」となっています。
「親テーマ」を使わない・・・などの処理が必要な場合に使用します。

⑦ここをクリックして子テーマの名前・説明・作成者・バージョンなどをカスタマイズします。

撮り忘れたので画像が「Hello Elementor」ではありません。
基本的に何も触らなくてOKです。

【注意】
⑧ ここに✔を入れると親テーマのメニューやウィジェットを子テーマに上書きしてしまいます。
子テーマをいろいろ触ったあとでここにチェックを入れるとすべてが無くなりますのでご注意ください。

⑨ 「Create New Child Theme」をクリックして保存します。
これで一応起動できる最小限の子テーマ作成は終了です。

ちゃんと子テーマが出来ています。

⑩ 重要:有効化する前に、必ずライブプレビュー(テーマカスタマイザ)で子テーマをテストしてください!
今後、header.phpやfooter.phpが必要になってきます。
その時は「子テーマ」に追加してテーマを発展させましょう!