10 Codes utiles pour GeneratePress

 
  • ES
  • JA
  • PT
  • RU
  • CN
  • EN
  • Voici quelques extraits de code utiles. Il s’agit de fonctions, de filtres et de CSS que j’utilise ou dont j’ai eu besoin à un moment ou à un autre pour le modèle GeneratePress que j’utilise et je recommande. Certains d’entre eux sont sortis de votre forum de soutien, une source inépuisable de solutions, de son documentation et d’autres provenant de requêtes et de recherches de soutien.

    Afficher la date et l’heure de mise à jour dans les messages à côté de la date de publication

    Ce filtre montre la date et l’heure de la mise à jour dans les entrées de GeneratePress. Cela dépend de la façon dont vous avez configuré la date dans Paramètres/Général/Format de date/Personnaliser. Dans le cas utilisé ici, cela ressemble à ceci : d/m/Y : H:i

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '' ;
    
        if ( get_the_date() !== get_the_modified_date() ) {
            $time_string = ' | ' ;
        }
    
        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            esc_html( get_the_date() ),
            esc_attr( get_the_modified_date( 'c' ) ),
            esc_html( get_the_modified_date() )
        ) ;
    
        return sprintf( '%s ',
            $time_string
        ) ;
    }, 10, 2 ) ;

    Affichez uniquement les années dans le widget des archives

    Cette fonction fait en sorte que la liste déroulante du widget d’archives n’affiche que les années au lieu des mois. Il fonctionne pour n’importe quel modèle, car il agit sur un widget WordPress natif. Utile si votre blog est très ancien et que la liste déroulante des mois est déjà trop longue. Dans l’exemple, elle est représentée par le nombre de messages publiés.

    function my_limit_archives( $args ) {
        $args['type'] = 'yearly' ;
        retourner $args ;
    }
    
    add_filter( 'widget_archives_args', 'my_limit_archives' ) ;
    add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' ) ;
    10 Codes utiles pour GeneratePress

    Barre de progression simple à lire sans plugin

    Il existe plusieurs plugins pour ajouter une barre de progression de la lecture dans WordPress et également des addons pour Elementor, mais avec un peu de code et un filtre d’Elements de GeneratePress, on peut facilement le rendre beaucoup plus léger. Ce code provient de Somnath Sahu

    Pour cet exemple, vous devez utiliser la version GeneratePress Premium .

    Nous créons d’abord un filtre avec les éléments avec ce code.

    <div class="progress-container">
        <div class="progress-bar" id="myProgressBar"></div>
    </div>
    
    <script>
    window.onscroll = function() {myFunction()};
    function myFunction() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myProgressBar").style.width = scrolled + "%";
    }
    </script>

    Nous le définissons avec la position wp_head et l’affichons dans Posts / All Posts.

    10 Codes utiles pour GeneratePress
    Pour l’afficher, il suffit d’ajouter ce CSS dans votre thème enfant ou dans Personnaliser/CSS supplémentaire et donnez-lui le style qui convient à votre blog.
    /* Barre de progression de lecture */
    .progress-container {
      width : 100% ;
      height : 8px ; /* Largeur du conteneur de la barre de progression */
      background : #ccc ; /* Couleur du conteneur sur lequel se déplace la barre de progression */
    }
    
    .progress-bar {
      height : 8px ; /* Largeur de la barre de progression */
      background : #a70404 ; /* Couleur de la barre de progression */
      width : 0% ;
      position:fixe ;
      z-index:999 ;
    }

    Et voici comment ce code s’affiche après avoir changé la couleur en vert

    La barre de progression apparaîtra en haut, elle nous accompagnera pendant la lecture et augmentera si nous faisons défiler la page vers le bas et diminuera si nous la faisons défiler vers le haut.

    10 Codes utiles pour GeneratePress

    Changez le logo uniquement sur une page spécifique

    J’en avais besoin une fois et je l’ai trouvé à l’époque sur la page de David Lanau. Le filtre affiche un logo différent uniquement sur la page que vous spécifiez. Je l’ai utilisé pour mettre un logo différent sur une page de catégorie qui regroupait les contenus d’un thème spécifique.

    add_filter( 'generate_logo', 'tu_custom_about_logo' ) ;
    function tu_custom_about_logo( $logo )
    {
     	// Si par exemple nous sommes sur la page des services, nous allons mettre notre logo personnalisé pour cette page
     	if ( is_page( 'services' ) )
     	 	return 'PUT LOGO URL HERE' ;
    
     	// ET SI NON, METTEZ LE LOGO GÉNÉRAL
     	return $logo ;
    
     }

    Masquer la sibebar dans la version mobile

    Si vous êtes l’un de ceux qui utilisent encore la barre latérale et se sont dispensés de la pages AMPsi vous utilisez la version mobile native de GeneratePress avec barre latérale, cette CSS vous permet de la masquer uniquement pour la version mobile.

    Dans ce cas, vous pouvez l’ajouter à la feuille de style de votre thème enfant ou à partir de Custom/Additional CSS.

    Masquer la barre latérale droite

    @media(max-width : 768px) {
        #right-sidebar {
            display: none;
        }
    }
    

    Cacher la barre latérale gauche

    @media(max-width : 768px) {
        #left-sidebar {
            display: none;
        }
    }

    Cacher les deux

    @media(max-width : 768px) {
        #right-sidebar, #left-sidebar {
            display: none;
        }
    }
    
    

    Afficher les images vedettes dans la boucle à gauche et à droite

    Si vous utilisez un modèle generatePress traditionnel comme Marketer ou similaire, avec ce code vous pouvez afficher l’image vedette en alternance à gauche ou à droite dans la boucle

    .post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
        margin-left: 2em;
        float : right ;
        text-align : right ;
    }

    J’ai trouvé ce code à aquigeneratepress.com où vous trouverez d’autres astuces utiles. Et voici le résultat

    10 Codes utiles pour GeneratePress

    Personnalisez le bouton « Lire la suite »

    Comme ci-dessus, ce CSS est destiné au bouton « Lire la suite ». C’est celui que j’utilise ici et qui le place à droite sous l’extrait de la page d’accueil.

    a.read-more {
    display: inline-block;
    color: white !important;
    padding: 10px;
    border-radius: 10px;
    float:right
    }
    

    Style de la pagination des entrées

    Un filtre et un peu de CSS pour obtenir ce look pour la pagination des articles sur la page d’accueil. À partir de là, vous pouvez le modifier à votre guise.

    10 Codes utiles pour GeneratePress

    La première chose que nous devons faire est de remplacer les mots Previous et Next par les symboles << et >> avec ce filtre que vous pouvez ajouter dans le functions.php de votre thème enfant ou avec Code Snippet.

    add_filter( 'generate_next_link_text', function() {
        return '>>' ;
    } ) ;
    add_filter( 'generate_previous_link_text', function() {
        return '<<' ;
    } ) ;

    Et puis le CSS, ajouté de la même manière que dans les cas précédents

    
    #nav-below {
        text-align: center;
    
    .paging-navigation .nav-links>* {
    	  font-size: 20px;
        padding: 7px 10px;
        background-color: #b50707;
        color: white;
        border-radius: 4px;
    }
    .paging-navigation .nav-links span.page-numbers.current {
        background: red;
        color: #ffffff;
    }
    a.next.page-numbers > span {
        display: none;
    }
    

    Centrer la boîte du navigateur

    Le moteur de recherche natif de GeneratePress est un peu boiteux, voici un peu de CSS pour l’adapter aux appareils et le centrer.

    /* Centrer la boîte de recherche dans le menu principal */
    form.search-form.navigation-search.nav-search-active {
        width:50%;
        left:50%;
        transform:translateX(-50%)
    }
    
     /* Boîte de recherche responsive sur mobile - tablette et PC */
    @media (max-width: 768px) {
        /* CSS para móvil */
            form.search-form.navigation-search.nav-search-active {
            width:100%;
            left:50%;
            transform:translateX(-50%)
        }
    }
    @media (min-width : 769px) and (max-width : 1024px) {
        /* CSS pour tablette */
            form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
        }
    
        .inside-navigation {
            align-items: flex-end !important;
            flex-direction:column-reverse;
        }
    }
    @media (min-width : 1025px) {
        /* CSS pour PC */
            form.search-form.navigation-search.nav-search-active {
            width:40%;
            left:50%;
            transform:translateX(-50%)
        }
    }
    10 Codes utiles pour GeneratePress

    Taille du texte des catégories et des balises

    Si vous affichez les catégories et les balises sous les messages, en ajoutant ce CSS, vous pouvez en modifier la taille et continuer à ajouter du CSS pour les styliser comme vous le souhaitez. Toutes les classes permettant de les modifier se trouvent dans la documentation ou dans le CSS lui-même, mais si vous ne voulez pas vous compliquer la vie, voici ce qu’il faut faire.

    .entry-meta .cat-links a {
        padding : 3px 5px ;
        font-size : 20px ;
    }
    .entry-meta .tags-links a {
        padding : 3px 1px ;
    	  font-size : 20px ;
    
    }


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad