it-swarm-eu.dev

Zastavit Wordpress Wrapping obrázky v "P" Tag

Hledal jsem vysoké a nízké pro jednoduché řešení tohoto, ale bez úspěchu. Wordpress drží na balení moje obrázky v p tagy a vzhledem k excentrické povaze rozvržení pro web, na kterém pracuji, je to velmi nepříjemné.

Vytvořil jsem řešení jQuery pro rozbalení obrázků, ale není to tak skvělé. To zpožďuje kvůli jiné věci načítání na stránce a tak změny jsou pomalé být dělán. Existuje způsob, jak zabránit Wordpress obtékání jen obrázky s p tagy? Háček nebo filtr, který může být spuštěn.

To se děje při nahrávání obrázku a jeho vložení do editoru WYSIWYG. Manuální přechod do zobrazení kódu a odstranění značek p není možnost, protože klient není technicky technicky zdatný.

Chápu, že obrázky jsou inline, ale způsob, jakým mám stránky kódované obrazy jsou uvnitř divs a nastaven na blokování, takže jsou platný kód.

32

zde je to, co jsme dělali včera na klientských stránkách, které jsme měli s tímto přesným problémem ... Vytvořil jsem rychlý filtr jako plugin a aktivoval jej.

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

Pokud ho vložíte do souboru php ve složce/wp-content/plugins a poté jej aktivujete, měli byste odstranit značky p z kteréhokoli para, který obsahuje pouze obrázek.

Nejsem si jistý, jak silná je regexp, pokud se nezdaří s výstupy od jiných editorů - například pokud je img tag zavřený jen> selže. Pokud má někdo něco silnějšího, bylo by to opravdu užitečné.

Na zdraví,

James

--- Vylepšený filtr ---

Pro práci s obrázky, které jsou zabalené do odkazů, udržuje odkazy ve výstupu a odstraňuje značky p.

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

V podstatě je třeba, aby WordPress léčbě img jako prvek na úrovni bloku pro účely formátování. Takové prvky jsou hardcoded v wpautop() a seznam není bohužel filtrován.

Co bych udělal, je:

  1. Vidlice wpautop() pod jiným jménem.
  2. Přidejte img do regexp v proměnné $allblocks.
  3. Odstraňte wpautop z the_content filtru.
  4. Přidejte vidlicovou verzi do the_content.
  5. Pravděpodobně budete muset hrát s prioritou a případně odstranit a znovu přidat další filtry, pokud se něco změní kvůli změně pořadí zpracování.
13
Rarst

možná to pomůže

remove_filter('the_content', 'wpautop')

Ale pak budete přidávat odstavce pro všechno ostatní ručně.

2
Soska

Přijatá odpověď mi pomohla jen s obrázky, ale revidovaný kód nezpracovává propojené obrázky dobře na mých stránkách. Tento blog post má kód, který funguje perfektně.

Zde je kód:

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

Na zdraví!

1
rlesko

Nejsem odborník, ale strávil jsem odpoledne v díře a snažil jsem se řešit de img zabalené v p tagech a to pro mě fungovalo.

Pracuji na wordpress na téma a jen to přidal do function.js souboru

Funkce Jquery se rozbalí

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

teď můžu pracovat p a img odděleně.

Také můžete přidat div s jinou třídou arround img pomocí tohoto:

$(document).ready(function (){

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

tento poslední problém jsem nevyřešil, protože jsem chtěl vytvořit p tagy s displejem: žádný; takže jsem opravdu musela ty img brát.

1
M Joana

Vytvořil jsem plugin, který opravil tento přesný problém: http://wordpress.org/extend/plugins/unwrap-images/

Je to lepší než nastavení marže, nebo potápění přímo do kódu Wordpressu pro ty, kteří nechtějí s kódem pokazit, protože používá nativní funkci rozbalení funkce jQuery pro rozbalení všech obrázků svých značek p.

Doufám, že to někomu pomůže! Na zdraví, Briane

1
gnzlz

Soska dala jeden/snadný způsob.

Ale co mám dělat, je extrahovat obraz z obsahu a zobrazit jej odděleně.

1
Avinash

Tento příspěvek je trochu starý, ale je tu mnohem jednodušší řešení, blokování CSS na vašem konci.

Zabalení img tagu do div má malý negativní účinek.

1
Laoshi Ma

V případě, že někdo vyhledá rychlý a špinavý způsob, jak to opravit any tag zde je to, co jsem udělal:

  1. přejděte na stránku wp-content/formatting.php
  2. najít funkci wpautop. (v případě, že jste to zmeškali, je to WP-AUTO-P, dostanete to?)
  3. fins "all blocks" proměnná, by měla být něco jako $allblocks = '(?:table|thead|tfoot|capti...
  4. na konci přidejte blok, který chcete vynechat - img, a, atd. ... například pokud končí v (...)menu|summary)'; změně na (...)menu|summary|a)'; pro přidání značky a a vyhněte se autopeeing it. Všimněte si oddělovače | potrubí - je to regex syntaxe!

To je ono, šťastný Wordpress!

0
JDuarteDJ

V závislosti na příspěvku by dalším řešením mohlo být použití WP Unformatted plugin pro deaktivaci funkce auto-p na základě pošty.

0
Synetech