Easy Table of Contents紹介と日本語見出しエラー対策

概要

WordPressの記事には目次が重要視されます。

目次はコンテンツが長くなるとUXの観点で重要になってきます。その中でもおすすめのEasy Table of Contentsです。

ただ、WordPressで人気の目次プラグインであるEasy Table of Contentsはそのままではエラーが発生してしまうので紹介と対策方法です。

WordPressの記事の人気目次機能

WordPressでブログを管理する上で必要なのが目次です。どこにどのような内容が書かれているのか、記事が長くなるにつれわかりずらくなってきます。それをまとめたのが目次機能です。本と違い見たい項目をクリックするとその場所まで遷移してくれます。

人気の目次を3つほどリンク張っておきます。

Easy Table of Contentsは人気の目次で今回のテーマである目次です。

Table of Contents Plusは日本で最も多く利用されている目次です。

すごいもくじはAffingerというテーマを使用している人限定ですが、目次のどの項目をクリックしたのかアクセスログを取得できます。

Easy Table of Contentsを選ぶ３つの理由

読んでいる項目がわかる機能

太字になっているところが現在読んでいる箇所で次の箇所を読み始めると自動で太字の部分が移動してくれる

カスタムCSSでデザインが自由

上記画像はCSSでカスタマイズしてます。項目が多くなると自動でスクロールバーを付けるように設定してます。

サイドウィジェットに追加可能

上記画像はサイドバーウィジェットです。

Easy Table of Contentsにエラーになる原因と対応策

Easy Table of Contentsのエラー原因

海外で作成された目次機能のため日本語の対応は不安定です。バージョンアップするたびに正常に機能することもあればエラーとして機能しない場合もあります。

原因はテーマやほかのプラグインでjqueryのバージョンが1系のものを利用している場合、機能しないことがあります。元々目次作者はJQuery1系を想定していないのでJQuery1系を使用しているテーマでエラーが発生してます。

JQuery1系を使ってる時点で古いシステムという印象を受けますがまだまだ使用しているテーマは多くあります。

Easy Table of Contentsのエラー対応方法

テーマのfunction.phpにこちらのコードを追加してください。

以下のショートコードを追加すると自動でアンカーリンクを番号で「ez-toc-番号」にしてくれるのでエラーにはなりません。

<?php
if (!defined('ABSPATH')) {
    exit;
}

// ここからコピー
$my_toc_no = 0;
function toc_anchor_change($return, $heading)
{
    global $my_toc_no;
    $my_toc_no = $my_toc_no + 1;
    return "ez-toc-" . $my_toc_no;
}
add_filter('ez_toc_url_anchor_target', 'toc_anchor_change', 10, 2);
// ここまでコピー

...

functions.phpは各テーマごとに用意されていて、どのテーマにも存在しているファイルで、PHPというプログラミング言語を記入するところです。

プログラミングの関数を定義しておいたり、ショートコードというコードを作成することができます。WordPressを運用する上で必ず使う必要はないですが、PHPを使えれば非常に便利な使い方ができます。

まとめ

海外のエンジニアが作成した優秀なプラグインは日本語に対応してない場合もあるので、日本人の誰かが対応しているからGoogleで調査するといい記事が載ってます。まずは検索が大事

【Easy Table of Contents】日本語見出しのスムーズスクロールが出来ない時の対処方法