WordPress投稿で目次を作成する方法

公開: 2021-06-10

目次は、WordPressの投稿、特に多くの見出しを持つ長い投稿の必要な部分です。 目次を作成すると、読者はアイデアを簡単かつ迅速に追跡して把握するのに役立ちます。さらに、投稿にキーワードを追加するのにも役立ちます。これはSEOに非常に役立ちます。

目次を隠す

1.目次を作成する方法
2.方法1：プラグインを使用して目次を作成する
1. 2.1。ステップ1：目次のコンテンツを作成および設定する
2. 2.2。ステップ2：目次を投稿に挿入する
3. 2.3。ステップ3：目次表示をカスタマイズする
4. 2.4。各投稿の目次をカスタマイズする
3.方法2：コードを使用して目次を作成します。
1. 3.1。ステップ1：投稿用の目次を作成する
2. 3.2。ステップ2：CSSを使用してカスタマイズする
4.最後の言葉

目次を作成する方法

WordPressの投稿に目次を作成するには2つの方法があります。

最初の方法はプラグインを使用することです。これは、WordPressのコードの専門家と初心者の両方にとって、シンプルで高速かつ無料です。

2つ目は、コードを使用することです。これにより、目次を細部までカスタマイズできますが、非コーダーにとっては非常に複雑です。この投稿では、目次を作成するためのコードを書き留めます。コピーして貼り付けるだけ！

最初にプラグインを使用して目次を作成するプロセスを見ていきましょう。

方法1：プラグインを使用して目次を作成する

ステップ1：目次のコンテンツを作成および設定する

WordPressで目次を作成するための無料のプラグインがたくさんあります。 LuckyWPの目次を選択したのは、高度にカスタマイズ可能で美しい結果が得られるためです。ただし、このプラグインには非常に多くの設定があり、最初は混乱する可能性があります。だから、あなたの時間を節約するために私たちの指示に従ってください。

LuckyWPの目次は無料のプラグインであり、wordpress.orgで入手できます。 ダッシュボードにプラグインをインストールしてアクティブ化するだけです。

次に、 [設定] > [目次]に移動すると、設定画面が表示されます。

ここでは、注意が必要な4つのタブがあります。[一般]、[外観]、[自動挿入]、[見出しの処理]です。これらは、目次の表示を設定およびカスタマイズするために使用されるタブです。 その他は複雑で重要でない設定を持つタブなので、無視してかまいません。

このステップでは、[全般]タブで作業します。

このセクションにはたくさんの設定があります。時間を節約するために、以下の重要な部分に焦点を当てる必要があります。

番号付け：見出しに番号を付けます。次のオプションから1つを選択する必要があります：数字なし、10進数（ネスト）、ローマ数字（ネスト） 。

10進数（ネスト）を選択したので、目次は次のようになります。

タイトル：目次のタイトル。デフォルトではコンテンツです。

TOCにはあまり影響しないため、残りの設定はデフォルトのままにしておきます。

[変更を保存]をクリックして終了します。そこで、目次の一般的な設定を行いました。次のステップに進みましょう。

ステップ2：目次を投稿に挿入する

投稿に目次を挿入するには、自動と手動の2つの方法があります。

自動挿入とは、目次がすべての投稿に自動的に追加されることを意味します。この方法は多くの時間と労力を節約しますが、目次をいくつかの投稿に挿入したい場合は機能しません。

手動で挿入するということは、投稿に目次を入れたい場合は、自分でその投稿に挿入する必要があることを意味します。これには時間がかかり、間違いを犯す可能性があります。

両方の方法を詳しく紹介します。自分に合ったオプションを選択できます。

自動的に挿入

[自動挿入] > [有効]タブに移動します。プラグインはデフォルトとして投稿を選択します。不要な場合は、別の投稿タイプに変更できます。

[位置]セクションで、目次を挿入する場所を選択します。 [変更を保存]をクリックすることを忘れないでください！

したがって、選択した投稿タイプのすべての投稿に目次があります。

手動で挿入

手動で挿入するのは複雑に聞こえますが、実際には非常に簡単です。 [見出しの処理]タブに移動します。そこで、投稿タイプも選択し、[変更を保存]をクリックします。

次に、選択した投稿タイプの投稿の投稿エディタに移動し、[目次を有効にする]をクリックします。

これで、TOCは基本的に完了しました。さらに、色、フォント、アイテムのサイズなどをスタイリングして、より美しくすることもできます。次の手順に従います。

ステップ3：目次表示をカスタマイズする

また、目次の表示をカスタマイズする方法は2つあります。すべての投稿で一度にカスタマイズする方法と、各投稿で個別にカスタマイズする方法です。

すべての投稿の目次をカスタマイズする

[外観]タブに移動すると、すべての目次を詳細にカスタマイズできます。 タイトルのフォントサイズ、アイテムのフォントサイズ、リンクの色など、多くの設定があります。

すべての設定に気付く必要はありません。必要なものだけに注目してください。

たとえば、私は青と現在のタイトルのフォントサイズが好きではありません。ポストの見栄えを良くするために、色を濃い灰色と小さいサイズに変更したいと思います。そこで、タイトルのフォントサイズ、アイテムのフォントサイズ、リンクの色をカスタマイズし、残りの設定を次の画像のように維持します。

カスタマイズ後の目次は次のようになります。

今、それははるかに調和しているように見えます。

ただし、投稿ごとに異なる目次を作成したい場合は、下にスクロールして、各投稿で目次をカスタマイズする方法を確認してください。

各投稿の目次をカスタマイズする

この作業も簡単で迅速です。まず、投稿エディタに移動し、 [目次]> [カスタマイズ]を選択します。

[目次のカスタマイズ]ポップアップが表示されます。上記のようなおなじみのタブがいくつか表示されます。それらは、一般、外観、およびその他です。 。

