Documentation du site écrire.fun

<?php
/*
 * Plugin Name: ecrire-fun-2022
 * Description: Utilisé par le site écrire.fun avec le thème WP 2022. Gère la Recherche sélective, la désactivation des liens inutiles, les sommaires, les short codes.
 * Author: CHIRO314
 * Version: 1.0
 */

require_onc eplugin_dir_path(__FILE__) . 'includes/mesfonctions.php';

<?php
/**** Auteur : CM *************** ACCES A CE FICHIER *************************/

//dans wp-content /plugins /ecrire-fun-2022/ecrire-fun-2022.php :
//require_once plugin_dir_path(__FILE__) . 'includes/mesfonctions.php';

/************************************* VARIABLES GLOBALES ******************/

//$cmaWayToJs = get_stylesheet_directory_uri() . '/js/';    //thème enfant
//$cmaWayToJs = get_template_directory_uri() . '/js/';    //thème parent 2022
//$cmaWayToJs = get_theme_root(). '/twentytwentytwo-child/js/'; //là ça ne marche pas ??
//var_dump( $cmaWayToJs);
//$cmaWayToJs ="https://xn--crire-9ra.fun/wp-content/themes/twentytwentytwo-child/js/";  // en dur ça marche
//$cmaWayToJs ="https://xn--crire-9ra.fun/wp-content/plugins/ecrire-fun-2022/includes/js/"; // en dur ça marche

$cmaWayToJs = plugin_dir_url( __FILE__ ) . "js/";


/**************** ADMINISTRATION *************************************************/

/* Auteur : CM ****** LIEN PERSONNALISER ***************
 * j'ai constaté que le menu 'wp-admin /Apparence / Personnaliser' n'est plus affiché.
 * En attendant qu'il réapparaisse, j'ai ajouté son lien dans la barre d'outils, notamment pour pouvoir modifier mon CSS.
 * J'ai pu récupérer le lien (customize.php) sur un site de test où le menu n'avait pas disparu.
 * A toute fin utile, les 2 autres sous-menus du menu Apparence sont : themes.php et site-editor.php
*******************************************************/
add_action('admin_bar_menu', 'wpcma_barre_outils_liens', 999); 
function wpcma_barre_outils_liens($wp_admin_bar) {
    //global $wp_admin_bar;
    $args = array(
	'id' => 'cma_personnaliser',
	'title' => 'Personnaliser',
	'href' => 'https://xn--crire-9ra.fun/wp-admin/customize.php'
    );
    $wp_admin_bar->add_node($args);
}

/* Auteur : CM ************************************ COLONNE SYNCHRO dans ADMIN WP_BLOCK (COMPOSITIONS) *****************
*  Ajouter une colonne "Synchro" dans l'écran d'administration des Compositions (wp_block).
*  manage_wp_block_posts_columns : OK 
*  manage_wp_block_custom_column et manage_wp_blocks_custom_column: KO
*
*  Essai ci-dessous avec page et pages : OK
***************************************************/

/*****************************************************************
add_filter('manage_page_posts_columns', function($lesColonnes)) {
    $lesColonnes['nombre_de_mots'] = 'Nb mots';

    return $lesColonnes;
});

add_filter('manage_page_posts_columns' , 'ordre_des_colonnes');
function ordre_des_colonnes($columns) {
    return array(
        'cb' => $columns['cb'],
        'title' => $columns['title'],
        'nombre_de_mots' => $columns['nombre_de_mots'],
        'comments' => $columns['comments'],      
    );
}

******************************************************************/

//Regroupe les 2 fonctions ci-dessus : créer une colonne et ordonner les colonnes :

add_filter('manage_page_posts_columns' , 'cma_admin_pages_colonnes');
function cma_admin_pages_colonnes($columns) {
    return array(
        'cb' => $columns['cb'],
        'title' => $columns['title'],
        'date' => $columns['date'],
        'nombre_de_mots' => 'Nb mots',
        'comments' => $columns['comments']
    );
}

//Alimenter la nouvelle colonne :

add_action('manage_pages_custom_column','cma_admin_pages_nb_mots', 10, 2); //priorité : 10 par défaut, 2 : nombre d'arguments acceptés par la fonction
function cma_admin_pages_nb_mots($laColonne, $le_id){
    switch ($laColonne) {
        case 'nombre_de_mots':
            $nbMots = str_word_count( //PHP : compter les mots
                strip_tags(  //PHP : ôter les balises HTML et PHP
                    strip_shortcodes(    //WP : ôter les balises de codes courts
                        get_post_field('post_content', $le_id)  //WP : récupérer le contenu de l'élément dont l'id est dans $post_id
                    )
                )
            );
            echo $nbMots;   //PHP : cracher la valeur de $nbMots
        break;
    }
} 

/********************** 6 SHORT CODES *******************************************/

