運用中のWordPressの画像に後からphp側でspanの枠をつける

運用中のサイトの対してなにか処理を行う場合、jsなどを使ってクライアント側で表示されたコードに対して処理を行うか、手作業を含むなんらかの方法でサーバーのデータに対して処理を行うか、になるかと思います。

今回はphpによってサーバー側で処理を行ってみようという内容です。

実現したいこと

実現したいことは以下の通り。

• WordPressの投稿画面で挿入した既存記事内の画像をspanでラッピング
• 任意の順番のspanにのみ装飾を加えられるように個別にクラスを設定
• functions.php内のphpで処理を行う

上記だけ見るとちょっと特殊な感じがするかもしれませんが、実現後の状態はいたって単純なものです。

jQueryなどjsを使う方法であれば、他のサイトなどで見かける程度のものかと思います。

spanと書いていますが、当然ラッピングに用いるのはdivでも問題ありません。

コード

以下が作成したコードです。

add_filter( 'the_content', 'the_content_filter', 10 );
function the_content_filter( $content ) {
  //wp-imageクラスがついたimg要素をspanで囲む
  $content = preg_replace('/(<img .*?wp-image.*?>)/i', '<span class="frame-num">$1</span>', $content);
  //枠に連番を付けて個別装飾を可能にする
  $count = 0;
  $content = preg_replace_callback('/frame-num/i',
    function ($matches) use (&$count){
    $count++;
    $str = $matches[0];
    $str .= $str + $count;
    return $str;
    }, $content);
  return $content;
}

上記を実行すると、以下のようなspanがつきます。

<!--1つ目のimg要素-->
<span class="frame-num1"><img src=""></span>

<!--2つ目のimg要素-->
<span class="frame-num2"><img src=""></span>

frame-num1の数字の部分が連番で付与されるので、最初の画像だけ指定するためのクラスという使い方ができます。

なお実際に上記コードを利用する場合は、画像挿入時に選択できる右寄せや左寄せの設定をこの枠にも反映する必要があるでしょう。

その辺りは適宜追加や改修ということで。

特定の数の範囲内で連番を繰り返す

連番を延々と付与するのではなく、例えば以下のような状態が必要になる場合もあります。

• 3種類の装飾を用意して、順繰りに適用する
• 1-3までの連番を繰り返す
• 例:1,2,3,1,2,3,1,2,3….

この場合は前項のコードを応用し、カウンタに対する操作を少し追加すれば実現可能です。

add_filter( 'the_content', 'the_content_filter', 10 );
function the_content_filter( $content ) {
  //wp-imageクラスがついたimg要素をspanで囲む
  $content = preg_replace('/(<img .*?wp-image.*?>)/i', '<span class="frame-num">$1</span>', $content);
  //枠に連番を付けて個別装飾を可能にする
  $count = 0;
  $content = preg_replace_callback('/frame-num/i',
    function ($matches) use (&$count){
    //カウンタが4になったら0に戻す
    if($count === 4){$count = 0;} 
    $count++;
    $str = $matches[0];
    $str .= $str + $count;
    return $str;
    }, $content);
  return $content;
}

カウンタの値が最大値+1になった時点で初期値に戻し、結果として最大値までの連番を繰り返しています。

参考サイト

参考にしたサイトは以下の通りです。

• preg_replace
• preg_replace_callback
• 正規表現
• preg_replaceで最初の処理だけスキップする方法

結び

当初はpreg_replaceでなんとかなるだろう程度でしたが、連番付与でつまづきました。

preg_replaceとsprintfを組み合わせる方法も目にしましたが、これもうまくいかず。

preg_replaceで取り出した要素に連続した番号をつけたいだけだったのですが。

形にはなりましたが、引き出しの不足を痛感します。

Twitter

Hatena

Facebook

Pocket