Automatiser une mise en forme sur un mot ou un Custom post type (Créer un compte)

Accueil › Forums › WordPress › Automatiser une mise en forme sur un mot ou un Custom post type
  • WordPress :6.1
  • Statut : non résolu
  • Ce sujet contient 21 réponses, 3 participants et a été mis à jour pour la dernière fois par ferman, le il y a 2 années.
15 sujets de 1 à 15 (sur un total de 22)
1 2
  • Auteur
    Messages
  • 29 novembre 2022 à 16 h 40 min #2433183
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    Bonjour,

    Ma configuration WP actuelle

    Problème(s) rencontré(s) :

    Sur mon site d’actualité, je trie mes contenus selon deux types d’informations : la catégorie et le post type (académique, bref ou point de vue). Je souhaiterais ajouter du code php et css pour faire en sorte que dès qu’un des 3 post type est sélectionné, une mise en forme se mette en place.

    Par exemple, sur la page d’accueil, j’aimerais que les blocs avec mes articles et mes photos en vignettes puissent avoir un fond de couleur selon le post type auquel ils appartiennent : ma homepage

    Sinon, au pire des cas, dans les extraits, je rajoute à chaque fois à la main « POINT DE VUE » ou « ACADEMIQUE » à la main. Est-il possible d’avoir un code qui automatise par exemple que l’une de ces deux expressions est écrite, elle s’affiche sur le front en couleur et en bold ?

    Merci par avance,

    29 novembre 2022 à 18 h 08 min #2433189
    mathieu42
    Participant
    Maître WordPress
    2027 contributions

    si on regarde par exemple l’article du 28 novembre, la balise a une classe « td-cpt-academique ». vous avez ajouté cette classe à la main ?

     

    29 novembre 2022 à 21 h 41 min #2433210
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    Alors, effectivement, avec le thème, je peux définir des templates pour mes CPT mais ces modèles servent lorsque l’on est sur les articles. Sur la home et les pages de catégories, je ne sais pas comment faire pour me servir de cette classe (je suis très mauvais en Css).

    29 novembre 2022 à 21 h 56 min #2433211
    mathieu42
    Participant
    Maître WordPress
    2027 contributions

    essayez déjà cet exemple de code et vous verrez si ça permet de définir l’étendu de la couleur dont vous avez besoin :

    .td-cpt-academique
    {
        background-color : #39D;
    }

     

    29 novembre 2022 à 22 h 06 min #2433215
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    Merci. Je viens de le rajouter mais il ne se passe rien…

    29 novembre 2022 à 22 h 10 min #2433216
    mathieu42
    Participant
    Maître WordPress
    2027 contributions

    vous l’avez ajouté où ? je ne vois pas le code dans les fichiers css.

     

     

    29 novembre 2022 à 22 h 14 min #2433217
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    Je l’avais mis dans mon thème panel. Je viens de le rajouter directement en allant dans personnaliser et CSS additionnel. Bon, c’est un peu violent mais ya un bon début.

    29 novembre 2022 à 22 h 21 min #2433218
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    En tous cas c’est une bonne piste. Savez-vous s’il existe un code en php (je suppose) pour définir que quand il y a écrit le mot ACADEMIQUE en majuscules, ce mot est en couleur et en strong automatiquement ?

    Pareil avec POINT DE VUE.

    29 novembre 2022 à 23 h 06 min #2433226
    mathieu42
    Participant
    Maître WordPress
    2027 contributions

    pour définir facilement une mise en forme spécifique à ces mots, il faudrait qu’ils soient entourés par des balises html.

    le souci est que votre thème n’est pas disponible librement donc nous ne pouvons pas le tester pour vous indiquer comment le personnaliser. donc il faudrait que vous trouviez quel fichier génère cette partie pour qu’on puisse vous aider, demandez peut-être au vendeur de ce thème.

    30 novembre 2022 à 10 h 01 min #2433266
    ferman
    Modérateur
    Maître WordPress
    7369 contributions

    Bonjour,

    Une autre possibilité est d’utiliser javascript pour créer ces balises html et y ajouter une classe.

    Par exemple:

    function ajouter_span(){?>

    	<script>
     
    	var x=document.getElementsByClassName("td-excerpt");
        var searchText1 = "POINT DE VUE";
        var searchText2 = "ACADEMIQUE";
    	
        for (i = 0; i < x.length; i++)     
    		x[i].innerHTML = x[i].innerHTML.replace(searchText1, "<span class ='TOTO1'>POINT DE VUE</span>");
        for (j = 0; j < x.length; j++)
    		x[j].innerHTML = x[j].innerHTML.replace(searchText2, "<span class ='TOTO2'>ACADEMIQUE</span>");
    	
    	</script>
    	
    <?php }

    add_filter('wp_footer','ajouter_span');

    Ensuite, on modifie les spans comme on veut en CSS.

    Partie js testée dans la console Firefox.

     

    • Cette réponse a été modifiée le il y a 2 années et 1 mois par ferman.
    30 novembre 2022 à 10 h 31 min #2433273
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    @Mathieu42 En fait, je renseigne juste un texte dans le champ extrait qui est natif dans WordPress et le thème reprend juste ce champ pour l’afficher sur la Home et dans les pages catégories.


    @Ferman     Merci. Je vais essayer. Je tâtonne un peu en CSS mais je pense avoir compris la logique.

    • Cette réponse a été modifiée le il y a 2 années et 1 mois par Faboulousfab.
    30 novembre 2022 à 10 h 44 min #2433284
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    Merci, j’ai réussi à faire ce que je voulais grâce à vous deux ! C’est vraiment top !

    30 novembre 2022 à 10 h 45 min #2433285
    ferman
    Modérateur
    Maître WordPress
    7369 contributions

    En fait je vois que vous n’aviez pas du tout besoin de js. C’est effectivement beaucoup plus simple comme ça.

    Edit: J’ai mal vu, je pensais que que vous aviez directement modifié le html à la source. Et donc, comment avez-vous ajouté le js?

    • Cette réponse a été modifiée le il y a 2 années et 1 mois par ferman.
    • Cette réponse a été modifiée le il y a 2 années et 1 mois par ferman.
    30 novembre 2022 à 10 h 55 min #2433291
    Faboulousfab
    Participant
    Initié WordPress
    27 contributions

    J’ai ajouté le code envoyé dans functions.php de mon thème enfant et ensuite, j’ai créé le css correspondant.

    30 novembre 2022 à 11 h 02 min #2433294
    ferman
    Modérateur
    Maître WordPress
    7369 contributions

    C’est exactement ce qu’il fallait faire. Je n’avais pas vu que vous aviez un thème enfant.

  • Auteur
    Messages
15 sujets de 1 à 15 (sur un total de 22)
1 2
  • Vous devez être connecté pour répondre à ce sujet.