サポート » テーマ » サムネイル画像への複数のクラス設定方法

  • 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件中)
  • これはいかがでしょうか。

    
    the_post_thumbnail('post-thumbnail', ['class' => 'news-image web-image']);
    
    • この返信は1ヶ月、 1週前にAoba Momouchiが編集しました。

    こんにちは

    最初のクラスを追加する正規表現が怪しい気がします。
    それだと1つのときも反映されないと思うのですが、実際に出力されている HTML では1つのときは正しくweb-imageクラスが追加されるが、2つのときは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)

    munyaguさん

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

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

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

    スレッド開始 yuuui0213

    (@yuuui0213)

    Aoba Momouchiさん

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

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

    すっきりしました!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。