有料テーマ「DIVER」のカスタマイズTipsです。
新着記事や関連記事の投稿リストに表示されるサムネイル画像を、「アイキャッチ画像」とは別にカスタムフィールドで設定した画像に変える方法をメモしておきます。
滅多にないと思いますが...笑
目次
サムネイル表示用の関数を子テーマ側で先に定義しておく
意外と簡単です。
/diver/loop.phpなどを見ていただければ分かるのですが、DIVERではサムネイルの表示にget_diver_thumb_img()という関数を使用しています。
この関数は、/diver/lib/functions/diver_settings.phpというファイルで定義されており、中身は以下のようになっています。
if (!function_exists('get_diver_thumb_img')){
function get_diver_thumb_img($size = 'full',$lazyload = true, $alt = "img",$cap = false,$thumb = true){
$thumb_id = get_post_thumbnail_id();
if($alt == "img"){
$alt = get_the_title();
}
if($thumb_id){
$thumb_img = wp_get_attachment_image_src( $thumb_id , $size );
$thumb_src = $thumb_img[0];
$attachment = get_post( $thumb_id );
$post_caption = $attachment->post_excerpt;
$caption = "";
if($post_caption && is_single() && $cap){
$caption = "<figcaption>".$post_caption."</figcaption>";
}
if($lazyload){
return '<img src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" data-src="'.$thumb_src.'" class="lazyload" alt="'.$alt.'">'.$caption;
}else{
return '<img src="'.$thumb_src.'" alt="'.$alt.'">'.$caption;
}
}elseif($thumb){
$thumbreplaceimg_url = blank_post_thumb_img($size);
if($lazyload){
return ($thumbreplaceimg_url)?'<img src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" data-src="'.$thumbreplaceimg_url.'" class="lazyload" alt="'.$alt.'">':'';
}else{
return ($thumbreplaceimg_url)?'<img src="'.$thumbreplaceimg_url.'" alt="'.$alt.'">':'';
}
}
global $post;
return apply_filters('get_orig_thumb_img',get_the_post_thumbnail($post->ID));
}
}この内容を元に、子テーマ側で同名の関数を定義します。
WordPressでは子テーマ側のfunctions.phpが先に読み込まれるため、上記のように!function_existsで定義してくれている関数は簡単に内容を変更できます。
以下のコードを子テーマ側のfunctions.phpに記述してください。
function get_diver_thumb_img( $size="full", $lazyload=true ){
$alt = get_the_title();
$no_img = blank_post_thumb_img();
$thumb_src = get_post_meta(get_the_ID(), 'meta_key', true);
$thumb_src = $thumb_src ?: $no_img;
$placeholder_img = "data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=";
if( $lazyload ){
return '<img src="'.$placeholder_img.'" data-src="'.$thumb_src.'" class="lazyload" alt="'.$alt.'">';
}else{
return '<img src="'.$thumb_src.'" alt="'.$alt.'">';
}
}blank_post_thumb_img()という関数でDIVER設定のNo Image画像を取得できるので、こちらはそのまま使っています。
サムネイルの代わりに表示したいカスタムフィールドのキー名を'meta_key'の部分と書き換えてご使用ください。
*キャプションなどは個人的にほぼ使わないので削除しております。キャプションをつけたい場合は元のコードを参考にカスタマイズしてください。
コメント