WordPress:投稿記事のHTMLをPHPにパースして自由自在に扱う

  • 目的: トップページのスライド画像の更新を、固定ページから簡単に行いたい。
  • 問題: <img> ベースの画像をそのまま引っ張ってくるとレスポンシブ対応がつらい。

固定ページに下記のHTMLを書いていたとする。

<li><a href="#"><img src="a.jpg"></a></li>
<li><a href="#"><img src="b.jpg"></a></li>
<li><a href="#"><img src="c.jpg"></a></li>

ただ表示するだけならこのままでもいいが、前述の 問題 がある。
この画像を、何とかしてCSSの background-image で扱うように変更したい。

スライドを呼び出すWordPressテーマファイル側

上記のHTMLからリンク先(href)と画像のパス(src)を引っこ抜いて、WordPress内の他の場所で使いたい時は以下のようにする。

大まかに言うと、HTMLをXML化して、XMLをPHP配列にパースしている。

$html = mb_convert_encoding(the_content, 'HTML-ENTITIES', 'UTF-8'); //対象ページのコンテンツを取得
$dom = new DOMDocument(); //DOMdocumentオブジェクトの作成
@$dom->loadHTML($html);   //DOMdocumentオブジェクトにHTMLを格納
$xmlString = $dom->saveXML(); //XMLに変換
$xmlObject = simplexml_load_string($xmlString);
$htmlArray = json_decode(json_encode($xmlObject), true); //XMLを配列にパース
$listArray = $htmlArray['body']['li'];
foreach($listArray as $li) {
    $src = $li['a']['img']['@attributes']['src'];
    $href = $li['a']['@attributes']['href'];
    echo '<li class="slide"><a href="'. $href .'" style="background-image:url('. $src .')"></a></li>';
}

最終的に listArray という配列に抽出して、 background-image を使う形に出力している。

配列にぶち込めればもう勝ったも同然。

参考: PHPで(外部の)HTMLを取得して、色々な値を取得する