ワードプレスで見出しに自動的に id 属性を付ける方法

このページでは見出しに id 属性を自動的に付ける方法について解説します。

id 属性は id 属性のみでは特に意味がありませんが、id 属性が付いていると下記のようなことが出来て便利です。

• ページ内リンクが貼れる
• 他の要素と見分けが付く

例えば下のページでは id 属性の自動挿入によりページ内リンクが貼れるようになることを利用して目次を自動挿入するプログラムを公開しています。

ワードプレスでプラグインなしに目次を自動挿入する方法

また下のページではアドセンスを見出しに対して等間隔に配置する方法を解説していますが、うまく等間隔に配置するように id 属性の付加を行うことで見出し要素同士で見分けるテクニックを利用しています。

ワードプレスでアドセンスを見出し２つおきに自動挿入する方法（プラグインなし）

このように、id 属性は付加するだけではあまり意味がありませんが、それを利用していろんな機能を実装することが可能です。

このページではその id 属性を自動的に付加する方法について解説します。

見出しに id 属性を自動的に付ける方法

早速 id 属性のない見出しに id 属性を付加する方法について解説します。

プログラムを functions.php にコピペする

下記プログラムをテーマフォルダ直下の function.php にコピペだけで、id 属性のない見出しに id 属性を付加することが可能です。

/**
 * Summary
 *  見出しに id を自動挿入
 *
 * @param string $the_content 記事の本文.
 **/
function add_auto_id( $the_content ) {

	/* idを付加する見出しレベルを設定 */
	$start = 1;
	$end   = 6;

	/* 見出しのパターンを作成 */
	$pattern = '/^<h([' . $start . '-' . $end . ']).*?>.+?<\/h[' . $start . '-' . $end . ']>$/im';

	/*
		$headingsにページ内の見出し要素を格納
		$headings[0]：マッチした文字列
		$headings[1]：見出しレベル（h3なら"3"）
	*/
	if ( ! preg_match_all( $pattern, $the_content, $headings ) ) {
		/* 見出しがない場合は終了 */
		return $the_content;
	}

	/* idが設定されているかどうかを判断するためのパターン */
	$id_pattern = '/^<h([' . $start . '-' . $end . ']).+?id\s*=\s*\"(.+?)\".*>(.+?)<\/h[' . $start . '-' . $end . ']>$/im';

	/* 見出しごとにidが設定されていない見出しにidを付加 */
	$num_count = count( $headings[0] );
	for ( $i = 0; $i < $num_count; $i++ ) {

		/* 見出しにidが設定されているかどうかの判断. 見出しにidが設定されている場合のみマッチ */
		if ( ! preg_match( $id_pattern, $headings[0][ $i ], $dummy ) ) {

			/* idが設定されていない見出しの場合に行う処理. idを付加した文字列（<hX id=autoid-Y）を作成 */
			$id_str = '<h' . $headings[1][ $i ] . ' id="autoid-' . $i . '"';

			/* id_str（<hX id=autoid-Y）で元々の見出しの"<hX"部分に置換 */
			$replaced_heading =
				str_replace( '<h' . $headings[1][ $i ], $id_str, $headings[0][ $i ] );

			/* id付加後の見出しで元々のコンテンツ内の見出しを置換 */
			$the_content =
				str_replace( $headings[0][ $i ], $replaced_heading, $the_content );
		}
	}

	return $the_content;
}

/* the_contentフックに関数をフック */
add_filter( 'the_content', 'add_auto_id', 9 );
/* 見出しにid属性を自動挿入 End */

スポンサーリンク

見出しに id 属性が付けられる仕組み

上のプログラムで見出しに id 属性をどのように設定しているかについて解説します。

見出しに id 属性を設定しているのはプログラム中の add_auto_id 関数です。この関数の中では下記のことを行なっています。

• 記事内の見出し要素のみを抽出
• 各見出し要素に id 属性があるかどうかを判断
• （見出し要素に id 属性がない場合は下記を実行）
  • id 属性を付加した見出し要素を作成
  • 作成した見出し要素で記事の元々の見出しを置換

記事内の見出し要素のみを抽出

これを行なっているのは add_auto_id 関数の下記部分です。

/* idを付加する見出しレベルを設定 */
$start = 1;
$end   = 6;

/* 見出しのパターンを作成 */
$pattern = '/^<h([' . $start . '-' . $end . ']).*?>.+?<\/h[' . $start . '-' . $end . ']>$/im';

/*
	$headingsにページ内の見出し要素を格納
	$headings[0]：マッチした文字列
	$headings[1]：見出しレベル（h3なら"3"）
*/
if ( ! preg_match_all( $pattern, $the_content, $headings ) ) {
	/* 見出しがない場合は終了 */
	return $the_content;
}

