Injecter du JS grâce au PHP

<!-- Bouton "Début" -->
<div style="text-align: center;">
<button type="button" onclick="montop();">▲</button>
</div>
<script>
    function montop(){
        scrollTo(0,0); 
    }
</script>

function cma_bouton_top() {
    $html = '<div style="text-align: center;"><button type="button" onclick="montop();">▲</button></div>'; 
    $html.= '<script>function montop(){ scrollTo(0,0); }</script>';

    return $html;
}

add_shortcode( 'bouton_top', 'cma_bouton_top' );

Explications :

• $html = ‘ etc. ‘; stocke la première partie du HTML (la div)
• html.= ‘ etc. ‘; (idem $html = $html . ‘etc. ‘) ajoute à la chaîne de caractères la 2^e partie du HTML (le script)
  • On aurait pu tout stocker d’un coup dans la variable $html mais on a procédé en 2 étapes pour améliorer la lisibilité du code
  • En PHP, toutes les variables commencent par $
  • En PHP, l’opérateur point (.) permet de concaténer les chaînes de caractères (en JS on aurait utilisé l’opérateur plus (+))
• return $html;
  • La chaîne de caractères $html retournée par la fonction, sera intégralement inscrite sur la page à l’endroit où le short code a été appelé
• add_shortcode( ’bouton_top’, ‘cma_bouton_top’ );
  • La fonction add_shortcode permet de déclarer le short code bouton_top pour qu’il exécute la fonction cma_bouton_top au moment où la page est créée par le serveur.
  • En effet, le code de la fonction déclarée par function cma_bouton_top() {etc. } n’est exécuté que si on appelle la fonction d’une façon ou d’une autre (ici grâce à l’appelle du short code bouton_top dont le lien avec la fonction à déclencher cma_bouton_top, a été fait grâce à une autre fonction : add_shortcode.

<script>
//Effacer les liens de la page qui pointent vers la page elle-même :

var urlcourante = document.location.href; 
// Supprimons l'éventuel dernier slash de l'URL
urlcourante = urlcourante.replace(/\/$/, "");
// Gardons dans la variable queue_url uniquement la portion derrière le dernier slash de urlcourante
var queue_url = urlcourante.substring (urlcourante.lastIndexOf( "/" )+1 );

const liensPage = document.querySelectorAll("a");
//alert(queue_url +" : "+ liensPage.length);
if(liensPage.length > 0){
    var urlLien;
    var queue_urlLien;

    for (let pas = 0; pas < liensPage.length; pas++) {
        if(liensPage[pas].hasAttribute("href")){
            urlLien = liensPage[pas].getAttribute("href");
            urlLien = urlLien.replace(/\/$/, "");
            queue_urlLien = urlLien.substring(urlLien.lastIndexOf("/") +1);
            if(queue_url == queue_urlLien){
                liensPage[pas].removeAttribute ('href');
                liensPage[pas].setAttribute ('style','background-color:lightgreen');
                liensPage[pas].parentElement .parentElement.parentElement.querySelectorAll('a')[0].setAttribute ('style','background-color:lightgreen');
            }
        }
    }
} 
</script>

function cmaAjouterScriptEffacerAutoLiens() {
    wp_enqueue_script('cma-effacer-auto-liens', get_stylesheet_directory_uri() . '/js/effacer-auto-liens.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiens');

Explications :

• function cmaAjouterScriptEffacerAutoLiens et add_action(‘wp_enqueue_scripts’, ‘cmaAjouterScriptEffacerAutoLiens’);
  • La fonction cmaAjouterScriptEffacerAutoLiens sera déclenchée (fonction WP add_action) au moment où WP constitue la liste ordonnée des scripts à lancer pour la page qu’il est en train de construire (wp_enqueue_scripts au pluriel)
  • La fonction cmaAjouterScriptEffacerAutoLiens consiste précisément à charger notre script en particulier
• wp_enqueue_script (au singulier) : cette fonction WP permet de charger un script en particulier
  • cma-effacer-auto-liens est l’identifiant unique que nous donnons à notre script (il sera utilisé par WP)
  • get_stylesheet_directory_uri est une fonction WP qui renvoie l’url du dossier du thème enfant (attention, la fonction get_template_directory_uri renvoie l’url du thème parent).
  • L’opérateur point (.) permet de concaténer les chaînes de caractères
  • array() est un tableau qui peut si nécessaire être utilisé pour prioriser l’exécution d’un script par rapport à un autre (quel que soit l’ordre du chargement de ces scripts)
  • true (vrai) indique que le script doit être chargé dans le footer (donc lorsque la page est quasiment prête à être affichée).

function cmaAjouterScriptEffacerAutoLiens() {
    if(is_category() or is_page())
    wp_enqueue_script('cma-effacer-auto-liens', get_stylesheet_directory_uri() . '/js/effacer-auto-liens.js', array(), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiens');

Explications :

• Comme ce script ne concerne que les pages HTML de type Page et Archive (le type d’une page HTML est déduit du modèle, Page ou Archive, auquel elle est associée), il ne faut charger le script que pour les pages HTML concernées.
• On a donc ajouté un test, if (si) pour ne charger le test qu’en présence des pages HTML concernées.
• On a utilisé pour cela des fonctions WP particulières nommées conditional tags (balises conditionnelles) : is_category et is_page
  • Il en existe pleins d’autres dont is_archive, is_single, etc. : voir https://developer.wordpress.org/themes/basics/conditional-tags/
• or est le ou logique en PHP
• Remarque : pourquoi ne pas avoir mis ce test plus en amont, sur add_action, pour éviter une opération inutile ? Tout simplement parce qu’au moment où WP exécute functions.php, (donc add_action), il ne sait pas encore quel type de page on va lui demander de renvoyer. Par contre, au moment de constituer la liste des scripts (wp_enqueue_scripts au pluriel) WP possède cette information (et il peut utiliser la fonction cmaAjouterScriptEffacerAutoLiens de functions.php qu’il a déjà chargé avec une instruction de type include ‘functions.php’;).