web-dev-qa-db-de.com

Stoppen Sie WordPress, das Bilder in ein "P" -Tag einfügt

Ich habe hoch und niedrig nach einer einfachen Lösung dafür gesucht, aber ohne Erfolg. Wordpress verpackt meine Bilder immer wieder in p-Tags und aufgrund der Ungereimtheit des Layouts für eine Site, an der ich arbeite, ist dies sehr ärgerlich.

Ich habe eine jQuery-Lösung zum Auspacken von Bildern erstellt, aber sie ist nicht so toll. Es verzögert sich, weil andere Inhalte auf der Seite geladen werden und die Änderungen daher nur langsam durchgeführt werden. Gibt es eine Möglichkeit zu verhindern, dass Wordpress nur Bilder mit p-Tags umschließt? Ein Haken oder Filter, der vielleicht ausgeführt werden kann.

Dies geschieht, wenn ein Bild hochgeladen und dann in den WYSIWYG-Editor eingefügt wird. Manuell in die Codeansicht zu wechseln und die p-Tags zu entfernen, ist keine Option, da der Client technisch nicht so unfähig ist.

Ich verstehe, dass Bilder inline sind, aber die Art und Weise, wie ich die Site-codierten Bilder habe, befindet sich innerhalb von divs und ist so eingestellt, dass sie blockieren, sodass sie gültiger Code sind.

32

hier ist, was wir gestern auf einer Client-Site gemacht haben, 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 das in eine PHP-Datei in Ihrem Ordner/wp-content/plugins ablegen und dann aktivieren, sollte es die p-Tags aus jedem Absatz entfernen, der nur ein Bild enthält.

Ich bin nicht sicher, wie stark die reguläre Ausdrucksweise in Bezug darauf ist, ob sie bei Ausgaben anderer Editoren fehlschlägt - zum Beispiel, wenn das img-Tag mit nur> geschlossen wird, wird sie fehlschlagen. Wenn jemand etwas Stärkeres hat, wäre das wirklich hilfreich.

Prost,

James

--- Verbesserter Filter ---

Wenn Sie mit Bildern arbeiten möchten, die in Verknüpfungen eingebunden sind, werden die Verknüpfungen in der Ausgabe beibehalten und die p-Tags entfernt.

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

Grundsätzlich müssen Sie WordPress so einstellen, dass es img wie ein Element auf Blockebene behandelt, um es zu formatieren. Solche Elemente sind in wpautop() fest codiert und die Liste wird leider nicht gefiltert.

Was ich tun würde, ist:

  1. Gabel wpautop() unter anderem Namen.
  2. Fügen Sie img hinzu, um $allblocks variable zu regexpieren.
  3. Entfernen Sie wpautop aus dem the_content-Filter.
  4. Fügen Sie Ihre gegabelte Version zu the_content hinzu.
  5. Möglicherweise müssen Sie mit Priorität spielen und möglicherweise andere Filter entfernen und wieder hinzufügen, wenn aufgrund einer geänderten Verarbeitungsreihenfolge ein Fehler auftritt.
13
Rarst

vielleicht hilft das

remove_filter('the_content', 'wpautop')

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

2
Soska

Die akzeptierte Antwort hat mir nur bei den Bildern geholfen, aber der überarbeitete Code kann mit verknüpften Bildern auf meiner Site nicht gut umgehen. Dieser 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!

1
rlesko

Ich bin kein Experte, habe aber den ganzen Nachmittag damit verbracht, in p-Tags verpacktes De-Img zu lösen, und das hat bei mir funktioniert.

Ich arbeite an einem WordPress-basierten Thema und habe es der Datei functions.js hinzugefügt

JQuery-Funktion 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 p und img separat arbeiten.

Sie können auch ein div mit einer anderen Klasse um das img hinzufügen, indem Sie dies verwenden:

$(document).ready(function (){

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

letzteres hat mein Problem nicht gelöst, da ich p-Tags mit display erstellen wollte: none; Also musste ich diese Bilder wirklich rausholen.

1
M Joana

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

Es ist besser, als eine Marge festzulegen oder direkt in den Wordpress-Code einzutauchen, wenn Sie nicht mit Code herumspielen möchten, da die native Entpackfunktion von jQuery zum Entpacken aller Bilder ihrer p-Tags verwendet wird.

Hoffe das hilft jemandem! Prost, Brian

1
gnzlz

Soska hat einen/einfachen Weg vorgegeben.

Ich extrahiere jedoch ein Bild aus dem Inhalt und zeige es separat an.

1
Avinash

Dieser Beitrag ist ein bisschen alt, aber es gibt eine viel einfachere Lösung, außer CSS.

Das Umschließen des img-Tags mit einem div hat nur geringe negative Auswirkungen.

1
Laoshi Ma

Je nach Beitrag könnte eine andere Lösung darin bestehen, das WP Unformated Plugin zu verwenden, um die Auto-P-Funktion für jeden Beitrag zu deaktivieren.

0
Synetech