So fügen Sie eine automatische Klasse im Bild für den WordPress-Post hinzu

Lesezeit: 7 Minuten

So fugen Sie eine automatische Klasse im Bild fur den
Amit Sarker

Ich möchte mit Bootstrap 3 ein responsives Design erstellen. Allerdings muss ich die CSS-Klasse automatisch hinzufügen .img-responsive zu jedem Beitragsbild, weil ich die Bilder benötige, um ansprechbar zu sein.

Bitte schlagen Sie mir vor, was ich in WordPress hinzufügen muss functions.php Datei oder eine andere Datei, mit der ich die CSS-Klasse automatisch hinzufügen kann.

So fugen Sie eine automatische Klasse im Bild fur den
Ahmad Assaf

Da Sie es für alle Ihre Post-Bilder haben müssen, müssen Sie einen Haken für den Inhalt hinzufügen und hinzufügen

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;
}

Fügen Sie nun den Haken zum Inhalt hinzu

add_filter        ('the_content', 'add_responsive_class');

Wenn Sie jedoch bereits Klassen für das img haben und eine neue Klasse hinzufügen müssen, können Sie auf das PHP-Äquivalent zu jQuery addClass verweisen. Oder Sie können einfach Folgendes tun:

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

Der obige Code funktioniert. Ich verwende ihn, um src und data-src für das verzögerte Laden von Bildern zu entfernen. Hoffe, es funktioniert für Sie

  • Gute Verwendung von DOMDocument. Ich sehe viele Leute, die die Verwendung von Regex für diese Art von Anwendung vorschlagen. +1

    – Gregor L

    22. Oktober 2014 um 0:23 Uhr

  • Regex ist viel schneller als das. erwägen Sie auch, es mit Javascript zu tun. Mit jquery, das Sie vermutlich haben, wäre das einfach $(“#main-content”).find(“img”).addClass(“img-responsive”)..

    – Juan

    27. Februar 2015 um 10:14 Uhr

  • @Juan andere Leute schlugen vor, auch eine JS-Lösung zu haben, und die Antwort lautet erneut, dass dies bedeutet, dass die Seite aus PHP generiert werden muss, dann wird diese Funktion beim Laden des Dokuments oder einem anderen von Ihnen definierten Hook ausgeführt. Es ist besser, die Klassen zu haben In der generierten PHP-Datei sparen Sie unnötige DOM-Manipulationen, die direkt im Backend durchgeführt werden können, und sind äußerst nützlich, wenn Sie auch Caching durchführen. Außerdem können reaktionsschnelle Bilder über CSS erreicht werden, und wenn Sie dazu jQuery als von Ihnen vorgeschlagene Lösung verwenden, muss JS aktiviert sein, was bei einigen möglicherweise nicht immer der Fall ist

    – Ahmad Assaf

    27. Februar 2015 um 10:20 Uhr


  • @Juan Sie wären überrascht, wie viele es aus verschiedenen Gründen deaktivieren. Ein guter Programmierer nimmt nichts an, sondern entwirft, um alle Fälle zu erfassen, das ist das Prinzip progressiver Erweiterungen. Und woher weißt du, dass er “verloren” war? Kannst du Gedanken lesen. Wie auch immer, es gibt keine perfekte Lösung, aber Sie haben in Ihrem Kommentar so viele Dinge angenommen

    – Ahmad Assaf

    28. Februar 2015 um 12:49 Uhr

  • Diese Lösung bewirkt die the_content() Funktion, mit der der Inhalt des Beitrags umbrochen wird <html> und <body> Stichworte.

    – LondonAppDev

    8. März 2015 um 11:51 Uhr

1646637550 105 So fugen Sie eine automatische Klasse im Bild fur den
Yaron

Dieser Ansatz ist besser: 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');

Der einzige Vorbehalt ist, dass die Klasse beim Einfügen neuer Bilder im Bearbeitungsbereich hinzugefügt wird und keine Auswirkungen auf bereits vorhandene Bilder hat.

  • Diese Antwort ist besser als andere. Sie sollte als richtige Antwort markiert werden.

    – Erginduran

    18. Mai 2016 um 19:42 Uhr

  • Diese Antwort gefällt mir persönlich am besten. Am einfachsten lassen sich Klassen zu einem Bild hinzufügen, das hinzugefügt wird.

    – JoeMoe1984

    23. Juni 2016 um 19:17 Uhr

  • Ich würde sagen, dies ist „der WordPress-Weg“, um dies zu tun.

    – ACJ

    5. Juli 2018 um 10:27 Uhr

  • beste Antwort von allen

    – OzzyCzech

    26. Juli 2018 um 9:00 Uhr

  • Dies funktioniert nicht im Blockeditor

    – Netzprotokoll

    29. September 2021 um 16:26 Uhr


Ich denke, der einfachste Weg ist, CSS so zu verwenden.

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

Woher .Inhalt ist der Bereich, der Ihren Beitragsinhalt enthält.

Notiz: Möglicherweise möchten Sie auch die überschreiben .wp-Beschriftung Klasse auch so.

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

  • Dies sollte die richtige Antwort sein. Wickeln Sie den gesamten Inhalt in a div und fügen Sie eine Klasse namens hinzu content oder wie man es nennen will.

    – Eduard

    11. September 2017 um 0:49 Uhr

  • Seufzen. Nur weil Sie eine andere Methode als OP haben, heißt das nicht, dass Sie Recht haben. Sie können eine Meinung haben, aber geben Sie diese stattdessen in einem Kommentar zur Frage an, da diese Antwort einfach nicht zum Thema gehört.

    – Athoxx

    19. Juli 2019 um 21:21 Uhr

  • @PatrikAlienus Wie ist das nicht zum Thema? Das Ziel ist es, alle Bilder innerhalb des Beitrags responsive zu machen. Das CSS in meiner Antwort macht jedes Bild im Beitrag reaktionsfähig. Es ist nicht nötig, jedem Bild eine Klasse hinzuzufügen, wenn wir den Selektor für alle Bilder kennen. Diese Lösung verwendete weniger Code und erfordert keine Serververarbeitung.

    – Syklone

    21. Juli 2019 um 1:15 Uhr


  • @Syclone Er fragt speziell, wie eine bestimmte Klasse automatisch zu Bildern hinzugefügt werden kann, daher ist diese Antwort nicht zum Thema.

    – Athoxx

    22. Juli 2019 um 18:39 Uhr

  • @Syclone Er lässt dich von seiner Absicht wissen, das stimmt. Allerdings stellt er erst danach eine konkrete Frage. Ich glaube, Ihre Antwort ist aus diesem Grund nicht zum Thema, nicht weil Ihre Lösung schlechter ist. Meistens ist das nicht der Fall, aber Sie können nicht jedes Detail der Umgebung von OP kennen, daher sollten Sie nicht von der eigentlichen Frage abweichen. DAS ist hier eigentlich ganz wichtig, da Q&A’s vielen dienen sollen, nicht nur einem.

    – Athoxx

    25. Juli 2019 um 22:24 Uhr

Wenn Sie Post in Ihrer Schleife anzeigen, können Sie Folgendes tun:

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

Sehen https://codex.wordpress.org/Function_Reference/the_post_thumbnail für mehr Details.

  • Diese Antwort sollte als gelöst markiert werden, da dies viel besser funktioniert als andere. Dadurch werden keine DOCTYPE-, HTML- und BODY-Tags in den HTML-Code eingefügt.

    – Diego Somar

    6. November 2017 um 12:47 Uhr

  • Dieser spezielle Code funktioniert nicht nur perfekt. Es ermöglicht Ihnen, globale modale Bilder für den beliebten Themen-Newsletter und das Nachrichtenmagazin zu aktivieren. Das globale modale ON wird in ihrem Thema unterbrochen, wenn Sie ein beliebiges CDN aktivieren. Mit diesem Stück Code, das einem Plugin hinzugefügt wird, stellt das Design die Funktionalität wieder her. Sie sollten Sie einstellen, um ihren Code zu verbessern, da sie wp-booster verwenden und es nicht reparieren wollen, sie sagen nur: „CDN funktioniert möglicherweise nicht außerhalb von Cloudflare.

    – Alex Vojacek

    17. April 2018 um 20:12 Uhr


Ich bin mir nicht ganz sicher, wie gut diese Antwort in Bezug auf die Leistung ist, aber sie funktioniert. Fügen Sie dies einfach in die functions.php ein.

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

Bitte beachten Sie, dass Sie den Platz danach benötigen class="img-responsive es verschmilzt also nicht mit anderen Klassen.

  • Und was ist, wenn Klasse nicht das erste Attribut ist?

    – Pawel Tomkiel

    5. Februar 2019 um 7:10 Uhr

1646637550 6 So fugen Sie eine automatische Klasse im Bild fur den
Super globaler Benutzer

Sie können jquery-Code für die header.php-Datei Ihres Designs verwenden.

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});

  • Und was ist, wenn Klasse nicht das erste Attribut ist?

    – Pawel Tomkiel

    5. Februar 2019 um 7:10 Uhr

So fugen Sie eine automatische Klasse im Bild fur den
Mitul Schah

Ich denke, Sie müssen keine Klasse hinzufügen, um das Bild ansprechend zu machen. Entfernen Sie einfach die Höhe und Breite aus dem vorgestellten Bild, das Bild wird definitiv reagieren.

Es gibt Code in Ihrer function.php, um die Höhe und Breite zu entfernen

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;
} 

  • Mitul, ich habe Breite und Höhe von Postbildern entfernt, indem ich Ihre Codes verwendet habe. Es ist wirklich hilfreich. Aber es ist nicht möglich, Post-Images in Bootstrap 3.0 reaktionsfähig zu machen

    – Amit Sarker

    9. Dezember 2013 um 19:55 Uhr

963920cookie-checkSo fügen Sie eine automatische Klasse im Bild für den WordPress-Post hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy