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 je recommande
Certains d'entre eux sont sortis de votre forum de soutien documentation
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);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 :
/* 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 :
/* 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;
}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' ) ;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
<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.
Pour l'afficher, il suffit d'ajouter ce CSS dans votre thème enfant /* 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.
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
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 AMP
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
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
}
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.
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%)
}
}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 :
/* 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.
