web関連

【wordpress】アイキャッチ画像が設定されている記事のみを出力する方法

記事を一覧で出力してアイキャッチ画像があれば画像表示なければ共通画像表示じゃなくて、アイキャッチ画像が設定されている記事のみ出力ってのができるみたいなので備忘録

記事出力後に記事にアイキャッチ画像が設定されているか確認

普段使う記事出力後にアイキャッチ画像があるかないか確認する方法
理解を深めるために書き出し

<?php
$args = array(
    'post_type' => 'web',// カスタム投稿「web」
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id() , 'thumbnail' );// サムネイルサイズのアイキャッチ画像を取得
?>
<?php if (has_post_thumbnail()):// アイキャッチを持ってる記事 ?>
<img src="<?php echo $img[0]; ?>">// アイキャッチを出力
<?php else: ?>
<img src="画像がない時用のデフォルト画像">
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

こんな風にhas_post_thumbnail()使って、記事にアイキャッチがあるかどうか判断して出力とかしてた

今回は、そもそもアイキャッチ画像を持ってない記事は出力しないということなので、wp_queryのパラメーターで絞るために'meta_key'を使ってアイキャッチ画像を持つ記事のみ出力していく

というわけで以下より本題

本題、アイキャッチが設定されている記事のみ出力する方法

以前、記事が特定のカスタムフィールドで値を持っているかどうかで使った'meta_key'を使って以下のパラメーターを追加

'meta_key' => '_thumbnail_id'

上記をパラメーターに追加するだけ

<?php
$args = array(
    'post_type' => 'web',
    'meta_key' => '_thumbnail_id'// 追加
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<?php the_post_thumbnail('thumbnail'); ?>

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

これで、アイキャッチ画像が記事に設定されている記事のみ出力される

簡単だね

逆に、アイキャッチが設定されていない記事のみを出力する方法

おまけ、逆にアイキャッチ画像が設定されていない記事の出力ってどうやるんだろうって思ったのでメモ

'meta_key' => '_thumbnail_id',
'meta_compare'=>'NOT EXISTS'

'meta_compare'=>'NOT EXISTS'を追加するだけ

以前NOT EXISTS使ったら思ったように動作しなかったんだけど、NOT EXISTSってデータベース上のテーブルにレコードとして登録されてない、文字通り「NOT EXISTS(存在しない)」って意味だった

要するに「_thumbnail_id(アイキャッチ画像)」がデータベースに「NOT EXISTS(存在しない)」記事を出力するみたい

で、アイキャッチ画像って記事編集画面で消すとデータベースのレコードごと削除されるっポイ
だからNOT EXISTSでアイキャッチ画像がない記事を出力できるみたいね

普通にデータベース上でどういう挙動してるのか今まで考えたことがなかったから勉強になったわ

meta_keyって漠然とカスタムフィールドを指すのかなって思ったけど、データベースのテーブルに「meta_key」ってカラムあってそこを指してんすね
やっぱりwordpressだけの勉強より、ちゃんとSQLとかも勉強していかないと駄目だなぁっておもった

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。