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

    WordPressでランダム記事の一覧をプラグインを使わないで表示させるやり方

    先日、WordPressで最新記事の一覧をプラグインを使わないで表示さ…

  2. Monsterrat

    WordPress

    ミニマルなポートフォリオに最適なWordPressテーマ「Monsterrat」

    ミニマルなデザインのポートフォリオを作りたい時に最適なWordPres…

  3. WordPress

    WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方

    WordPressのショートコードってとても便利ですよね。AddQui…

  4. WordPress

    テーマにWordPressのウィジェットを対応させ検索フォームをカスタマイズする

    WordPressにはウィジェットという便利な機能があります。これを使…

  5. WordTwit

    WordPress

    WordTwitの設定方法や日本語化してからの使い方について

    WordTwitはWordPressで記事を投稿した時に自動でツイート…

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

    WordPress

    WordPressウィジェット内でPHPコードが使用できるプラグイン「PHP Code Widget…

    個人的にとてもうれしいプラグインを発見したので備忘録がてらメモしておき…

コメント

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP