ブログのつくり方

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

投稿日:

ブログの記事を書いていると、ページ内リンクを作成したいと思うことがあります。

ただ、ブログ内の別ページや外部サイトにリンクを貼る方法は知っていても、ページ内リンクをどうやって作成するか分からないということもあるのではないでしょうか。

そこで、ここではWordPressでページ内リンクを作成する方法について説明します。

 

WordPressでページ内リンクを作成する方法

それでは、以下にWordPressでページ内リンクを作成する方法を説明します。

まず、WordPressでページ内リンクを作成する方法には、以下のやり方があります。

ページ内リンクを作成する方法

  1. テキストエディターでHTMLを編集する
  2. 簡単にページ内リンクがつくれるプラグインを使う

ページ内リンクの作成は、HTMLのタグを記述するだけで、プラグインがなくても簡単にできます。

とは言え、HTMLの知識があまりなかったり、作成するページ内リンクの数が多かったりする場合にはプラグインを使ったほうが簡単ですし、手間が省けて効率的に作業ができます。

ここでは①と②の方法について説明するので、状況によってやりやすい方法を活用していただければと思います。

 

テキストエディターでHTMLを編集する

はじめに、①の「テキストエディターでHTMLを編集する」方法について見ていきます。

まず、ここで行う作業の流れは以下のとおりです。

テキストエディターを編集してページ内リンクを作成する流れ

  1. リンク元になるテキストを編集してリンクを設定する
  2. アンカー(リンク先)を設定する
  3. プレビューを表示して、リンクが動作するかどうかを確認する

次に、①~③の作業について詳しく説明します。

 

①テキストを編集してリンクを設定する

はじめに、①の「テキストを編集してリンクを設定する」手順について見ていきます。

ここで行う作業は、以下のとおりです。

リンクを設定する流れ

  1. 「新規投稿を追加」もしくは「投稿の編集」画面で、テキストエディターを表示する
  2. リンク元になるテキストを「<a href="#id(任意の名前)”>」と「</a>」のタグで囲む

次に、上記①~②の作業について、以下に詳しく説明します。

まず、WordPress投稿画面のビジュアルエディターで投稿を作成したら、エディターの右上にある「テキスト」タブをクリックして、「テキストエディター」を表示します。 WordPress投稿画面のテキストタブ

そうしたら、リンクを設定したいテキストの部分を以下のようにタグで囲みます。

<a href="#id(任意の名前)”>テキスト</a>

具体的に言うと、たとえば、「詳しくはこちら」の「こちら」という文字にリンクを設定したい場合は、以下のような記述の仕方をします。

詳しくは<a href="#link">こちら</a>

上の例では、「<a href="#」の後に「link」という「id(名前)」を入れていますが、これは「#page」「#aaa」など、スペースを含んでいなければ何でも良いです。

ただし、この「id」は一つのページ内で同じ名前が重複しないようにしてください。

 

②アンカー(リンク先)を作成する

次に、②の「アンカー(リンク先)を作成する」手順について見ていきます。

つまり、リンク元のテキストをクリックした時に移動させる場所を指定します。

ここで行う作業は、以下のとおりです。

  • リンクを飛ばしたい場所に「<a id="任意の名前(id)"></a>」を記述する
  • もしくは、見出しをリンク先にする場合には「<h3 id="link">見出し</h3>」のように見出しをタグで囲む

次に、上記の作業について詳しく説明します。

まずは、「新規投稿を追加」もしくは「投稿の編集」でテキストエディターを表示し、リンク先となる場所に以下のタグを記述します。

<a id="任意のテキスト(id)"></a>

上記の「任意のテキスト」には、リンク元のテキストを作成した時に付けた「id」(「#」の後に続く名前)を入れます。

たとえば、先に例に挙げた、テキストに「link」という名前を使ってリンクを張った場合は、アンカーを設定する時に以下のように記述します。

<a id="link"></a>

具体的には、以下の画像にあるような書き方をすればOKです。

WordPressテキストエディターのページ内リンク例

この画像のようにすると、「こちら」という文字をクリックしたら、以下のように「ページ内リンクの設定方法」という文字に移動するように動作します。

ページ内リンクの設定方法について、詳しくはこちらをご覧ください。

****************************************************

****************************************************

****************************************************
ページ内リンクの設定方法

もしくは、「h3」「h4」などの見出しの部分に移動させるのであれば、以下のように記述しても良いです。

<h4 id="link">テキスト</h4>

WordPressテキストエディターで見出しにページ内リンクを設定する時の記述例

上記のように記述すると、以下のように動作します。

ページ内リンクの設定方法について、詳しくはこちらをご覧ください。

****************************************************

****************************************************

****************************************************

ページ内リンクの設定方法

 

③リンクが動作するか確認する

次に、③の「リンクが動作するかどうかを確認する」作業について見ていきます。

上記の設定が終わったら、次にリンクが実際に動作するかどうかを確認します。

投稿画面右上にある「プレビュー」をクリックして、投稿のプレビューを表示します。

そして、プレビューにあるリンクをクリックして、希望の場所に移動することが確認できたら作業は完了です。

 

プラグインを使ってページ内リンクを作成する方法

次に、プラグインを使ってページ内リンクを作成する方法について説明します。

ページ内リンクを作成する機能があるプラグインはいくつかありますが、ここでは「TinyMCE Advanced」というプラグインを使ったページ内リンクを作成する方法について解説します。

ここではプラグインのインストール・有効化手順についての解説は省略して、ページ内リンクの作成方法のみを説明します。

 

「TinyMCE Advanced」を使ってページ内リンクを作成する流れ

「TinyMCE Advanced」を使ってページ内リンクをつくる流れについて説明します。

まず、ここで行う作業は以下のとおりです。

「TinyMCE Advanced」でページ内リンクを作成するまでの流れ

  1. リンク元となるテキストをドラッグし、エディターのツールバーにある「リンクの挿入/編集」ボタンをクリック
  2. リンク先として「#+id」を入力し「適用」をクリック
  3. リンクを飛ばす場所にカーソルを置く
  4. ツールバーにある「アンカー」ボタンをクリック
  5. リンク元に使ったのと同じ「id」を入力して「OK」をクリック
  6. プレビューを表示してリンクが動作するかどうかを確認する

次に、上記①~⑥の作業について、詳しく説明します。

まずは、「新規投稿を追加」もしくは「投稿の編集」画面で、リンク元になるテキストをドラッグします。

そして、エディターのツールバーにある「リンクの挿入/編集」ボタンをクリックしてください。

WordPress投稿画面エディターのツールバーにあるリンクの挿入ボタン そうすると、以下のようにリンクを挿入するウィンドウが表示されるので、そこに「#+id(任意の名前)」を入力します。

WordPressで挿入するリンクを設定する時の画面

ここで使う「id」は、先に説明したように、一つのページ内で同じidが重複しないように設定してください。

「#+id」を入力したら、「適用」(右側にある左向き矢印のボタン)をクリックします。

そうすると、以下のようにリンクが設定されたことが確認できます。WordPressの投稿画面でリンクを設定した時の画面

そうしたら、次にテキストをクリックした後に移動させたい場所にカーソルを置きます。

そして、エディターのツールバーにある「アンカー」ボタンをクリックします。

WordPress投稿画面のツールバーにある「アンカー」ボタン

すると、以下のように「id」を入力する画面が表示されるので、リンク元に設定したのと同じ「id」(「#」は必要ありません)を入力して「OK」をクリックしてください。アンカーのidを設定する時の画面

これで、ページ内リンクの作成は完了です。

投稿をプレビュー表示して、リンクをクリックして、希望の場所に移動することが確認できたら、作業は終了です。

エディターのメニューに「アンカー」ボタンがない場合

エディターのメニューに「アンカー」ボタンが見つからないこともあるかと思いますが、「TinyMCE Advanced」のデフォルトでは、「アンカー」ボタンがツールバーに含まれていません。

なので、「TinyMCE Advanced」の設定画面から「アンカー」ボタンをメニューに表示させるように設定する必要があります。

まずは、WordPress管理画面「設定」⇒「TinyMCE Advanced」をクリックし、「Classic Editor(TinyMCE) 」タブを選択します。

そして、「使用しないボタン」の中から、「アンカー」ボタンがツールバーの中に収まるようにドラッグ・アンド・ドロップで移動します。

「TinyMCE Advanced」で使用するボタンを設定する時の画面

ボタンを移動したら「変更を保存」をクリックして設定完了です。

 

まとめ

以上、WordPressでページ内リンクを作成する方法について説明しました。

ページ内リンクを作成する方法は、テキストエディターを編集する方法と、プラグインを使った方法がありますが、どちらも簡単にできるので、ページ内リンクを作成するためにプラグインをインストールする必要はありません。

ただ、リンクの数が多い場合やHTMLの編集をしたくない場合には、プラグインを使うほうが効率的に作業が進められます。

その時の状況に応じて、やりやすい方法を選んで作成すると良いかと思います。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.