/* Auteur : CM ************************************ HAUT DE PAGE *****************
*  Bouton permettant de remonter en haut de la page.
*********************************************************************************/

add_shortcode('bouton_top', 'cma_bouton_top');
function cma_bouton_top() {

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

    return $html;
}

/* Auteur : CM ************************************ FERMER DETAILS *****************
*  Bouton permettant de fermer tous les détails.
*********************************************************************************/

/***** Ne fonctionne pas : body.scrollTop est toujours = à 0

add_shortcode('fermer_details', 'cma_fermer_details');
function cma_fermer_details() {

    $html = '<div style="text-align: center;"><button type="button" onclick="fermer_details();"><big><big>●</big></big></button></div>'; 
    $html.= '<script>function fermer_details(){ 
        let scrollTop = document.body.scrollTop;
alert(scrollTop);
        let details = document.querySelectorAll("details"); for (let detail of details) detail.open = false; 
        scrollTo(0,scrollTop); }</script>';

    return $html;
}

******/

/* Auteur : CM ************************************ LIRE LA SUITE *****************
*  texte de Lire la suite
*********************************************************************************/

add_shortcode('lire_la_suite', 'cma_lire_la_suite');
function cma_lire_la_suite() {

    $html = '<p><em><strong>Lire la suite</strong> : cliquer sur titre ou image</em></p>'; 

    return $html;
}

/* Auteur : CM ************************************ VERSION WP *****************
*  numéro de la version de WP
*********************************************************************************/

add_shortcode('wpversion', 'cma_wpversion');
function cma_wpversion($atts) { 

    global $wp_version;

    //La couleur et la taille sont passées en paramètres : $atts['couleur'] vaut "black" par défaut et $atts['taille'] vaut "1rem" par défaut
    $atts = shortcode_atts( 
                array('couleur' => "black", 'taille' => "1rem"),
                $atts,
                'wpversion' );
    
    $html = '<p style="font-size: '.$atts['taille'].'; color: '.$atts['couleur'].';"><em><strong>'.$wp_version.'</strong></em></p>'; 

    return $html;
}

/* Auteur : CM **************************** SOMMAIRE SIMPLE ************
*  HTML du code court sommaire_simple h=n
**************************************************************************/

add_shortcode('sommaire_simple', 'cma_sommaire_simple');
function cma_sommaire_simple($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_simple' );
    
    //Contrôle de h
    if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5 and $atts['h'] !=6) $atts['h'] =3;
 
    //$html = '<div id="id-div-sommaire-'.$atts['h'].'"></div>';
    $html = '<div class="class-div-sommaire-'.$atts['h'].'"></div>';
 
    return $html;
}

/* Auteur : CM **************************** SOMMAIRE DOUBLE ************
*  HTML du code court sommaire_double h=n
**************************************************************************/

add_shortcode('sommaire_double', 'cma_sommaire_double');
function cma_sommaire_double($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_double' );
    
    //Contrôle de h
    if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5) $atts['h'] =3;
 
    $html = 
    '<div id="double-sommaire" style="text-align: left;">
        <button id="double-sommaire-bouton1" onclick="afficherSommaire();">
            <big><big>SOMMAIRE</big></big>
        </button>
        <button id="double-sommaire-bouton2" onclick="afficherDetail();">
            <big><big>DETAIL</big></big>
        </button>
    </div>'; 
    $html.= '<div id="sommaire-div-id"><div class="class-div-sommaire-'.$atts['h'].'"></div></div>';
    $html.= '<div id="detail-div-id"><div class="class-div-sommaire-6"></div></div>';  
 
    return $html;
}

/* Auteur : CM **************************** SOMMAIRE AU CHOIX ************
*  HTML du code court sommaire_au_choix h=n (n profondeur de 1er affichage)
**************************************************************************/

add_shortcode('sommaire_au_choix', 'cma_sommaire_au_choix');
function cma_sommaire_au_choix($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_au_choix' );
   
    //Contrôle de h
    //if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5 and $atts['h'] !=6) $atts['h'] =3;
    $profValeurs = [2,3,4,5,6];
    if(!in_array($atts['h'], $profValeurs)) $atts['h'] = 3;
 
    $selected = ["","","","",""];
    $selected[$atts['h']-2] = "selected";

    $html = '
        <div>
        <label for="prof-select"><b>SOMMAIRE</b> de niveau</label>
        <select name="prof-select" id="prof-select">
          <option value="2" '.$selected[0].'>1</option>
          <option value="3" '.$selected[1].'>2</option>
          <option value="4" '.$selected[2].'>3</option>
          <option value="5" '.$selected[3].'>4</option>
          <option value="6" '.$selected[4].'>5</option>
        </select>
        </div>';
    $html.= '<div id="sommaire-div-id-select"><div class="class-div-sommaire-'.$atts['h'].'"></div></div>';

    return $html;
}

