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

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

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

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

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

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

ページに自動的に目次を作ろう!と思って、PHPでコードを書きかけたことがあったのですがなかなか難しくて途中になっていました。プラグインがあるのだろうなとは思っていたのですが、先

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

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

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

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

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

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

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

目次部分のソースは、

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

このCSSを追加しました。

これで表示すると、

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

実際のページは、

http://hachiojisakura.com/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B/

こちらになります。

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

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

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

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

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

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

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

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

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

まず、この設定で

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

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

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

固定ページの編集画面で

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

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

[Amazon sponsored link] WordPress プラグイン 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る