テーマカスタマイズ

アイキャッチを関数化すると取り回しが随分楽になった!

2017.09.08

目隠し

WordPressのアイキャッチ出力はget_the_post_thumbnailで出力する方法とget_post_thumbnail_idでidを取得して出力する方法があります。

アイキャッチの出力方法

get_the_post_thumbnail

get_the_post_thumbnailで出力するとコード的にはスッキリしますが、altの取得やclass等の不要なコードの削除に一手間必要です。

<?php echo get_the_post_thumbnail( $id,'サイズ'); ?>

ダミー画像と分岐する場合

アイキャッチの投稿がない場合ダミー画像を表示する場合は以下のようになります。

<?php if(get_the_post_thumbnail( $id )): ?>
<?php echo get_the_post_thumbnail( $id,'サイズ' ); ?>
<?php else: ?>
<img src="ダミー画像のURL" width="740" height="457" alt="no-image">
<?php endif; ?>

get_post_thumbnail_id

get_post_thumbnail_idの方がソースは長くなってしまいますが、タグ内の自由度は増します。

<?php
$thumb_id = get_post_thumbnail_id();
$entdit_img = wp_get_attachment_image_src( $thumb_id , 'サイズ' );
if(get_the_post_thumbnail($id)){
	$imgObj = home_url().$entdit_img[0];
	$imgwidth = $entdit_img[1];
	$imgheight = $entdit_img[2];
	$alt = get_post_meta( $thumb_id,'_wp_attachment_image_alt',true);
}else{
	$imgObj = 'ダミー画像のURL';
	$imgwidth = '740';
	$imgheight = '457';
	$alt = 'no-images';
}
?>
<img src="<?php echo $imgObj; ?>" alt="<?php echo $alt; ?>" width="<?php echo $imgwidth; ?>" height="<?php echo $imgheight; ?>">

アイキャッチを関数化する

カスタマイズ性のことを考えればget_post_thumbnail_idの方がいいのですが、コードが長くなって取り回しが悪いので、関数化しました。function.phpに記述します。

アイキャッチの関数

function images_object($ent_id,$img_size){
$thumb_id = get_post_thumbnail_id($ent_id);
$entdit_img = wp_get_attachment_image_src( $thumb_id , $img_size );
if(get_the_post_thumbnail($ent_id)){
    $imgObj = home_url().$entdit_img[0];
    $imgwidth = $entdit_img[1];
    $imgheight = $entdit_img[2];
    $alt = get_post_meta( $thumb_id,'_wp_attachment_image_alt',true);
    if (!$alt) {
    $alt = get_the_title().'のアイキャッチ画像';
    }
}else{
    $imgObj = 'ダミー画像のURL';
    $imgwidth = '740';
    $imgheight = '457';
    $alt = 'no-images';
}
$images_object = '<img src="'.$imgObj.'" alt="'.$alt.'" height="'.$imgheight.'" width="'.$imgwidth.'">';
echo $images_object;
}

使用箇所によりIDの取得方法とサイズは異なりますので引数にしています。

関数化されたアイキャッチの出力

$idに取得するID、サイズに画像のサムネイルサイズを指定します。

<?php images_object($id,'サイズ'); ?>

スッキリしました!以下あとがきです。

あとがき

今回アイキャッチを関数化することになった経緯はget_the_post_thumbnailで設定したaltにnullが返っていたからです。しかも条件があってaltの末尾が半角英数の場合です。

ちなみに以下がaltの取得のために記述していたfunctions.phpの内容です。

function remove_eyecatch_html( $html, $post_id, $post_image_id ) {
    $title= get_the_title($post_id);
    $eye_id = get_post_thumbnail_id( $post_id);
    $alt = get_post_meta($eye_id, '_wp_attachment_image_alt', true);
    if ($alt) {
        $html = preg_replace('/ alt=".*\w+"/', ' alt="'.$alt.'"', $html);
    }else{
        $html = preg_replace('/ alt=".*\w+"/', ' alt="'.$title.'のアイキャッチ画像'.'"', $html);
    }
    $html = preg_replace('/ class=".*\w+"/', '', $html);
    $html = str_replace(' />', '>', $html);
    return $html;
}
add_filter( 'post_thumbnail_html', 'remove_eyecatch_html', 10, 3);

日本語だと上手くいきますし、末尾に半角スペースが入っているだけでも上手く動作します。しかし末尾が半角英数になるとnullが・・・・・・まぁこの方法は使わなくなりましたが結果オーライです。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する