WordPress 文字列を一文字ずつタグで囲う方法

WordPress で文字列を一文字ずつタグで囲う方法を紹介します。
例えば、サイト演出のために投稿タイトルを一文字ずつタグで囲いたいときに便利な方法です。

1. 一文字ずつタグで囲う方法
   1. 日本語に対応させる方法

一文字ずつタグで囲う方法

タイトルを一文字ずつタグで囲うには PHP の関数 str_split を使用します。
次のコードは、投稿のタイトル（アルファベットのみ）を一文字ずつ HTML タグの span で囲う方法です。

<?php // タイトルを一文字ずつタグで囲う

  $post_title = get_the_title(); // タイトルの取得

  $string = str_split($post_title); // 文字列を配列に変換

  foreach ($string as $char) {

    echo sprintf ('<span>%s</span>',$char) . PHP_EOL; // 一文字づつタグで囲う

  }

?>

str_split で文字列を一文字ずつ配列に変換。
foreach の配列の反復処理中に sprintf でフォーマットした文字列（文字をタグで囲ったもの）を返します。
例えば、タイトルが PRODUCT の場合は次のように表示されます。

<span>P</span>

<span>R</span>

<span>O</span>

<span>D</span>

<span>U</span>

<span>C</span>

<span>T</span>

しかし str_split はマルチバイト文字（例えば日本語）には対応していないため、マルチバイト文字の対応方法を後述します。

日本語に対応させる方法

先ほど紹介した通り str_split はマルチバイト文字には対応していません。
そのため、マルチバイト文字に対応するためにユーザー関数を定義して対応します。
次のコードは、日本語を含む投稿のタイトルを一文字ずつ HTML タグの span で囲う方法です。

<?php // マルチバイト文字に対応するためにユーザー関数を定義

  function str_split_unicode($str, $l = 0) {

    if ($l > 0) {

      $ret = array();

      $len = mb_strlen($str, 'UTF-8');

      for ($i = 0; $i < $len; $i += $l) {

        $ret[] = mb_substr($str, $i, $l, 'UTF-8');

      }

      return $ret;

    }

    return preg_split('//u', $str, -1, PREG_SPLIT_NO_EMPTY);

  }

  // タイトルを一文字ずつタグで囲う

  $post_title = get_the_title(); // 投稿タイトルの取得

  $string = str_split_unicode($post_title);

  foreach ($string as $char) {

    echo sprintf ('<span>%s</span>',$char) . PHP_EOL; // 一文字づつタグで囲う

  }

?>

まずはマルチバイト文字を対応するためのユーザー関数を定義します。
続いてタグで囲いたい文字列を取得。
タイトル以外の文字列を取得したい場合は get_the_title() を任意の値に変更してください。
次にユーザー関数 str_split_unicode で文字列を配列に変換。
sprintf でフォーマットされた文字列を返して %s 引数を文字列として扱います。
最後に PHP_EOL 改行を挿入、改行が必要なければこの行は削除してください。
以下反復処理の繰り返し。

まとめ

WordPress で文字列を一文字ずつタグで囲う方法を紹介しました。
紹介した方法と CSS の擬似クラス nth-child() を絡めて使いたいときは、foreach の部分で PHP の加算子を使って文字をカウントするのがよいでしょう。
加算子を使ったカウント方法はWordPress 投稿ループの中に連番を表示する方法をごらんください。