サムネイル画像への複数のクラス設定方法

yuuui0213
(@yuuui0213)

3年、 10ヶ月前

functions.phpでサムネイル画像に複数のクラスを設定するにはどうしたらいいでしょうか？

CSSでそれぞれ設定した大きさや位置を適応させたいと思っています。
custom_attributeを複数設定してそれぞれにクラスをつけても上手く行きませんでした。
また、下記のようにまとめても上手く行きませんでした。

add_filter( ‘post_thumbnail_html’, ‘custom_attribute’ );
function custom_attribute( $html ){
$myclass = ‘news-image web-image’; // クラス名
return preg_replace(‘/class=”.*\w+”/’, ‘class=”‘. $myclass .'”‘, $html);
}

また、大きさを削除するコードも記載しています。

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

ひとつのクラスにするときちんと反映されます。
$myclass = ‘web-image’; // クラス名

4件の返信を表示中 - 1 - 4件目 (全4件中)

Aoba Momouchi
(@aoixtreme)

3年、 10ヶ月前
これはいかがでしょうか。
```
the_post_thumbnail('post-thumbnail', ['class' => 'news-image web-image']);
```
- この返信は3年、 10ヶ月前にAoba Momouchiが編集しました。
munyagu
(@munyagu)

3年、 10ヶ月前
こんにちは

最初のクラスを追加する正規表現が怪しい気がします。
それだと１つのときも反映されないと思うのですが、実際に出力されている HTML では１つのときは正しくweb-imageクラスが追加されるが、２つのときはnews-image web-imageが追加されないということでしょうか・・・

正規表現のパターンは'/class=".*?"/'が正しいように思います。
また、そのまま使うデフォルトで設定されているクラスもなくなってしまうので、以下のような感じじゃないでしょうか。
```
function custom_attribute( $html ){

	$pattern = '/class="(.*?)"/';
	$myclass = 'news-image web-image';

	return preg_replace($pattern, 'class=”${1} '. $myclass .'”', $html);
}
```
（これも手抜きで、デフォルトでクラスが設定されていない場合、クラス属性の前にスペースが入ってしまいますが、よしなにしてください）
トピック投稿者 yuuui0213
(@yuuui0213)

3年、 10ヶ月前

munyaguさん

ご回答ありがとうございます！
おっしゃる通りです。
１つのときは正しくweb-imageクラスが追加されましたが、２つのときはnews-image web-imageが追加されませんでした。

functions.phpファイルに、
改良するのが自分にはまだまだ難しいので
提示してくださったコードをそのままコピペしてみましたが、表示されなくなってしまいました。

何が違うのかモヤモヤしています。

トピック投稿者 yuuui0213
(@yuuui0213)

3年、 10ヶ月前

Aoba Momouchiさん

ご回答ありがとうございます！
ご回答をヒントに、

archive.phpでサムネイル表示させている部分に下記のクラス追加コードを付ければできました。
the_post_thumbnail(‘ ‘, array(‘class’=>’クラス名’));)
functions.phpはwitdthとheightを削除するだけでOKでした。

すっきりしました！