お問い合わせはコチラから

【カスタマイズ】Easy table of contentsの便利な使い方

サイト運営

最近の日本のWordpressテーマだと目次を独自実装しているものが結構多いと思います。

海外テーマだと目次の機能を独自で持っているテーマは見かけたことがありません。

なぜ、テーマで目次の機能を持たないのかと言えば、プラグインで賄える機能であればそれを使ってもらい、それで問題が起きないようなテーマにしておけば無駄がないというスタンスです。

みんなで同じことをしても仕方ないですし、選択の自由を与えるという観点でこれは正しいと思っています。

日本のように何でも取り込んで自前で頑張ろうというのは、ユーザーを取り込むための製作者のエゴで最終的にユーザーにリスクを押し付けているだけです。このようにして日本はガラパゴス化が進みます。

上記はブロックエディタの独自ブロックを組み込んでいる日本のテーマについても当てはまります。独自ブロックを使った記事はテーマを変更したとたんに使えなくなり、表示できません。ユーザーをテーマと心中させるなんて、正気の沙汰ではありません。

このサイトのテーマCocoonも最初はプラグインでブロックを提供していましたが、いつの間にかテーマに組み込まれてしまいました。

Snow monkeyというテーマはSnow monkey Blockという形でテーマとブロックを分けている海外方式の素晴らしいテーマです。

この記事は、Snow monkey blockの目次ブロックを使ったときにCLSの問題が起きたので、別のプラグイン(Easy table of contents)を導入して回避したお話になります。

Snow monkeyの目次ブロックはjavascriptだった

Snow monkeyというテーマはSnow monkey Blockに目次ブロックがあります。この目次ブロックは使ってみると結構不思議な動きをします。

ページを読み込んだ時には目次が表示されず、しばらくしてから目次が表示されます。

その結果、目次の表示領域が最初から決まらないのでCLSが発生します。

最初はなんでなの?と思ったのですが、ソースを確認すると目次を作る部分がPHPではなくjavascriptを使っていました。そうなるとCLSが発生するのは仕方ないかなという感じです。

これは致し方ないので目次部分はSnowmonkey blockではなく、別のプラグインを導入することにしました。

Easy Table Of Contentプラグインを導入

Easy Table of Contents
Adds a user friendly and fully automatic way to create and display a table of contents generated from the page content.

Snow monkey blockの目次をEasy table of Conotentsに置き換えるときにいくつか問題がありました。

  • Smoothscrollの機能がダブる
  • Snow monkey blockの投稿一覧ブロックのh3タグが目次に出てしまう

Smoothscrollの機能がダブる問題

Snow monkeyには高機能なSmooth scrollのjavascriptが組み込まれています。一方、Easy TOCにもスムーススクロールが組み込まれています。

Easy TOCのスムーススクロール機能を有効化しても問題は起きませんが、2つあっても無駄なのでSnow monkey側のSmooth scrollを使うことにします。

①Easy TOCのスムーススクロールをOFFにします

Easy TOCのスムーススクロールを設定からOFFにします。

②Snow monkeyのスムーススクロールを有効にします

Snow monkeyのスムーススクロールを有効にするには、リンクの親要素にu-smooth-scroll classを追加します。

しかし、追加するのはフックで行いますが、少々トリッキーです。

ez-toc-containerに u-smooth-scroll classを追加するカスタマイズ

この辺とかにフックで追加する方法が書かれていますが、全く動きませんでした。理由はフックが実行される条件が絶対に成立しないためです。

仕方ないので、別の方法で実現しました。

add_filter( 'ez_toc_get_option_css_container_class', function($value, $key){
	if(!is_admin()){
    $value="u-smooth-scroll open";
		return $value;
	}
},10,2 );

Snow monkey blockの投稿一覧ブロックのh3タグが目次に出る問題

Snow monkey blockの記事一覧ブロックを記事内に置くとh3タグが大量に発生し、目次に組み込まれてしまいます。これは意図とは異なるので、除外しなければなりません。

Snowmonkeyの記事一覧の見出しh3にはclassが付いているので、classを指定して除外すればいいのですが、classによる除外設定は見当たりません。

しかし、classで除外できるフックがあるので、それを使います。

//TOC除外クラス指定
add_filter( 'ez_toc_exclude_by_selector', function($arr){
  $arr[]='.c-entry-summary__title';
	return $arr;
});

更に進んだEasy TOCの使い方

目次のタイトルをフックで変更します。

投稿タイプなどで目次のタイトルを変更することもできます。

また、あまり知られていませんが、%PAGE_TITLE%と書くと、ページタイトルに置き換えてくれます。

add_filter( 'ez_toc_get_option_heading_text', function($value, $key){
	if(!is_admin()){
$value="%PAGE_TITLE% のまとめ";
		return $value;
	}
},10,2 );

この記事で使っているのは、ez_toc_get_option_{パラメータ名}フックです。

設定パラメータごとにフックが用意されていますので、この仕組みを使えば、パラメータを動的に書き換えることができますので、ほぼSnowmonkeyと同じような感じでゴリゴリカスタマイズできます。

add_filter( 'ez_toc_get_option_{パラメータ名}', function($value, $key){
		return $value;
	}
},10,2 );

まとめ

Table Of Contents Plusが人気ですがあまり作者がやる気が無いので、Easy Table Of Contentsの方が将来性はあると思います。

たびたび話題に上るページ分割されたページへの目次対応なども、 Easy Table Of Contentsなら対応しています。

なんでもかんでもテーマの機能を使うのではなく、必要に応じてプラグインを組み合わせていくのがいいと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました