Pare as imagens Wrapping Wordpress em uma tag "P"

31

Eu pesquisei alto e baixo por uma solução simples para isso, mas sem sucesso. O Wordpress continua a encapsular minhas imagens em tags p e, por causa da natureza excêntrica do layout de um site em que estou trabalhando, isso é muito irritante.

Eu criei uma solução jQuery para desembrulhar imagens, mas não é tão bom assim. Ele é atrasado devido ao carregamento de outras coisas na página e, portanto, as alterações demoram a ser feitas. Existe uma maneira de evitar que o Wordpress quebra apenas imagens com tags p? Um gancho ou filtro talvez possa ser executado.

Isso está acontecendo ao fazer upload de uma imagem e, em seguida, inseri-la no editor WYSIWYG. Entrar manualmente na visualização de código e remover as tags p não é uma opção, pois o cliente não é tecnicamente inepto.

Eu entendo que as imagens estão em linha, mas o modo como eu tenho as imagens codificadas no site está dentro de divs e definido como block, então elas são um código válido.

    
por Dwayne Charrington 17.01.2011 / 05:08
fonte

10 respostas

32

aqui está o que fizemos ontem em um site do cliente com o qual estávamos tendo exatamente esse problema ... Eu criei um filtro rápido como um plugin e o ativei.

<?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', '', $content);
}

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

Se você colocar isso em um arquivo php em sua pasta / wp-content / plugins e depois ativá-lo, ele deve remover as tags p de qualquer parágrafo que apenas contenha uma imagem.

Não sei ao certo a intensidade do regexp em termos de se ele falhará com as saídas de outros editores - por exemplo, se a tag img for fechada com apenas > isso falhará. Se alguém tiver algo mais strong, isso seria muito útil.

Felicidades,

James

--- Filtro aprimorado ---

Para trabalhar com imagens envolvidas em links, ele mantém os links na saída e remove as tags p.

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '', $content);
    
por jamesc 02.02.2011 / 13:26
fonte
13

Basicamente, você precisa fazer com que o WordPress trate img como um elemento de nível de bloco para fins de formatação. Esses elementos são codificados em wpautop() e listados infelizmente não é filtrado.

O que eu faria é:

  1. Garfo wpautop() com nome diferente.
  2. Adicione img à regexp na variável $allblocks .
  3. Remova wpautop do filtro the_content .
  4. Adicione sua versão bifurcada a the_content .
  5. Talvez seja necessário jogar com prioridade e, possivelmente, remover e adicionar novamente outros filtros caso algo seja interrompido devido à alteração da ordem de processamento.
por Rarst 17.01.2011 / 09:33
fonte
2

talvez isso ajude

remove_filter('the_content', 'wpautop')

Mas você adicionará os parágrafos para todo o resto manualmente.

    
por Soska 17.01.2011 / 08:54
fonte
1

Soska deu uma maneira / fácil.

Mas o que eu faço é extrair imagens do conteúdo e exibi-las separadamente.

    
por Avinash 17.01.2011 / 10:46
fonte
1

Desenvolvi um plug-in que corrigiu esse problema exato: enlace

É melhor do que definir margem ou mergulhar diretamente no código do Wordpress para aqueles que não querem mexer com o código porque ele usa a função de desembrulhar nativa do jQuery para desembrulhar todas as imagens de suas tags p.

Espero que isso ajude alguém! Felicidades, Brian

    
por gnzlz 04.11.2011 / 09:18
fonte
1

Eu não sou um especialista, mas acabei de passar a tarde tentando resolver o problema das tags p e isso funcionou para mim.

Estou trabalhando em um tema baseado em wordpress e adicionei isso ao arquivo functions.js

Função jquery desembrulhar

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

agora posso trabalhar p e img separadamente.

Também pode adicionar um div com uma classe diferente ao redor do img usando isto:

$(document).ready(function (){

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

este último não resolveu o meu problema porque eu queria fazer p tags com display: none; então eu realmente tive que tirar esses img de lá.

    
por M Joana 18.02.2013 / 19:29
fonte
0

Dependendo do post, outra solução poderia ser usar o WP Unformatted para desativar o auto-aplicativo. p função em uma base por post.

    
por Synetech 23.02.2011 / 02:33
fonte
0

Esta postagem é um pouco antiga, mas há uma solução muito mais simples, com exceção do CSS.

Acondicionar a tag img em um div tem pouco efeito negativo.

    
por Laoshi Ma 19.08.2011 / 20:48
fonte
0

A resposta aceita me ajudou apenas com as imagens, mas o código revisado não manipula bem as imagens vinculadas no meu site. Esta postagem no blog tem um código que funciona perfeitamente .

Este é o código:

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

Felicidades!

    
por rlesko 01.01.2012 / 14:19
fonte
0

No caso de alguém procurar uma maneira rápida e suja para corrigir isso para qualquer tag , aqui está o que eu fiz:

  1. vá para wp-content / formatting.php
  2. encontre a função wpautop. (caso você tenha perdido, é WP-AUTO-P , entendeu?)
  3. finaliza a variável "todos os blocos", deve ser algo como $allblocks = '(?:table|thead|tfoot|capti...
  4. no final, adicione o bloco que você deseja omitir - img , a , etc ... por exemplo, se ela terminar em (...)menu|summary)'; , mude para (...)menu|summary|a)'; para adicionar a tag a e evitar autoparar . Observe o pipe | separador - é a sintaxe regex !

É isso aí, feliz Wordpressing!

    
por JDuarteDJ 12.08.2018 / 00:04
fonte