[外観]タブに移動し、プラグインのダッシュボードで編集するのと同様にいくつかの設定を変更します。 [保存]をクリックして終了します。

次に、目次をカスタマイズした最終結果を見てみましょう。

どちらのカスタマイズ方法でも、非常にきれいで詳細な目次が表示されます。だからあなたはあなたが好きな方法を自由に選ぶことができます。

それでは、目次を作成するためのコードの使用方法を見てみましょう。

方法2：コードを使用して目次を作成します。

ステップ1：投稿用の目次を作成する

[外観]> [テーマ]> [エディター]> [functions.php]に移動します。

次に、次のコードをファイルfunctions.phpに追加して、目次を投稿に挿入します。

注：このコードは、目次に2つの見出しレベルのみを追加するためのものです。

 関数create_toc（$ html）{
    $ toc = '';
    if（is_single（））{
        if（！$ html）return $ html;
        $ dom = new DOMDocument（）;
        libxml_use_internal_errors（true）;
        $ dom-> loadHTML（mb_convert_encoding（$ html、 'HTML-ENTITIES'、 'UTF-8'））;
        libxml_clear_errors（）;
        $ toc = '<div class = "toc-bound">
            <div class = "toc-ctr">
                目次
            </ div>
            <ul class = "toc"> ';
        $ h2_status = 0;
        $ h3_status = 0;
        $ i = 1;
        foreach（$ dom-> getElementsByTagName（ '*'）as $ element）{
            if（$ element-> tagName == 'h2'）{
                if（$ h3_status）{
                    $ toc。= '</ ul>';
                    $ h3_status = 0;
                    }
                 if（$ h2_status）{
                    $ toc。= '</ li>';
                    $ h2_status = 0;
                  }
                  $ h2_status = 1;
                  $ toc。= '<li> <a href="' .get_the_permalink()。'＃toc-'。$i。'">'。 $ element-> textContent。 '</a>';
                  $ element-> setAttribute（ 'id'、 'toc-'。$ i）;
                  $ i ++;
            } elseif（$ element-> tagName == 'h3'）{
                if（！$ h3_status）{
                    $ toc。= '<ul class = "toc-sub">';
                    $ h3_status = 1;
                }
                $ toc。= '<li> <a href="' .get_the_permalink()。'＃toc-'。$i。'">'。 $ element-> textContent。 '</a> </ li>';
                $ element-> setAttribute（ 'id'、 'toc-'。$ i）;
                $ i ++;
            }
        }
        if（$ h3_status）{
            $ toc。= '</ ul>';
        }
        if（$ h2_status）{
            $ toc。= '</ li>';
        }
        $ toc。= '</ ul> </ div>';
        $ html = $ dom-> saveHTML（）;
    }
    $ tocを返します。 $ html;
}
add_filter（ 'the_content'、 'create_toc'）;

説明：

コード	説明
関数$ toc = '<div class =” toc-bound”> <div class =” toc-ctr”> 目次 </ div> <ul class =” toc”>	目次にタイトルを追加し、その上に表示します。「目次」というテキストは、タイトルに入れたいものに置き換えることができます。
変数h2、h3	見出しのレベルは目次に挿入されます。あなたはOTH ERタグとH2、H3を交換する場合は、コードにしたいタグにH2、H3のような全体のパラメータを変更します。
関数$ toc。= '<li> <a href =”'。 get_the_permalink（）。 '＃toc-'。 $ i。 '”>'。 $ element-> textContent。 '</a>';	クリックするとすぐに、投稿内の対応するセクションへのジャンプリンクを作成します。
関数*if（$ h3_status）{* *$ toc。= '</ ul>';* } *if（$ h2_status）{* *$ toc。= '</ li>';* } *$ toc。= '</ ul> </ div>';* *$ html = $ dom-> saveHTML（）;* } *$ tocを返します。* *$ html;*	目次の各見出しの前に箇条書きを追加します。

コードを挿入した後、更新ファイルをクリックすることを忘れないでください。

次に、結果は次のとおりです。

もちろん、少しスタイルを設定する必要があります。すべてのコーダーのお気に入りのツールであるCSSを使用します。

ステップ2：CSSを使用してカスタマイズする

CSSでカスタマイズするには、テーマエディタでファイルstyle.cssに移動します。そこで、自分で書いたコードを挿入して、目次を好きなようにカスタマイズする必要があります。

たとえば、目次の色と強度をカスタマイズしたいので、次のコードを挿入します。

 .toc-bound {
    背景色：＃619162;
    色：#fff;
}
.toc-ctr {
    border-bottom：1px solid #fff;
    パディング：10px;
    フォントサイズ：20px;
    text-transform：大文字;
}
ul.toc {
    list-style-type：なし;
    パディング：10px;
    パディング-左：25px;
}
.toc li a {
    色：#fff;
}
ul.toc> li {
    フォントサイズ：18px;
    フォントの太さ：700;
    パディング：5px 0;
}
ul.toc-sub {
    list-style-type：なし;
}
ul.toc-sub li a {
    フォントの太さ：200;
}

更新ファイルをクリックして保存することを忘れないでください。

最終結果は次のようになります。

結論として、プラグインの使用とコーディングの両方で、同じきれいな目次が得られます。満足している限り、任意のオプションを選択できます。

最後の言葉

ご覧のとおり、WordPressの投稿に目次を作成することはまったく複雑ではありません。チュートリアルに従うと、美しい目次が作成されます。優れた目次により、投稿がより明確でプロフェッショナルになります。したがって、あなたのブログを読んでいるとき、あなたの視聴者はより親しみやすい経験をするかもしれません。

ご不明な点がございましたら、下のコメント欄にご記入ください。