WordPressでブログ記事を作成する際、『テーマとして Cocoon を使いながら Elementor で記事の編集をすると、投稿記事に目次が2つ作成されてしまう』というお悩みはありませんか？
解決策の結論から言うと、Elementor の編集画面で次の文字列を打つことで、Elementor によって自動生成される目次のみが消えます。
詳しく説明していきます。
当サイトは WordPress で作成していますが、そのテーマとしては、Cocoon の子テーマ『Cocoon Child』を使用しています。
Cocoon は、レイアウトやデザインを管理画面で設定できたり、ウィジェットを細かくカスタマイズできるなど、無料テーマの中ではかなり高機能です。
ブログ初心者にとっても非常に使いやすいですし、無料ということもあって、多くの方が愛用しているのではないでしょうか。
ブログ記事の作成にあたっては、読者が記事に書いてある内容が一目でわかるように、ページの上部またはサイドバーに “目次” をつけることが大切です。
Cocoon には、投稿記事の “目次” を自動生成してくれる機能が備わっています。
Cocoon Child の目次の設定方法
WordPress のダッシュボード画面から、“Cocoon 設定” の “目次” のタブを選択します。
“目次の表示” という項目で、“目次を表示する” にチェックを入れます。
これだけで、投稿した記事の上部に目次が表示されるようになります。
この記事では、最初の見出しの上部に、下の画像のような目次がありますが、それが Cocoon の機能によって生成されたものです。
Elemtentor とは？
記事の投稿は、Cocoon の記事編集機能を使うこともできますが、記事編集用のプラグインを導入して記事を投稿することも可能です。
記事編集用のプラグインの中でも、初心者におすすめなのが Elementor です。
Elementor は初心者でも直感的にサイト作成できる無料プラグインです。
Elementor にも目次の自動生成機能が備わっています。
Elementor とテーマの目次が重複する問題
以上のことから容易に推察できますが、Cocoon（またはその子テーマである Cocoon Child）で目次の表示設定を有効にしながら、Elementor で記事を投稿した場合、投稿記事には Cocoon と Elementor の両方の目次が生成されてしまうという問題が生じます。
（下の画像：青が Elementor、白が Cocoon で生成された目次）
目次は2つも必要ないので（むしろ邪魔）、どちらかの目次だけを残したいということになります。
じゃあ、「Cocoon の設定が楽だから Cocoon の目次を消せばいいのでは？」と思われるかもしれませんが、待ってください。
ここで両者の目次の特性を調べてみると、Cocoon の目次はクリックすると目的の見出しまで飛んでくれるのですが、Elementor の目次はクリックしても飛ばないので、使い物になりません (´;ω;｀)
ということで、「Cocoon の目次を残し、Elementor の目次を消したい」ということになります。
Elementor の目次のみ消す方法
Elementor の目次のみを消すのは簡単で、Elementor の編集画面のどこかに、
と入力するだけで、その記事には Elementor の目次が生成されなくなります。
コピー用：no_toc（← 記事編集画面にペーストし、文字列を [ ] で囲ってください）
“toc” というのは、“table of contents” （目次）の略です。
下の画像はこの記事の Elementor の編集画面ですが、記事の一番上にテキストエディターを作り、そこに先ほどの文字列を入力することで、Elementor の目次を消しています。
これにより、投稿された記事では Cocoon の機能で生成される目次だけが表示されるようになります。
ちなみに、Elementor の編集画面にこの文字列を入力したとしても、文字列そのものは実際の投稿記事には表示されません。
まとめ
Elementor によって自動生成される目次の消し方を紹介しましたが、いかがでしたでしょうか。
この記事では Coccon × Elementor の組み合わせの例を述べましたが、“no_toc” は、他のケースでも応用可能です。
基本設定として目次の表示を有効にしている場合でも、記事ごとに目次を消したい時に覚えておくと便利です。
コメント