アイキャッチ画像の画像パス取得方法

MAGAZINE

: Twitter

: Facebook

KEYWORDS: PHP SCSS Wordpress

アイキャッチ画像の画像パス取得方法

WEB

WordPressにて下層ページのメイン画像を「アイキャッチ」「ページタイトル」「ページスラッグ」で構成したい

例）よくあるアイキャッチ取得方法

<?php if(has_post_thumbnail()): ?>
  <?php the_post_thumbnail(); ?>
<?php endif; ?>

しかしこれだと画像パス以外にも取得してしまう。
ではどのようにすればいいのか？

アイキャッチの情報取得方法

画像の情報を取得する

wp_get_attachment_image_src($attachment_id, $size, $icon)
※アイキャッチ画像のパスやサイズを配列で返してくれる
$attachment_idには、画像のIDを渡す
$sizeは、使いたい画像サイズを指定（thumbnail, medium, large, full）
$iconは真偽値（true, false）初期値はfalse

画像IDの取得

get_post_thumbnail_id()
※アイキャッチのIDを取得

使用方法

$attachment_id = get_post_thumbnail_id(); // 画像IDを変数に代入
echo $imgID; // ここで画像パスがきちんと取得できるか確認

$img = wp_get_attachment_image_src($attachment_id, 'full', true); // アイキャッチ画像の配列を変数に代入
var_dump($img); // ここで画像の変数が返ってくるかどうか確認

var_dumpの結果
[0] => url
[1] => width
[2] => height

上記のように配列が返ってくれば使用できる

実用例

HTML

<?php
  global $post;
  $main_id = get_post_thumbnail_id();
  $page_main = wp_get_attachment_image_src($main_id, 'full', true);
  $slug = $post->post_name;
?>
<div class="page__main" style="background-image: url('<?php echo $page_main[0]; ?>');">
  <div class="page__mainInner">
    <h1 class="page__title"><?php the_title(); ?></h1>
    <p class="page__titleSub"><?php echo $slug; ?></p>
  </div>
</div>

SCSS

.page{
  &__main{
    background-size: cover;
    background-position: left top;
    min-height: 30vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 30px;
    &Inner{
      max-width: 1300px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      text-align: right;
      display: flex;
      flex-direction: column;
    }
  }
  &__title{
    font-size: 20px;
    order: 1;
    &Sub{
      font-size: 38px;
      line-height: 1;
      margin-bottom: 0;
      text-transform: uppercase;
      order: 0;
    }
  }
}

完成イメージ

こうすることでアイキャッチ画像を背景にし、タイトルとサブタイトルにページ名とslugを使用することができます。

こうすることで下層ページの共通化を進め、コーディングだけでなく、デザイナーの工数を削減し、またサイトの統一感も一元管理できるようになります。