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. WordPressで広告を非表示

    WordPress

    WordPressで指定したタグを付けると広告を非表示にできる設定方法

    意外と設定しておくと便利だと思ったのでメモがてらご紹介します。Word…

  2. Last Updated Shortcode

    WordPress

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

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

  3. WordPress

    記事コピー防止策になるかもしれないWordPressプラグイン「RSS Footer」

    RSS FooterというWordPressのプラグインなんですが、こ…

  4. Daily Dish

    WordPress

    写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」

    Daily DishというWordPressテーマがとてもカッコよかっ…

  5. WordPress

    シングルページに同一カテゴリーの記事一覧を表示するカスタマイズ

    WordPressのシングルページの記事の下に現在表示されている記事と…

  6. Tetris

    WordPress

    レスポンシブに対応したmasonry風のフリーのWordPressテーマ「Tetris」

    Tetrisという素敵なフリーのWordPressテーマを見つけたので…

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP