Stoppen Sie WordPress -Packing -Bilder in einem "P" -Tag

wordpress.stackexchange https://wordpress.stackexchange.com/questions/7090

Frage

Ich habe hoch und niedrig nach einer einfachen Lösung dafür gesucht, aber ohne Erfolg. WordPress wickelt meine Bilder in P -Tags weiter und aufgrund der exzentrischen Natur des Layouts für eine Seite, an der ich arbeite, ist dies sehr ärgerlich.

Ich habe eine JQuery -Lösung zum Ausschalten von Bildern erstellt, aber es ist nicht so toll. Es bleibt aufgrund anderer Dinge, die auf der Seite geladen werden, und so werden die Änderungen langsam vorgenommen. Gibt es eine Möglichkeit, WordPress -Verpackung nur Bilder mit P -Tags zu verhindern? Ein Haken oder Filter kann vielleicht ausgeführt werden.

Dies geschieht beim Hochladen eines Bildes und beim Einfügen in den Wysiwyg -Editor. Das manuelle Einstieg in die Codeansicht und das Entfernen der P -Tags ist keine Option, da der Client technisch nicht so unfähig ist.

Ich verstehe, dass Bilder inline sind, aber die Art und Weise, wie die Site -codierte Bilder in Divs befinden und auf Block gesetzt sind, sind sie gültiger Code.

War es hilfreich?

Lösung

Folgendes haben wir gestern auf einer Client -Site gemacht, mit der wir genau dieses Problem hatten ... Ich habe einen schnellen Filter als Plugin erstellt und ihn aktiviert.

<?php
/*
Plugin Name: Image P tag remover
Description: Plugin to remove p tags from around images in content outputting, after WP autop filter has added them. (oh the irony)
Version: 1.0
Author: Fublo Ltd
Author URI: http://fublo.net/
*/

function filter_ptags_on_images($content)
{
    // do a regular expression replace...
    // find all p tags that have just
    // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
    // replace it with just the image tag...
    return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default.
add_filter('the_content', 'filter_ptags_on_images');

Wenn Sie diese in eine PHP-Datei in Ihrem Ordner /WP-Content /Plugins fallen lassen und dann aktivieren, sollten Sie die P-Tags von einem Absatz entfernen, der nur ein Bild enthält.

Ich bin mir nicht sicher, wie stark der Regexp ist, wenn es mit Ausgaben anderer Redakteure fehlschlägt - beispielsweise, wenn das IMG -Tag mit nur> geschlossen ist. Wenn jemand etwas Stärkeres hat, wäre das wirklich hilfreich.

Prost,

James

--- Verbesserter Filter ---

Um mit Bildern zu arbeiten, die in Links eingewickelt sind, hält die Links in der Ausgabe und entfernt die P -Tags.

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

Andere Tipps

Grundsätzlich müssen Sie WordPress behandeln img Wie Element auf Blockebene zum Zwecke der Formatierung. Solche Elemente sind hartcodiert in wpautop() und die Liste wird leider nicht gefiltert.

Was ich tun würde ist:

  1. Gabel wpautop() unter einem anderen Namen.
  2. Hinzufügen img zu regexp in $allblocks Variable.
  3. Entfernen wpautop aus the_content Filter.
  4. Fügen Sie Ihre Gabelversion hinzu zu the_content.
  5. Möglicherweise müssen Sie mit Priorität spielen und möglicherweise andere Filter entfernen und neu anpassen, wenn etwas durch die geänderte Verarbeitungsreihenfolge bricht.

Vielleicht hilft das

remove_filter('the_content', 'wpautop')

Aber dann werden Sie die Absätze für alles andere manuell hinzufügen.

Soska hat einen/einfachen Weg gegeben.

Aber was ich tue, ist das Bild aus dem Inhalt extrahieren und separat anzeigen.

Dieser Beitrag ist ein wenig alt, aber es gibt eine viel einfachere Lösung, die CSS an Ihrem Ende abhebt.

Das Wickeln des IMG -Tags in eine DIV hat wenig negative Auswirkungen.

Ich habe ein Plugin entwickelt, das genau dieses Problem behoben hat:http://wordpress.org/extend/plugins/unwrap-images/

Es ist besser als das Festlegen von Rand oder das Eintauchen in den WordPress -Code für diejenigen, die sich nicht mit Code anlegen möchten, da die native Ausweichungsfunktion von JQuery verwendet, um alle Bilder ihrer P -Tags auszupacken.

Hoffe das hilft jemandem! Prost, Brian

Die akzeptierte Antwort hat mir nur bei den Bildern geholfen, aber der überarbeitete Code verarbeitet verknüpfte Bilder auf meiner Website nicht gut. Dies Der Blog -Beitrag hat einen Code, der perfekt funktioniert.

Hier ist der Code:

function wpautop_forked($pee, $br = 1) {

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li
|pre|select|option|form|map|area|blockquote|img|address|math|style|input
|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer
|nav|figure|figcaption|details|menu|summary)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!(</' . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, '<object') !== false ) {
$pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
// make paragraphs, including one at the end
$pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
$pee = '';
foreach ( $pees as $tinkle )
$pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
$pee = preg_replace('|<p>\s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
$pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "<WPPreserveNewline />", $matches[0]);'), $pee);
$pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
$pee = str_replace('<WPPreserveNewline />', "\n", $pee);
}
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
$pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
if (strpos($pee, '<pre') !== false)
$pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n</p>$|", '</p>', $pee );

return $pee;
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');

Prost!

Ich bin kein Experte, sondern habe nur den Loch am Nachmittag damit verbracht, de IMG in P -Tags zu lösen, und das hat für mich funktioniert.

Ich arbeite an einem WordPress -basierten Thema und fügte dies einfach zu der Datei functions.js hinzu

JQuery Function Auspacken

> $(document).ready(function (){
> 
> // for images wraped in a tags
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> //for images wraped in just p tags
> $(‘.entry img’).unwrap(‘p’);

Jetzt kann ich separat P und IMG arbeiten.

Kann auch eine DIV mit einer anderen Klasse hinzufügen, die das IMG mit folgendem angelegt hat:

$(document).ready(function (){

$('.entry img').wrap('<div class="justImg"></div>');

Dieser letzte hat mein Problem nicht gelöst, weil ich P -Tags mit Display machen wollte: keine; Also musste ich wirklich diese IMG dort rausbringen.

Abhängig von der Post könnte eine andere Lösung darin bestehen, die zu verwenden WP nicht formatiert Plugin, um die automatische P-Funktion pro Post zu deaktivieren.

Falls jemand nach einem sucht schnell und dreckig Weg, um dies für zu beheben irgendein Tag hier ist was ich getan habe:

  1. Gehen Sie zu wp-content/formating.php
  2. Finden Sie die WPAutop -Funktion. (Falls Sie es verpasst haben, ist es Wp-auto-p, Kapiert?)
  3. Flossen die Variable "Alle Blöcke", sollten so etwas wie sein $allblocks = '(?:table|thead|tfoot|capti...
  4. Fügen Sie am Ende den Block hinzu, den Sie weglassen möchten - img, a, usw. ... zum Beispiel, wenn es in endet in (...)menu|summary)'; ändern (...)menu|summary|a)'; um das hinzuzufügen a Tag und vermeiden Autopeeeing es. Beachten Sie das Rohr | Separator - es ist Regex Syntax!

Das war's, eine glückliche Wordpressung!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit wordpress.stackexchange
scroll top