お問い合わせ

SWELLの記事内目次だけ非表示にするカスタマイズ

  • URLをコピーしました!

SWELLの記事内の目次だけ非表示にしたいです。

SWELLの投稿やページの目次は便利ですが、見出しの数が増えるとかなりのスペースを取ってしまいます。

最近は記事が長くなる傾向がありますから、SWELLは目次の一部分を非表示にするオプションで目次のスペースを限定する対策がありますが、本質的な解決にはなっていません。

また、SWELLの目次はjavascriptによる挿入なのでCLS悪化の問題もあります。

PCでは、記事内目次と追従目次の2つを表示している人が多いと思います。でも、追従目次があれば記事内目次は不要と考える人も多いと思います。

Snow Monkeyの公式サイトは、追従目次のみで本文の目次は表示されていません。

Snow Monkeyのように、SWELLでも記事内の目次を非表示にして、追従目次だけ表示したいと思っても、SWELLでは記事内の目次の表示・非表示と追従目次の表示・非表示は連動しています。

SWELLでは追従目次だけ表示させて、記事内の目次は非表示にすることができません。

この記事では、記事内の目次だけ表示しないようにするカスタマイズをご紹介します。

記事内の目次を非表示にするカスタマイズ

CSSで非表示にする方法

不要な部分を消したい場合、CSSで非表示にする方法が思いつきます。

#main_content .p-toc{display:none;}

目次挿入のjavascriptは、目印タグが非表示であってもDOMは挿入されてしまいます。

もともと目次は内部リンクという意味あいもあるので、残っていた方がいいかもしれませんが、display noneで内部リンクしているとSEO的にはよくないかもしれませんので、スッキリ消したいという場合はPHPで非表示にするしかなさそうです。

PHPで非表示にする方法

CSSで非表示にするのは簡単ですが、応用が効かないので、この記事のカスタマイズではHTMLそのものを出力しないようにします。

SWELLは記事内の目次を目印のタグの部分にjavascriptで挿入しています。その目印となるタグは、the_contentフィルターでH2タグの手前に挿入されます。

そのフィルターを解除することで、記事内の目印のタグが無くなるので、目次が表示されなくなります。

追従目次など他の目次は影響を受けません。

add_action('wp_head', function () {

	// 目次の追加を解除
	remove_filter( 'the_content','SWELL_Theme\Content_Filter\add_toc', 12 );

}, 100 );

もともと、wp_headのpriorityは99でしたが、同じpriorityだとうまく動かなかったので、priorityを100にしてremove_filterしています。

この仕組みを使って、the_contentフィルターに自前のcallback関数を定義すれば、最初のH2の手前に挿入される目次の挿入位置を変えることもできます。

記事内の目次を消すとSEO的に不利かもしれない

記事内目次を消してしまうと、H2見出しが検索結果で表示されなくなります。

SEO的にはかなり不利になると思いますので、記事内目次は残したまま非表示にするか、javascriptで開閉式にするのがいいかもしれません。

まとめ

SWELLの目次は追従目次だけでよい、と思ってSWELLのコードを調べたところ、フィルターフックを解除するだけで希望の動きが実現できました。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次