WordPress et JavaScript : mettre du code en dur dans vos articles
Si jamais un jour, comme moi, vous essayez de mettre du code JavaScript directement à l’intérieur de votre article – ou de votre page – alors irez dans l’onglet à droite ainsi :
Et vous taperez sûrement quelques lignes basiques comme celles-ci :
<script>
alert('bonjour');
</script>
Cela ne fonctionnera pas !
J’ai posé la question ici, et la réponse était : le code généré dans la page n’est pas correct, il faut le corriger… ce qui est vrai ! La seule solution que j’aie trouvé : écrire un fichier JavaScript externe, et l’embarquer dans la page. Malheureusement, j’ai codé la chose en dur, et je cherche actuellement parmi ces possibilités :
- Soit pouvoir écrire du code qui ne sera pas retravaillé dans les articles / et / ou / pages ;
- Soit pouvoir inclure des fichiers uniquement en fonction des pages.
Ce que je n’ai pas fait. Mais ma solution fonctionne, même si elle n’est pas la meilleure.
Solution 1
Je suis allé dans mon thème, et j’ai fait un include « générique » dans et j’y ai rajouté l’inclusion de mon script :
wp_enqueue_script( 'olivierpons', get_template_directory_uri() . '/js/op.js' );
C’était ici :
Et là, j’ai pu écrire mon script, entièrement en JavaScript, qui n’est pas modifié par WordPress.
Pour information, ce script crée un formulaire complet afin de générer une requête SQL pour créer une base de données SQL avec un utilisateur et un mot de passe afin de copier coller le code pour créer la totale. Cela est si souvent fait que ça m’a lassé un peu et j’ai écrit ce code.
Vous pouvez retrouver ce formulaire dans cet article et dans cette page.
Solution 2
Les shortcode. Vous écrivez une function Php qui renvoie une chaine qui ne sera pas modifiée. Donc cette chaine peut tout à fait être du code dans une balise Javascript : <script>alert('bonjour');</script>. Seul problème : elle doit être codée en dur.
J’ai essayé de le contourner pour rendre le code entièrement dynamique.
Essayez ce code dans le fichier functions.php de votre thème :
if (!function_exists( 'foobar_func' )):
function foobar_func( $atts, $content, $tag ){
echo $atts['script'];
return (isset($content) ? $content : '');
}
add_shortcode( 'foobar', 'foobar_func' );
endif;
Puis essayez d’appeler la fonction ainsi dans un article :
[f oobar script="<script>
jQuery(document).ready(function() {
var j=jQuery('<div />');
});
</script>"]
Et vous verrez que malgré tout, les paramètres sont retravaillés par WordPress et malmenés !
Au final, deux solutions
- Ecrire un fichier JS externe, et l’inclure soit de manière générique dans toutes les pages, soit de manière dynamique (à vous de le paramétrer) :
- La seconde qui consiste à écrire un shortcode et que ce shortcode renvoie le code Javascript au complet, sachant que le gros inconvénient, c’est que le code que vous renverrez sera difficilement lisible : en effet, ce sera une chaine de caractères « simple » dans votre fichier Php, il n’y aura aucune coloration syntaxique.