【ワードプレス(WordPress)】ページ内リンクの設定と目次の作成

ワードプレスの基本的な使い方を解説します。今回は「ページ内リンクの設定と目次の作成」を説明します。

目次

1.ページ内リンクの設定

ページ内リンクは、ページ内の「ある文字」をクリックすると、ページ内の「他の文字」にジャンプ(移動)するリンクのことです。

ワードプレスではページ内のリンクを簡単に設定することができます。

(1)ページ内のジャンプ元のリンクの設定

ページ内リンク1

上の画像に示すように、ジャンプ元の文字(ジャンプ元)を範囲選択し、赤枠のリンクのマークをクリックします。 すると、下の画像が表示されます。

ページ内リンク2

上の画像のリンクの入力欄の部分にジャンプ元を示す「#jump」を入力します。

「#jump」の「jump」部分は半角英数字であれば、どんな文字でもかまいません。

ここで、注意する必要があるのが「#」を付け忘れないことです。

(2)ページ内のジャンプ先のリンクの設定

ページ内リンク3

上の画像に示すように、ジャンプ先の文字(ジャンプ先)のブロックを選択します。

ページ内リンク4

次に、上の画像の「高度な設定」をクリックします。

そして、「高度な設定」の「HTMLアンカー」にジャンプ先を示す「jump」を入力します。

「HTMLアンカー」に文字(jump)を入力するだけで、特にエンターキーを押す必要はありません。

ここで、注意することは、ジャンプ元に設定した文字(jump)と同じ文字を入力すること、「#」を付けないことです。

これだけです。これでページ内リンクが設定されました。

ジャンプ元

ジャンプ先

2.目次の作成(プラグインを使わない方法)

「1.ページ内リンクの設定」を使って「目次」を作成することができます。

(1)目次の項目にジャンプ元のリンクの設定

目次1

上の画像の赤枠のリストをクリックします。

目次2

上の画像に示すように、リストに目次の項目を記述します。

目次3

目次のすべての項目にジャンプ元のリンクを設定します。

私の場合は、例えば以下のようにジャンプ元のリンクを示す文字を設定しました。

  • 1.ページ内リンクの設定 (#link1)
    • (1)ページ内のジャンプ元のリンクの設定 (#link1-1)
    • (2)ページ内のジャンプ先のリンクの設定 (#link1-2)
  • 2.目次の作成(プラグインを使わない方法) (#link2)
    • (1)目次の項目にジャンプ元のリンクの設定 (#link2-1)
    • (2)見出しにジャンプ先のリンクの設定 (#link2-2)
  • 3.目次の作成(プラグインを使う方法) (#link3)

ジャンプ元のリンクにどのような文字を設定するかは人それぞれだと思います。

(2)見出しにジャンプ先のリンクの設定

目次4

それぞれの見出しにHTMLアンカーを設定します。

これで目次が完成しました。

3.目次の作成(プラグインを使う方法)

ワードプレスのプラグインを使うと簡単に目次を作成することができます。

目次を作成するプラグインとしては「Easy Table of Contents」があります。

実は、私はプラグインをあまり増やしたくないので、目次の作成のためのプラグインを使用していません。

プラグインの設定の仕方などは下記の記事をご参照ください。

Easy Table of Contentsの使い方-目次を作成するWordPressプラグイン

なお、ワードプレスのテーマによっては、目次作成機能を備えているものがあります。

例えば、「Cocoon」「SWELL」などは自動的に目次が表示される初期設定になっています。この場合は、プラグインを導入する必要はありません。

カテゴリー「情報発信」の記事一覧