ビュアルエディタのテキストを使わなくとも、ウイジェットの高度な設定から、ストレートにリンク先アンカーの設定が出来る事を、知っていますか⁉
はじめに
筆者の身近なワードプレスライトユーザーの方々や、問い合わせホーム等から「サイト内別ページの見出しにリンクする場合、どの様な設定をすれば⁉」と、よく尋ねられる件で、尋ねてくる皆さんの背景を考査したところ、「ネットで多くのブログ先輩諸氏が、記述されている内容がビュアルエディタ中心のテキストでの親切な説明に成っているのですが、今現在のワードプレスに搭載されているブロックエディタのグーテンベルクでの、ストレートな設定方法の記述が、少ないように感じた事と、初心者の方々はブロックエディタのグーテンベルクで作業されている方が多いようで、ビュアルエディタに不馴れである」と、いう事からこの記事を記述しました。
追記として
今後、ブロックエディタのグーテンベルクの使い方について、気づいた点などを記述して行く予定でいます。
グーテンベルクで超簡単アンカー設定
ビュアルエディタのテキストによるプログラムの改変をしなくてもよいので、ワードプレス初心者の方々には非常に優しく、間違いのない設定がストレートに出来る事も、グーテンベルクの特長ではないでしょうか‼
リンク先見出しアンカーの設定、その1
リンク先見出しとは、ご自身が今記述されている記事と別に既に、過去に記述した記事の内容が同じようなとき、読み手の方に、そちらを参照して頂く為の別記事のことです。
- それでは、設定作業を進めます。
同一サイト内、別記事のリンクしたいページの見出し部分のブロックまで進んで頂き、見出しブロックを下の画像の赤枠（1）を選択するか文字上にカーソルを置いてクリックして下さい。 - 次に、下の画像の赤枠（2）右側ペインの「高度な設定」をクリックして次の画像に進んで下さい。
リンク先見出しアンカーの設定、その2
ワードプレスのバージョンによっては、下の画像「高度な設定」の赤枠の様に、無地で表示される場合と、そのブロックの見出し文章が、「高度な設定」の赤枠内に、そのまま表示されていている場合の二種類があります。
- 無地の場合
下の画像の様に高度な設定の赤枠内に「任意の英数字を2～3文字、例として、a1、ab、zip」を空白スペースを空けずにアンカーIDとして入れて下さい。 - 見出し文章が高度な設定の赤枠内に、そのまま表示されている場合
文章の末尾からカーソルで消去して頂くと、先頭の頭文字のひとつが消去されず、残るのでその後に（1）の様に空白スペースを空けずにアンカーIDを入れて下さい。
例として
見出し文章、「今日は良い天気」と、あった場合、頭文字の「今」だけが消去されず残るので、アンカーIDは、「今a1、今ab、今zip」の様にして下さい。
又、アンカーIDは、後でリンク元でも使いますので、忘れない様にメモして置いて下さい。 - いずれかの処理が終われば、これでリンク先のアンカーの設定が完了するので、次の画像の様に、今度は、リンク元に移動してください。
グーテンベルクでリンク元文章の作成
リンク元文章とは、今現在、書き掛けている文章ブロックの事です。
リンク元文章の設定
- 下の画像を例に説明
画像、赤枠（1）の様にリンク先に関係するリンク元文章、下画面の例では、「メーカーブランドか、それとも実用面を重視した商社系ブランド」を選択します。 - 次に赤枠（2）の様にリンクアイコンをクリックして次の画像に進んで下さい。
リンク先全体のURLをリンク元に設定
下の画像の赤枠の様にポップアップ窓が表示されているので、その中にリンク先全体のURLを挿入するか又は、コピー貼り付け手順を説明します。
- 手順、その1
先ず、リンク先全体のURLを下の例の様に挿入するか、又は、コピーして貼り付ける。
例として、「https://eikkusu.com/repair-the-car/how-to-buy-made-in-china/1049/」 - 手順、その2
挿入、又は、コピー貼り付けした後、URL欄、右側端にある、半丸矢印アイコンをクリックして送信、次の画像に進んで下さい。
リンク先ページに飛ぶ様に設定されたリンク元画像
下画像は、リンク元文章に関係するリンク先「全体ページに飛ぶ」一次リンクの設定が終了した画像です。
- 例として、下の画像の様に、赤枠内文章「メーカーブランドか、それとも実用面を重視した商社系ブランド」をクリックして頂くと、先に設定した「別記事ページのリンク先全体ページ」が表示される様になり、一次リンク作業の設定が終了です。
- （注）追記として
一次リンク作業の設定を終了する事で、グーテンベルクブロックエディタによる「同一サイト内、別全体ページにリンク」が張られた事になります。 - 次に見出し二次リンク作業工程に移るので、下画像の赤枠（メーカーブランドか、それとも実用面を重視した商社系ブランド）にカーソルを乗せ、クリックして次の画像に進んで下さい。
リンク元に「リンク先見出しアンカー」の設定画面、その1
リンク先全体ページのURL画面がポップアップ窓に表示されました。
- 下の画像、ポップアップ画面の赤枠「鉛筆マークアイコン」をクリックして、リンク先見出しアンカー設定の編集に移りますので、次の画像に進んで下さい。
見出しアンカー設定画面、その2
ポップアップ窓が更新され、URL欄にリンク先ページのURLが表示されています。
- URL欄のリンク先URL末尾、スラシュ（/）の後「下図赤枠」に、先程説明した「リンク先見出しアンカーの設定、その2」の例で示したアンカーID（a1、ab、zip等任意で決めた記号）を次の例の通り入力して下さい。
- （例）として
「https://●●●.▲▲/~~/~~/#a1」のようにスペース空間を空けないで入力して下さい。
（注）として、 アンカーIDの前に必ず井桁マーク（＃）を入れて赤枠右側の「半丸矢印アイコン」をクリックすると送信され、作業は終了です。 - 以上で、見出し二次リンク設定作業工程の終了と共に、同一サイト内別ページ見出しのリンク設定は完了です。
リンク設定完成画像
下画像は、例題画像として表示しているので画像内青色テキスト「メーカーブランドか、それとも実用面を重視した商社系ブランド」をクリックしても表示されません。
- 実際に表示する場合は、右のテキスト文章「メーカーブランドか、それとも実用面を重視した商社系ブランド」をクリックして、試してみて下さい。
以上で、同一サイト内別全体ページと同一サイト内別ページ見出し、二種類のリンク設定が完成です。
付録として、「同いつページ内、別見出しに飛ぶリンク設定」
ひとつの記事の中に同じような内容をだぶって書きたい場面等があると思われますが、そのような時に、このシステムを利用して頂くと便利かと思います。
作業行程
- とび先見出しのアンカー設定
この記述の「リンク先見出しアンカーの設定、その1、その2」と同じ作業を進めて下さい。
これで「同いつページ内、別見出しに飛ぶリンク設定」は完了です。 - リンク元文章に「とび先見出しアンカー」の設定
当記事内、上の見出し「リンク先全体のURLをリンク元に設定」の所でURL欄に、次のようなURLのテキスト「https://●●●.▲▲/~~/~~/#a1」を入力又は、コピー貼り付けしましたが、同じページ内、別見出しの場合は、空白URL欄に「＃の後に（ご自身で決めたアンカーID）」、例として「＃ab」等を入力するだけで完成です。
まとめ
この記事、記載にあたって、筆者がワードプレス習得当初、悪戦苦闘したことを振り返りながら記述しています。
したがって、ワードプレス習得初心者の方々、又は、ワードプレスライトユーザーの方に、できる限り理解しやすい様に解説したつもりですが、この記事で理解不能な部分がある様でしたら、「お問い合わせ」で、ご連絡ください。
理解不能な部分を再度メールで返信させて頂きます。
この記述が、ワードプレスライトユーザー、又は、ワードプレス初心者の方々の参考になるようでしたら幸いです。
