Créer un site web pour les designers avec WordPress et Genesis

Personnaliser le pied de page des articles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez vous intéresser au pied de page des articles. Voyez comment personnaliser l'affichage de ce pied de page.
03:36

Transcription

Dans cette séquence, nous allons voir comment personnaliser le pied de page des articles. Mais cette fois, nous allons vouloir ajouter un nouvel élément textuel dans une zone d’affichage qui est parfaitement ciblée. Précédemment nous avions juste personnalisé des éléments textuels qui existaient déjà. Ici, c’est bien un ajout. Donc le premier objectif, c’est de savoir quel est le hook qui va être à utiliser. Donc dans le menu « Genesis Hook Guide » je demande « Action Hooks » pour visualiser la zone d’affichage qui m’intéresse. Donc on va vouloir ajouter un élément de texte après le contenu rédactionnel. Donc on va utiliser la zone « genesis_entry_footer ». Alors voyez que pour plus de facilité, j’ai supprimé le widget que nous avions utilisé précédemment. Donc c’est dans cette zone d’affichage que l’on va ajouter notre élément textuel. Nous allons naturellement modifier le fichier « functions.php » du thème « Ambiance Pro ». Le voici ce code, comme toujours je mets un commentaire afin de bien préciser ce que je fais. Et cette fois, eh bien nous utilisons la fonction « genesis add_action ». La zone ciblée, on vient de le voir c’est « genesis _entry_footer » et ma fonction de personnalisation je l’ai appelée tout simplement : «sous_article ». Cette fonction « sous_article » que fait elle ? Elle utilise la fonction « php » qui s’appelle « echo » qui permet tout simplement, eh bien d’ajouter du texte. Ce texte est mis entre quote, quote ouvrante, quote fermante. Et ici, j’ai mon code HTML dans un simple « » paragraphe. Bien sûr, toute modification doit être enregistrée. J’enregistre. Je reviens dans mon site publié, je vais masquer les hooks et je rafraichis. Je descends. Et voilà, sous notre article, à la zone désirée, nous avons bien le texte. Naturellement on va pouvoir personnaliser cet affichage. Je reviens dans mon fichier « functions.php ». Et dans un premier temps, eh bien, je vais insérer une petite ligne de séparation avec l’élément HTML : « hr ». J’enregistre, je reviens dans mon site publié et je rafraichis. Et j’ai bien ma petite séparation. Je trouve que ce texte est un petit peu gros. Eh bien avec des « CSS » nous allons pouvoir dans l’élément « » paragraphe l’afficher en plus petit « Style égal entre guillemets », nous allons utiliser la propriété « font-size » pour écrire plus petit. J’enregistre, je rafraichis. Et voilà, c’est écrit en plus petit. Et comme toujours vous pouvez mettre du gras, de l’italique. Enfin bref, tout ce que vous voulez. Ici, je vais mettre mon élément « strong ». Et ma liste de fermeture. J’enregistre, je rafraichis, et nous avons bien « strong ». Donc, voila comment repérer la zone d’affichage qui vous intéresse. Pour nous, c’était « genesis_entry_footer » et avec la fonction « add_action », eh bien nous allons pouvoir ajouter tout ce que nous souhaitons avec la fonction « echo ». Et à l’intérieur, eh bien v ous mettez tout le code « html css » que vous désirez. Donc voilà ce deuxième type de personnalisation qui utilise cette fois un hook de type action.

Créer un site web pour les designers avec WordPress et Genesis

Créez et personnalisez votre site web avec WordPress et le framework Genesis. Profitez ainsi de fonctionnalités adaptées aux besoins spécifiques de votre métier.

1h23 (27 vidéos)
Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
CMS
Spécial abonnés
Date de parution :2 mai 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !