WordPress — ページ内リンク

目次を作ると、見出しからページ内リンクをさせていくことができます。WordPressではそれ以外の方法も用意されています。それらを整理しておきましょう。

目次について

WordPress純正テーマに目次を作成する機能はなく、外部テーマに内蔵されているものを使うか、プラグインを使うようになります。

文中に目次が表示されるので、あまり使い勝手がよくありません。

でもCocoonにはサイドバーに目次を表示する機能もあります。

このサイトはプラグインを使って目次をサイドバーに表示させています。Easy Table of Contentsです。同様のプラグインは他にもありますので、気に入ったものを使うと良いでしょう。

ページ内リンクの作り方

見出しにはできない位置にジャンプさせたい場合は、『HTMLアンカー』と呼ばれるものを使っていきます。右サイドバーにあります。

説明文だとアンカーの文字列は２文字までのような気がしてしまいますが、じつはそのようなことはなく、何文字でも打つことができます。アンカーは検索エンジンが参照している部分なので、つまりはアクセス数にかかわる部分です。意味のある文字列を打ち込んで、アクセス数上昇を図っていきましょう。

また、SEO対策がされているテーマでは見出しにもこのアンカーが付いているようです。

ここを短くしたり、アルファベットに変えるとSEO対策になると考えられます。

アンカーが作成できたら、リンクさせたい文字列にこのアンカーを含む文字列を打ち込んでいきます。『URL#文字列』です。

打ち込んだら、確定させます。紫〇の部分をクリックします。

まだページを公開していない場合は、非公開で保存するとページのURLを得ることができます。

ジャンプする位置をずらす

アンカーはブロックごとに可能で、ジャンプするとブロックの先頭に移動します。しかし、これでは画面の上に行き過ぎてしまい、見づらいです。これを前の段落の文末に移動させると、閲覧者が見やすいページ内リンクに変えられます。

HTMLアンカーだけのブロックを作ればいい訳ですね。

張り付きブロックを先頭に置いている際の、簡単な対応策となります。

ページ内リンクのサンプル

通常のHTMLアンカー

前の段落の下にアンカーブロックを設定した場合

目次のジャンプ位置を下にずらしたい場合は。。。AIに聞いてみましょう (^_^)/。

外観のカスタマイズから追加CSSを埋め込むのが良いとあります。

しかし私は目次に『Easy Table of Contents』のプラグインを使っており、この方法ではうまく行きませんでした。別の方法でもダメでした。テストページではこのプラグインを使っていないのでうまく行ったんですけどね。テーマのCocoonが持つ目次でもうまくいきました。

純正品以外の動作は保証されないってやつですね (^_^;。

お疲れさまでした。