Code source concernant les tags

AchimoAchimo Member

Bonjour,
Dans PluXml 5.8.7 Je souhaiterais que la taille d'affichage des tags soit plus petite que celle du titre MOTS CLES (H3) et qu'elle soit constante. J'ai vu que la taille était dépendante de la fréquence d'apparition du mot clé dans les articles et je préférerais que cette caractéristique soit obtenue par un tri du plus au moins fréquent en partant du haut de la liste (affectation du tri à une position dans la liste d'affichage plutôt qu'à la taille d'affichage) Où dois-je aller chercher le code de tagList() SVP

Réponses

  • Bonjour,

    l'affichage est géré via CSS.

    Voir le fichier theme.css à partir de la ligne 398

    Cdt

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

  • AchimoAchimo Member
    9 juil. modifié

    Merci.
    Il faut que je me replonge dans le CSS. J'ai bien vu les différentes tailles tag-size dans theme.css mais je ne comprends pas comment tagList () les utilise dans sidebar.php. En fait je ne comprends pas "tag #tag_size"
    Je vais aller lire la doc =)

  • 9 juil. modifié

    Rebonjour,

    Avant que tu partes dans le code des fonctions et des formats d'affichage, je précise avec un exemple ce que tu peut faire via CSS.

    1. passer ta list de tag en flex ou grid selon un affichage en lignes ou en colonnes
    2. retirer les font-size de la feuille de style
    3. se servir de order pour réordonner les li en fonctions de la class tag-size

    Ce qui peut par exemple donner une feuilles de styles avec les styles pour les tags modifiés comme ci-dessous

    /* --------- tags ---------- */
    
    .aside ul.tag-list {
        list-style-type: none;
        padding: 0;
        /* affichage en flex en retour à la ligne */
        display:flex;
        flex-wrap:wrap;
        /* ou  affichage en colonne(s) */
        /*display:grid;*/
        /* Exemple possible de gestion de l'affichage de la grille avec colonnes : */
           /*grid-template-columns: repeat(auto-fit,minmax(5em,max-content));
        gap:0.2em 0.5em ;
        align-items:center; */
    }
    
    .aside ul.tag-list li {
    
    }
    
    .aside ul.tag-list li a {
        padding: 0 0.5rem 0 0;
    }
    
    .aside ul.tag-list li a.active {
        font-weight: bold;
    }
    
    /* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */
    
    .tag-size-1 a {
        /* Riverside  */
        color: #4C6A92;
    }
    
    .tag-size-2 a {
        /* Airy Blue  */
        color: #92B6D5;
    }
    
    .tag-size-3 a {
        /* Sharkskin  */
        color: #838487;
    }
    
    .tag-size-4 a {
        /* Bodacious */
        color: #B76BA3;
    }
    
    .tag-size-5 a {
        color: #AF9483;
        /* Warm Taupe */
    }
    
    .tag-size-6 a {
        color: #AD5D5D;
        /* Dusty Cedar */
    }
    
    .tag-size-7 a {
        /* Lush Meadow */
        color: #006E51;
    }
    
    .tag-size-8 a {
        /* Spicy Mustard */
        color: #D8AE47;
    }
    
    .tag-size-9 a {
        /* Potter's Clay */
        color: #9E4624;
    }
    
    .tag-size-10 a {
        /* Aurora Red */
        color: #B93A32;
    }
    
    .tag-size-11 a {
        /* Snorkel Blue */
        color: #034F84;
    }
    
    /* reorder*/
    
    .tag-size-1  {
        order:11
    }
    
    .tag-size-2  {
        order:10
    }
    
    .tag-size-3  {
        order:9
    }
    
    .tag-size-4  {
        order:8
    }
    
    .tag-size-5  {
        order:7
    }
    
    .tag-size-6  {
        order:6
    }
    
    .tag-size-7 {
        order:5
    }
    
    .tag-size-8  {
        order:4
    }
    
    .tag-size-9  {
        order:3
    }
    
    .tag-size-10  {
        order:2
    }
    
    .tag-size-11 {
        order:1
    }
    

    Cette approche me semble plus facile à appréhender.
    Cdt

    Edit

    coté grid , tu peut éventuellement autoriser plusieurs colonnes en fonction de l'espace d'affichage dispo:

    à ajouter a display:grid et à tester et modifier à ta sauce :

        grid-template-columns: repeat(auto-fit,minmax(5em,max-content));
        gap:0.2em 0.5em ;
        align-items:center
    

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

  • En fait je ne comprends pas "tag #tag_size"

    La fonction va remplacer la chaine #tag_size par le nom de class correspondant a tag-size-X , x est calculé à l'affichage , la fonction se charge de comparer le nombre d'occurance du tag dans la liste affichée.

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

  • AchimoAchimo Member
    9 juil. modifié

    J'ai de grosses lacunes en CSS. J'en était resté au HTML 4 et CSS2. Il faut que je me remette à niveau =)
    Par exemple je ne comprends pas <li class="tag #tag_size"> car je ne peux pas faire le lien avec ce qui est déclaré dans theme.css. Je ne connais pas la syntaxe "tag #tag_size". Je vais donc étudier tout ça et je reviendrai ici si nécessaire. Merci

  • 9 juil. modifié

    @Achimo

    Par exemple je ne comprends pas <li class="tag #tag_size"> car je ne peux pas faire le lien avec ce qui est déclaré dans theme.css. Je ne connais pas la syntaxe "tag #tag_size". Je vais donc étudier tout ça et je reviendrai ici si nécessaire. Merci

    Tu ne trouveras pas#tag_size dans les feuilles de styles ni dans le code source de la page affichée .(voir mon post précédent) Cette chaine est utilisé par la fonction qui la remplace par une autre chaine qui va être différente selon , ici, l'occurrence de ce mot clé auquel on applique la class tag-size- et un chiffre (11 max).

    Tu as aussi la chaine #tag_status qui elle sera remplacée par active ou noactive .
    Toutes les fonctions d'affichages de PluXml se servent de cette methode : le caractére # + une chaine (qui en générale te permet de comprendre son rôle) . Cette chaine #chaine_a_mettre_a_jour est alors remplacé par une chaine correspondant à une particularité ou donnée de l'element que l'on traite pour l'affichage ( class active ou non, nombre de commentaire, titre, ...)

    Dans le thème, tu as la possibilité d'appeler la fonction <?php $plxShow->tagList('$format', '$max', '$order') ?> et de lui passer un nouveau format d'affichage, le nombre de mots clés à afficher au maximum ainsi que la façon de les ordonnés $order (string) (optionnel) : tri des tags (random, alpha, “” = tri par popularité)

    Tu peut aussi utiliser cette option et retirer du format #tag_size , ainsi aucune class tag-size-X ne sera generé dans le code source envoyé au navigateur.

    Cdt

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

  • kowalskykowalsky Member
    9 juil. modifié

    la fonction tagList () va "assigner" aux tags leur taille respective en fonction de la variable $order
    la variable #tag_size renvoie vers le CSS adéquat qui appliquera la taille et la couleur associée

    la mise en forme de l'ensemble des tag se fait à partir de la ligne <ul class="tag-list">, si tu la sépares des balises "li" qui suivent c'est normal que tu ne fasse pas le lien. :)

    ul
           li  /li
           li  /li
    /ul
    
  • AchimoAchimo Member
    9 juil. modifié

    Alors :
    J'ai supprimé class="tag #tag_size" dans <li> de la fonction tagList() du § TAGS, j'ai ajouté
    display: grid;
    grid-template-columns: max-content max-content;
    dans
    .aside ul.tag-list { } du fichier theme.css
    et j'ai demandé le classement par ordre de fréquence dans sidebar.php.
    J'ai donc un affichage de 2 colonnes * x lignes (soit 10 lignes maxi pour 20 tags) et je vais en rester là pour le moment.
    Avec 3 colonnes le dernier mot était tronqué.
    Je me rends compte qu'avec ces modifs dans le code php il n'est pas question d'une mise à jour sous peine de les perdre toutes.
    Merci pour vos bons conseils.

  • bazooka07bazooka07 Moderator

    @Achimo,
    Il est inutile de modifier la fonction tagList dans le code de PluXml. Il faut modifier le premier paramètre de la fonction dans le fichier sidebar.php de ton thème :

    $plxShow->tagList(
          '<li class="tag"><a href="#tag_url" title="#tag_name">#tag_name</a></li>',
          21, # meilleur choix pour afficher sur 3 colonnes
          '' # tri par popularité
    );
    
Connectez-vous ou Inscrivez-vous pour répondre.