こんにちは、のすけです。
自分でWordPressテーマを作ると必要な機能のみ入れることができ本当に便利なのですが。
デフォルトの状態では投稿のサムネイルがサポートされていません。
そこでサムネイルをサポートする方法を記載します。
投稿のサムネイルサポートする
サムネイルをサポーとさせるには、functions.phpに設定を書き込みます。
add_theme_support( 'post-thumbnails' );
投稿サムネイル – WordPress Codex 日本語版
そうすると、投稿の編集画面で「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。
もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。
一部の投稿タイプのみサムネイルをサポートする方法
例えばカスタム投稿タイプ「blog」と「kouza」にのみにサムネイルをサポートさせるためには、
add_theme_support( 'post-thumbnails', array( 'blog' ) ); // blogのみ add_theme_support( 'post-thumbnails', array( 'kouza' ) ); // kouzaのみ
テーマのテンプレートへの反映方法
サムネイルをサポートすると、次の関数を使うことで、投稿中にサムネイルが表示することができます。
// 投稿に投稿サムネイルが割り当てられているかチェックします。
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 ) ); // 他のサイズ
CSSクラスを設定する方法
Bootstrapなどでは画像用のスタイル指定などがあるため、任意のクラスを付けたいということはよくあります。
下記はクラス「img-thumbnail」を追加する例です。
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'img-thumbnail' ) ); ?>
ではまた！