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

WordPress

WordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方

WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分岐のやり方をメモがてらご紹介します。トップページなんかでアイキャッチのサイズによって表示の仕方を変えたりしたいなんて時に便利です。応用次第で色々とカスタマイズしやすくなりそうですね。

[ads_center]

get_post_thumbnail_idとwp_get_attachment_image_srcを使う

get_post_thumbnail_idでアタッチメント情報のidを取得して、wp_get_attachment_image_srcにそのidとfull(元のサイズ)を指定します。これでアイキャッチ画像の情報を取得することができます。

今回の欲しい情報としては「url」、「横幅」、「高さ」の3つです。これさえ取得できれば、あとは条件分岐を使って好きなように出力を振り分けることが可能です。

$thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメント情報のidを取得
$image = wp_get_attachment_image_src($thumbnail_id, 'full'); // アイキャッチ画像の情報を取得
$src = $image[0]; // url
$width = $image[1]; // 横幅
$height = $image[2]; // 高さ

if($width > 500) {
    echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" class="sample1" />';
} else {
    echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" class="sample2" />';
}

例えば、上記の場合は横幅が500pxより大きいサイズのアイキャッチ画像が指定されていた場合はsample1というクラス名を、それ以外はsample2というクラス名を付与する、といった振り分けになります。

ここでは分かりやすく単純な振り分けにしてみましが、こんな感じでサイズ別で色んな出力を振り分けることができるので、アイキャッチを効果的に使いたい場合は覚えておきたいところです。

アイキャッチ画像の「URL,横幅,高さ」を取得する[Wordpress]

MacのChromeとSafariで使えるショートカットキーMacのChromeやSafariで使いたいショートカットキー4選前のページ

クリック時に周りに画像が表示されるイメージギャラリーを実装できるjQueryプラグイン「PopCircle」次のページPopCircle

関連記事

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

    WordPress

    WordPressで記事タイトルの文字数制限をするやり方

    WordPressで記事タイトルの文字数制限をするやり方をメモしときま…

  2. WordPressで広告を非表示

    WordPress

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

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

  3. Quote Tweet

    WordPress

    選択したテキストをツイートできるWordPressプラグイン「Quote Tweet」

    Quote Tweetはサイト内で選択したテキストを簡単にツイートする…

  4. WordPress

    WordPressで自分だけのショートコードの作り方

    WordPressのショートコードが便利なのでちょこちょこ使い始めてま…

  5. WordPress

    WordPressで「この記事の所要時間」という読了時間を表示させてくれるプラグイン「estimat…

    とても便利なWordPressのプラグインを発見したので備忘録です。よ…

  6. WordPressでパンくずリストを設置

    WordPress

    WordPressでパンくずリストをプラグインなしで設置する簡単なやり方

    WordPressでパンくずリストをWebサイトに設置したいといった時…

コメント

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

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

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP