WordPressで、あるページのCSSだけを変更したいときの変更方法

ご縁があって地元八王子の「さくらアカデミー」さんのサイト制作のお手伝いをさせていただいています。コンテンツはプラグイン Table of Contents Plus で目次をつけてわかりやすくなっています。
しかし、部分的に目次はない方がいいな、と思うページもあります。そこであるページのCSSだけを変更する方法を考えてみました。

Table of Contents Plus は自動的に目次をつけてくれる便利なプラグインです

Table of Contents Plus はこのblogでも使っています。記事の頭に

こんな感じの目次を自動的に表示してくれます。

Table of Contents Plus の導入方法や詳細については、

[ryus_blogcard url=”https://usortblog.com//tableofcontentsplus/”]

↑こちらで紹介しています。

目次を出したくないページの対応をCSSでしてみた

このblogではTable of Contents Plusの設定で　投稿　だけに目次が出るようにしていますが、さくらアカデミーさんでは　投稿、固定ページ　の両方に自動的に目次が出るようになっています。

お問い合わせページにもう少し詳しく説明を入れようとして手を加えました。説明文とフォームそれぞれにh2で見出しをつけました。すると、

こんな風に、お問い合わせページなのに目次が表示されます。お問い合わせページで見てほしい電話番号やフォーム入力などが下に下がって表示できる部分が減ってしまうので、ここでは目次はいらないと思いました。

Table of Contents Plus　の設定であるコンテンツだけ目次を表示しないようにというオプションがないのかな？と思ったのですが、見つかりませんでした。

ということは、そのページだけCSSで目次を　display:none　と指定すれば出ないはずです。

目次部分のソースは、

<div id="toc_container" class="toc_light_blue no_bullets">
(目次の内容)
</div>

となっていて、　toc_container　というidが指定されていました。そこで、この固定ページの編集画面のテキストタブで、

<style type="text/css">
<!--
#toc_container {
    display:none !important;
}
-->
</style>
お問い合わせはお気軽に
（以下略）

このCSSを追加しました。

これで表示すると、

このように目次が表示されなくなりました(^^)/

実際のページは、

こちらになります。

どこでも簡単に使えるようにショートコードにしてみた

このコードですが他のページでも目次を表示したくないときに簡単に使えるようにショートコードにしてみました。

使っている子テーマのfunctions.phpに、

/* TOC+目次を非表示にするショートコード */
function tocplus_display_none() {
    return '
<style type="text/css">
<!--
#toc_container {
    display:none !important;
}
-->
</style>
    ';
}
/* ショートコードを追加する */
add_shortcode('tocplus_display_none', 'tocplus_display_none');

このコードを追加します。

そして、固定ページの編集画面で

[tocplus_display_none]
<h2>お問い合わせはお気軽に</h2>
（以下略）

このように記述します。ショートコードなので、このページには目次を出さないようにしたいなと思ったら[tocplus_display_none]を追加するだけでそのページには目次が追加されないようになります。

おまけ：Table of Contents Plus の目次を出したいページにだけ出す方法もあります

今回の場合、Table of Contents Plus の管理画面で、

このように　投稿(post)、固定ページ(page) のすべてに表示をする設定になっていました。もしも固定ページについては目次を出したいページの方が少ない、という場合は「固定ページの目次を出したいページだけに目次を出す」という方法があります。

まず、この設定で

固定ページのチェックを外して

更新しておきます。すると、固定ページを見ても

目次が表示されなくなります。この状態で、このページに目次を表示したければ、Table of Contents Plusの目次を表示させるショートコードを入れます。

固定ページの編集画面で

<h1>都立高校受験コース</h1>
（以下略）

と頭に1行、 [toc]と追加するだけで、目次を表示してくれます。このコードは好きなところに記述できます。

そのサイトの状況によって「目次をページごとに非表示にする」のか「目次をページごとに表示するのか」どちらかの方法を選ぶと良いと思います。

[amazon_searchlink search=”WordPress プラグイン”]