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でオリジナルテーマを作成する時などにチェックしてくれるプラグイン「Theme-Ch…

    このプラグインはすごいですね。自作のテーマを作成した時なんかにこれを使…

  2. WordPress

    WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方

    WordPressのショートコードってとても便利ですよね。AddQui…

  3. Quote Tweet

    WordPress

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

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

  4. WordPress

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

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

  5. WordPress

    WordPressのheader.php内でよく使いそうな関数などをまとめてみた

    WordPressで自作のテーマを作成する時にheader.phpでよ…

  6. ベストなWordPressテーマ集

    WordPress

    無料&有料のベストなWordPressテーマ集(2014年8月)

    ベストなWordPressテーマ集(無料&有料、2014年8月)「Be…

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP