snow_monkey_prepend_main

任意のブロック内にある見出しも目次ブロックに認識させる方法

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

Snow Monkey Blocks から提供されている目次ブロックは、Hタグ以外にもセクションブロック内のタイトルも含むことができたりと、Snow Monkey と併用する上で便利な機能が搭載されています。

しかし、カラムブロックやボックスブロックなど、全てのブロック内に見出しブロックを設定すれば適応されるかといえばそうではありません。そこまでやってしまうと、今度は反対に「載せたくない」という対応が必要になってきますからね。バランスがとられている部分でしょう。

この記事は、パネルでの設定も含めてデフォルトで対応できない任意のブロック内に配置した見出しブロックを目次ブロックに認識させる方法をご紹介します。

参照トピック

Snow Monkey サポートフォーラムでのこちらのトピックを参考にしています。

デモページの構造

以下のような構造でデモページを作りました。

  • 見出しブロック
  • 段落ブロック
  • 見出しブロック
  • 段落ブロック
  • ボックスブロック(.content-outline-target付与)
    • 見出しブロック
    • 段落ブロック
  • ボックスブロック(クラス名付与なし)
    • 見出しブロック
    • 段落ブロック

見た目は以下のような感じです。

フックでカスタマイズ

inc2734_wp_contents_outline_args というフックを利用してカスタマイズを行います。

Snow Monkey のフックに慣れ親しんでいる方だと、あまり見慣れない命名編成かもしれませんが、こちらは厳密にいうと Snow Monkey Blocks の中にある目次ブロックへのフックではなく、その目次ブロックで使っているライブラリのフックになります。まぁ、そのライブラリもキタジマさん作なんですけどね。

今回こちらで紹介しているフック以外にも、色々と活用できそうなフックが用意されているので、興味のある方はぜひ参照してみてください。

今回は、目次ブロックに含んで欲しいと考えている見出しは、.content-outline-target というボックスブロックの中に含まれている想定で話を進めます。

ソースコード

add_filter(
	'inc2734_wp_contents_outline_args',
	function ($attributes) {
		$attributes['selector'] = implode(
			',',
			[
				$attributes['selector'],
				'.content-outline-target > .smb-box__body'
			]
		);
		return $attributes;
	}
);

ここで注目しておきたいのが、任意の追加クラス .content-outline-target の直下にある .smb-box__body も記述してある点です。

仕組みとして、ここで指定するクラス名は、目次ブロックに含みたい見出しブロックの親要素を指定する必要があります。ですので、任意で追加したクラス名だけではなく .content-outline-target > .smb-box__body となることを覚えておきましょう。

実際に目次ブロックを設置すると、このように表示されるようになりました。

場合によっては、ページIDなどで分岐して特別な場所でだけ使うという形でも活用できそうですね。ぜひお試しください。

Snow Monkeyで困ったら…?

こんな時にご活用ください。
  • Snow Monkeyの使い方をレクチャーしてほしい
  • Snow Monkeyのカスタマイズの基本をレクチャーしてほしい
  • Snow Monkeyを採用した案件で行き詰まったので解決してほしい
  • Snow Monkeyを採用した制作案件を依頼したい

運営へのご連絡はこちらから

HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。

snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main