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

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

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

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

    WordPress

    WordPressの囲み型ショートコードの基本的な使い方

    WordPressのショートコードはとても便利で色々なことができるんで…

  3. ベストなWordPressテーマ集

    WordPress

    無料&有料のベストなWordPressテーマ集(2014年8月)

    ベストなWordPressテーマ集(無料&有料、2014年8月)「Be…

  4. WordPress

    指定した親ページの子ページを取得してみる

    前回、「WordPressで指定した固定ページを読み込む方法」を書いた…

  5. WordPress

    WordPressのheader.php内でよく使いそうな関数などをまとめてみた

    WordPressで自作のテーマを作成する時にheader.phpでよ…

  6. WordPressアップデートでアイコンが表示されない時の対処方法

    WordPress

    WordPress 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP