はりうすブログ (のすけのメモ)

はりうす代表 ”のすけ”のブログです

WordPressのテーマにサムネイルをサポートさせる

こんにちは、のすけです。

自分でWordPressテーマを作ると必要な機能のみ入れることができ本当に便利なのですが。

デフォルトの状態では投稿のサムネイルがサポートされていません。

そこでサムネイルをサポートする方法を記載します。

投稿のサムネイルサポートする

サムネイルをサポーとさせるには、functions.phpに設定を書き込みます。

add_theme_support( 'post-thumbnails' ); 


投稿サムネイル - WordPress Codex 日本語版

そうすると、投稿の編集画面で「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。

f:id:hollywis:20180927144052p:plain

もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。

一部の投稿タイプのみサムネイルをサポートする方法

例えばカスタム投稿タイプ「blog」と「kouza」にのみにサムネイルをサポートさせるためには、

add_theme_support( 'post-thumbnails', array( 'blog' ) );          // blogのみ
add_theme_support( 'post-thumbnails', array( 'kouza' ) );           // kouzaのみ


関数リファレンス/add theme support - WordPress Codex 日本語版

テーマのテンプレートへの反映方法

サムネイルをサポートすると、次の関数を使うことで、投稿中にサムネイルが表示することができます。

// 投稿に投稿サムネイルが割り当てられているかチェックします。
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

WordPressループの中で例えば、本文を表示するthe_content()の前で設定するなどできます。
has_post_thumbnail()でサムネイルが設定されているかを確認し、the_post_thumbnail()で実際に表示しています。

表示サイズを変える方法

次のように任意のサイズに変更することができます。

the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

テンプレートタグ/the post thumbnail - WordPress Codex 日本語版より

CSSクラスを設定する方法

Bootstrapなどでは画像用のスタイル指定などがあるため、任意のクラスを付けたいということはよくあります。

下記はクラス「img-thumbnail」を追加する例です。

<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'img-thumbnail' ) ); ?>

ではまた!