WEBEER – Web制作の覚えがき –

【WordPress】見出しのH2の中にHTMLタグ(span)を入れたい

WordPress
WordPress 更新日:2020.08.22 公開日:2020.08.25

ブログテーマをカスタマイズで見出しのh2やh3の中にタグを入れたくなることってありますよね。

擬似要素の:before:afterでは再現できないデザインを作りたいことがあります。

ワードプレスの機能にはh2の中にタグを埋め込む機能は用意されていません。けれどfunctions.phpに追記するだけで簡単に対応することができます。

やりたいこと

<h2><span>記事の見出し</span></h2>

こういうマークアップにしたい。

見出しの中にHTMLタグを挿入する方法

最初にも書いた通り、見出しタグの中にHTMLタグを挿入する方法はWordPressには実装されていません。

そこで、投稿の内容を表示するadd_filterというフィルターフックを使ってthe_content()を表示する前に表示内容を変更しようと思います。

function the_content_after_filter( $content ) {
  // H2にspanを追加
  $content = str_replace( '<h2>', '<h2><span>', $content );
  $content = str_replace( '</h2>', '</span></h2>', $content );
  return $content;
}
add_filter('the_content', 'the_content_after_filter', 10);

これでh2の中にspanタグを埋め込むことができました。

解説

では解説していきますね。

取得したデータを加工したいときはフィルターフックを使います。

add_filter('the_content', 'the_content_after_filter', 10);

第一関数はフィルターフックの名前です。the_contentはデータベースから取得した投稿コンテンツを画面に出力する前に適応されます。

第二関数は独自の関数。

第三関数は処理する順番です。the_contentのデフォルトは10なので省略しても問題ありません。

呼び出したthe_content_after_filterで見出しタグの中に<span>を埋め込む処理を書いていきます。

$content = str_replace( '<h2>', '<h2><span>', $content );
$content = str_replace( '</h2>', '</span></h2>', $content );

str_replaceを使って<h2><h2><span>に変換しています。

ブロックにCSSクラスを追加した場合はこのやり方だとうまくいかないのでpreg_replaceを使ってくださいね。

str_replaceの書き方は

str_replace("置換したい文字列", "置換後の文字列", "検索する文字列");

こんな感じです。

終わりに

見出しタグの中にタグを埋め込む方法をご紹介しました。複雑なデザインをする時に便利です。