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

Personnaliser les informations des articles

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez apprendre à personnaliser les informations de publication affichées dans les articles.
06:05

Transcription

Pour un deuxième exemple de personnalisation en mode code, nous allons apprendre à personnaliser les informations de publication qui sont affichées sous le titre des articles, lorsque ceux-ci sont affichés en page seule. Je suis ici sur l’article « L’arbre » qui est en page seule, et nous avons ici les informations concernant la publication de cet article. La première chose à faire c’est de savoir quel est l’élément qui permet l’affichage de ces informations. Donc j’affiche les hooks de type « filtre », et on voit c’est « genesis_post_info ». Donc c’est cet élément que nous devons personnaliser. Il faut modifier le fichier « functions.php » de notre thème « Ambiance Pro ». Voici le code que nous allons utiliser. Je mets un commentaire afin de bien préciser l’action que je vais faire. Nous utilisons de la fonction « genesis_add_filter ». Ça va s’appliquer sur le filtre « genesis_post_info ». Et je crée une fonction personnalisé pour modifier cet affichage. Elle s’appelle « sp_post_info_filter ». Donc cette fonction, que fait-elle ? Elle utilise comme paramètre la variable « $post_info ». Et ensuite, eh bien nous avons le calcul de cette variable. Donc qu’est ce que nous avons ? Toujours entre quote, un texte « Rédigé par » et nous avons ici un premier short code. Eh bien nous allons détailler l’utilisation de ces short code. Pour ce faire, vous allez sur le site de « Genesis ». Il faut naturellement être connecté et vous aller à cette URL, et nous avons ici la page de référence des short code. Donc le short code que nous utilisons ici, c’est « post_author_posts_link ». Qu’est ce que cela permet de faire ? Eh bien cela permet tout simplement d’afficher le rédacteur de cet article avec un lien vers tous les contenus qu’a rédigés cet auteur. Donc voilà son utilisation. Ensuite, j’ai le texte fixe « le » et j’ai le short code « post_date ». Revenons dans la référence des short code. Et nous avons ici le short code « post_date ». Cela permet tout simplement d’afficher la date de création de cet article. Vous pouvez voir que vous avez ici des attributs. On y reviendra tout à l’heure mais tout de suite vous pouvez voir qu’il y a un attribut qui est tout à fait pratique, c’est l’attribut « format ». Cela va permettre eh bien de personnaliser le format d’affichage. Vous avez ici un exemple. Je reviens dans mon fichier « functions.php » et ensuite j’ai le short code « post_comments » qui permet tout simplement eh bien d’insérer un lien vers le formulaire pour pouvoir y déposer un commentaire. Naturellement, à partir du moment où vous avez fait des modifications, il faudra enregistrer le fichier « functions.php ». Ce que je fais. Et enfin pour terminer, notre fonction « renvoie » le calcul de cette variable. Je reviens dans mon site publié et je rafraichis. Je redescends et voilà, nous avons bien notre personnalisation. - Les espaces que vous visualisez autour - des trois éléments d’affichage : la rédaction, la date, et le commentaire, sont dues à la mise en forme CSS du thème qui applique par défaut des marges supplémentaires de dix pixels à droite et à gauche de ces trois éléments. Eh bien, nous allons maintenant pouvoir à nouveau affiner cette personnalisation. Je reviens dans les short code, et je reviens dans le short code « post_author_posts_link ». Nous avons la possibilité d’utiliser deux attributs : « before » et « after ». Cela va permettre de mettre un texte avant et un texte après, mais directement dans le short code. Donc ici, qu’est ce qu’on va faire ? - Plutôt que d’écrire « Rédigé par » - de manière fixe en dehors du short code, eh bien ceci va être mis dans le short code. Je sélectionne, je coupe, et je me mets après, je mets « before égal entre guillemet mon texte ». J’enregistre à nouveau, je reviens dans mon site publié, et je rafraichis. Voilà, nous avons bien « Rédigé par »... Ah oui, mais vous voyez ici il manque un petit espace. Eh bien nous allons le mettre là où il faut. Un petit espace, j’enregistre à nouveau, je reviens dans mon site publié et je rafraichis, et nous avons bien notre personnalisation. Maintenant, on va pouvoir faire de même avec la date. Donc ici, plutôt que de mettre « le » dur, si je peux dire, on va le mettre avec l’attribut « before » dans le short code « post date ». J’enregistre, je reviens dans mon site publié, et je rafraichis. Et voilà, nous avons bien « le » devant la date. Et ce qui est pratique, c’est qu’on peut mettre aussi de la mise en forme dans les short code. Je vais mettre par exemple « Rédigé par » en italique avec l’élément HTML « em ». J’enregistre, je reviens dans mon site publié, et je rafraichis. Et voilà nous avons bien « Rédigé par ». Alors c’est pas forcément très très joli. Ici, qu’est ce qu’on va faire ? On va vouloir mettre tout en italique. Donc je ne vais pas mettre le fin de « em » mais le fin de « l’em », je vais le mettre dans « after », après l’information globale. Fin de « em ». J’enregistre, je reviens dans mon site publié et je rafraichis. Et voilà, on a bien « Rédigé par Christophe » en italique. Donc on a bien mis dans le « before », « em » pour mettre le début d’italique, « Rédigé par » et dans l’attribut « after » le fin d’italique. Donc voilà comment vous allez pouvoir eh bien affiner l’affichage des short code.

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 !