/******************* LIENS - SOMMAIRES - RECHERCHES ****************************************/


/* Auteur : CM ************************************ EFFACER AUTO LIENS ***********************
*  Chargement du script cma-effacer-auto-liens pour page et category
*********************************************************************************************/

add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiens');

function cmaAjouterScriptEffacerAutoLiens() {  //thème enfant

    global $cmaWayToJs;
    
    if(is_category() or is_page()) {

        //$coucou = get_stylesheet_directory_uri() . '/js/effacer-auto-liens.js'; var_dump($coucou); 
        //Thème de base get_template_directory_uri   Thème enfant : get_stylesheet_directory_uri

        wp_enqueue_script('cma-effacer-auto-liens', $cmaWayToJs . 'effacer-auto-liens.js', array(), '1.0.0', true);

    }
}

/* Auteur : CM ************************************ EFFACER AUTO LIENS ET CATEGORIE ***********************
*  Chargement du script cma-effacer-auto-liens-et-categorie pour article
**********************************************************************************************************/

add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiensEtCategorie');
function cmaAjouterScriptEffacerAutoLiensEtCategorie() {
    global $cmaWayToJs;
    if(is_single()) {
        //Pour un thème enfant
        wp_enqueue_script('cma-effacer-auto-liens-et-categorie', $cmaWayToJs . 'effacer-auto-liens-et-categorie.js', array(), '1.0.0', true);
        //Pour un thème de base, remplacer la fonction get_stylesheet_directory_uri par get_template_directory_uri
    }
}

/* Auteur : CM ************************************ SOMMAIRES ***********************
*  Chargement des 3 scripts pour page et article
************************************************************************************/
add_action('wp_enqueue_scripts', 'cmaSommairesH2H6DansClassDivSommaireN');
function cmaSommairesH2H6DansClassDivSommaireN(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaires-h2-h6-dans-class-div-sommaire-n', $cmaWayToJs . 'sommaires-h2-h6-dans-class-div-sommaire-n.js', array(), '1.0.0', true);
    }
}

add_action('wp_enqueue_scripts', 'cmaSommaireDouble');
function cmaSommaireDouble(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaire-double', $cmaWayToJs . 'sommaire-double.js', array(), '1.0.0', true);
    }
}

add_action('wp_enqueue_scripts', 'cmaSommaireAuChoix');
function cmaSommaireAuChoix(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaire-au-choix', $cmaWayToJs . 'sommaire-au-choix.js', array(), '1.0.0', true);
    }
}

/* Auteur : CM ************************************ RECHERCHE ***************
*  Fonction complémentaire des scripts : categorie-de-recherche.js ; page-racine-de-recherche.js ; contrainte-de-recherche.js.
*  Selon le cas, la fonction ma_recherche_filter() :
*  o Limitera la recherche à certaines pages (les pages feuilles) quand le champ 'racine' sera présent et renseigné dans le formulaire de recherche
*  o Limitera la recherche aux articles de la catégorie quand le champ 'categorie' sera présent et renseigné dans le formulaire de recherche.
*****************************************************************************/

//Je demande que ma fonction (ma_recherche_filter) soit utilisée (add) avant (pre) de récupérer (get) les page HTML (posts) pour filtrer (filter) le résultat de la Recherche (add_filter('pre_get_posts',) : 

add_filter('pre_get_posts','ma_recherche_filter');

