WordPress

WordPressでアイキャッチ画像を使う場合のサイズ設定や画像ありなし時の振り分けなど

WordPressにあるアイキャッチ画像がとても便利で、自分もWordPressでサイトを作る時は大体設置するようにしています。で、その時の画像サイズの設定やアイキャッチ画像を条件による振り分け(画像がある時とない時など)を整理する意味で簡単にまとめてみました。

[ads_center]

アイキャッチ画像の使い方

アイキャッチ画像を使うための流れとしては「functions.phpを設定」→「テーマ内で出力」といった具合で使っていきます。

自分のテーマでアイキャッチを使えるようにする

ということでまずは自分のテーマでアイキャッチを使えるようにしていきます。functions.phpに以下を記述することで有効になります。

<?php add_theme_support('post-thumbnails'); ?>

この時、サイズなんかを指定したい場合は以下も追加してあげます。

set_post_thumbnail_size(300, 200, true );

上記は横300px、縦200pxの切り抜きモードです。

リサイズモードの場合はtrueは指定しません。

set_post_thumbnail_size(300, 200);

切り抜きモードやリサイズモードの具体的な説明としては以下のサイトが分かりやすいかと思います。

とりあえずこれでアイキャッチを使う準備はできました。次に実際にテーマで使われるテンプレートタグです。

アイキャッチ画像を表示させる

以下はアイキャッチ画像のテンプレートタグの一覧です。2.9以降から使用可能です。

the_post_thumbnail
ループ内で現在の投稿の投稿サムネイルを表示
get_the_post_thumbnail
現在または指定した投稿の投稿サムネイルを取得
has_post_thumbnail
現在または指定した投稿に投稿サムネイルがあるか判定
get_post_thumbnail_id
現在または指定した投稿の投稿サムネイル ID を取得

色々ありますが、単純にアイキャッチ画像を出力したい場合はテーマのループ内で表示したい場所に以下のように記述します。

<?php the_post_thumbnail(); ?>

また、画像をリサイズしたい場合にはthe_post_thumbnail()に以下ようなパラメータを渡すことで変更できます。

the_post_thumbnail( array(100,100) );

この他にもthumbnail、medium、largeといったキーワードでの指定も可能です。

the_post_thumbnail('thumbnail');       // サムネイル
the_post_thumbnail('medium');          // 中サイズ
the_post_thumbnail('large');           // 大サイズ

アイキャッチ画像がある時とない時で振り分けるhas_post_thumbnail()

毎回かならずアイキャッチ画像を入れるなら特にいらないかもしれませんが、各記事によってアイキャッチを挿入したりしなかったりする場合にはhas_post_thumbnailを使うことで、各条件による表示を振り分けることができます。使い方はこんな感じです。

if(has_post_thumbnail()) {
    // アイキャッチ画像を挿入した時の処理
} else {
    // アイキャッチ画像がない時の処理
}

もうちょっと実用的に書いてみるとこんな感じですかね。

<?php if(has_post_thumbnail()): ?>
    <div><?php the_post_thumbnail(); ?></div>
<?php endif; ?>

これで、アイキャッチがある時はそれを表示して、なければそのままスルーです。

ということで、これからアイキャッチ画像を設置したいっていう方は、結構使いやすいかと思うのでオススメです。

jQueryでウィンドウサイズによって処理を変えるjQueryでアニメーションを遅らせるにはdelayを使えばいいらしい前のページ

話題のiPhoneのTODO管理アプリ「Clear」を使ってみた次のページ

最近の記事

  1. FUNLOGY スピーカー
  2. 聖剣伝説 VISIONS of MANA
  3. エルデの追憶
  4. コーヒー豆
  5. マレニア様……
PAGE TOP