アイキャッチ画像の画像パス取得方法
WEB
WordPressにて下層ページのメイン画像を「アイキャッチ」「ページタイトル」「ページスラッグ」で構成したい
例）よくあるアイキャッチ取得方法
|
1 2 3 |
<?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を取得
使用方法
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.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を使用することができます。
こうすることで下層ページの共通化を進め、コーディングだけでなく、デザイナーの工数を削減し、またサイトの統一感も一元管理できるようになります。
