当サイトには広告が含まれております

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

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

ご縁があって地元八王子の「さくらアカデミー」さんのサイト制作のお手伝いをさせていただいています。コンテンツはプラグイン 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を追加しました。

これで表示すると、

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

実際のページは、

社会人プロ講師の完全マンツーマン...
無料体験申し込み / お問い合わせ | 社会人プロ講師の完全マンツーマン個別指導:さくらOne個別指導塾 プロ講師によるマンツーマン完全個別指導塾。大学受験・都立高校受験・私立中学受験の個別指導進学塾。英語と数学の受験指導に実績を持つ講師陣。小学生・中学生・高校生に...

こちらになります。

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

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

使っている子テーマの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 プラグイン”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る