the_post_thumbnail() WordPress関数 テンプレートタグ

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">			


 

WordPressのおすすめ-カスタマイズ編

おすすめ

 

スポンサードリンク

スポンサードリンク