WordPressでサクサクっとページ内リンクを設定する方法

こんにちは。山ばりゅです。

今回は、WordPressで記事を作成、編集している時にページ内リンクを設定する方法をご紹介したいと思います。

やり方も超簡単で、サクサクってな感じに設定も完了しますので、是非ぜひ今回も最後までお付き合いいただけましたらと思います。

WordPressでページ内リンクとアンカー設置をサクサクっとやってしまう方法

ブログで記事を書いている時、読み手の方のことを考えると、ページ内リンクを設置して読みたい記事コンテンツにスムーズに移動できるようにしたい時ってありますよね。

ページ内リンクとは、その名前の通りその記事内に設置するリンクのことで、ある文字にページ内リンクを設置すると、その解説や詳細記事が載っている場所に移動できるというものです。

が大まかな流れ。

設置にはコードの入力が必要ですが、「TinyMCE Advanced」というプラグインを使うと、コードの知識がなくても簡単に設置が可能です。

では、早速その手順についてご紹介していきましょう。なお、手順方法のご紹介はビジュアルエディタのクラシックモードでの編集画面を使って行っております。

まずは、ページ内リンクを設置したいテキストを範囲選択し、クラシックモードの鎖のアイコン「リンク」をクリックします。

するとこんな感じにリンク元のIDを入力するボックスが表示されるので、IDを決めて入力します。IDは何でもいいですが、あまり長すぎないもので設置先が分かりやすい文字にするのが個人的にはおススメかな。

今回は、「orca-great」というIDに決めて入力しています。ここでの注意点はIDの前に「♯」をつけるのを忘れないこと。

なので、今回のIDは「♯orca-great」となります。

IDの設定はこれで完了。では次に移動先となるアンカーを設定していきます。

アンカー（移動先）にしたいテキストを先ほどのように範囲選択し、上部にある「挿入」タブをクリックします。するとこのように挿入タブに格納されている各候補が表示されるので、その中から「アンカー」をクリックします。

するとこのように移動元のIDを入力するボックスが表示されるので、先ほど設定したIDを入力します。ここでの注意点は「♯」を抜いて入力すること。なので、先ほど設定したID（今回の紹介の場合では「orca-great」）を♯を入れずに入力します。入力が終われば「OK」ボタンをクリックします。

アンカーを設置すると、設置ポイントにはこんな感じに錨のアイコンがつきます。これで、「TinyMCE Advanced」を使ってのページ内リンクの設置手順は終了です。お疲れさまでした。

では確認してみましょう。先ほどIDを設定した文字をクリックすると・・・

ハイ。このようにアンカーポイントへと移動することができました。設定したらしっかり設定が反映されているか、確認しておくことをおススメします。

ちなみにプラグイン「TinyMCE Advanced」のインストールは管理画面のプラグイン「新規追加」からインストールすることができます。インストールが終われば、忘れずに有効化しておきましょう。

プラグインは重たくなるので使いたくないんだよね。

っていうことであれば、コードを直接入力する方法でも設置が可能です。コードの入力も複雑怪奇なものではないので、ダイジョブ。

まず編集画面をテキストエディタからコードエディタに切り替えます。切り替える方法は編集画面の右上にある点が三つ並んだアイコン「ツールと設定をさらに表示」をクリックします。

次に表示される各候補の中から「コードエディタ」をクリックします。

もしくは「Shift」+「Ctrl」+「Alt」+「M」のショートカットキーを入力してもオッケー。

するとコード編集画面に切り替わるので、まずページ内リンクのIDを設置するコードを入力します。コードは<a href="#orca-great">IDを設置したいテキスト（上の設定方法画面では現生のシャチとホホジロザメの登場）</a>となります。

設定したいテキストを<a href="#orca-great">と</a>でサンドする感じですね。

IDの設定が終われば、次はアンカーの設定。

IDの設定と同じようにアンカーを設定したいテキストにコードを入力していきます。アンカーを設定コードは<a id="orca-great">IDを設置したいテキスト（上の設定方法画面では「メガロドンの絶滅の原因の一つにホホジロザメとシャチが関与！？」）</a>

となります。IDの設定と同じく、設定したいテキストを<a id="orca-great">と</a>で挟む感じですね。

設定が終われば、右上辺りにある「コードエディタの終了」をクリック、もしくは先ほどコードエディタに切り替えた方法でビジュアル切り替えます。再度「Shift」+「Ctrl」+「Alt」+「M」のショートカットキーを入力してもオッケー。

後は設定がバッチリ反映されているか、確認をして終了となります。お疲れさまでした。

いかがだったでしょう。今回はWordPressでページ内リンクとアンカーをサクッと設置する方法についてご紹介させていただきました。良ければご参考ください。こちらの記事があなたのブログ、サイト作成の更なる向上のお役に立てれば幸いです。

では、今回はこの辺りで。今回も最後までお付き合いいただき、ありがとうございます。