Zatrzymaj zawijanie obrazów w tagach „P”

Szukałem wysoko i nisko w poszukiwaniu prostego rozwiązania tego problemu, ale bezskutecznie. Wordpress ciągle owija moje obrazy w tagi p, a ze względu na ekscentryczny charakter strony, nad którą pracuję, jest to bardzo denerwujące.

Stworzyłem rozwiązanie jQuery do rozpakowywania obrazów, ale nie jest tak świetne. Opóźnia się z powodu innych ładowań na stronie, więc zmiany są powolne. Czy istnieje sposób, aby zapobiec zawijaniu przez Wordpress tylko obrazów ze znacznikami p? Być może można uruchomić hak lub filtr.

Dzieje się tak podczas przesyłania obrazu, a następnie wstawiania go do edytora WYSIWYG. Ręczne wchodzenie do widoku kodu i usuwanie znaczników p nie jest opcją, ponieważ klient nie jest tak technicznie nieudolny.

Rozumiem, że obrazy są wbudowane, ale sposób, w jaki mam strony kodowane obrazy są wewnątrz div i ustawione na blokowanie, więc są poprawnym kodem.

oto co zrobiliśmy wczoraj na stronie klienta, z którą mieliśmy dokładnie ten problem ... Stworzyłem szybki filtr jako wtyczkę i aktywowałem go.

<?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');

Jeśli upuścisz go do pliku php w folderze / wp-content / plugins, a następnie go aktywujesz, powinien on usunąć tagi p z dowolnego para, który zawiera tylko obraz.

Nie jestem pewien, jak silne jest wyrażenie regularne pod względem tego, czy zakończy się niepowodzeniem w przypadku danych wyjściowych innych edytorów - na przykład, jeśli tag img jest zamknięty tylko przez>, to się nie powiedzie. Jeśli ktoś ma coś silniejszego, byłoby to naprawdę pomocne.

Twoje zdrowie,

James

--- Ulepszony filtr ---

Aby pracować z obrazami owiniętymi w łącza, utrzymuje łącza w danych wyjściowych i usuwa znaczniki p.

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

Zasadniczo musisz sprawić, aby WordPress traktował img jak element na poziomie bloku do celów formatowania. Takie elementy są zakodowane na stałe,wpautop() a lista niestety nie jest filtrowana.

Chciałbym:

1. Widelec wpautop() pod inną nazwą.
2. Dodaj imgdo wyrażenia regularnego w $allblockszmiennej.
3. Usuń wpautopz the_contentfiltra.
4. Dodaj swoją rozwidloną wersję do the_content.
5. Być może będziesz musiał grać z priorytetem i ewentualnie usunąć i ponownie dodać inne filtry, jeśli coś się zepsuje z powodu zmienionej kolejności przetwarzania.

może to pomoże

remove_filter('the_content', 'wpautop')

Ale potem ręcznie dodasz akapity dotyczące wszystkiego innego.

Soska dała jeden / łatwy sposób.

Ale to, co robię, to wydobywanie obrazu z treści i wyświetlanie go osobno.

Ten post jest trochę stary, ale istnieje o wiele prostsze rozwiązanie, z wyjątkiem CSS po twojej stronie.

Zawijanie znacznika img w div ma niewielki negatywny wpływ.

Opracowałem wtyczkę, która rozwiązała ten dokładny problem: http://wordpress.org/extend/plugins/unwrap-images/

To lepsze niż ustawianie marginesu lub nurkowanie bezpośrednio w kodzie Wordpress dla tych, którzy nie chcą zadzierać z kodem, ponieważ używa natywnej funkcji rozpakowywania jQuery do rozpakowywania wszystkich obrazów swoich znaczników p.

Mam nadzieję, że to komuś pomoże! Na zdrowie, Brian

Zaakceptowana odpowiedź pomogła mi tylko z obrazami, ale poprawiony kod nie radzi sobie dobrze z połączonymi obrazami w mojej witrynie. To post na blogu ma kod, który działa idealnie.

Oto kod:

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');

Twoje zdrowie!

Nie jestem ekspertem, ale spędziłem całe popołudnie, próbując rozwiązać de img zawinięte w tagi p i to zadziałało dla mnie.

Pracuję nad kompozycją opartą na wordpressie i właśnie dodałem ją do pliku functions.js

Funkcja Jquery rozpakowuje się

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

teraz mogę pracować p i img osobno.

Można również dodać div z inną klasą wokół img, używając tego:

$(document).ready(function (){

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

ten ostatni nie rozwiązał mojego problemu, ponieważ chciałem utworzyć tagi p z display: none; więc naprawdę musiałem je stamtąd usunąć.

W zależności od postu innym rozwiązaniem może być użycie wtyczki WP Unformatted w celu wyłączenia funkcji auto-p dla poszczególnych postów.

Jeśli ktoś szuka szybkiego i brudnego sposobu na naprawienie tego dla dowolnego tagu, oto co zrobiłem:

1. przejdź do wp-content / formatting.php
2. znajdź funkcję wpautop. (jeśli go przegapiłeś, to WP-AUTO-P , ?)
3. płetwy zmienna „wszystkie bloki” powinna być podobna do $allblocks = '(?:table|thead|tfoot|capti...
4. Na koniec dodać blok, który chcesz pominąć - img, aitp ... Na przykład jeśli kończy się na (...)menu|summary)';zmianę do (...)menu|summary|a)';Aby dodać atag i uniknąć autopeeing go. Zwróć uwagę na |separator potokowy - to składnia wyrażeń regularnych !

To wszystko, szczęśliwy Wordpressing!