function ma_recherche_filter( $query )
{
    //Les id des pages de test à exclure :
    $pagesAExclureTests = array(13584);
    //Les id des pages adulte à exclure :
    $pagesAExclureAdultes = array(12575, 12563, 10874);
    //Les id des pages filles à exclure qui parlent de WP :
    $pagesAExclureWordPress = array(13650, 13743, 13759, 13779, 13797, 13825, 13878, 14009, 14270, 14470, 14489, 14739, 14907, 14926, 15014, 15054, 15184, 15295, 15427, 15436, 16804, 18035, 18347, 18978);
    //N.B. : pour éviter d'avoir à noter tous ces id, prévoir une fonction qui récupère ces id à tous les niveaux de profondeur, à partir du slug de la page parent.

    //Tableau complet des id de toutes les pages HTML à exclure :
    $pagesAExclure = array_merge($pagesAExclureTests, $pagesAExclureAdultes, $pagesAExclureWordPress);

    $libelleracine = "racine";
    $libelleracine2 = "categorie";

    //Si je ne suis pas dans WP-admin :
    if(!is_admin() && $query->is_main_query()){
        //Si la requête concerne une recherche :
        if ( $query->is_search ){ 
            //Si le formulaire contient un champ "racine" et qu'il n'est pas vide :
            if (isset($_GET[$libelleracine]) and $_GET[$libelleracine] != "" ) {
                //Je récupère l'objet associé à la page racine :
                $mypost = get_page_by_path($_GET[$libelleracine], '', 'page');
                //Je récupère les pages fille de cette page racine :
                $mypages = get_pages(array('child_of' => $mypost->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc'));
                //S'il existe des pages filles :
                if(count($mypages) >0){
                    //Je mets dans un tableau l'id de chacune des pages filles :
                    foreach($mypages as $myPage) $pagesAInclure[] = $myPage->ID;
                    //Je paramètre la requête pour qu'elle se limite à rechercher parmi les pages (filles) dont je fourni le tableau des id :
                    $query->set('post__in', $pagesAInclure);
                } else{
                    //Je paramètre la requête pour qu'elle exclue toutes les pages et articles (dont je fourni le tableau des id) :
                    $toutesLesPages = get_pages();
                    foreach($toutesLesPages as $unePage) $pagesAExclure2[] = $unePage->ID;
                    $toutsLesArticles = get_posts(array('numberposts' => -1));
                    foreach($toutsLesArticles as $unArticle) $articlesAExclure[] = $unArticle->ID;
                    $pagesAExclure3 = array_merge($pagesAExclure2, $articlesAExclure);
                    $query->set('post__not_in', $pagesAExclure3);
                }
            }
            //Si le formulaire contient un champ "categorie" et qu'il n'est pas vide :
            else if (isset($_GET[$libelleracine2]) and $_GET[$libelleracine2] != "" ) {
                //Je récupère l'objet associé à la categorie :
                $mypost = get_category_by_slug($_GET[$libelleracine2]);
                //Je récupère les articles de cette categorie :
                $mypages = get_posts(array('category' => $mypost->term_id, 'sort_column' => 'post_date', 'sort_order' => 'desc', 'numberposts' => -1));
                if(count($mypages) >0){
                    //Je mets dans un tableau l'id de chacun des articles de la catégorie :
                    foreach($mypages as $myPage) $pagesAInclure[] = $myPage->ID;
                    //Je paramètre la requête pour qu'elle se limite à rechercher parmi les articles de la catégorie, dont je fourni le tableau des id :
                    $query->set('post__in', $pagesAInclure);
                } else{
                    //Je paramètre la requête pour qu'elle exclue toutes les pages et articles (dont je fourni le tableau des id) :
                    $toutesLesPages = get_pages();
                    foreach($toutesLesPages as $unePage) $pagesAExclure2[] = $unePage->ID;
                    $toutsLesArticles = get_posts(array('numberposts' => -1));
                    foreach($toutsLesArticles as $unArticle) $articlesAExclure[] = $unArticle->ID;
                    $pagesAExclure3 = array_merge($pagesAExclure2, $articlesAExclure);
                    $query->set('post__not_in', $pagesAExclure3);
                }              
            }
            //Si le formulaire ne contient ni de champ "racine", ni de champ "categorie" non vides :
            else {
                //Je paramètre la requête pour qu'elle exclue certaines pages dont je fourni le tableau des id :
                $query->set('post__not_in', $pagesAExclure);
            }
        }
    }
    //A toute fin utile, la fonction retourne la requête reparamétrée :
    return $query;
} //fin de ma fonction

/* Auteur : CM ************************************ RECHERCHE : TOUTE CATEGORIE EST UNE RACINE DE RECHERCHE **********************
*  Chargement du script cma-categorie-de-recherche pour catégorie
**********************************************************************************************************/

add_action('wp_enqueue_scripts', 'cmaAjouterScriptCategorieDeRecherche');
function cmaAjouterScriptCategorieDeRecherche() {
    global $cmaWayToJs;
    if(is_category()) {
        wp_enqueue_script('cma-categorie-de-recherche', $cmaWayToJs . 'categorie-de-recherche.js', array(), '1.0.0', true);
    }
}

/* Auteur : CM ************************************ RECHERCHE : TOUTE PAGE EST POTENTIELLEMENT RACINE DE RECHERCHE **********************
*  Chargement du script cma-page-racine-de-recherche pour catégorie
**********************************************************************************************************/

add_action('wp_enqueue_scripts', 'cmaAjouterScriptPageRacineDeRecherche');
function cmaAjouterScriptPageRacineDeRecherche() {
    global $cmaWayToJs;
    if(is_page()) {
        wp_enqueue_script('cma-page-racine-de-recherche', $cmaWayToJs . 'page-racine-de-recherche.js', array(), '1.0.0', true);
    }
}

/* Auteur : CM **************************** RECHERCHE : TOUTE RECHERCHE RESTREINTE DOIT SE POURSUIVRE AINSI **********************
*  Chargement du script cma-contrainte-de-recherche pour résultat de recherche (search)
**********************************************************************************************************/

add_action('wp_enqueue_scripts', 'cmaAjouterScriptContrainteDeRecherche');
function cmaAjouterScriptContrainteDeRecherche() {
    global $cmaWayToJs;
    if(is_search()) {
        wp_enqueue_script('cma-contrainte-de-recherche', $cmaWayToJs . 'contrainte-de-recherche.js', array(), '1.0.0', true);
    }
}

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

if(liensPage.length > 0){
    var urlLien;
    var queue_urlLien;
    var parent = [];
    var niveau3 = ["Rhétorique"];

    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].style.background-color = 'grey'; //ne semble pas fonctionner
                liensPage[pas].setAttribute ('style','background-color:grey; color:white'); //peut écraser d'autres éléments du style
                parent = liensPage[pas].parentElement.parentElement.parentElement.querySelectorAll('a');
                parent[0].setAttribute ('style','background-color:grey; color:white');
                //Les 3e niveaux sont traités au cas par cas :
                //if (parent[0].innerHTML == "Rhétorique"){
                if (niveau3.indexOf (parent[0].innerHTML) != -1){
                    liensPage[pas].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll('a')[0].setAttribute ('style','background-color:grey; color:white');
                }
            }
        }
    }
}

