Code source concernant les tags

Achimo

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

gcyrillus-nomade

Bonjour,

l'affichage est géré via CSS.

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

Cdt

kowalsky

Salut @Achimo

la documentation est ici : https://wiki.pluxml.org/docs/develop/plxshow.html#taglist

Achimo

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

gcyrillus-nomade

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

gcyrillus-nomade

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.

Achimo

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

gcyrillus-nomade

@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

kowalsky

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

Achimo

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.

bazooka07

@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é
);