web-dev-qa-db-fra.com

Arrêtez Wordpress en enveloppant les images dans une balise "P"

J'ai cherché haut et bas une solution simple à ce problème, mais en vain. Wordpress continue à envelopper mes images dans des balises p et, en raison de la nature excentrique de la présentation d'un site sur lequel je travaille, c'est très énervant.

J'ai créé une solution jQuery pour décompresser des images, mais ce n'est pas si génial. Il est à la traîne à cause du chargement d'autres éléments sur la page et les modifications sont donc lentes à faire. Existe-t-il un moyen d’empêcher Wordpress d’emballer uniquement des images avec des balises p? Un crochet ou un filtre peut peut-être être exécuté.

Cela se produit lors du téléchargement d'une image, puis de son insertion dans l'éditeur WYSIWYG. Accéder manuellement à la vue de code et supprimer les balises p n'est pas une option, car le client n'est pas techniquement inepte.

Je comprends que les images sont en ligne, mais la façon dont j'ai les images codées par le site est à l'intérieur de divs et définie pour bloquer, ce qui en fait un code valide.

postseditorcontentwysiwygthe-content
32
Dwayne Charrington

voici ce que nous avons fait hier sur un site client avec lequel nous avions ce problème précis ... J'ai créé un filtre rapide en tant que plugin et je l'ai activé.

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

Si vous déposez cela dans un fichier php de votre dossier/wp-content/plugins, puis l'activez, il devrait supprimer les balises p de tout paragraphe ne contenant qu'une image.

Je ne suis pas sûr de la force de l'expression rationnelle si elle échouera avec les sorties d'autres éditeurs - par exemple, si la balise img est fermée avec simplement> elle échouera. Si quelqu'un a quelque chose de plus fort, ce serait vraiment utile.

À votre santé,

James

--- Filtre amélioré ---

Pour travailler avec des images encapsulées dans des liens, il conserve les liens dans la sortie et supprime les balises p.

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

Fondamentalement, vous devez faire en sorte que WordPress traite img comme un élément de niveau bloc aux fins de la mise en forme. Ces éléments sont codés en dur dans wpautop() et la liste n'est malheureusement pas filtrée.

Ce que je ferais c'est:

  1. Fourchette wpautop() sous un nom différent.
  2. Ajoutez img à l'expression rationnelle dans la variable $allblocks.
  3. Supprimez wpautop du filtre the_content.
  4. Ajoutez votre version forkée à the_content.
  5. Vous devrez peut-être jouer en priorité et éventuellement supprimer et rajouter d'autres filtres si quelque chose se cassait à cause d'un ordre de traitement modifié.
13
Rarst

peut-être que ça va aider

remove_filter('the_content', 'wpautop')

Mais ensuite, vous allez ajouter les paragraphes pour tout le reste manuellement.

2
Soska

La réponse acceptée m'a aidé avec seulement les images mais le code révisé ne gère pas bien les images liées sur mon site. This blog post a un code qui fonctionne parfaitement.

Voici le code:

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

À votre santé!

1
rlesko

Je ne suis pas un expert, mais je viens de passer l'après-midi à essayer de résoudre le problème im pg et cela a fonctionné pour moi.

Je travaille sur un thème basé sur wordpress et je viens de l'ajouter au fichier functions.js

Jquery function déballe

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

maintenant je peux travailler p et img séparément.

Vous pouvez aussi ajouter une div avec une classe différente autour de img en utilisant ceci:

$(document).ready(function (){

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

ce dernier n’a pas résolu mon problème car je voulais créer des balises p avec display: none; donc je devais vraiment prendre ces img de là.

1
M Joana

J'ai développé un plugin qui corrigeait ce problème: http://wordpress.org/extend/plugins/unwrap-images/

C'est mieux que de définir la marge ou de plonger directement dans le code Wordpress pour ceux qui ne veulent pas jouer avec du code car il utilise la fonction de décompression native de jQuery pour décompresser toutes les images de leurs balises p.

J'espère que cela aide quelqu'un! Cordialement, Brian

1
gnzlz

Soska ont donné un moyen/facile.

Mais ce que je fais est d’extraire une image du contenu et de l’afficher séparément.

1
Avinash

Cet article est un peu vieux, mais il existe une solution beaucoup plus simple, excluant CSS de votre côté.

Envelopper la balise img dans une div a peu d’effet négatif.

1
Laoshi Ma

Au cas où quelqu'un chercherait un rapide et sale solution à ce problème pour any tag, voici ce que j'ai fait:

  1. allez à wp-content/formating.php
  2. trouver la fonction wpautop. (au cas où vous l'auriez manqué, c'est WP-AUTO-P, obtenez-vous?)
  3. termine la variable "tous les blocs", devrait être quelque chose comme $allblocks = '(?:table|thead|tfoot|capti...
  4. à la fin, ajoutez le bloc que vous souhaitez omettre - img, a, etc ... par exemple, s'il se termine par (...)menu|summary)';, remplacez (...)menu|summary|a)'; par ajouter la balise a et évitez observation automatique it. Notez le séparateur de pipe | - c’est regex syntax!

Ça y est, joyeux Wordpressing!

0
JDuarteDJ

Selon le post, une autre solution pourrait être d’utiliser le plugin WP Unformatted pour désactiver la fonction auto-p sur une base individuelle.

0
Synetech