add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiens');

function cmaAjouterScriptEffacerAutoLiens() {  //thème enfant

    global $cmaWayToJs;
    
    if(is_category() or is_page()) {

        //$coucou = get_stylesheet_directory_uri() . '/js/effacer-auto-liens.js'; var_dump($coucou); 
        //Thème de base get_template_directory_uri   Thème enfant : get_stylesheet_directory_uri

        wp_enqueue_script('cma-effacer-auto-liens', $cmaWayToJs . 'effacer-auto-liens.js', array(), '1.0.0', true);

    }
}

//Effacer les liens de l'article qui pointent vers l'article lui-même, et vers sa catégorie :

let 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
let queue_url = urlcourante.substring (urlcourante.lastIndexOf( "/" )+1 );

const liensPage2 = document.querySelectorAll("a");
const lienCategorie = document.querySelectorAll(".taxonomy-category a");

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

                //Si lien trouvé dans le menu pour un article alors l'article est unique dans sa catégorie, donc il faut supprimer le lien vers sa catégorie au bout du menu :
                lienCategorie[0].removeAttribute ('href');
                lienCategorie[0].setAttribute ('style','background-color:grey');
            }
        }
    }
}

add_action('wp_enqueue_scripts', 'cmaAjouterScriptEffacerAutoLiensEtCategorie');
function cmaAjouterScriptEffacerAutoLiensEtCategorie() {
    global $cmaWayToJs;
    if(is_single()) {
        //Pour un thème enfant
        wp_enqueue_script('cma-effacer-auto-liens-et-categorie', $cmaWayToJs . 'effacer-auto-liens-et-categorie.js', array(), '1.0.0', true);
        //Pour un thème de base, remplacer la fonction get_stylesheet_directory_uri par get_template_directory_uri
    }
}

<div id="class-div-sommaire-'.$atts['h'].'"></div>

<div id="double-sommaire" style="text-align: left;">
    <button id="double-sommaire-bouton1" type="button" onclick="afficherSommaire();">
        <big><big>SOMMAIRE</big></big>
    </button>
    <button id="double-sommaire-bouton2" type="button" onclick="afficherDetail();">
        <big><big>DETAIL</big></big>
    </button>
</div>
<div id="sommaire-div-id">
    <div id="class-div-sommaire-'.$atts['h'].'"></div>
</div>
<div id="detail-div-id">
    <div id="class-div-sommaire-6"></div>
</div>

<div>
    <label for="prof-select">SOMMAIRE de niveau </label>
    <select name="prof-select" id="prof-select">
        <option value="2" '.$selected[0].'>1</option>
        <option value="3" '.$selected[1].'>2</option>
        <option value="4" '.$selected[2].'>3</option>
        <option value="5" '.$selected[3].'>4</option>
        <option value="6" '.$selected[4].'>5</option>
    </select>
</div>';
<div id="sommaire-div-id-select">
    <div id="class-div-sommaire-'.$atts['h'].'"></div>
</div>';

<div class="class-div-sommaire-'.$atts['h'].'"></div>

add_shortcode('sommaire_simple', 'cma_sommaire_simple');
function cma_sommaire_simple($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_simple' );
    
    //Contrôle de h
    if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5 and $atts['h'] !=6) $atts['h'] =3;
 
    $html = '<div class="class-div-sommaire-'.$atts['h'].'"></div>';
 
    return $html;
}

/* Ce script affiche un ou plusieurs sommaires H2-Hn avec liens dans des groupes ancrés 'class-div-sommaire-n' */

