Arrêtez Wordpress pour envelopper les images dans une balise «P»

31

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, cela est très gênant.

J'ai créé une solution jQuery pour dérouler les images, mais ce n'est pas si génial. Il y a du retard par rapport au chargement d'autres éléments sur la page, ce qui fait que les modifications sont 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 site est à l'intérieur de divs et définie pour bloquer, ce qui en fait un code valide.

    
posée Dwayne Charrington 17.01.2011 - 05:08

10 réponses

32

voici ce que nous avons fait hier sur un site client au sujet duquel nous avions exactement ce problème ... J'ai créé un filtre rapide en tant que plug-in 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', '', $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 en cas d'échec des sorties d'autres éditeurs, par exemple si la balise img est fermée avec seulement > ça va échouer. Si quelqu'un a quelque chose de plus fort, ce serait vraiment utile.

A bientôt,

James

--- Filtre amélioré ---

Pour utiliser des images entourées de liens, conservez les liens dans la sortie et supprimez les balises p.

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '', $content);
    
réponse donnée jamesc 02.02.2011 - 13:26
13

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 listés. n'est malheureusement pas filtré.

Ce que je voudrais faire 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é.
réponse donnée Rarst 17.01.2011 - 09:33
2

peut-être que cela aidera

remove_filter('the_content', 'wpautop')

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

    
réponse donnée Soska 17.01.2011 - 08:54
1

Soska a donné un moyen / facile.

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

    
réponse donnée Avinash 17.01.2011 - 10:46
1

J'ai développé un plugin qui corrigeait ce problème: enlace

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 ça aide quelqu'un! Cordialement, Brian

    
réponse donnée gnzlz 04.11.2011 - 09:18
1

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

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

Fonction Jquery déroulée

> $(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.

Peut également ajouter un 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à.

    
réponse donnée M Joana 18.02.2013 - 19:29
0

En fonction de la publication, une autre solution pourrait consister à utiliser le plug-in WP Unformatted pour désactiver le p fonction sur une base individuelle.

    
réponse donnée Synetech 23.02.2011 - 02:33
0

Ce message est un peu ancien, mais il existe une solution beaucoup plus simple, sauf CSS.

L’emballage de la balise img dans une div a peu d’effet négatif.

    
réponse donnée Laoshi Ma 19.08.2011 - 20:48
0

La réponse acceptée m'a aidé uniquement pour les images, mais le code révisé ne gère pas correctement les images liées sur mon site. Ce billet de blog 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');

Salut!

    
réponse donnée rlesko 01.01.2012 - 14:19
0

Si quelqu'un cherche un moyen rapide et sale pour résoudre ce problème pour n'importe quelle balise , voici ce que j'ai fait:

  1. aller à 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, si elle se termine par (...)menu|summary)'; , remplacez-la par (...)menu|summary|a)'; pour ajouter la balise a et évitez de la la visualiser automatiquement . Notez le tuyau | separator - sa expression régulière !

Voilà, joyeux Wordpressing!

    
réponse donnée JDuarteDJ 12.08.2018 - 00:04

Lire d'autres questions sur les étiquettes