Pare de embrulhar imagens do Wordpress em uma tag "P"

33

Eu procurei alto e baixo para uma solução simples para isso, mas sem sucesso. O Wordpress continua envolvendo minhas imagens em tags p e, devido à natureza excêntrica do layout do site em que estou trabalhando, isso é altamente irritante.

Eu criei uma solução jQuery para desembrulhar imagens, mas não é tão boa assim. Ela fica atrasada devido a outras coisas sendo carregadas na página e, portanto, as alterações são lentas. Existe uma maneira de impedir que o Wordpress envolva apenas imagens com tags p? Um gancho ou filtro talvez possa ser executado.

Isso está acontecendo ao carregar uma imagem e depois 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.

Entendo que as imagens estão em linha, mas da maneira que tenho as imagens codificadas do site estão dentro de divs e configuradas para bloquear, portanto são códigos válidos.

Dwayne Charrington
fonte

Respostas:

34

aqui está o que fizemos ontem em um site cliente com o qual estávamos tendo exatamente esse problema ... Criei um filtro rápido como um plug-in 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', '\2', $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 na pasta / wp-content / plugins e ativá-lo, ele deverá remover as tags p de qualquer parágrafo que contenha apenas uma imagem.

Não tenho certeza de quão forte é o regexp em termos de se falhará com as saídas de outros editores - por exemplo, se a tag img for fechada com apenas> ela falhará. Se alguém tiver algo mais forte, isso seria realmente útil.

Felicidades,

James

--- Filtro aprimorado ---

Para trabalhar com imagens agrupadas 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', '\1\2\3', $content);
jamesc
fonte
Sem dúvida, esta é a resposta correta. Obrigado James, eu tentei e funciona muito bem.
Dwayne Charrington
Olá @Dwayne - obrigado pelo feedback. Adicionei um filtro aprimorado que manipulará os links, agora o estamos usando no site do cliente.
911 jamesc
Você definitivamente deve colocar isso no repositório de plugins do Wordpress. Uma pesquisa rápida no Google mostra que muitas pessoas estão tendo esse problema sem uma boa solução.
Geoffrey Burdett
1
Observe que isso não funcionará com a imgmarcação padrão do HTML5 , ou seja, <img ...>sem a barra de fechamento. É melhor tornar isso opcional no seu regex. Ou melhor ainda, você pode deixar de fora, pois .*ele cuidará disso.
Bram Vanroy 10/03
Alguém já fez isso funcionar <img ...>sem />?
Runnick
13

Basicamente, você precisa fazer o WordPress tratar o img como um elemento em nível de bloco com a finalidade de formatar. Esses elementos são codificadoswpautop() e a lista infelizmente não é filtrada.

O que eu faria é:

  1. Garfo wpautop()com nome diferente.
  2. Adicione imgao regexp na $allblocksvariável
  3. Retire wpautopdo the_contentfiltro.
  4. Adicione sua versão bifurcada em the_content.
  5. Pode ser necessário jogar com prioridade e, possivelmente, remover e adicionar novamente outros filtros se algo ocorrer devido a uma ordem de processamento alterada.
Rarst
fonte
Vou tentar esta abordagem. Eu nunca pensei em adicionar a tag img à variável allblocks, essa é uma idéia genial. Vou ver como vou.
precisa saber é o seguinte
Funcionou bem no começo, então cheguei ao cenário em que uma imagem está dentro de uma tag de âncora e ambas já estão dentro de um parágrafo (então p> img> a). Com o img tratado como um bloco, o wp-autop fecha a tag de parágrafo antes que a tag img inicie, impedindo o layout.
benz001
2

talvez isso ajude

remove_filter('the_content', 'wpautop')

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

Soska
fonte
Eu considerei essa abordagem, mas como o layout é excêntrico, como eu disse, depende muito da necessidade de tags p. Como eu estou fazendo uma coisa de texto de 2 colunas, onde as tags p flutuam para a esquerda para dar a aparência de 2 colunas de texto. Assim, você pode ver por que um tag de empacotamento de uma imagem seria um problema, porque também está flutuando.
Dwayne Charrington
1

Soska deu uma maneira fácil.

Mas o que faço é extrair imagem do conteúdo e exibi-la separadamente.

Avinash
fonte
Eu considerei isso também e ainda é uma opção. No entanto, como é apenas uma imagem para salvar todos os problemas, eu poderia usar apenas miniaturas de post em destaque, o que me permitiria controlar como a imagem é exibida.
precisa saber é o seguinte
Também é possível adicionar campo personalizado para o post / página, imagem polegar como e salvar o caminho da imagem em seu valor ...
Avinash
1

Este post é um pouco antigo, mas existe uma solução muito mais simples, exceto o CSS do seu lado.

A quebra da tag img em uma div tem pouco efeito negativo.

Laoshi Ma
fonte
1

Eu desenvolvi um plugin que corrigiu esse problema exato: http://wordpress.org/extend/plugins/unwrap-images/

É melhor do que definir margem ou mergulhar direto no código do Wordpress para quem não quer mexer no 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! Cheers, Brian

gnzlz
fonte
aparentemente ainda tem mais de 30 instalações ativas: D
Julix
1

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

Aqui está 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!

rlesko
fonte
1

Eu não sou um especialista, mas passei a tarde inteira tentando resolver o img envolto em tags p e isso funcionou para mim.

Estou trabalhando em um tema baseado em wordpress e acabei de adicionar 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 pe img separadamente.

Também é possível adicionar uma div com uma classe diferente ao redor do img usando este:

$(document).ready(function (){

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

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

M Joana
fonte
3
Você realmente usa aspas? :)
fuxia
Eu considerei essa abordagem pela primeira vez quando, mas o pensamento de manipulação DOM desnecessária via jQuery era muito arriscado e sobrecarga potencial desnecessária quando você pode fazer isso no PHP com expressões regulares complicadas.
Dwayne Charrington
0

Dependendo da postagem, outra solução poderia ser usar o plug-in WP não formatado para desativar a função auto-p por postagem.

Synetech
fonte
Isso é bastante útil, embora a única ressalva que eu possa ver seja que, se você quiser que as imagens não tenham tags P, mas também tenham texto em sua página, será uma bagunça enorme. Provavelmente isso seria bom para postagens com apenas imagens e talvez algumas linhas de texto. Ainda assim, útil.
Dwayne Charrington
Sim, é por isso que eu disse que depende do post.
Synetech 23/02
0

Caso alguém procure uma maneira rápida e suja de 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, é o WP-AUTO-P , entendeu?)
  3. finaliza a variável "all blocks", deve ser algo como $allblocks = '(?:table|thead|tfoot|capti...
  4. no final adicionar o bloco que você deseja omitir - img, a, etc ... por exemplo, se ele termina em (...)menu|summary)';mudança (...)menu|summary|a)';para adicionar a atag e evitar autopeeing -lo. Observe o |separador de tubulação - é sintaxe regex !

É isso aí, feliz Wordpressing!

JDuarteDJ
fonte