//Récupérer les div avec class-div-sommaire-n (n de 2 à 6) : il peut y avoir plusieurs sommaires par page
const divsSommaire= document.querySelectorAll('.class-div-sommaire-2,.class-div-sommaire-3,.class-div-sommaire-4,.class-div-sommaire-5,.class-div-sommaire-6');

if (divsSommaire.length > 0){
    //Déclaration des variables
    let profondeur = 0;
    let cibleComplete = "h2, h3, h4, h5, h6";
    let cible = "h2, h3, h4, h5, h6";
    let titresComplets = [];
    let titres = [];
    let titre;
    let ul = "";
    let niveauPrecedent = 2;
    let niveau = 2;
    let i = 0;

    let elementClasses;

    //Donner un id à tous les titres qui n'en ont pas
    titresComplets = document.querySelectorAll(cibleComplete);
    if (titresComplets.length > 0){
        for(titre of titresComplets){  //
            if(titre.id == "") titre.id = "sommaire" + i++; //commence avec 'sommaire0'
        }
    }

    for(let divSommaire of divsSommaire){

        //Déterminer la cible des titres :
        //Récupérer la profondeur, le n° à la fin de la classe
        elementClasses = divSommaire.classList;
        profondeur = 0;
        for(let pas = 2; pas<7; pas++){
            if(elementClasses.contains('class-div-sommaire-'+pas)) {
                profondeur = pas; break;
            }
        }

        //Récupérer les titres de niveau 2 à profondeur, inclus
        cible = "h2, h3, h4, h5, h6";
        cible = cible.substring(0, cible.indexOf(profondeur)+1);

        titres = [];
        titres = document.querySelectorAll(cible);
        if (titres.length > 0){

            //Ouverture de la liste
            ul = '<ul>';  
            niveauPrecedent = 2;
            niveau = 2;
            //Traitement de chaque titre
            for(titre of titres){
                if (titre.innerHTML != 'Laisser un commentaire'){  //Un H3 malencontreux
                    //Récupérer le niveau du titre
                    niveau = parseInt(titre.tagName.substr(-1));
                    //Gestion des ouvertures et fermetures des sous-listes
                    if(niveau > niveauPrecedent){
                        //ul+= '<ul>';
                        ul+= '<ul>'.repeat(niveau - niveauPrecedent);
                        niveauPrecedent = niveau;  
                    }
                    else if(niveau < niveauPrecedent){
                        ul+= '</ul>'.repeat(niveauPrecedent - niveau); 
                        niveauPrecedent = niveau;
                    }
                    //Affichage du titre
                    ul+= '<li><a href="#' + titre.id + '">' + titre.innerHTML + '</a></li>';
                }
            }
            //traitement des fermetures après affichage du dernier titre
            niveau = 2;
            ul+= '</ul>'.repeat(niveauPrecedent - niveau);
            //Fermeture de la liste 
            ul+= '</ul>';
            //Affichage dans la div du sommaire
            divSommaire.innerHTML = ul;
        }
    }
}

add_action('wp_enqueue_scripts', 'cmaSommairesH2H6DansClassDivSommaireN');
function cmaSommairesH2H6DansClassDivSommaireN(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaires-h2-h6-dans-class-div-sommaire-n', $cmaWayToJs . 'sommaires-h2-h6-dans-class-div-sommaire-n.js', array(), '1.0.0', true);
    }
}

<div id="double-sommaire" style="text-align: left;">
    <button id="double-sommaire-bouton1" type="button" onclick="afficherSommaire();">
        <big><big>SOMMAIRE</big></big>
    </button>
    <button id="double-sommaire-bouton2" type="button" onclick="afficherDetail();">
        <big><big>DETAIL</big></big>
    </button>
</div>
<div id="sommaire-div-id">
    <div class="class-div-sommaire-'.$atts['h'].'"></div>
</div>
<div id="detail-div-id">
    <div class="class-div-sommaire-6"></div>
</div>

add_shortcode('sommaire_double', 'cma_sommaire_double');
function cma_sommaire_double($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_double' );
    
    //Contrôle de h
    if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5) $atts['h'] =3;
 
    $html = 
    '<div id="double-sommaire" style="text-align: left;">
        <button id="double-sommaire-bouton1" onclick="afficherSommaire();">
            <big><big>SOMMAIRE</big></big>
        </button>
        <button id="double-sommaire-bouton2" onclick="afficherDetail();">
            <big><big>DETAIL</big></big>
        </button>
    </div>'; 
    $html.= '<div id="sommaire-div-id"><div class="class-div-sommaire-'.$atts['h'].'"></div></div>';
    $html.= '<div id="detail-div-id"><div class="class-div-sommaire-6"></div></div>';  
 
    return $html;
}

   let doubleSommaireSommaire = document.getElementById('sommaire-div-id');
   let doubleSommaireDetail = document.getElementById('detail-div-id');
   let doubleSommaireBouton1 = document.getElementById('double-sommaire-bouton1');
   let doubleSommaireBouton2 = document.getElementById('double-sommaire-bouton2');

   //Background color du grand-parent
   //let grandParent = doubleSommaireBouton1.parentElement.parentElement;
   //if(grandParent != null) {
   //}

if(doubleSommaireSommaire != null){
   let bgc = window.getComputedStyle(doubleSommaireBouton1.parentElement.parentElement, null).getPropertyValue("background-color");

   doubleSommaireDetail.style.display = "none";
   doubleSommaireBouton2.style.backgroundColor = "white";
   doubleSommaireBouton2.style.fontWeight = "normal";
   doubleSommaireBouton2.style.border= "1px solid";

   doubleSommaireSommaire.style.display = "block";
   doubleSommaireBouton1.style.backgroundColor = bgc; //prendra la couleur du grand-parent
   doubleSommaireBouton1.style.fontWeight = "bold";
   doubleSommaireBouton1.style.border= "none";
}
function afficherSommaire(){

   if(doubleSommaireSommaire.style.display == "none"){
      let bgc = window.getComputedStyle(doubleSommaireBouton1.parentElement.parentElement, null).getPropertyValue("background-color");

      doubleSommaireDetail.style.display = "none";
      doubleSommaireBouton2.style.backgroundColor = "white";
      doubleSommaireBouton2.style.fontWeight = "normal";
      doubleSommaireBouton2.style.border= "1px solid";

      doubleSommaireSommaire.style.display = "block";
      doubleSommaireBouton1.style.backgroundColor = bgc; //prendra la couleur du grand-parent
      doubleSommaireBouton1.style.fontWeight = "bold";
      doubleSommaireBouton1.style.border= "none";
      document.getElementById ("double-sommaire").scrollIntoView();
   }
}
function afficherDetail(){

   if(doubleSommaireDetail.style.display == "none"){
      let bgc = window.getComputedStyle(doubleSommaireBouton1.parentElement.parentElement, null).getPropertyValue("background-color");

      doubleSommaireSommaire.style.display = "none";
      doubleSommaireBouton1.style.backgroundColor = "white";
      doubleSommaireBouton1.style.fontWeight = "normal";
      doubleSommaireBouton1.style.border= "1px solid";

      doubleSommaireDetail.style.display = "block";
      doubleSommaireBouton2.style.backgroundColor = bgc; //prendra la couleur du grand-parent
      doubleSommaireBouton2.style.fontWeight = "bold";
      doubleSommaireBouton2.style.border= "none";
      document.getElementById ("double-sommaire").scrollIntoView();
   }
}

add_action('wp_enqueue_scripts', 'cmaSommaireDouble');
function cmaSommaireDouble(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaire-double', $cmaWayToJs . 'sommaire-double.js', array(), '1.0.0', true);
    }
}

<div>
    <label for="prof-select">SOMMAIRE de niveau </label>
    <select name="prof-select" id="prof-select">
        <option value="2" '.$selected[0].'>1</option>
        <option value="3" '.$selected[1].'>2</option>
        <option value="4" '.$selected[2].'>3</option>
        <option value="5" '.$selected[3].'>4</option>
        <option value="6" '.$selected[4].'>5</option>
    </select>
</div>';
<div id="sommaire-div-id-select">
    <div class="class-div-sommaire-'.$atts['h'].'"></div>
</div>';

add_action('wp_enqueue_scripts', 'cmaSommaireAuChoix');
function cmaSommaireAuChoix(){
    global $cmaWayToJs;    
    if(is_single() or is_page()) {
        wp_enqueue_script('cma-sommaire-au-choix', $cmaWayToJs . 'sommaire-au-choix.js', array(), '1.0.0', true);
    }
}

let profSelect = document.getElementById("prof-select"); //le select
let sommaireDivIdSelect = document.getElementById("sommaire-div-id-select"); //div enveloppe de la div sommaire
let profondeur = 0;
let cible = "h2, h3, h4, h5, h6";
let titres ; //= [];
let titre;
let ul = "";
let niveauPrecedent = 2;
let niveau = 2;
let i = 0;

let tagMax = 0;
let options = [];

