ワードプレスの超有名プラグイン［Table of Contents Plus］は、記事の目次を自動で生成してくれるので読者に優しく、またSEOにも効果があるとの情報が氾濫していることもあり多くのブロガーの方たちが支持しています。
最近ではオンズのブログでも長文の記事を書くことが増えてきたので［Table of Contents Plus］を導入することにしました。
今回はこの［TOC+］を導入する際に施した、ちょっとしたカスタマイズ方法を紹介していきます。
目次
既にご存知かと思いますが（↑）上記の目次のリストが［TOC+］で生成されたものです。
「Table of Contents Plus」の導入と設定
まずは基本的な使い方から。
プラグイン［TOC+］のインストールはダッシュボードの「プラグイン」のメニューから、「新規追加」を選択して「Table of Contents Plus」で検索するとスグに見つかります。
FTP経由でアップロードしたいときは下記のプラグインディレクトリからダウンロードしてきましょう。
プラグインディレクトリ：Table of Contents Plus
インストールが完了すると管理画面サイドバーの「設定」→「TOC+」から各種設定を行えます。
目次を出力するには、投稿の編集画面で目次を生成したい箇所でショートコード [toc] を記述すればOK。簡単ですね。
目次が上手く表示されないときは？
「Table of Contents Plus」による目次が表示されないときは、以下の設定を見直してみてください。
- 基本設定の「表示条件」で設定した数の見出しが記事の中にあるか？
- 基本設定の「以下のコンテンツタイプを自動挿入」で「post（投稿）」や「page（固定ページ）」がチェックされているか？
- 記事の中でH2（見出し2）やH3（見出し3）などの見出しレベルが階層的に設定されているか ？
「Table of Contents Plus」のスタイルシートを読み込まないようにする
通常は［TOC+］の設定画面からデザインを選択することになります。
あらかじめ数種類のデザインのテンプレートが用意されており、気に入ったものにチェックマークを入れて選択すれば、該当するCSSが出力され、デザインが反映される仕組みになっています。
- Grey（デフォルト）
- Light blue
- White
- Black
- Transparent
- カスタム
上記6種類のデザインの中から選択可能です。
非常に便利で初心者には頼もしい機能ですね。
しかし「カスタム」以外を選択すると余分なスタイルシート［screen.min.css］が読み込まれてしまうことが気に入りません。
そこでオンズ流のカスタマイズ。
［TOC+］のスタイルシートを読み込まないようにしました。
具体的な方法はテーマファイルの［functions.php］に次のコードを記述するだけです。
function onze_deregister_styles() {
wp_deregister_style('toc-screen');
}
add_action('wp_print_styles','onze_deregister_styles',100);
これで［screen.min.css］が出力されなくなります。
自分で新たにスタイルを定義する必要がありますが、ベースのCSSをコピーして書き換えていけば簡単です。
また他のメリットとして、スタイルシートはレンダリングをブロックする要素なので、余分なCSSを出力しないことはサイトの高速化にも繋がります。検索エンジンはページの読み込みスピードも評価の対象にするので直接的にSEOの効果も見込めるというワケです。
必要ないページでは「front.min.js」を読み込まないようにする
スタイルシートの［screen.min.css］と同様に、［TOC+］は［front.min.js］というJavaScriptファイルを出力します。
この［front.min.js］は目次の拡大・縮小の動きを司るファイルです。
ここでの問題は、この［front.min.js］が全ページで出力されてしまうという点です。
［TOC+］を使っていないのに［front.min.js］が読み込まれているのは無駄ですよね。
前述のスタイルシートと同じく、余分なファイルはウェブサイトの読み込みスピードの低下の原因になります。
そこで条件分岐を利用して「投稿」のページにだけ［front.min.js］を出力させるようにしました。
function onze_toc() {
wp_deregister_script('toc-front');
if (is_single()) {
if (class_exists('toc')) {
wp_register_script( 'toc-front', plugins_url( 'front.min.js', __FILE__ ) , array('jquery'), false, true );
}
}
}
add_action( 'wp_enqueue_scripts', 'onze_toc');
上記コード内のis_single()で「投稿ページ」を分岐。
さらに「Table of Contents Plus」の内部プログラムで使われているclass_exists('toc')でもフィルターをかけています。
該当するページが「投稿」に属していて、かつ「class_exists('toc')」というコードが存在する場合（＝プラグイン「Table of Contents Plus」が有効化されている場合）にのみ［front.min.js］を出力する、という内容のコードになっています。
もし、もっと過激に「そもそも［front.min.js］は必要ない！」という場合は、
より短いコードで済みます。
function onze_deregister_script() {
wp_deregister_script('toc-front');
}
add_action('wp_print_scripts','onze_deregister_script',100);
この場合は目次の折りたたみ表示ができなくなりますが、そもそも不必要な機能なので最初から無効化しておいたほうが賢い選択かもしれませんね。
WordPressの関数を学ぼう。
ここで紹介したテクニックには wp_deresister_style と wp_deresister_script という２つの関数を利用していて、他のすべてのプラグインでも応用可能です。
前述のコードでは、スタイルシートの無効化に wp_deregister_style('toc-screen'); を。スクリプトの無効化には wp_deregister_script('toc-front'); を記述しています。
引数でしている「toc-screen」「toc-front」の箇所を任意のプラグインの識別名に書き換えれば、要らないファイルの読み込みを無効化することができます。
どちらもワードプレスのカスタマイズの際には頻繁に使用するものです。
この機会に覚えておきましょう！
ウェブサイトでお困りのときはオンズにお任せください！
