Technical
公開日: 2025年03月27日
公開日: 2025年03月27日
【WordPress】アイキャッチの表示周りの事
目次 [ 閉じる ]
デフォルトではアイキャッチの登録項目はない
デフォルトではWordPressの投稿画面にアイキャッチ画像の登録項目がなく、オリジナルテーマなどを0から制作する際にアイキャッチを使う場合function.phpにコードを記述する必要があります。
これがないです。
アイキャッチの登録項目を表示
登録項目を表示したいだけならfunction.phpに以下のコードを記述します。
//アイキャッチ画像の有効化
add_theme_support('post-thumbnails');私はオリジナルテーマを制作することが多いのでデフォルトのclassが付いてくるのが嫌なので以下にしています。
// アイキャッチ画像を有効にする。
add_theme_support('post-thumbnails');
add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
// class を削除する
$html = preg_replace('/class=".*\w+"\s/', '', $html);
return $html;
}
アイキャッチ画像をページに表示
また、投稿時に登録したアイキャッチ画像を自動で表示する場合は、各テンプレートファイルの希望場所に以下のコードを記載します。（例えばsingleページの一番上など）
<!--フルサイズ-->
<?php the_post_thumbnail('full'); ?>
<!--ラージサイズ-->
<?php the_post_thumbnail('large'); ?>
<!--ミディアムサイズ-->
<?php the_post_thumbnail('medium'); ?>
<!--サムネイルサイズ-->
<?php the_post_thumbnail('thumbnail'); ?>アイキャッチ画像のサイズについて
| full | オリジナル画像サイズ |
|---|---|
| large | 1024px * 1024px |
| medium | 300px * 300px |
| thumbnail | 150px * 150px |
私はcssで画像サイズを調整したいので、基本的にfullサイズで表示することが多いです。
アイキャッチ画像を登録しない場合に備える
以上で基本的には完成しますが、アイキャッチ画像を登録しない場合に備え、その際にnoimagesなどの画像を表示するよう、if文で記述しておくと良いでしょう。特にリストページなどはnoimagesなどの画像を用意しておくと見た目も良くなります。
<?php if ( has_post_thumbnail()): ?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<img src="画像ファイルのパス">
<?php endif; ?>
こんな具合とかです。
