it-swarm.com.de

deaktivieren WP Automatisch eingefügte Zeilenumbrüche nach einem Bild

Ich habe eine benutzerdefinierte Größe für mittelgroße Bilder festgelegt, sodass beide Bilder im Beitrag horizontal ausgerichtet werden können. (Die volle Postbreite beträgt 880 Pixel, mittlere Bilder sind auf 413 Pixel eingestellt.)

Meine Herausforderung besteht darin, dass die Bilder nicht gleichmäßig ausgerichtet sind - das rechte Bild ist immer etwas niedriger, es sei denn, unmittelbar darunter befindet sich eine weitere Gruppe mittlerer Bilder. In diesem Fall wird die zweite Gruppe gleichmäßig ausgerichtet.

Ich denke, das mag damit zu tun haben, dass WP nach einem Bild automatisch Zeilenumbrüche einfügt, aber die wenigen Möglichkeiten, dies zu deaktivieren, waren nicht erfolgreich.

Was ich in den Beitrag geschrieben habe:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Was wird vom Browser gelesen:

<p><img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><br />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /><br />

Versuchte (erfolglose) Lösungen - 1 Wie deaktiviere ich Zeilenumbrüche nach Bildern? 2 Warum fügt Wordpress nach meinem Bild einen Zeilenumbruch ein?

Site-Link.

enter image description here

5
user1255049

Wenn es so aussieht:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Dann musst du sie so zusammensetzen:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Denn wenn Sie dies tun ( wpautop ):

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );

sie werden wahrscheinlich alles, was Sie geschrieben haben, brechen, es ist es nicht wert.

7
jocken

Die schnelle Lösung besteht darin, Ihre Bild-Tags in Div-Tags zu verpacken. Dadurch wird verhindert, dass WP die Bilder in P-Tags einschließt. Dann könnten Sie den divs eine Klasse zur weiteren Kontrolle über Aussehen/Anordnung geben.

4
Ray Gulick

Wir können wpautop() Funktion nicht einhängen. Denn dann werden alle Absätze abgeschnitten und Tags aus dem Inhalt entfernt.

Nachdem Sie das Bild in den Editor eingefügt haben, klicken Sie einfach auf die Registerkarte " Text " in der oberen rechten Ecke des Editors und entfernen Sie die Absatz- und Umbruch-Tags, die zwischen den Bildern eingefügt werden.

Für weitere Optionen (wie Ausrichtung und andere Attribute) klicken Sie auf das Bild und stellen Sie es dann mit den Optionen " Erweiterte Einstellungen " entsprechend ein

1
TBI Infotech

Sie haben Recht, dass es sind die <br> Tags , aber es gibt eine Alternative:

Platziere jedes Bild in einem eigenen Absatz, nicht nebeneinander

So funktioniert Zeilenumbruch in WordPress-Inhalten:

Absätze

This is paragraph 1

This is paragraph 2

Kurze Zeilenumbrüche

This is paragraph 1
This is also paragraph 1 but on a new line without a space

Verwenden Sie also keine kurzen Pausen, sondern vollständige Absätze. Wenn Sie sie beispielsweise jeweils in eine eigene Zeile setzen und in ein Absatz-Tag einschließen, funktioniert dies.

Also statt:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Tun:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />

<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Jetzt wird jedes Bild in ein eigenes Absatz-Tag eingeschlossen, wodurch Sie die folgende Ausgabe erhalten:

Daraus ergibt sich:

holy moly, the alignment issue has vanished

Wenn Sie sich abenteuerlustig fühlen, können Sie die p-Tags um Bilder vollständig entfernen (im Frontend). Ich empfehle jedoch, dies nicht auf Ihrer Website zu tun. Öffnen Sie eine andere Frage, wenn Sie neugierig sind, wie das geht.

1
Tom J Nowell

Angenommen, es handelt sich um das <br> -Tag (das meines Erachtens korrekt ist). Basierend auf einem Ihrer Kommentare, in denen angegeben wird, dass Sie die Posts nicht mehr bearbeiten möchten, können Sie mit dem the_content -Filter nach Instanzen von zwei mittelgroßen Posts suchen Bilder, die nur durch eine neue Zeile getrennt sind (die durch ein <br> -Tag als Teil der wpautop() -Funktion von WordPress ersetzt wird), und entfernen Sie die neue Zeile:

add_filter( 'the_content', 'gowp_152091' );
function gowp_152091( $content ) {
  preg_replace( "/(<img.*?size-medium.*?>)\n(<img.*?size-medium.*?>)/", "$1$2", $content );
  return $content;
}

Verweise:

the_content

Funktion: preg_replace

0
karpstrucking

Entfernen Sie den Zeilenumbruch zwischen Ihren Bildern.

Beispiel:

<img src="" alt="" /> <br/> <img src="" alt="" />
0
René Skou

Die Funktion wpautop() fügt Ihrem Inhalt <p>- und <br>-Tags hinzu, um Zeilenumbrüche zu vermeiden. Wenn Sie diese Tags lieber selbst hinzufügen möchten, können Sie die Filter entfernen, die diese Funktion auf den Inhalt der Posts anwenden:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );


remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );
0
TBI Infotech

Sie können versuchen, sie mit jQuery für Sie zu entfernen:

jQuery(document).ready(function($){
    $('img').next('br').remove();
});

Dies sollte entfernt alle br-Tags nach Bildern als nächstes und wählt das unmittelbar nächste Element aus. Wenn dies zu Problemen führt, können Sie stattdessen .nextAll('br:first') ausprobieren

In hier finden Sie weitere Beispiele und Dinge, die Sie ausprobieren können.

0
sMyles