web-dev-qa-db-ja.com

wordpress投稿の画像に自動クラスを追加する方法

Bootstrap 3を使用してレスポンシブテーマを作成したいのですが、画像をレスポンシブにする必要があるため、すべての投稿画像にCSSクラス.img-responsiveを自動的に追加する必要があります。

WordPressのfunctions.phpファイル、またはCSSクラスを自動的に追加できる他のファイルに何を追加する必要があるかを教えてください。

csswordpresstwitter-bootstrap-3wordpress-theming
16
Amit Sarker

すべての投稿画像にそれが必要なため、コンテンツのフックを追加して追加する必要があります

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;
}

今フックをコンテンツに追加します

add_filter        ('the_content', 'add_responsive_class');

ただし、すでにimgのクラスがあり、新しいクラスを追加する必要がある場合は、 jQuery addClassと同等のPHP を参照できます。または、単にこれを行うことができます。

$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");

上記のコードは機能します..私はそれを使用して、画像の遅延読み込みのためにsrcとdata-srcを削除します。それがあなたのために働くことを願っています

43
AhmadAssaf

このアプローチの方が優れています： https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image

function add_image_class($class){
    $class .= ' additional-class';
    return $class;
}
add_filter('get_image_tag_class','add_image_class');

注意点は、新しい画像を挿入すると編集ペイン内にクラスが追加され、既存の画像には影響しないことです。

28
Yaron

最も簡単な方法は、このようなCSSを使用することだと思います。

.content img { height: auto; max-width: 100%; }

ここで。contentは、投稿コンテンツを含む領域です。

注：。wp-captionクラスをオーバーライドすることもできます。

.wp-caption { width: auto !important; }
15
Syclone

同じ質問があり、この関数をfunctions.phpに追加するとうまくいきました。

function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 img-responsive"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');
12
user793487

ループで投稿を表示するとき、次のことができます：

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

詳細は https://codex.wordpress.org/Function_Reference/the_post_thumbnail を参照してください。

5
Bertrand

テーマのheader.phpファイルでjqueryコードを使用できます。

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
3
super global user

この答えがパフォーマンスに関してどれほど優れているかはよくわかりませんが、うまくいきます。これをfunctions.phpに入れてください。

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

class="img-responsiveの後にスペースが必要なので、他のクラスと結合しないように注意してください。

3
Lallex

画像をレスポンシブにするためにクラスを追加する必要はないと思います。注目の画像から高さの幅を削除するだけで、画像が確実に反応するようになります。

高さの幅を削除するためにfunction.phpにコードが挿入されています

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}
1
Mitul Shah

クラスはアップロード時に追加されませんが、画像がエディターに送信されるときに追加されます。 image_send_to_editor 1つ以上のクラスを追加するためのフィルター。 この例 はfancyboxクラスを追加します。

0
diggy

ここで述べたように、CSSですべての画像を応答可能にすることができます。

すべてのコンテンツ画像にcssクラス（ブートストラップ）.img-sensitiveを適用したい

それはLESSを使用しますが、Sassバージョンはほとんど同じです。

  img {
    @include img-responsive();
  }
0
Jordie C

私は次のコードを持っています、そして投稿は以前のバージョンからのものです...それらは動作しませんでした...

私は何をすべきか？

<figure class="image"><img class="lazyload p402_hide" alt="" 
 width="800" height="400" data-sizes="auto" data- 
src="https://br.clubnation.club/wp-content/uploads/2020/01/primeira- 
loja-oficial-de-harry-potter-sera-aberta-em-nova-york-2.jpg" data- 
 srcset="https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera-aberta- 
 em-nova-york-2.jpg 328w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-3.jpg 380w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-4.jpg 528w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-5.jpg 704w" />
 <figcaption>A loja será inaugurada no próximo verão.
 (Fonte: Warner Bros/Divulgação)</figcaption></figure>
0
PauloBoaventura
//all classes i need in a string

$classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; 

//then i use my variable

the_post_thumbnail('post_thumbnail', array( 'class' => $classes ));
0
Yolexis Reyes