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]

関連記事

  1. WordPress

    WordPressでアイキャッチ画像にキャプションを表示させる設定方法

    WordPressのアイキャッチ画像にキャプションを付けたい時ってあり…

  2. Last Updated Shortcode

    WordPress

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

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

  3. WordPress

    WordPressのクイックドラフト機能を使ってみた

    そういえば、WordPress 3.8になってから新しくなったクイック…

  4. Tetris

    WordPress

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

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

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

    WordPress

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

    WordPressで最新記事の一覧をウィジェットやプラグインを使わない…

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

    WordPress

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

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

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP