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. Cela prend du retard en raison du 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. Entrer manuellement dans 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.

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

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 durwpautop() et la liste n'est malheureusement pas filtrée.

Ce que je ferais c'est:

1. Fourchette wpautop()sous un nom différent.
2. Ajouter imgà l'expression rationnelle dans la $allblocksvariable.
3. Retirer wpautopdu the_contentfiltre.
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é.

peut-être que ça va aider

remove_filter('the_content', 'wpautop')

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

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.

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.

J'ai développé un plugin qui a résolu 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

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

À votre santé!

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à.

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.

Dans le cas où une personne est de chercher un rapide et sale façon de résoudre ce problème pour toute étiquette est ce que je l'ai fait ici:

1. allez à wp-content / formating.php
2. trouver la fonction wpautop. (au cas où vous l'auriez manqué, c'est WP-AUTO-P , vous l'avez?)
3. fins de la variable "tous les blocs", devrait être quelque chose comme $allblocks = '(?:table|thead|tfoot|capti...
4. ajouter à la fin du bloc que vous souhaitez Omettre - img, a, etc ... par exemple si elle se termine par le (...)menu|summary)';changement d' (...)menu|summary|a)';ajouter l' aétiquette et éviter autopeeing il. Notez le |séparateur de tuyaux - c'est la syntaxe regex !

C'est ça, joyeux Wordpressing!