SHU BLOG

BLOG NEWS ブログ

TITLE

【WordPress】アイキャッチ画像の条件分岐について解説

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【WordPress】アイキャッチ画像の条件分岐について
の解説になります!

こんな方に読んでほしい

  • WordPressを学び始めた方へ
  • WordPressのカテゴリーに画像を登録・出力について解説していきます。
  • 今回はWordPressの「アイキャッチ画像の条件分岐」について解説しております。

アイキャッチ画像について

アイキャッチ画像について

WordPressで記事を書く毎に画像の設定ができます、その画像のことをアイキャッチ画像と言います。
以下の画像のような箇所で使用することがあります。

アイキャッチ画像

アイキャッチ画像の出力方法は以下のようにまとめております。
一度コチラの記事をご確認ください。

アイキャッチ画像の設定に関するの記事

新旧エディタのアイキャッチ画像の設定を解説しております。

アイキャッチ画像の条件分岐とは

アイキャッチ画像の条件分岐とは

アイキャッチ画像がない場合は「デフォルト画像」を出力させます。
以下の画像がイメージになります。

アイキャッチ画像がない場合

コードは以下のようになります。

<?php
	$img = get_the_post_thumbnail_url( $post->ID, 'medium' );
	$src = ( $img ) ? $img : get_template_directory_uri() . '/default-img.png';
?>
<img src="<?php echo $src; ?>" alt="<?php the_title(); ?>">

mediumは画像のサイズになります。
medium、以外には以下のように変更が可能になります。

// サムネイルのサイズ
('thumbnail'); 
   
// サムネイル中サイズ
('medium');
         
// サムネイル大サイズ
('large');

// サムネイル元のサイズ
('full');

// サイズを数値で指定した場合
(array(150, 150));

サムネイルのサイズは、管理画面の 「設定」 > 「メディア」 で変更が可能になります。
get_template_directory_uriには、「デフォルト画像」のパスを指定します。
アイキャッチ画像がある場合は、

<img src="<?php echo $src; ?>" alt="<?php the_title(); ?>">

上記のコードが適用されます。

まとめ

今回はこれで以上です。

POINT
  • WordPressアイキャッチ画像の条件分岐について解説しました。
  • アイキャッチ画像の有効化は、add_theme_support('post-thumbnails');functions.phpに記述しておきましょう。
  • mediumは画像サイズになります。
  • get_template_directory_uriには、「デフォルト画像」のパスを指定します。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top