私がこの機能を欲しいと思ったのは、
プラグインを使用せずに記事の目次を作ろうと思った時でした。
ただ目次があるだけでなく、どうせならその目次をクリックしたらその場所までジャンプできるようにしておきたいですよね。
1つのページ内の指定箇所へジャンプする方法
まず1つのページ内の指定箇所へジャンプする方法ですが、とても簡単です。
例えばこの記事の目次ですが、
読みたいタイトルをクリックすればその場所までジャンプできるようになっています。
目次のボックスの中のテキストは下記のようになっています↓
目次
<ol>
<li><a href="#link01">1つのページ内の指定箇所へジャンプする方法</a></li>
<li><a href="#link02">他のページの指定箇所へジャンプする方法</a></li>
<li><a href="#link03">まとめ</a></li>
</ol>
<ol>や<li>のタグは目次をリスト表示させるためのものなので今回は関係ありません。
必要なのは<a href=”#link01″></a>です。
<a href=”#link01″>ジャンプ元のテキスト</a>
このように書きます。
ワードプレスのテキストエディターにそのまま書けばいいのです。
そして、目次の<a href=”#link01″>1つのページ内の指定箇所へジャンプする方法</a>の場合、
ジャンプ先の指定の書き方は、
<h2 id=”link01″>1つのページ内の指定箇所へジャンプする方法</h2>
このように書きます。
今回の例では目次のため、ジャンプ先は見出しなので<h2>タグにしていますが、
特になんでもないテキストへジャンプさせたい時は、
<p>タグででも囲ったらいいでしょう。
こんな感じで↓
<p id=”link01″>ジャンプ先のテキスト</p>
超簡単に説明すると、
<a href=”#link01″>ジャンプ元のテキスト</a>←こう書けば
<p id=”link01″>ジャンプ先のテキスト</p>←ここにジャンプさせることができます。
ルールとして、ジャンプ元の#link01ですが、
#は必須です。
link01の部分は、自分が把握しやすい文字でOKです。
ジャンプ先のコードには””の間に、#を外したジャンプ元の文字を入れればOKです。
例えばこんなんでもいいのです↓
<a href=”#kangoshi“>ジャンプ元のテキスト</a>
<p id=”kangoshi“>ジャンプ先のテキスト</p>
簡単じゃないですか?
すぐできますよ!
他のページの指定箇所へジャンプする方法
例えば他のページの見出しや、どこか文章の途中にジャンプさせたい時があるじゃないですか、
そんな時は上で紹介した書き方の応用で、
<a href=”https://nurse-bears.com/2018/08/05/wordpress-index-plugin/#link01″>ジャンプ元のテキスト</a>←このように書けば、
<p id=”link01″>ジャンプ先のテキスト</p>←上で指定したURLのページの、指定したテキストへジャンプすることができます。
なんかごちゃごちゃ長くなったと思うかもしれませんが、
今回はジャンプ先のページのURLが入ってるだけです。
基本はこうです↓
<a href=”ジャンプ先のURL#link01″>ジャンプ元のテキスト</a>←ジャンプ先のURL追加
<p id=”link01″>ジャンプ先のテキスト</p>←こっちは変わりません。
・・・
どうでしたか?戻ってこれましたか?
こんな感じでとても簡単ですし、使いこなせるとかなり便利ですよね!
まとめ
今回はこの2つをご紹介しました。
<a href=”#link01″>ジャンプ元のテキスト</a>←こう書けば
<p id=”link01″>ジャンプ先のテキスト</p>←ここにジャンプさせることができます。
<a href=”ジャンプ先のURL#link01″>ジャンプ元のテキスト</a>←①の応用で#の前にジャンプ先のURLを追加
<p id=”link01″>ジャンプ先のテキスト</p>←ジャンプ先のページの指定したいテキストへコードを書く。
2つに共通しているのは、今回は例として「link01」としているだけなので、ここの部分は自分の覚えやすいものに変えてOKという点です。

