Wordpress スラッグ、ポストタイプを使って画像を切り替える

最近WordpressでWebサイトを構築する案件が増えてきており、その中でも各ページごとにビジュアル画像やタイトルが変わっているデザインをもらうことが増えてきた。
コーディングのルール上imgタグへはalt属性へ代替えテキストを記述、また、レスポンシブサイト以外では基本的に画像のWidth属性とHeight属性を記述しなければならず、ちょっと面倒くさい……
うまく自動化できないかな〜と考えた結果をメモメモ。

あくまでもメモなので、用出てくる語などは別途お調べください……

もっといい方法がある！って方はコメント等で教えていただけると助かります。

やりたいこと

• 現在見ているページを判断して、特定の画像を切り替えたい。
• 指定したaltテキストを記述したい。
• 画像のwidth値とheight値を自動的に取得して記述したい。
• お知らせなどの投稿ページはカスタムポストで。そこも画像切り替えしたい。

各ページのURLを決める

Wordpressのダッシュボード -> 固定ページ -> 新規追加を選択し、
新規の固定ページを追加する。
固定ページのタイトルを入力すると、その下にパーマリンク（その固定ページのURL）が表示されるので、編集ボタンを押して任意のURLへ変更。
http:example.com/hogehoge (このhogehogeがページのスラッグ)

切り替えに使う画像の名前を変更

今回はtext_main_ページスラッグ.拡張子という命名規則で指定。
この辺りの縛りはお好みで。拡張子は固定仕様。
text_main_about.png、text_main_products.pngなど

functions.phpに以下のコードを記述し関数を作成

function getImageSwitcher() {
  // 初期化
  $image_size = array();
  $image_alt = '';
  $alt_flag = '';

  // スラッグ、ポストタイプ取得
  // シングルページの場合タイトルがスラッグ判定を受けるのでポストタイプを取得
  // シングルページでの切り替えがない場合、スラッグ名だけでOK
  $page_name = get_page( get_the_ID() );
  $slug_name = $page_name->post_name;
  $post_type = $page_name->post_type;

  // 現在のページがシングルページの場合、$alt_flagにポストタイプを
  // 固定ページの場合はスラッグ名を$alt_flagへ格納
  if ( is_single() ) {
    $alt_flag = $post_type;
  } else {
    $alt_flag = $slug_name;
  }

  // 画像代替えテキスト設定
  switch ( $alt_flag ) {
    
    case 'news':
      $image_alt = 'お知らせ';
      break;
    case 'privacy_policy':
      $image_alt = 'プライバシーポリシー';
      break;
    case 'site_policy':
      $image_alt = 'サイトポリシー';
      break;
    case 'sitemap':
      $image_alt = 'サイトマップ';
      break;
    case 'qa':
      $image_alt = 'よくある質問';
      break;
    case 'contact':
    case 'confirm':
    case 'thanks':
      $image_alt = 'お問合せ';
      break;

    default:
      break;
  }

  // シングルの場合タイトルがスラッグになる為、post_typeで画像サイズ取得
  // $img_tagへは生成するImgタグを格納
  // getimagesize()：　画像サイズを取得するphp関数
  // getimagesize()はhttp:// https:// でアクセスする為、BASIC認証だと401エラーになり表示されない
  if ( is_single() ) {
    $image_size = getimagesize( get_template_directory_uri() . '/assets/img/text_main_' . $post_type . '.png');
    $img_tag = '<img src="'. get_template_directory_uri(). '/assets/img/text_main_'. $post_type .'.png" alt="'. $image_alt .'" '. $image_size[3] .'>';
  } else {
    $image_size = getimagesize(get_template_directory_uri().'/assets/img/text_main_'. $slug_name .'.png');
    $img_tag = '<img src="'. get_template_directory_uri(). '/assets/img/text_main_'. $slug_name .'.png" alt="'. $image_alt .'" '. $image_size[3] .'>';

  }

  // imgタグ吐き出し
  echo $img_tag;
}

画像切り替えをしたい場所へ作成した関数を記述

index.php

<div class="mainimage_text">
  <?php getImageSwitcher();?>
</div>

特定のページのみに使いたい場合、Wordpressであらかじめ用意されているis_front_page()関数やis_page()関数での条件分岐と併用すると良いかも。