WordPress、ブログ

WordPressの目次プラグインRTOCでリンクが上に行ってしまう問題を解決

わたしはWoradPressの記事に目次を表示させるために、RTOC(Rich Table of Contents)というプラグインを使っています。

今回(2021年11月12日)、書いた記事の目次リンクが書く見出しに遷移せず、全てページのトップ(上部)に戻ってしまうという問題が発生しました。

自分と同じように困っている人もいるかと思い、解決方法を記事にしました。

結論

最近バージョンアップした「Gutenberg」が原因でした。

Gutenbergのバージョンを11.9.0から11.7.0にダウングレードして解消しました。

発生した事象

目次のリンクが上に行ってしまうという事象です。

具体的に説明します。下記の画像を見てください。

このような見出しがあったとして、「03 ううう」をクリックしたら、見出しが「ううう」の場所に飛んで欲しいですよね。

ところが実際にクリックしてみると。

このようにページのトップに遷移してしまいます。

目次の全てのリンクが同じ状態です。

最近更新した記事のみで発生

この事象が発生したのは、わたしが最近更新した記事のみでした。

  • 新しく作成した記事:問題あり(目次リンクが上に行ってしまう)
  • 過去に作成した記事を更新した場合:問題あり(目次リンクが上に行ってしまう)
  • 過去に作成した記事で何も更新していない場合:問題なし

過去に作成した記事で目次が正しく動いている場合でも、一度更新してしまうとそのページでも同じ問題が発生します。

この問題が発生したら、過去の記事をむやみに更新しないよう注意してください。

直接の原因は見出しの「id」

ページのリンク先を確認したところ、直接の原因は見出しのidがおかしいことによるものでした。

まず、正しく遷移する過去の記事のリンク先を調べてみます。(リンクの上にマウスを移動させると画面の左下に、そのリンク先URLが表示されます。)

記事のURL「https://hazukei.com/2288/」の後に「#rtoc-8」と記載されているのがわかります。

下記の図はHTMLのソースコードです。

それぞれの見出しに「rtoc-XX」というidが設定され、遷移できるようになっていることがわかります。

続いて、問題が発生しているページのリンクは下記になります。

ご覧の通りURLの後が「#」だけになっており、これではページ上部に遷移してしまいます。

見出し部分のソースコードも見てみると

ご覧の通り、idに「ううう」という日本語が設定されています。

試しに見出しの文字列を「abc」のように半角アルファベットにしてみると、正しく遷移できることを確認できました。

Gutenbergをダウングレードして解決

ここまで調べて、エディタプラグインの「Gutenberg」を最近アップデートしていたのでこれが怪しいと感じました。

そこでGutenbergをダウングレード(バージョンを下げる)してみることにしました。(Gutenbergのダウングレード方法

現在のバージョンが11.9.0だったので、そこから一つづつ落としていって、11.7.0のバージョンに戻したときに事象が解消することを確認しました。

ちなみに事象が解消した後、問題のある記事をただ再更新しただけでは、見出しリンクは元に戻りません。全ての見出しをもう一度作り直す必要があります。

もし、Gutenbergなんて使っていないという方で、この事象が発生した場合は、Gutenbergをインストールした上でダウングレードを試してみてください。

WordPressのデフォルトのエディタがGutenbergなので、自分でプラグインをインストールしていなくても勝手にGutenbergの最新版を使っている可能性があります。

まとめ

RTOCのリンクがページ上部に入ってしまうのは、見出しの「id」が正しく設定されていなかったことが原因。

見出しのidが正しく設定されていない原因はGutenbergのアップデートによるもの。

Gutenbergをダウングレードして解決。

ABOUT ME
hazukei
「はずけい」と申します。 この度一児の父となりました。まだ実感はわかないのですが、猛烈に忙しくなりそうです。楽しみつつ頑張りたいと思います!