WordPress:アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット

WordPress:アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット

WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。

基本的な動作

以下では2通りの方法をあげますが、いずれも大まかには下記のような動きになっており、画像とalt属性を条件に応じて出力するというものになります。

画像
  • アイキャッチが登録されていたらそのまま使用。
  • アイキャッチが未登録の場合、記事内の画像をアイキャッチとして使用。
  • アイキャッチが未登録且つ記事内にも画像がない場合、代替画像をアイキャッチとして使用。
alt属性
  • アイキャッチが登録されており「代替テキスト」があれば、そのままaltとして使用。
  • アイキャッチが登録されており「代替テキスト」ない場合、「タイトル」の内容をaltとして使用。
  • アイキャッチが登録されており「代替テキスト」も「タイトル」もない場合、記事のタイトルをaltとして使用。
  • アイキャッチが未登録で記事内の画像または代替画像を使用する場合は、いずれも記事のタイトルをaltとして使用。

1. the_post_thumbnail()をカスタマイズする

簡単にアイキャッチを表示することができる関数のthe_post_thumbnail()で出力される内容をフックを使ってカスタマイズする方法です。
実装にはfunctions.phpに下記のように記述します。

functions.php

add_filter( 'post_thumbnail_html', 'nxw_post_thumbnail_html', 10, 3 );
function nxw_post_thumbnail_html( $html, $post_id, $post_image_id ) {
  if ( empty( $html ) ) {
    preg_match( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_the_content( $post_id ), $matches );
    $thumbnail_url = ! empty( $matches[1] ) ? $matches[1] : get_theme_file_uri( 'images/no-thumbnail.jpg' );
    $thumbnail_alt = get_the_title( $post_id );
    $html = sprintf(
      '<img src="%s" alt="%s">',
      esc_url( $thumbnail_url ),
      esc_attr( $thumbnail_alt )
    );
  } else {
    $thumbnail_alt = get_post_meta( $post_image_id, '_wp_attachment_image_alt', true );
    $thumbnail_title = get_the_title( $post_image_id );
    if ( empty( $thumbnail_alt ) ) {
      $thumbnail_alt = $thumbnail_title ? $thumbnail_title : get_the_title( $post_id );
      $html = preg_replace( '/alt=""/', 'alt="' . $thumbnail_alt . '"', $html );
    }
  }

  return $html;
}

あとは、いつも通りアイキャッチを表示したい箇所でthe_post_thumbnail()を、変数に格納などしたいのであればget_the_post_thumbnail()といったように使い分ければ、上に書いた「基本的な動作」の動きで出力されます。
特定の記事を指定するとかサイズを指定したい場合は、get_the_post_thumbnail( 000, 'medium' );get_the_post_thumbnail( $post_id, $size, $attr );)のような形で記述してください。

2. 独自の関数をつくる

こちらは上とは違って「基本的な動作」をしてくれる関数を独自でつくる方法になります。
まずは下記をfunctions.phpに記述します。

functions.php

if ( ! function_exists( 'nxw_get_post_thumbnail' ) ) {
  function nxw_get_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
    if ( has_post_thumbnail( $post_id ) ) {
      $thumbnail_id = get_post_thumbnail_id( $post_id );
      $thumbnail_url = wp_get_attachment_image_url( $thumbnail_id, $size );
      $thumbnail_alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
      $thumbnail_title = get_the_title( $thumbnail_id );

      if ( empty( $thumbnail_alt ) ) {
        $thumbnail_alt = $thumbnail_title ? $thumbnail_title : get_the_title( $post_id );
      }
    } else {
      preg_match( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_the_content( $post_id ), $matches );
      $thumbnail_url = ! empty( $matches[1] ) ? $matches[1] : get_theme_file_uri( 'images/no-thumbnail.jpg' );
      $thumbnail_alt = get_the_title( $post_id );
    }

    return sprintf(
      '<img src="%s" alt="%s">',
      esc_url( $thumbnail_url ),
      esc_attr( $thumbnail_alt )
    );
  }
}

if ( ! function_exists( 'nxw_the_post_thumbnail' ) ) {
  function nxw_the_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
    echo nxw_get_post_thumbnail( $post_id, $size );
  }
}

上記記述後、アイキャッチを表示したい箇所で<?php nxw_the_post_thumbnail(); ?>と記述すれば、上で書いた基本的な動作の動きで出力されます。
サイズはthe_post_thumbnail()と同じように'post-thumbnail'をデフォルトで指定しているので、他のサイズの場合は呼び出し時や上記コード内の$sizeを変更するなどしてください。
また、nxw_the_post_thumbnail()の場合は基本的にループ内でそのまま表示させるときに使用する想定になっているので、ループ外とか変数に格納などしたいときはnxw_get_post_thumbnail()を使用し、特定の記事を指定するとかサイズを指定したい場合は、nxw_get_post_thumbnail( 000, 'medium' )といった形でパラメータ指定することで対応できます。


2通りの方法をあげましたが、「1. the_post_thumbnail()をカスタマイズする」については、既にテーマ内でthe_post_thumbnail()を多用しているのでそれらを書き換えずに実装したいとかあまり独自で関数を増やしたくない場合に、「2. 独自の関数をつくる」の場合は0からテーマを作るときやthe_post_thumbnail()の動きはそのまま残したいとき、the_post_thumbnail()使うと付与されるclass属性などが不要で取り除いたimgで主に出力したいといった感じで使い分けることができるかと思います。

今回紹介したこの方法は冒頭にも書いたように画像とalt属性を条件に応じて出力するというものになるので、その他の属性もカバーする必要があるとかalt属性の選択方法を変えたい場合は、条件や出力内容を追加・変更するなどしてください。

Close the search window,
please press close button or esc key.