アイキャッチ画像を出力するテンプレートタグ(& object-fit)

ワードプレス

2021-01-31

分岐でアイキャッチ画像を表示させたい!

アイキャッチ画像を設定しない場合、何か代わりの画像を出力させたい

こちらはアイキャッチ画像が設定されていない場合「no-image.png」を表示させる例です。
画像のurl、alt、width、heightなどを適したものに書き換えます。

例)
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' ); //カッコ内はアイキャッチ画像のサイズを指定(初期値は150×150px) ?> 

<?php else: // それ以外 ?>
<img src="<php echo get_stylesheet_directory_uri(); ?>/images/no-image.png" alt="no image" width="100" height="100" />
<?php endif; ?>

 

最初の画像をアイキャッチ画像にする設定をしているときは…

functions.phpでページの最初の画像をアイキャッチ画像にする設定をしている場合の分岐例です。
設定についてはこちら

例)
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' );//カッコ内はアイキャッチ画像のサイズ(初期値は150×150px) ?> 

<?php else: // それ以外 ?>
<img src="<?php echo catch_that_image(); //ページの最初の画像 ?>" alt="<?php the_title(); ?>"/> 

<?php endif; ?>

 

アイキャッチ画像の表示設定

アイキャッチ画像にクラスを付与する場合

例)
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'news-eyecacth' ) ); ?>

 

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

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

カッコ内の「thumbnail」はサイズの設定です。
画像サイズについて何も変更していない場合、デフォルトは下記のサイズになっています。

thumbnail(サムネイル) …150 x 150px
medium(中サイズ) …300 x 300px
large(大サイズ) …1024 x 1024px
full(最大サイズ) …アップした画像のサイズ

下記のように、数値を指定することも。こちらの例は400×300pxで出力されます。

<?php the_post_thumbnail( array(400,300) ); ?>

 

新着一覧などで画像を大きめに配置したら、画質が悪くなっていたことはないですか?
サイズ設定が初期値のままのthumbnailになっていて、サムネイルサイズを枠の大きさに引き伸ばしているからかもしれないですね。

object-fitを使って画像の比率を変えずに画像サイズを指定したい

cssのプロパティ「object-fit」は、画像の比率を変えずに縦横のサイズを指定できます。
例えば150 x 150pxの画像を100 x 150pxの枠に表示したい場合、横が細くなった変な比率になってしまいますよね。
それを「object-fit」なら、はみ出た部分をカットしたり、余白を作って全体を表示させたりを指定できます。

例)
object-fit: cover; /*はみ出た部分をカット*/
object-fit: contain; /*余白を作って全体を表示*/

 

とても便利ですね!
ただIE・Edgeでは「object-fit」が効かないので「ofi.min.js」で対応させます。
ofi.min.jsのダウンロードはこちら

「object-fit」をIE・Edgeにも対応させる

まずは下記をbodyタグ直前に配置

例)
ofi.min.jsを読み込み
<script src="<php echo get_stylesheet_directory_uri(); ?>/js/ofi.min.js"></script>

ofi.min.jsを実行
<script>
  objectFitImages('.object-fit-image');
</script>

 

続いてcssにスタイルを記述

例)
.object-fit-image{
object-fit: cover;
font-family: 'object-fit: cover;';
}

 

htmlにクラスを指定

例)
<img class="object-fit-image" src="images/aaa.jpg" alt="" />

 

アイキャッチ画像の出力にIE・Edge用のスタイルを指定

例)
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>  
<?php the_post_thumbnail('thumbnail', array('class' => 'object-fit-image')); //クラスobject-fit-imageを設定 ?>

<?php else: // それ以外 ?>
<img src="<php echo get_stylesheet_directory_uri(); ?>/images/no-image.png" alt="no image" class="object-fit-image"/>
<?php endif; ?>

 

-ワードプレス

関連記事

ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。 「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね! WordPressでは編集画面右下の「アイキャッチ画像を設 …

WordPressのお引っ越し。アイキャッチ画像の移行も大丈夫?

プラグインを使ってWordPressを移行する WordPressの移行で今よく使っているのが、アイキャッチ画像もちゃんと移してくれる「Attachment Importer」です。(「WordPre …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

カスタム投稿プラグイン「Custom Post Type UI」のお引っ越し

カスタム投稿の移行 「Custom Post Type UI」は、簡単にカスタム分類を設定して独自の投稿タイプを作れるプラグインです。function.phpに記述せずにカスタム投稿を作成できるのは初 …

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。