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で例えばトップページに自分の指定した固定ページを読み…

  2. WordPress

    WordPressでマルチサイト化した時にアイキャッチ画像の設定が表示されない

    ローカル環境でWordPressをマルチサイト化してみたところダッシュ…

  3. WordPress

    ローカル環境のMAMPでWordPressをマルチサイト化してみる

    素人なので半日も悩んじゃいました。ローカルでWordPressをマルチ…

  4. WordPress

    WordPressのシングルページで前後の投稿やページ分割のリンクを出力

    WordPressのシングルページで記事の最後に「前の投稿」や「次の投…

  5. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

コメント

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

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

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP