GeneratePress est l’un des thèmes les plus légers et rapides pour WordPress. Cependant, la version gratuite est livrée avec des fonctionnalités et paramètres de thème limités. Vous devez acheter un plugin premium GeneratePress pour utiliser toutes les fonctionnalités du thème.Dans ce tutoriel on va vous présenter les 7 meilleures astuces pour personnaliser le thème GeneratePress.
Astuces pour personnaliser le thème GeneratePress
- Ajouter Google Analytics sans plugin
- Insérer une boîte de bio d’auteur sans plugin
- Insérer des publicités sans plugin
- Changer la date de publication en date de dernière mise à jour
- Ajouter : laisser une réponse au-dessus de la section des commentaires
- Insérer le fil d’Ariane de Yoast
- Supprimer les liens des dates d’auteur et de publication
Utilisation d’éléments dans GeneratePress
GeneratePress n’offre pas d’options de thème comme beaucoup d’autres thèmes. Vous devez utiliser la fonction Elements pour insérer des codes sur votre site. Suivez les étapes ci-dessous pour utiliser la fonctionnalité Elements dans le thème GeneratePress.
Activation des éléments
- Accédez à la section «Apparence> GeneratePress».
- Vous verrez tous les modules du thème ici.
- Cliquez sur le lien « Activer » sous l’option « Éléments ».
Configuration des « hook » dans GeneratePress
Après avoir activé Elements, vous devez configurer un Hook pour insérer des codes sur votre page.
- Allez dans le menu « Apparence> Éléments » et cliquez sur le bouton « Ajouter un nouveau ».
- Sélectionnez l’option « Hook » dans la liste déroulante « Choisir le type d’élément ».
- Utilisez «Paramètres» et «Règles d’affichage» pour appliquer les codes à la section requise de votre site Web.
1. Configuration de Google Analytics
Suivez les étapes ci-dessous pour ajouter le code de suivi Google Analytics:
- Créez un nouvel élément de crochet (Hook).
- Donnez un nom à votre élément comme «Analytics» et collez votre code de suivi dans la section de saisie de texte.
- Sélectionnez « wp_head » comme hook sous l’onglet « Paramètres ».
- Dans l’onglet « Règles d’affichage », choisissez l’option « Site entier » dans la liste déroulante.
Publiez votre élément.
Maintenant, Google Analytics est installé sur votre site. Vous pouvez le vérifier en affichant le code source et en envoyant un trafic test depuis votre compte Google Analytics.
2. Insérer la boîte d’auteur Bio sans plugin
Le thème GeneratePress utilise le schéma CreativeWork. Par conséquent, le thème ne propose pas de section de biographie d’auteur pour présenter les détails de l’auteur avec une image gravatar . Vous pouvez utiliser un Hook et un CSS personnalisé pour insérer une boîte d’auteur pour votre site.
- Créez un nouveau hook et collez le code suivant dans la zone de texte.
<div class="author-box"> <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div> <h4 class="author-title" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h4> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?> </p> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Lire plus"> ... </a> </div> </div> </div>
- Choisissez la position de votre boîte d’auteur sous l’onglet «Paramètres» en sélectionnant la liste déroulante. Vous pouvez insérer la case auteur « after_main_content » ou « before_comments_container ».
- Assurez-vous de cocher la case «Exécuter PHP» car il s’agit d’un code PHP.
- Dans la section « Règles d’affichage », sélectionnez « Publier » comme emplacement, puis « Tous les messages ».
- Cela ajoutera la zone auteur sur vos articles de blog.
Utilisez le CSS suivant pour changer l’apparence de votre boîte d’auteur. Vous pouvez insérer ce CSS dans la section « Apparence> Personnaliser> CSS supplémentaire ».
.author-links a {
font-size: 2em;
line-height: 1em;
float: right;
}
.author-box {
padding: 30px 30px 0px 30px;
margin-top: 50px;
display: flex;
flex-wrap: wrap;
border: 1px solid rgb(235, 235, 235);
border-radius: 2px;
}
.author-box .avatar {
width: 60px;
border-radius: 50%;
margin-right: 30px;
}
h4.author-title {
margin-bottom: 1em;
}
h4.author-title:before {
content: 'About';
}Vous pouvez personnaliser la marge, l’en-tête, la largeur du gravatar et d’autres détails selon vos besoins pour correspondre à la zone auteur de votre site. En outre, si vous exécutez un blog avec un seul auteur, supprimez le code des liens d’auteur pour afficher le nom de l’auteur sans créer de lien vers la page d’archive.
3. Insérer des publicités sans plugin
Semblable à Google Analytics, vous pouvez également insérer Google AdSense ou tout autre code publicitaire.
- Créez un nouvel élément et collez votre code d’annonce dans la zone de texte.
- Sélectionnez l’une des positions du crochet pour insérer la publicité dans l’en-tête, les commentaires, le pied de page, la barre latérale ou à l’intérieur du conteneur.
- Configurez les règles d’affichage pour afficher la publicité sur les types de publication ou les archives.
Vous pouvez faire référence à toutes les positions de hook disponibles dans la documentation du guide visuel de GeneratePress et choisir la bonne position. Cependant, vous ne pouvez pas insérer de publicités entre les contenus de publication. Vous devrez peut-être utiliser un plugin comme Quick Adsense à cette fin.
4 Changer la date de publication en date de dernière mise à jour
Par défaut, GeneratePress affichera la date de publication de vos articles de blog. Vous pouvez masquer la date publiée et afficher la dernière date de mise à jour sous forme de métadonnées. Cela aidera les utilisateurs à comprendre la dernière date de modification de votre contenu .
Ajoutez le code CSS ci-dessous dans la section «Apparence> Personnaliser> CSS supplémentaire». Vous pouvez changer la phrase «Mis à jour le» en ce que vous voulez. Cependant, fournissez un espace après la phrase afin qu’elle soit correcte sur le site Web publié. Vous pouvez également afficher l’aperçu en direct dans le personnalisateur pour vérifier à quoi il ressemble sur vos articles de blog.
.posted-on .updated {display: inline-block;}
.posted-on .updated + .entry-date {display: none;}
.posted-on .updated:before {content: "Updated on ";}N’oubliez pas, bien que vos articles de blog affichent la date de dernière mise à jour, ils contiendront toujours la date de publication. Google affichera la date publiée dans les résultats de recherche et non la date modifiée. Si vous souhaitez que Google affiche la date de mise à jour, vous devrez peut-être modifier le fichier PHP du thème, ce qui n’est pas recommandé.
5. Ajouter un lien de réponse au-dessus de la section des commentaires
Un autre problème avec GeneratePress est la section de commentaires . Par défaut, tous les thèmes WordPress affichent «Laisser un commentaire» avec un lien hypertexte pour commenter la zone de texte de commentaire. Cela aidera les utilisateurs à accéder rapidement à la zone de texte de commentaire lorsqu’il y a de nombreux commentaires sur l’article.
Cependant, le thème GeneratePress affiche un en-tête avec un nombre de commentaires, une liste de commentaires, puis la zone de texte de réponse. Lorsque vous avez des centaines de commentaires, les utilisateurs doivent faire défiler vers le bas de la page pour laisser un commentaire. Dans la plupart des cas, les utilisateurs ne répondront pas et quitteront la page, ce qui entraînera une mauvaise expérience utilisateur.
Suivez les instructions ci-dessous pour ajouter «Laisser un commentaire» avec un lien sur votre site GeneratePress.
- Créez un nouveau hook et collez le code ci-dessous. Modifiez l’expression «Laissez votre réponse». à tout ce que vous voulez comme « Laissez une commentaire ».
<h4> <a href="#respond" class="smooth-scroll">Laissez votre réponse.</a> </h4>
- Choisissez le crochet «below_comments_title» sous l’onglet «Paramètres».
- Configurez les «règles d’affichage» en tant que publications / toutes les publications.
- Publiez l’élément.
Maintenant, vous aurez un joli lien avec un défilement fluide qui amènera les utilisateurs à la boîte de réponse au commentaire en cliquant sur le lien.
Si nécessaire, vous pouvez ajouter une classe CSS supplémentaire à l’élément d’en-tête pour modifier l’apparence. Le code modifié avec une classe CSS supplémentaire devrait ressembler à ci-dessous:
<h4 class="response"> <a href="#respond" class="smooth-scroll">Laissez votre réponse.</a> </h4>
Vous devez coller le CSS personnalisé suivant sous «Apparence> Personnaliser> CSS supplémentaire».
h4.response {
text-align: center;
}
h4.response a {
color: rgb(255, 0, 0);
}
h4.response a:hover {
color: rgb(0, 0, 255);
}Ce CSS changera la couleur du lien, la couleur du survol et l’alignement au centre. Vous pouvez ajouter n’importe quel style CSS valide à cette classe pour aligner le lien sur votre mise en page.
6. Ajoutez Yoast Breadcrumb dans le thème GeneratePress
Yoast SEO offre une navigation par fil d’Ariane intégrée. Mais, vous devez insérer le code PHP sur votre en-tête ou fichier single.php afin d’afficher la structure du fil d’Ariane. Si vous utilisez le plugin Yoast SEO avec le thème GeneratePress, vous pouvez ajouter le fil d’Ariane sans modifier les fichiers PHP .
- Créez un nouveau hook et collez le code PHP Yoast breadcrumb ci-dessous dans la zone de texte.
- Sélectionnez le hook comme «before_content» ou «before_main_content» ou «before_entry_title» selon l’emplacement où vous souhaitez afficher le fil d’Ariane.
- Cochez l’option « Exécuter PHP ».
- Configurez la règle d’affichage pour afficher le fil d’Ariane sur tous les articles.
- Publiez votre élément pour voir le fil d’Ariane sur le site en direct instantanément.
<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->Ajoutez le CSS ci-dessous pour afficher le fil d’Ariane de manière élégante:
#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;padding: 0 5px 0 10px;
font-size: 16px;
}Personnalisez la taille de la police, la couleur, l’arrière-plan et l’ombre selon votre souhait.
7. Désactiver le lien de l’auteur et de la date de publication
Idéalement, la date de publication ou de modification doit être liée à la page d’archivage des dates. Si vous l’avez remarqué, GeneratePress associe par défaut l’URL de la publication aux métadonnées de la publication. Collez le code ci-dessous dans votre fichier functions.php afin de supprimer le lien vers les métadonnées sur les publications.
Vous pouvez utiliser un plugin ou un thème enfant pour insérer du code dans le fichier functions.php. Alternativement, vous pouvez coller le code dans functions.php en accédant à la section «Apparence> Éditeur de thème». Vous devez mettre à jour ce changement à chaque fois que vous mettez à jour le thème.
// Remove Link from Date
add_filter( 'generate_post_date_output','tu_remove_date_link', 10, 2 );
function tu_remove_date_link( $output, $time_string ) {
printf( '<span class="posted-on">%s</span>',
$time_string
);
}De même, GeneratePress par défaut liera le nom de l’auteur à la page d’archive de l’auteur. Si vous exécutez un blog d’auteur unique, vous pouvez désactiver le lien auteur en ajoutant le code ci-dessous dans le fichier functions.php.
// Remove Link from Author
add_filter( 'generate_post_author_output','tu_no_author_link' );
function tu_no_author_link() {
printf( ' <span class="byline">%1$s</span>',
sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>',
__( 'by','generatepress'),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
esc_html( get_the_author() )
)
);
}Enregistrez les modifications et vérifiez que les liens sont supprimés de la date de la méta-publication et du nom de l’auteur.
Laisser un commentaire