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. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP