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; ?>

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

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

関連記事

  1. WordPress

    WordPressで人用のサイトマップを作ってくれるプラグイン「PS Auto Sitemap」の使…

    WordPressで人に見せるための人用サイトマップを簡単に作成してく…

  2. WordPressのログイン時のツールバー

    WordPress

    ブログなどでFlickrの転載可能な画像を使用する時のクレジット表示するためのWordPressショ…

    ブログなどでコンテンツに関連した画像を挿入したいといったことがあるかと…

  3. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

  4. WordPress

    MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順

    久しぶりにMAMPを使って新しいWordPressのローカル環境を作っ…

  5. Last Updated Shortcode

    WordPress

    最後に更新された日付時間をショートコードで表示できるWordPressプラグイン「Last Upda…

    WordPressの記事内に最後に更新した日付時間を表示できるWord…

  6. WordPress

    WordPressでアイキャッチ画像にキャプションを表示させる設定方法

    WordPressのアイキャッチ画像にキャプションを付けたい時ってあり…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP