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

33

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.

Dwayne Charrington
la source

Réponses:

34

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);
Jamesc
la source
Sans aucun doute, c'est la bonne réponse. Merci James, j'ai essayé et ça marche à merveille.
Dwayne Charrington le
Bonjour @ Dwayne - merci pour les commentaires. J'ai ajouté un filtre amélioré qui gérera les liens, nous l'utilisons maintenant sur notre site client.
Jamesc
Vous devriez certainement mettre cela dans le référentiel du plugin Wordpress. Une recherche rapide sur Google montre que beaucoup de gens ont ce problème sans bonne solution.
Geoffrey Burdett
1
Notez que cela ne fonctionnera pas avec le imgbalisage HTML5 par défaut , c'est-à-dire <img ...>sans la barre oblique de fermeture. Il est préférable de rendre cela optionnel dans votre regex. Ou mieux encore, vous pouvez le laisser comme vous le .*ferez.
Bram Vanroy
Quelqu'un l'a-t-il fait fonctionner <img ...>sans />?
Runnick
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 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é.
Rarst
la source
Je vais essayer cette approche. Je n'ai jamais pensé à ajouter le tag img à la variable allblocks, c'est une idée géniale. Je vais voir comment je vais.
Dwayne Charrington
Au début, j’ai bien travaillé, puis j’ai eu raison de penser qu’une image se trouve dans une balise anchor et que les deux sont déjà dans un paragraphe (donc p> img> a). Avec img traité comme un bloc, wp-autop ferme la balise de paragraphe avant le début de la balise img, supprimant ainsi la mise en page.
benz001 le
2

peut-être que ça va aider

remove_filter('the_content', 'wpautop')

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

Soska
la source
J'ai envisagé cette approche, mais comme la mise en page est excentrique, comme je l'ai dit, elle dépend fortement de la nécessité de p tags Comme je suis en train de faire un texte de 2 colonnes où p balises sont flottées à gauche pour donner l’apparence de 2 colonnes de texte. Vous pouvez donc voir pourquoi la balise ap pour envelopper une image pose problème, car elle est également flottante.
Dwayne Charrington
1

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.

Avinash
la source
J'y ai aussi pensé et c'est toujours une option. Cependant, comme il n’ya qu’une seule image pour sauver tous les tracas, je pourrais simplement utiliser les miniatures des messages en vedette, ce qui me permettrait de contrôler le mode d’affichage de l’image.
Dwayne Charrington
vous pouvez aussi ajouter un champ personnalisé à la publication / à la page, comme une image de pouce et enregistrer le chemin de l'image dans sa valeur ...
Avinash
1

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.

Laoshi Ma
la source
1

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

Gnzlz
la source
apparemment toujours plus de 30 installations actives: D
juillet
1

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é!

Rlesko
la source
1

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

M Joana
la source
3
Utilisez-vous vraiment des citations frisées? :)
fuxia
J'avais envisagé cette approche dès le début, mais l'idée d'une manipulation inutile du DOM par jQuery était un risque trop important et une charge inutile inutile lorsque vous pouvez le faire en PHP avec des expressions régulières complexes.
Dwayne Charrington le
0

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.

Synetech
la source
C'est très utile, bien que la seule réserve que je puisse voir, c'est que si vous voulez que les images n'aient pas de balises P, mais aussi du texte dans votre page, il va y avoir un gâchis énorme. Ce serait probablement bon pour les publications qui ne contiennent que des images et peut-être quelques lignes de texte. Toujours utile.
Dwayne Charrington
Eh oui, c'est pourquoi j'ai dit que cela dépend de la poste.
Synetech
0

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!

JDuarteDJ
la source