Зупиніть загортання зображень Wordpress у тег “P”


33

Я шукав високо і низько для простого вирішення цього питання, але безрезультатно. Wordpress продовжує обгортати мої зображення в p-тегах, і через ексцентричний характер макета для сайту, над яким я працюю, це сильно дратує.

Я створив рішення jQuery для розгортання зображень, але це не так здорово. Він відстає через завантаження інших сторінок на сторінці, тому зміни відбуваються повільно. Чи є спосіб запобігти загортанню Wordpress лише зображень із тегами p? Гак або фільтр, можливо, що можна запустити.

Це відбувається під час завантаження зображення та його вставлення в редактор WYSIWYG. Вручну переходити до перегляду коду та видаляти теги p - це не варіант, оскільки клієнт не такий технічно недосвідчений.

Я розумію, що зображення є вбудованими, але те, як я маю закодовані зображення, знаходиться всередині divs і встановлено для блокування, тому вони є дійсним кодом.


Відповіді:


34

ось що ми зробили вчора на клієнтському сайті, що у нас виникала така точна проблема ... Я створив швидкий фільтр як плагін і активував його.

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

Якщо ви потрапляєте у файл php у папці / wp-content / plugins, а потім активуєте його, він повинен видалити p теги з будь-якого параграфа, що містить зображення.

Я не впевнений, наскільки сильним є регулярний вираз з точки зору того, чи не вдасться він вийти з результатів інших редакторів - наприклад, якщо тег img закритий просто> він не вийде. Якщо у когось є щось сильніше, це було б дуже корисно.

Ура,

Джеймс

--- Покращений фільтр ---

Для роботи із зображеннями, які загорнуті у посилання, він зберігає посилання у висновку та видаляє теги p.

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

Без сумніву, це правильна відповідь. Дякую Джеймсу, я спробував це, і це працює приголомшливо.
Дуейн Чаррінгтон

Привіт @Dwayne - дякую за відгук. Я додав вдосконалений фільтр, який буде обробляти посилання, зараз ми використовуємо його на нашому клієнтському сайті.
jamesc

Ви обов'язково повинні помістити це у сховище плагінів Wordpress. Швидкий пошук Google показує, що у багатьох людей виникає ця проблема, не маючи хорошого рішення.
Джеффрі Бердетт

1
Зауважте, що це не буде працювати з imgрозміткою HTML5 за замовчуванням , тобто <img ...>без косої коси. Краще зробити це необов’язковим у своєму регулярному виразі. Або ще краще, ви можете залишити його, як .*подбаєте про це.
Брам Ванрой

Хтось змусив це працювати <img ...>без />?
Runnick

13

В основному вам потрібно змусити WordPress обробляти img як елемент рівня блоку з метою форматування. Такі елементи містяться жорстко,wpautop() і список, на жаль, не фільтрується.

Що я б робив:

  1. Вилка wpautop()під іншою назвою.
  2. Додати imgв regexp в $allblocksзмінній.
  3. Видалити wpautopз the_contentфільтра.
  4. Додайте роздвоєну версію до the_content.
  5. Можливо, вам доведеться грати з пріоритетом і, можливо, видалити та повторно додати інші фільтри, якщо щось зламається через змінений порядок обробки.

Я збираюся спробувати такий підхід. Я ніколи не думав фактично додавати тег img до змінної allblocks, це геніальна ідея. Я побачу, як я йду.
Дуейн Чаррінгтон

Спочатку спрацював добре, потім я потрапив у сценарій, коли зображення знаходиться в якорі тега, і обидва вже знаходяться всередині абзацу (так p> img> a). З img, який розглядається як блок, wp-autop закриває тег абзацу до початку тегу img, перебираючи макет.
benz001

2

можливо, це допоможе

remove_filter('the_content', 'wpautop')

Але тоді ви збираєтеся додавати абзаци до всього іншого вручну.


