SWELLの目次が生成されなくなったときに調べるポイントと解決方法

こんにちは。えいこです。

私が運営するサイトは2つとも、WordPressテーマの「SWELL」を使っています。

最近もう1つのサイトで目次が表示されなくなってしまったのですが、解決できました。きちんと設定をしているのに目次が出なくなった時にまず確認すべきことと、私のサイトで目次表示が復活した方法について紹介します。

この記事を書いた人

• WordPressサイトを２つ運営中
• Googleアドセンスの合格実績あり
• アフィリエイトにて最高月収５桁達成

SWELLの目次が生成されない原因

PHPかJavascriptのどちらかに問題がある

SWELLテーマの目次は、PHPとJavaScriptが連携して生成されます。このため目次が生成されないことを解決したい場合、どちらで問題が発生しているかをまず特定する必要があります。

調べるポイント①目次タイトル

目次タイトルが出ている場合はJavascriptのエラー、目次タイトルもろとも出ていない場合はPHP側のエラーの可能性があります。

PHP側のエラーの原因は、プラグイン追加やfunctions.phpのカスタマイズなどがあるようです。

私の別サイトでは、ソースコードに目次タイトルを含む目次大枠のHTMLタグが出力されていたのに、目次タイトルが出ない症状になっていました。

つまりPHP側の問題の可能性が高い、ということになります。ちなみにGoogleアドセンスの広告は表示されていました。

目次タイトルだけが出ていると下記のような状態になります。

調べるポイント②広告ブロック機能

ちなみに私の別サイトでは、今回解決した問題とは別に「Kiwi Browser(キウイブラウザ)」というAndroid用のブラウザアプリから見ると、目次のタイトルしか表示されない事象も発生しています。

これはブラウザの広告ブロックが影響しているようです。目次下にGoogleアドセンス広告を入れているので、目次ごと広告判定を受けているのかもしれません。

Chrome、Edgeでは広告ブロックを有効にしていても問題なく目次が出ます。

もしタイトルだけ出る症状となり、Javascriptのエラーが出ていないようであれば、ブラウザ変更及び広告ブロックのオフも実施してみてください。

目次が表示されなかった原因

PHP側の問題だった

目次タイトルもろとも表示されていなかった私の別サイトの場合、予想通りPHP側の問題でした。

こちらのサイトでは、PHPが原因で目次が表示されない場合、the_contentフィルターフックが原因と記載してあります。

具体的には、apply_filters(‘the_content’,….)のようなコードがプラグインやカスタマイズコードにあるとNGとのことです。

アクションフックと目次生成が干渉していた

しかし今回の問題は、functions.phpの下記追記コードが原因でした。

add_action('swell_before_post_head', function( $post_id ) {
    echo do_shortcode( '
' );
});

これは”swell_before_post_head”フックを利用して、SWELLの投稿ページの最上部(パンくずリストの直後)にブログパーツを出力するコードです。

どうやらブログパーツの出力によって、目次を挿入するために必要な場所やタイミングがずれてしまい、目次の挿入処理が正常に動作しなかったようです。

ひとまずは該当コードを削除して解決

ひとまずは各記事ページ上のブログパーツ出力を諦め、該当コードを削除すると、目次がまた出るようになりました！一安心です。

まとめ

今回はアクションフックがブログパーツを出力することが原因のようでした。

フックについては勉強中なのですが、今後元のコードを改良して目次表示と両立させたいと思います。