【WordPress】投稿画像にclassを付与してサイズ・位置を調整する方法 │ kei-ty media

先日、WordPressの記事ページのデザインをしていた時に調べた備忘録です。

画像がでかくてデザインが。。。

WordPressの記事（シングル）ページにフルサイズの画像を配置しました。
（CSSで）img { width:100% } を指定しています。

どーん！

スマートフォンで見るのであれば問題なかったのですが、PCでは。。

画像を小さくします。

img{ 
    width:75%;
}

程よい大きさになりました。

でも、イマイチなので画像を画面のセンターにもっていきたいと思います。

img{ 
    width:75%;
    text-align: center;
}

はい、センターに配置されません。

img{ 
    width:75%;
    margin: 0 auto;
}

もちろん、これもセンターに配置されません。

p{ 
    text-align: center;
}

ようやく画像がセンターに配置されました。

ですが、本文までセンター揃えになってしまいました。当然ですが。。

投稿記事内の画像だけ、小さくしてセンターに寄せたいのだが
どうするか？？？

通常記事内に画像を挿入すると、img の class はこういった感じになります。

img class="aligncenter size-full wp-image-xxx"

テーマのfunctions.phpに以下を記述します。
作業の前にfunctions.phpは必ずバックアップをとっておいてください。

//投稿画像にオリジナルのclass名を付与
function my_image_tag_class($class){
 return "{$class} post-image";
}
add_filter('get_image_tag_class', 'my_image_tag_class');

2行目の「”post-image”」の部分は任意のclass名に変えてください。

functions.phpを保存し、画像を再度投稿すると img の class に『post-image』が追加されます。

img class="alignnone size-full wp-image-xxx post-image"

上記で付与したclass（ここでは”post-image”）が付いているimgタグの親タグ（pタグ）に、更にclassを付与します。

jQueryを先に読み込んでおいてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

そしてfooter.phpの</body>の直前へ以下を記述します。

<script>
  $(function() {
  $('p:has(img.post-image)').addClass('parent');
  });
</script>

ここでは、投稿内で .post-image というclassが付いているimgタグの親タグ（Pタグ）に「”parent”」というclassを付与しました。

<p class="parent">
    <img class="alignnone size-full wp-image-xxx post-image">
</p>

という風になります。

親タグにclassが付与されたので、CSSを書き直します。

p.parent{
	text-align: center;
}
p.parent img{
	width: 75%;
}

イメージ通りとなりました。

特定の子要素を持つ親要素にclassを付与してCSSを適用する方法でした。

お疲れサマンサ！