WordPressのカスタムフィールドの出力をCSSで素敵にデザイン（フィルターフック未使用版）

【趣旨】

WordPress（に限ったことではありませんが）のカスタムフィールドなどの出力で

な出力を、PHPの「preg_replace」を使用して

という素敵な見た目に変更します。
（フィルターフックは使用しませんので、functions.phpは編集不要です。）

【コード的には】

Before

<p>本日は晴天なりテキストテキストテキストテキストテキスト...</p>
<p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p>

After

<p><span class='mydeco'>本</span>日は晴天なりテキストテキストテキストテキストテキスト...</p>
<p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p>

CSS

.mydeco {
color: #fff;
background: #c6506d;
margin: 6px 5px 0 0;
padding: 17px 12px 12px;
text-align: center;
float: left;
font-size: 44px;
font-weight: 400;
line-height: 30px;
}

（CSSはあらかじめ用意しておきます。）

【方法】

テンプレートの当該カスタムフィールドの出力が

<?php the_field('cf_mytxt',$post->ID); ?>

だとして、出力箇所を以下のように変更します。
（※プラグイン「Advanced Custom Fields」での出力方法です。
　標準ではpost_custom('cf_mytxt')のように取得します。）

<?php
$string = get_field('cf_mytxt',$post->ID);  //（１）
$pattern = "/^<p>(.)(.+)$/mu";  //（２）
$replacement = "<p><span class='mydeco'>$1</span>$2";  //（３）
echo preg_replace($pattern, $replacement, $string, 1);  //（４）
?>

【解説】

（１）the_field() で出力までおこなっていたところを、get_fieldでPHPの変数に受けます。
（※プラグイン「Advanced Custom Fields」を使用していない場合は、標準の$string = get_post_custom('cf_mytxt');等で取得します。）

（２）正規表現で、先頭が<p>で始まり、最初の１文字を変数$1に、それ以降が変数$2となるパターンを定義します。（m:単一行として処理。u:文字列をUTF-8として扱う。）（文字コードがUTF-8のときはこれ必要らしいです。）

（３）変更後のパターンを定義

（４）preg_replaceで、（１）の文字列（$string）のうち、（２）のパターン（$pattern）に合致したものを、（３）の変更後パターン（$replacement）に変更する。（閉じ括弧前の1：変更は最初にマッチした１回のみ。）




。。。にしても、久しぶりの投稿です。(^ ^;
月１回の目標ですが、久しぶりすぎました。
もうクオリティーにこだわっていられません。
ということでちょっとした小ネタでした。