$pattern は見出し要素にマッチするパターンです。また preg_match_all 関数は、第一引数で指定したパターンに一致する文字列を $the_content の中から探し出し、その文字列を全て $headings に格納する関数になります。

$the_content には記事の本文が格納されていますので、上記のプログラムで記事の見出しのみを抽出することが可能です。抽出した見出しは $headings[0] に配列として格納されます（記事の上側から $headings[0]、 $headings[1]…. という順に格納される）。

ちなみに $headings[1] や $headings[2] などにはパターンの括弧で括られた部分が格納されます。$pattern では見出しレベル部分に括弧で括っているので、 $headings[1] に $headings[0] に格納された文字列の見出しレベル部分のみが格納されることになります。これは id 属性を付加するときに使用しています。

各見出し要素に id 属性があるかどうかを判断

id 属性があるかどうかは下記で判断しています。

/* idが設定されているかどうかを判断するためのパターン */
$id_pattern = '/^<h([' . $start . '-' . $end . ']).+?id\s*=\s*\"(.+?)\".*>(.+?)<\/h[' . $start . '-' . $end . ']>$/im';

/* 〜略〜 */

/* 見出しにidが設定されているかどうかの判断. 見出しにidが設定されている場合のみマッチ */
if ( ! preg_match( $id_pattern, $headings[0][ $i ], $dummy ) ) {

$id_pattern は id 属性が設定されている見出し要素にマッチするものになっています。さらに preg_match 関数で、この $id_pattern が記事内の見出し要素のみを抽出で抽出した各見出し要素とマッチするかどうかを判断しています。

マッチしない場合は preg_match 関数が 0 を返却しますので、その場合は $headings[0][$i] に id 属性が設定されていないことになり、さらに if 文が成立しますので、この if 文の中の処理は id 属性が設定されていない見出し要素のみに対して行うことができます。

id 属性が設定されていない見出し要素にも id 属性を設定してしまうと id 属性が２つになってしまうので注意しましょう。

スポンサーリンク

id 属性を付加した見出し要素を作成

add_auto_id 関数の下記部分で見出し要素に id 属性を付加した文字列を作成する処理を行なっています。

/* idが設定されていない見出しの場合に行う処理. idを付加した文字列（<hX id=autoid-Y）を作成 */
$id_str = '<h' . $headings[1][ $i ] . ' id="autoid-' . $i . '"';

/* id_str（<hX id=autoid-Y）で元々の見出しの"<hX"部分に置換 */
$replaced_heading =
	str_replace( '<h' . $headings[1][ $i ], $id_str, $headings[0][ $i ] );

$id_str に “<hX id=autoid-Y” を格納し（Xは見出しレベル、Yは通し番号）し、それを str_replace 関数で見出し要素の “<hX” 部分と置換した結果を $replaced_heading に格納しています。

例えば記事の一番初めの見出しが下記のようなものであった場合、

<h2">見出し１</h2>

$replaced_heading には下記のようなものが格納されることになり、id 属性が付加された見出し要素が作成されたことになります。

<h2 id="auto-id=1">見出し１</h2>

作成した見出し要素で記事の元々の見出しを置換

add_auto_id 関数の最後に行うのが作成した見出し要素での記事の元々の見出しの置換です。

/* id付加後の見出しで元々のコンテンツ内の見出しを置換 */
$the_content =
	str_replace( $headings[0][ $i ], $replaced_heading, $the_content );

id 属性を付加した見出し要素を作成で作成した id 属性付きの見出し要素 $replaced_heading で記事内の id 属性なし見出し要素を置換しています。

これらを id 属性なしの全見出し要素に対して実行することで、記事内のすべての見出しに id 属性が設定されることになります。

関数のフック

add_auto_id 関数は下記で the_content 関数にフックさせていますので、the_content 関数実行と同じタイミングで行われ、自動的に見出しに id 属性が付加されます。

add_filter( 'the_content', 'add_auto_id', 9 );

add_filter 関数の第三引数は優先度であり、同じ関数にフックしているものの中からこの値が小さい関数から先に実行させることが可能です。

id 属性付加してから他の関数を実行させたい場合はこの add_auto_id の優先度の数字を他の関数よりも小さくしておけば良いです。

スポンサーリンク

まとめ

このページではワードプレスで記事内の見出しに自動的に id 属性を付ける方法・プログラム・仕組みについて解説しました。

記事内の見出しに自動的に id 属性を付けるためには下記の処理を実行すればオーケーです。

• 記事内の見出し要素のみを抽出
• 各見出し要素に id 属性があるかどうかを判断
• （見出し要素に id 属性がない場合は下記を実行）
  • id 属性を付加した見出し要素を作成
  • 作成した見出し要素で記事の元々の見出しを置換

id 属性だけでは効果はありませんが、これを利用して自動的に目次を作成したり様々なことが行えるようになります。自動的に見出しに id 属性を付けることができること、その方法は覚えておきましょう！