アイキャッチ画像の画像パス取得方法
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を使用することができます。
こうすることで下層ページの共通化を進め、コーディングだけでなく、デザイナーの工数を削減し、またサイトの統一感も一元管理できるようになります。