WordPress : Trouvez un div avec une certaine classe et ajoutez du HTML après et avant (avec PHP!)

Publié par Jean-Michel le

J’ai le problème suivant – Comment trouver un div avec la classe « test » et ajouter  » </div> » avant et  » <div class="sth"> » après . Exemple plus détaillé :

<!-- The original code -->
<div class="parent">
   ...here we can have some more content...
   <div class="test"></div>
</div>

<!-- The thing that I want to achieve -->
<div class="parent">
...here we can have some more content...
</div>

<div class="test"></div>

<div class="sth">
</div>

J’ai essayé avec javascript/jQuery mais sans succès, car il est généré dans DOM. J’ai donc décidé de le faire avec quelque chose qui fonctionnera dessus avant de montrer le contenu.

Des idées sur la façon d’accomplir cela?

(Le contenu sera généré par les publications WordPress, si cela peut vous aider…)

ps Désolé pour mon mauvais anglais

Solution n°1 trouvée

Vous avez dit que vous avez essayé jQuerysans succès. Mais peut-être que vous voulez essayer cette approche réussie :

$('.test').wrap('<div class="sth"></div>');

N’oubliez pas de l’exécuter lorsque le DOM est prêt :

$(function() {
    $('.test').wrap('<div class="sth"></div>');
});

Solution n°2 trouvée

Utilisez votre code ici jsu avant la fin de la balise body,</body>

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
$( ".test" ).insertAfter( ".parent" );
});

Ce wrapper entraînera l’exécution de votre code lorsque le DOM sera entièrement construit. Si, pour une raison quelconque, vous souhaitez que votre code s’exécute immédiatement au lieu d’attendre l’événement DOM ready, vous pouvez utiliser cette méthode wrapper à la place :

    (function($) {
        // Inside of this function, $() will work as an alias for jQuery()
        // and other libraries also using $ will not be accessible under this shortcut
$( ".test" ).insertAfter( ".parent" );
    })(jQuery);

Réf : http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://jsfiddle.net/itsazzad/wW4Pv/1/

Solution n°3 trouvée

JavaScript :

var page = document.documentElement.InnerHTML;
document.documentElement.InnerHTML = page.replace("<div class="test">","</div><div class="test"><div class="sth">");

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *