アイキャッチ画像の表示などで、アイキャッチ画像が存在する場合にはその画像を表示し、存在しない場合には、代替画像を表示する
といった作業が必要になる事があります。
このような作業を行う場合、PHPやjavascript等を記述する必要があり、ハードルが高かったりします。
WordPressの日本語フォーラムで、以下のような質問がありました。
この場合、難しい条件分岐のコードを記述せずに、代替画像を表示出来るか 考えてみます。
この質問では、タイトルスラッグと同名の画像が、テーマのimages/title/の中に、存在するので、対応するURLを取得します。
固定ページで、表示画像の取得
$page_slug= get_query_var('pagename');
$image_url= get_template_directory_uri(). '/images/title/'. $page_slug . '.jpg';
しかし、このURLのjpgファイルは、存在するかどうかは、不確かです。
さてここからが、この記事のアイディアです。
img 要素は使用せず、div 要素とbackground プロパティを使う事にします。
スタイルシート
style.css にスタイルを記述します。
.page-image-container{
width:600px;
max-width:100%;
height:400px;
border:1px solid #000;
}
div要素のサイズや、ボーダーを指定しました。
テンプレートにコードの追加
page.php
//まずは、先ほどの $image_url のコードを記述します。
$page_slug= get_query_var('pagename');
$image_url= get_template_directory_uri(). '/images/title/'. $page_slug . '.jpg';
//次に 代替画像のURLを記述します
$fallback_url= "http://example.com/fallback-image.jpg";
//次に、画像表示用のdiv要素を記述します
<div class="page-image-container" style="background:url( <?php echo $image_url; ?> ),url(<?php echo $fallback_url; ?>);background-size:cover;"><div>
以上で、$image_urlが存在しない場合、$fallback_url が表示されるようになります。
関連リンク
マルチバッググラウンドと、background-size をうまく使うと、条件分岐ができてしまいます。