プラグインを使わずに記事目次を簡単に実装する方法

百度百科を見たことがある人なら、おそらくほとんどの記事の冒頭に目次があり、目次内の見出しをクリックすると記事中の該当箇所へすばやく移動できることに気づくと思います。例：Marketiva。これにより、長い記事でも読者が読みたい内容を見つけやすくなり、辞書の索引のような役割を果たします。この記事で紹介するコードが実現するのも、まさにこの機能です。記事にわかりやすい内容ナビゲーションを設置し、読者が読む前に記事全体の大まかな構成を把握でき、クリックすれば読みたい部分へ移動できます。さらに、内部リンク、アンカーテキスト、キーワードを増やせるため、SEO にも役立ちます。具体的な効果は、この記事右側の記事目次をご覧ください。

実際、この機能の実装は比較的簡単です。記事本文に見出しタグを挿入し、それをもとに目次を生成するだけです。以下は私が書いた簡単なコードです。テキストエディタで現在のテーマディレクトリにある functions.php を開き、次のコードを <?php の下に追加してください（UTF-8 エンコードで保存するのを忘れないでください。そうしないと中国語が文字化けします）。

function article_index($content) {
    /**
     * 名称：文章目录插件
     * 作者：露兜
     * 博客：http://www.ludou.org/
     * 最后修改：2011年2月10日
     */
    $matches = array();
    $ul_li = '';
    $r = "/<h3>([^<]+)</h3>/im";

    if (preg_match_all($r, $content, $matches)) {
        foreach ($matches[1] as $num => $title) {
            $content = str_replace(
                $matches[0][$num],
                '<h4 id="title-' . $num . '">' . $title . '</h4>',
                $content
            );
            $ul_li .= '<li><a href="#title-' . $num . '" title="' . $title . '">' . $title . "</a></li>n";
        }

        $content = "n<div id="article-index">n<strong>文章目录</strong>n<ul id="index-ul">n" . $ul_li . "</ul>n</div>n" . $content;
    }

    return $content;
}

add_filter('the_content', 'article_index');

使い方

記事を編集するときに HTML モードへ切り替え、目次に追加したい見出しを <h3> と </h3> で囲めばよいだけです。たとえば <h3>私は索引タイトルです</h3> のようにします。もちろん、<h1> や <p> など他のタグを使うこともできます。その場合は、上のコード内の h3 を自分が使いたいタグ名に変更すればよいです。

上記のコードは、記事を表示するときに記事目次を挿入するだけで、記事本文そのものを変更することはありません。また、このコードにはスタイル調整用のコードは含まれていないため、これだけを追加すると記事目次の見た目はやや乱雑になります。別途 CSS コードを追加して、この目次を整える必要があります。CSS がわからない場合は、私が書いたものを使ってもかまいません。以下の CSS コードをテーマディレクトリの style.css に追加してください（すべてのサイトに適しているわけではありません）。

#article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    border: 1px solid #DEDFE1;
    float: right;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    width: 200px;
    line-height: 23px;
}

#article-index strong {
    border-bottom: 1px dashed #DDDDDD;
    display: block;
    line-height: 30px;
    padding: 0 4px;
}

#index-ul {
    margin: 0;
    padding-bottom: 10px;
}

#index-ul li {
    background: none repeat scroll 0 0 transparent;
    list-style-type: disc;
    padding: 0;
    margin-left: 20px;
}