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

snow_monkey_prepend_entry_content

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

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

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

参照トピック

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

カラム指定内の見出しは目次（Snow Monkey Blocks)は、表示されない場合の指定方法について

このトピックには2件の返信、2人の参加者があり、最後にgamaにより1年、 2ヶ月前に更新されました。 3件の…

snow-monkey.2inc.org

デモページの構造

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

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

フックでカスタマイズ

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

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

GitHub – inc2734/wp-contents-outline

Contribute to inc2734/wp-contents-outline development by creating an account on GitHub.

github.com

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

今回は、目次ブロックに含んで欲しいと考えている見出しは、.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_append_entry_content