Я розглядав цей підхід, але оскільки макет ексцентричний, як я сказав, він сильно покладається на необхідні p теги. Оскільки я роблю текст із 2 стовпців з текстом, де p теги плавають ліворуч, щоб надати вигляд 2 стовпців тексту. Тож ви можете зрозуміти, чому обгортання зображення тегом ap було б проблемою, оскільки воно теж плаває.
Дуейн Чаррінгтон

1

Soska дали один / простий спосіб.

Але те, що я роблю, - це витягнути зображення із вмісту та відобразити його окремо.


Я це також розглядав, і це все ще є варіантом. Однак, оскільки для збереження всіх клопотів є лише одне зображення, я можу просто використовувати розміщені мініатюри, натомість які дозволять мені контролювати спосіб відображення зображення.
Дуейн Чаррінгтон

також ви можете додати спеціальне поле до публікації / сторінки, як зображення великого пальця та зберегти шлях зображення у його значенні ...
Avinash,

1

Ця публікація трохи стара, але є набагато простіше рішення, забороняючи CSS на вашому кінці.

Обгортання тегу img у діві мало негативного ефекту.


1

Я розробив плагін, який вирішив цю проблему: http://wordpress.org/extend/plugins/unwrap-images/

Це краще, ніж встановити маржу, або зануритися прямо в код Wordpress для тих, хто не хоче возитися з кодом, оскільки він використовує вбудовану функцію відкручування jQuery для розгортання всіх зображень своїх тегів p.

Сподіваюся, що це комусь допоможе! Ура, Брайан


Мабуть, все ще є 30+ активних установок: D
Julix

1

Прийнята відповідь допомогла мені лише із зображеннями, але переглянутий код не добре обробляє пов'язані зображення на моєму сайті. У цій публікації блогу є код, який ідеально працює.

Ось код:

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

Ура!


1

Я не експерт, але тільки що провів діб вдень, намагаючись вирішити de img, загорнутий у p теги, і це працювало для мене.

Я працюю над темою, що базується на WordPress, і я просто додав це у файл function.js

Функція Jquery розгортається

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

тепер я можу працювати p і img окремо.

Також можна додати div з іншим класом навколо img, використовуючи це:

$(document).ready(function (){

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

останній не вирішив мою проблему, тому що я хотів зробити p теги з відображенням: none; тож мені справді довелося зняти звідти ці зображення.


3
Ви справді використовуєте фігурні цитати? :)
fuxia

Я розглянув цей підхід першим способом назад, але думка про непотрібні DOM-маніпуляції через jQuery була занадто великою небезпекою та потенційними непотрібними накладними витратами, коли ви можете це зробити в PHP із складними регулярними виразами.
Дуейн Чаррінгтон

0

Залежно від посади, іншим рішенням може бути використання плагіна WP Unformatted для відключення функції авто-р на кожній посаді.


Це досить корисно, хоча єдиний застереження, який я можу побачити, - це те, що якщо ви хочете, щоб на зображеннях не було тегів P, але також був текст на вашій сторінці, це буде один масивний безлад. Це, мабуть, було б добре для публікацій, які містять зображення та, можливо, кілька рядків тексту. Все-таки корисно.
Дуейн Чаррінгтон

Так, саме тому я сказав, що це залежить від посади.
Synetech

0

Якщо хтось шукає швидкий і брудний спосіб виправити це для будь-якого тегу, ось що я зробив:

  1. перейдіть на wp-content / formatting.php
  2. знайти функцію wpautop. (якщо ви пропустили його, це WP-AUTO-P , зрозумійте?)
  3. плавники змінної "всі блоки" мають бути чимось подібним $allblocks = '(?:table|thead|tfoot|capti...
  4. наприкінці додайте блок, який ви хочете опустити - img, aтощо, наприклад ... наприклад, якщо він закінчується в (...)menu|summary)';зміні, (...)menu|summary|a)';щоб додати aтег і не уникнути його автоматичного повторення . Зверніть увагу на |сепаратор труб - це синтаксис регулярних виразів!

Ось це, щасливе Wordpressing!

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.