the_post_thumbnail()
アイキャッチ画像を使用する場合は、使用しているテーマのfunctions.phpに add_theme_support(‘post-thumbnails’); を記述する。
構文
the_post_thumbnail ( ①$size[オプション], ②$attr[オプション] );
参照:WordPress Codex-the_post_thumbnail()
the_post_thumbnail()の詳細
動 作
現在投稿のアイキャッチ画像を表示する。
他の投稿のアイキャッチ画像を表示する場合。get_the_post_thumbnail()を使用する。
ループ内でのみ使用可能。
返り値
返り値:なし
引 数
①$size[オプション]
(文字列|配列)初期値 : ‘post-thumbnail’
画像サイズ
キーワード(thumbnail,medium,large,full)
②$attr[オプション]
(配列)初期値:なし
imgタグに含まれる属性とその値を配列で記述
$attrが初期値なしの場合に記述される内容
$default_attr = array( 'src' => $src, 'class' => "attachment-$size", 'alt' => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ) );
the_post_thumbnail()のコード
参照:wp-includes/post-thumbnail-template.php
<?php 58 /** 59 * Display the post thumbnail. 60 * 61 * When a theme adds 'post-thumbnail' support, a special 'post-thumbnail' image size 62 * is registered, which differs from the 'thumbnail' image size managed via the 63 * Settings > Media screen. 64 * 65 * When using the_post_thumbnail() or related functions, the 'post-thumbnail' image 66 * size is used by default, though a different size can be specified instead as needed. 67 * 68 * @since 2.9.0 69 * 70 * @see get_the_post_thumbnail() 71 * 72 * @param string|array $size Optional. Image size to use. Accepts any valid image size, or 73 * an array of width and height values in pixels (in that order). 74 * Default 'post-thumbnail'. 75 * @param string|array $attr Optional. Query string or array of attributes. Default empty. 76 */ 77 function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) { 78 echo get_the_post_thumbnail( null, $size, $attr ); 79 } 114 /** 115 * Retrieve the post thumbnail. 116 * 117 * When a theme adds 'post-thumbnail' support, a special 'post-thumbnail' image size 118 * is registered, which differs from the 'thumbnail' image size managed via the 119 * Settings > Media screen. 120 * 121 * When using the_post_thumbnail() or related functions, the 'post-thumbnail' image 122 * size is used by default, though a different size can be specified instead as needed. 123 * 124 * @since 2.9.0 125 * @since 4.4.0 `$post` can be a post ID or WP_Post object. 126 * 127 * @param int|WP_Post $post Optional. Post ID or WP_Post object. Default is global `$post`. 128 * @param string|array $size Optional. Image size to use. Accepts any valid image size, or 129 * an array of width and height values in pixels (in that order). 130 * Default 'post-thumbnail'. 131 * @param string|array $attr Optional. Query string or array of attributes. Default empty. 132 * @return string The post thumbnail image tag. 133 */ 134 function get_the_post_thumbnail( $post = null, $size = 'post-thumbnail', $attr = '' ) { 135 $post = get_post( $post ); 136 if ( ! $post ) { 137 return ''; 138 } 139 $post_thumbnail_id = get_post_thumbnail_id( $post ); 140 141 /** 142 * Filters the post thumbnail size. 143 * 144 * @since 2.9.0 145 * @since 4.9.0 Added the `$post_id` parameter. 146 * 147 * @param string|array $size The post thumbnail size. Image size or array of width and height 148 * values (in that order). Default 'post-thumbnail'. 149 * @param int $post_id The post ID. 150 */ 151 $size = apply_filters( 'post_thumbnail_size', $size, $post->ID ); 152 153 if ( $post_thumbnail_id ) { 154 155 /** 156 * Fires before fetching the post thumbnail HTML. 157 * 158 * Provides "just in time" filtering of all filters in wp_get_attachment_image(). 159 * 160 * @since 2.9.0 161 * 162 * @param int $post_id The post ID. 163 * @param string $post_thumbnail_id The post thumbnail ID. 164 * @param string|array $size The post thumbnail size. Image size or array of width 165 * and height values (in that order). Default 'post-thumbnail'. 166 */ 167 do_action( 'begin_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size ); 168 if ( in_the_loop() ) { 169 update_post_thumbnail_cache(); 170 } 171 $html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr ); 172 173 /** 174 * Fires after fetching the post thumbnail HTML. 175 * 176 * @since 2.9.0 177 * 178 * @param int $post_id The post ID. 179 * @param string $post_thumbnail_id The post thumbnail ID. 180 * @param string|array $size The post thumbnail size. Image size or array of width 181 * and height values (in that order). Default 'post-thumbnail'. 182 */ 183 do_action( 'end_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size ); 184 185 } else { 186 $html = ''; 187 } 188 /** 189 * Filters the post thumbnail HTML. 190 * 191 * @since 2.9.0 192 * 193 * @param string $html The post thumbnail HTML. 194 * @param int $post_id The post ID. 195 * @param string $post_thumbnail_id The post thumbnail ID. 196 * @param string|array $size The post thumbnail size. Image size or array of width and height 197 * values (in that order). Default 'post-thumbnail'. 198 * @param string $attr Query string of attributes. 199 */ 200 return apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr ); 201 } ?>
the_post_thumbnail()を使ったコード例
投稿記事にアイキャッチ画像を挿入する。
functions.phpへの記述。
<?php add_theme_support( 'post-thumbnails' ); ?>
上記記述でダッシュボード内において下記の写真のようなアイキャッチの設定が可能になる。
content.phpやsingle.php等のアイキャッチ画像を挿入したい場所に記述
<div class="thumbnail"> <?php the_post_thumbnail(); ?> </div>
上記コードをsingle.php記述。
下記画像のようにアイキャッチ画像が表示される。
the_post_thumbnailで出力されたHTMLコード
<img width="1000" height="618" src="https://nawate.jp/nawate/wp-content/uploads/2020/06/nawate-thumb-wp.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://nawate.jp/nawate/wp-content/uploads/2020/06/nawate-thumb-wp.jpg 1000w, https://nawate.jp/nawate/wp-content/uploads/2020/06/nawate-thumb-wp-300x185.jpg 300w, https://nawate.jp/nawate/wp-content/uploads/2020/06/nawate-thumb-wp-768x475.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px">