14 Codes utiles pour GeneratePress

 
 

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

/* Fecha y Hora de PUBLICADO Y ACTUALIZADO EN META POST */
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
    }

    $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( '<span class="posted-on">%s</span> ',
        $time_string
    );
}, 10, 2 );

Supprimer les virgules entre les balises

C’est tout ce qu’il y a à faire. Si vous ne voulez pas de virgules entre les balises, ce filtre ne les affichera pas.

/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
	return " ";
}, 10, 2);

Ajouter une couleur de fond aux catégories et aux tags

Avec ce CSS, vous pouvez ajouter la couleur de votre choix à toutes les catégories et/ou à tous les tags.

Le CSS de l’exemple les afficherait comme ceci :

14 Codes utiles pour GeneratePress
/* Categorías y colores */
.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 17px;
	background-color: #B50000;
	border-radius: 5px;  
    color: #FFF	
		
}
/* Etiquetas y colores */  
.entry-meta .tags-links a {
	padding: 3px 5px;
	font-size: 17px;
	background-color: #006a05;
	border-radius: 5px;  
    color: #FFFF	
}

/* Espacio entre línea de categorías y etiquetas */
.cat-links {
    margin-bottom: 10px;
}

Afficher une couleur de fond différente pour chaque catégorie ou tag

Avec ce CSS, vous pourrez donner une couleur différente à chaque catégorie. Pour ce faire, vous devrez écrire un morceau comme celui-ci pour chaque catégorie ou balise que vous souhaitez modifier. Dans le premier exemple, nous utilisons la catégorie « wordpress » à laquelle nous ajoutons un fond bleu et du texte blanc. Dans le second exemple, nous utilisons l’étiquette « blog » à laquelle nous ajoutons un fond orange et du texte blanc.

Et voici le résultat :

14 Codes utiles pour GeneratePress
/* Mostrar un color diferente para cada categoría o etiqueta */
#main span.cat-links a[href*="wordpress"] {
    background-color: #005ca5;
    color: white;
}


#main span.tags-links a[href*="blog"] {
    background-color: #d47e00;
    color: white;
}

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.

14 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.

14 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

14 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.

14 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%)
    }
}
14 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 ;

}

Liens soulignés animés

CSS pour créer un effet d’animation pour vos liens texte comme celui que vous voyez dans le gif ci-dessous :

14 Codes utiles pour GeneratePress

/* Subrayado de enlace animado con color de fondo */
p a{
  font-weight: bold;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
  background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid #ec4911;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

p a:hover{
  background-size: 100% 100%;
}

Dans background-image et border-bottom, vous pouvez modifier les couleurs.

Vous devrez observer le comportement dans les paragraphes, boutons et autres éléments qui incluent des liens afin de l’ajuster pour que rien ne soit déplacé.

Le code est le suivant Kyle Van Deusen que, en plus de The Admin Bar, a un blog intéressant intitulé Generatetweaks où il publie plusieurs morceaux curieux de code et de modèles pour GeneratePress et GenerateBloks, comme celui-ci mode sombre pour GP et GB.


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