- 目的： トップページのスライド画像の更新を、固定ページから簡単に行いたい。
- 問題：
<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 を使う形に出力している。
配列にぶち込めればもう勝ったも同然。
