Comment ajouter une boîte d'auteur dans le thème GeneratePress. [2021]

Publié: 2021-01-24

Savez-vous que vous pouvez ajouter une boîte d'auteur dans le thème Generatepress sans installer de plugin supplémentaire ?

Donc, pour aider les blogueurs, j'ai préparé un guide détaillé sur la façon d'ajouter une boîte d'auteur à l'aide de la fonction Element du thème Generatepress.

Je sais que beaucoup d'entre vous demandent pourquoi ne pas ajouter un plugin de boîte d'auteur dans WordPress et simplifier le travail. Parce que l'installation d'un plugin supplémentaire peut avoir un impact sur la vitesse de votre site Web. Il est préférable d'utiliser du code HTML et CSS personnalisé pour générer la zone Auteur à l'aide de la fonction native Generatepress Element.

Remarque : Vous ne pouvez utiliser cette astuce que si le plugin premium Generatepress est installé sur votre site WordPress.

Pourquoi avez-vous besoin d'une boîte d'auteur sur votre site Web ?

L'ajout d'une boîte d'auteur à la fin de l'article de blog aide votre lecteur et votre moteur de recherche comme Google, Bing à connaître l'homme derrière l'article.

Il établit une bonne relation et une confiance entre le lecteur et l'auteur et contribue également à renforcer l' autorité dans la communauté Internet.

Connaissez-vous l' algorithme EAT ? Pour bien se classer dans Google, vous devez créer une marque en renforçant son expertise, son autorité et sa fiabilité - ce qui est exactement ce que représente EAT. Author Box est la première étape pour y parvenir.

Étapes pour ajouter une boîte d'auteur dans le thème generatePress.

Avant d'ajouter la boîte d'auteur dans votre thème Generatepress, vous devez effectuer quelques réglages de base dans WordPress.

1. Ajoutez une photo de profil et une description de l'auteur

Accédez au tableau de bord WordPress et cliquez sur la section Utilisateur . Cliquez maintenant sur le bouton Modifier juste en dessous du nom d'utilisateur.

Modifier les paramètres utilisateur dans wordpress

Maintenant, faites défiler vers le bas et vous verrez une option appelée " À propos de vous ". Ici, dans les « informations biographiques », écrivez la description de votre auteur et définissez votre photo de profil juste en dessous.

Remarque : Vous pouvez également ajouter un lien vers votre page à propos de nous dans la zone Auteur en utilisant une astuce simple. Dans les informations biographiques, collez le lien dans ce format.

<a href="https://key2blogging.co/about-us/">page à propos de nous</a>

De cette façon, vous pouvez facilement ajouter un texte d'ancrage avec un lien dans la zone Auteur du Thème GeneratePress.

Ajouter une description de l'auteur et définir une photo de profil

Si vous n'avez pas ajouté le Gravatar, vous pouvez le faire en cliquant sur le lien ci-dessous, comme indiqué ici.

Il vous redirigera vers le site Web de Gravatar où vous devrez créer un compte avec votre adresse e-mail mentionnée dans WordPress, puis y télécharger votre image de profil. Il récupérera automatiquement la photo de profil sur votre compte WordPress.

2. Activer le module Element

Pour activer le module Element allez dans Appearance > GeneratePress > Elements > Activate

Activer le module Element dans generatepress

Si vous l'avez déjà fait, vous pouvez passer à la troisième étape.

3. Créez un nouvel élément de crochet

Maintenant, cliquez sur la section Apparence et vous verrez une option appelée " Élément ", cliquez dessus. Cliquez maintenant sur " Ajouter un nouvel élément " et sélectionnez Crochet .

Créer un élément Hook dans le thème generatePress

4. Définissez le titre sur "Boîte d'auteur" et collez le code HTML

Vous devez définir le titre sur Author Box et coller le code HTML ci-dessous dans l'éditeur de code.

Définir le titre de l'auteur et coller le code HTML

Copiez le code ci-dessous

 <div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. Réglage du crochet de configuration

Après avoir collé le code, vous devez configurer le paramètre Hook. Dans l'option Hook, sélectionnez « générer après le contenu », puis cliquez sur « Exécuter PHP » et définissez la priorité sur « 20 ».

Réglage du crochet pour Author Box

6. Configurer la règle d'affichage

Cliquez maintenant sur la règle d'affichage juste à droite des paramètres. Maintenant, dans l'emplacement, sélectionnez " Tout singulier " et dans l'onglet Exclure, sélectionnez " Frontpage ".

Règles d'affichage pour la boîte Auteur dans generatepress

Vous avez maintenant terminé les réglages du crochet. Alors, appuyez sur le bouton de publication .

7. Ajouter du code CSS

Vous devez maintenant concevoir votre boîte d'auteur en utilisant le code CSS. Donc, pour ce faire, allez dans apparence>> Personnaliser>>CSS supplémentaire et collez le code ci-dessous, puis appuyez sur le bouton de publication.

Implémentation du code CSS pour la boîte d'auteur

Copiez le code CSS :

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

Félicitations , vous avez ajouté avec succès la boîte Auteur dans votre thème Generatepress sans aucun plugin.

Guide vidéo :

Vidéo Youtube

Remarque : Si vous utilisez la version gratuite du thème Generatepress, vous devez ajouter la boîte d'auteur à l'aide d'un plugin.

Conclusion

Nous avons maintenant couvert le processus étape par étape pour ajouter la boîte Auteur dans le thème Generatepress dans WordPress. Si vous avez le moindre doute , demandez-moi dans la section des commentaires , ou connectez-moi sur Twitter .

Si vous aimez ce guide, partagez-le avec votre communauté de blogueurs et appréciez les efforts. Merci.

A lire aussi : Top 10 des extensions chrome utiles pour les blogueurs