if(profSelect != null){     //le select existe

    //Simplifier le select :

    titres = document.querySelectorAll(cible); //Les titres sont récupérés dans leur ordre d'apparition dans le document.
//console. log("titres.length: |" + titres.length + "|"); // Un titre de plus si le document autorise les commentaires
    if (titres.length > 0){    //Il y a au moins un titre dans le document

        //Déterminer le tag de titre, le plus élevé
        for(titre of titres){
            if (titre.innerHTML != 'Laisser un commentaire') {
                if( tagMax < parseInt(titre.tagName.substr(-1)) ) tagMax =  parseInt(titre.tagName.substr(-1));
            }
        }

        //Rectifier la valeur du select si elle est incohérente avec le niveau de titre le plus élevé
        //if( parseInt(profSelect.value) > tagMax ) profSelect.value = tagMax.toString();
        if(profSelect.value > tagMax ) profSelect.value = tagMax; //fonctionne aussi

        //Supprimer les options inutiles dans le select
        options = profSelect.querySelectorAll("option");
        for(let option of options){
            if(parseInt(option.value) > tagMax) option.remove();
        }
    }

    //Mettre en place l'événement de changement du niveau, et son traitement
    profSelect.addEventListener("change", (event) => {

        //La div de classe class-div-sommaire-n créée par le code court est initialisée au chargement par le script sommaires-h2-h6-dans-class-div-sommaire-n.js
        //Mais après, c'est ce script qui recrée le sommaire suite au change select ; cette div de classe class-div-sommaire-n n'est donc plus utile :
        //sommaireDivClassSelect.innerHTML = '<div class="class-div-sommaire-'+ profSelect.value +'"></div>'; 
        
        //Déterminer la cible des titres à récupérer :
        //Récupérer const profondeur, le n° à la fin de l'id
        profondeur = profSelect.value;
        
        //Récupérer les titres de niveau 2 à profondeur
        cible = "h2, h3, h4, h5, h6";
        cible = cible.substring(0, cible.indexOf(profondeur)+1);

        //Récupérer les titres
        titres = [];
        titres = document.querySelectorAll(cible);

        if (titres.length > 0){
            //Inutile de donner un id aux titres qui n'en ont pas car ça a déjà été fait par le script sommaires-h2-h6-dans-class-div-sommaire-n.js
            //lors de l'initialisation de toutes les div de classe class="class-div-sommaire-n", donc :
            //for(titre of titres){
            //    if(titre.id == "") titre.id = "sommaire"+ profSelect.value +'0'+ i++; //commence avec i=0
                //ce mode de calcul est différent pour ne pas interférer avec celui des autres scripts de affichant des sommaires
            //}

            //Ouverture de la liste
            ul = '<ul>';  
            niveauPrecedent = 2;
            niveau = 2;
            //Traitement de chaque titre
            for(titre of titres){
                if (titre.innerHTML != 'Laisser un commentaire'){  //Un H3 malencontreux
                    //Récupérer le niveau du tag du titre (attention, le niveau affiché à l'internaute est inférieur d'une unité)
                    niveau = parseInt(titre.tagName.substr(-1));

                    //Gestion des ouvertures et fermetures des sous-listes
                    if(niveau > niveauPrecedent){
                        //ul+= '<ul>';
                        ul+= '<ul>'.repeat(niveau - niveauPrecedent);
                        niveauPrecedent = niveau;  
                    }
                    else if(niveau < niveauPrecedent){
                        ul+= '</ul>'.repeat(niveauPrecedent - niveau); 
                        niveauPrecedent = niveau;
                    }

                    //Ecriture du titre
                    ul+= '<li><a href="#' + titre.id + '">' + titre.innerHTML + '</a></li>';
                }
            }
            //traitement des fermetures après écriture du dernier titre
            niveau = 2;
            ul+= '</ul>'.repeat(niveauPrecedent - niveau);
            //Fermeture de la liste 
            ul+= '</ul>';
            //Affichage dans la div du sommaire //Rappel : la div de classe "class-div-sommaire-n" n'a pas été conservée car inutile ici 
            sommaireDivIdSelect.innerHTML = ul;
        }
    });
}

add_shortcode('sommaire_au_choix', 'cma_sommaire_au_choix');
function cma_sommaire_au_choix($atts) { 
    //$atts['h'] vaut 3 par défaut
    $atts = shortcode_atts(
                array('h' => 3,),
                $atts,
                'sommaire_au_choix' );
   
    //Contrôle de h
    //if($atts['h'] !=2 and $atts['h'] !=3 and $atts['h'] !=4 and $atts['h'] !=5 and $atts['h'] !=6) $atts['h'] =3;
    $profValeurs = [2,3,4,5,6];
    if(!in_array($atts['h'], $profValeurs)) $atts['h'] = 3;
 
    $selected = ["","","","",""];
    $selected[$atts['h']-2] = "selected";

    $html = '
        <div>
        <label for="prof-select"><b>SOMMAIRE</b> de niveau</label>
        <select name="prof-select" id="prof-select">
          <option value="2" '.$selected[0].'>1</option>
          <option value="3" '.$selected[1].'>2</option>
          <option value="4" '.$selected[2].'>3</option>
          <option value="5" '.$selected[3].'>4</option>
          <option value="6" '.$selected[4].'>5</option>
        </select>
        </div>';
    $html.= '<div id="sommaire-div-id-select"><div class="class-div-sommaire-'.$atts['h'].'"></div></div>';

    return $html;
}