Liberty

こんにちは、yutaです。

WordPressでオリジナルテーマを制作している時にアイキャッチ画像の大きさ(width/height)の指定が上手くいかず悩まされたので、やり方をメモしておきます。

1.wp-post-imageはWordPress側のクラス
2.imgタグに付加されるwidth/height属性を削除する命令をfunctions.phpに追加する

wp-post-imageはWordPress側のクラス

wp-post-imageはWordPress側で用意されているクラスで、アイキャッチ画像の<img>タグに対して自動で付加されます。

例えば、WordPress関数のthe_post_thumbnail()を実行すると以下のようなHTMLが生成されます。

<img src=“現在の投稿に設定されているアイキャッチ画像のURL” class = “wp-post-image”>

※実際には、この他にも画像の大きさに応じたclassが更に付加されるのですが、このあたりの詳細は「WordPressCodexの投稿サムネイル」を参照してください。

というわけで、WordPress側で自動的にwp-post-imageというクラスを割り当ててくれるので、「CSSでwp-post-imageを指定して画像サイズを変更すればいいじゃん」と思ったのですが上手くいきませんでした。

2.imgタグに付加されるwidth/height属性を削除する命令をfunctions.phpに追加する

先ほどwp-post-imageクラスをCSSで指定して画像サイズを変更しようとしたが上手くいかなかったという話をしましたが、これはthe_post_thumbnail()やget_the_post_thumbnail()を実行した時にWordPressが生成するアイキャッチ画像の<img>タグにwidth/height属性が付加されるためでした。つまり、

<img src=“…” width=“100px” height=“100px” class=“wp-post-image”>

のような<img>タグの場合は、CSSでwp-post-imageクラスに対してwidthやheightを指定しても<img>タグ内に記載されているwidthやheight属性を優先して適用するためCSS側の指定が効かない状態になっていました。

というわけで、<img>タグにあるwidth/height属性を消してしまえばCSS側での指定が効くようになるので、そのための命令を以下のとおりfunctions.phpに追加しました(functions.phpの一番下に下記コードをコピペするだけです)。

add_filter( 'post_thumbnail_html', 'custom_attribute2' );
function custom_attribute2( $html ){
    // width height を削除する
    $html = preg_replace('/(width|height)="\d*"\s/', '', $html);
    return $html;
}

これで、style.cssにwp-post-imageクラスのスタイルを記述することで、アイキャッチ画像の大きさ(もちろんその他のスタイルも)を指定できるようになりました。

一応、CSS側の記述も載せておきますね。

.wp-post-image{
/*アイキャッチ画像に適用させたいスタイルを記述*/
width: 100%; /*などなど・・・*/
}