Tutoriel sur le thème WordPress pour les débutants – Partie 7 : Configuration du thème et images en vedette

Cette leçon du didacticiel sur le thème WordPress pour les débutants se poursuit en ajoutant le code de base requis pour la configuration du thème. Nous apprenons à ajouter des supports de thème, et à la suite de cela, la fonctionnalité d’image en vedette de WordPress est activée. Dans cette leçon, nous corrigerons également le titre de la page d’accueil en appliquant notre premier filtre.

Nous travaillerons principalement dans functions.phple fichier que nous avons ajouté dans la leçon précédente. À la fin, nous ajouterons du code pour générer des images en vedette dans nos modèles.

Configuration du thème

Tous les thèmes ont besoin de code pour le configurer en disant à WordPress d’activer certaines fonctionnalités. Cela inclut l’activation des menus, des widgets, de la traduction, etc. Cela se fait généralement dans une "fonction de thème de configuration", généralement accrochée à un crochet nommé de manière pratique after_setup_theme. Pour certaines choses spécifiques, nous devons utiliser le crochet d’initialisation de WordPress appelé init.

Écrire le code de configuration de thème nécessaire pourafter_setup_theme

Configurons une telle "fonction de thème de configuration" dans notre functions.php, accrochée àafter_setup_theme :

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

Dans cette fonction, nous ajouterons un tas de fonctions de configuration communes et utiles pour les thèmes WordPress. Veuillez placer tous les morceaux de code suivants dans votre fonction de configuration.

Nous devons d’abord définir une largeur maximale d’images et d’intégrations (telles que des vidéos). Cela garantit que lorsque les auteurs insèrent de grandes images dans les publications, les images restent dans une certaine largeur. Je l’ai réglé sur 840 pixels (parce que je veux de la place pour la barre latérale), mais vous pouvez l’ajuster à votre guise.

$GLOBALS['content_width'] = 840;

Nous devons également informer WordPress que le thème est traduisible et où il peut rechercher des fichiers de traduction. J’entrerai dans la traduction du thème WordPress en détail à l’étape suivante de cette série de didacticiels sur le thème.

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Notez l’utilisation d’une nouvelle fonction pour récupérer votre répertoire de thèmes, get_stylesheet_directory(). Ceci est très similaire à get_stylesheet_directory_uri()ce que nous avons rencontré à la dernière étape, mais ici nous avons besoin du chemin relatif, pas de l’URL.

Ensuite, nous devons ajouter des "supports de thème", qui activent la fonctionnalité WordPress qui n’est pas activée par défaut.

C’était tout un tas d’ add_theme_supportappels! Comme son nom l’indique, add_theme_supportindique à WordPress d’activer des fonctionnalités qui ne sont pas activées par défaut. Par exemple, les images en vedette ("post-vignettes"), la prise en charge des balises HTML5 et la fonctionnalité de logo personnalisé de WordPress dans Customizer (ajustez l’image de logo souhaitée si vous le souhaitez !).

Il existe de nombreuses autres fonctionnalités intéressantes, je vous encourage donc à parcourir la documentation de add_theme_support. Par exemple, il y en a une assez nouvelle, title-tag, qui gère la balise de titre. Je l’ai laissé de côté dans ce tutoriel car nous avons déjà ajouté la balise de titre header.phpmanuellement.

Gardez à l’esprit que si vous ajoutez la prise en charge de title-tag, vous devez supprimer la balise de titre de votre fichier d’en-tête pour éviter d’obtenir des balises de titre en double.

Enfin, nous en ajoutons quelques-uns add_theme_supportpour le nouveau Gutenberg dans WordPress. Nous ajouterons la prise en charge des sections larges, en activant la fonctionnalité des styles de bloc et la prise en charge des intégrations réactives :

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

Le résultat final

Voici la fonction de configuration finale dans notre functions.php:

Après avoir enregistré, vous devriez maintenant pouvoir ajouter des images en vedette aux publications dans l’administration ! Ajoutons un autre correctif de thème dans notre functions.phpavant d’ajouter des images en vedette à nos modèles ; rappelez-vous que wp_titledans notre header.phppar défaut, vous ne pouvez pas faire écho à quoi que ce soit sur la page d’accueil ? Réparons ça.

Ajout d’un filtre àwp_title

Ajoutons notre première fonction de modification de filtre appropriée, en utilisant add_filter(). Le filtre auquel nous allons nous accrocher porte le même nom que la fonction que nous avons utilisée pour WordPress pour récupérer dynamiquement le titre de la page ; wp_title. Ce que nous allons corriger, c’est de nous assurer que le titre n’est pas vide sur la page d’accueil – ce qui est la valeur par défaut dans WordPress. Lorsqu’il est sur la page d’accueil, nous voulons qu’il soit rempli avec le nom du site WordPress.

Gardez à l’esprit de toujours renvoyer la variable filtrée dans vos fonctions de filtrage ! Tous les filtres modifient une variable, et si vous ne retournez rien, la variable devient indéfinie. Cela peut causer beaucoup de problèmes. Pour plus de détails sur les filtres, jetez un œil à mon article expliquant tout sur les crochets et les filtres.

Savoir quand personnaliser le titre

Nous ne voulons personnaliser la variable de titre que si nous sommes sur la page d’accueil. Pour toutes les autres pages, nous voulons le laisser tel quel (il suffit de le retourner tel quel). Mais comment savons-nous quand nous sommes en première page ?

Nous pouvons tirer parti des balises conditionnelles de WordPress, qui sont tout un tas de fonctions utiles qui renvoient vrai ou faux en fonction d’une condition. Ceux-ci sont le plus souvent utilisés pour demander si nous sommes sur une certaine page ou un certain modèle. Nous pouvons simplement demander « Sommes-nous en première page ? ». Si cette méthode renvoie vrai, alors seulement nous modifierons la variable de titre.

Il convient de noter qu’il existe deux balises conditionnelles pour la page d’accueil, à savoir is_home()et is_front_page().Celles-ci diffèrent en fonction de votre paramètre "Lecture" – que votre page d’accueil affiche ou non les derniers messages ou qu’elle soit définie sur une page fixe. Si vous suivez ce tutoriel avec une toute nouvelle installation WordPress avec le paramètre par défaut, vous utilisez is_front_page().

Obtenir le nom du site WordPress

Nous savons maintenant quel filtre utiliser et comment nous assurer de ne changer le titre que si nous sommes au bon endroit. Mais quel doit être le titre? Habituellement, le titre de la page d’accueil serait le nom de votre site WordPress. Mais comment obtient-on cette information ?

Pour récupérer des informations sur l’installation actuelle de WordPress, nous utilisons la bloginfo()fonction. En paramètre, nous demandons de renvoyer le nom du site, ce qui se fait en définissant le paramètre sur ‘ name‘. Et comme il s’agit d’un filtre et que nous devons le renvoyer, et non l’écho, nous utilisons sa méthode sœur get_bloginfo(). L’appel bloginfo()fera toujours écho à la sortie.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Si vous actualisez votre page d’accueil, vous devriez voir que le nom de votre site apparaît dans la <title>balise (et dans l’onglet du navigateur) ! Notre filtre n’affecte que la page d’accueil, de sorte que toutes les autres pages telles que la publication unique doivent toujours renvoyer la même chose qu’auparavant ; le titre du poste.

Sortie d’images sélectionnées dans des fichiers modèles

Plus tôt, lorsque nous avons configuré les supports de thème, nous avons ajouté le support des images en vedette. Avec cela activé, nous pouvons maintenant sortir ces images dans nos modèles. Faisons-le maintenant !

Ouvrez-les index.phpet trouvez-leur une place à l’intérieur de la boucle. J’ai choisi de le placer après le titre, mais c’est à vous de décider où vous les voulez. Vous utilisez la fonction the_post_thumbnail()pour produire l’image. Il est recommandé de vérifier d’abord si la publication a même défini une image en vedette, ce que nous faisons en utilisant has_post_thumbnail().

Si votre message n’a pas d’image en vedette, vous ne verrez rien sortir après le titre. Cependant, si vous définissez une image en vedette sur l’un de vos messages, the_post_thumbnail()une <img>balise avec l’image choisie sera générée. Cette fonction accepte quelques paramètres supplémentaires. Par exemple, vous pouvez définir la taille d’image que vous souhaitez utiliser et contrôler les attributs ajoutés à l’image. Comme d’habitude, je vous encourage à jeter un coup d’œil rapide à la documentation et à l’ajuster à votre guise.

Documentation sur les méthodes utilisées

• add_action
• load_theme_textdomain
• get_stylesheet_directory
• add_theme_support
• add_filter
• is_front_page
• get_bloginfo
• a_post_thumbnail
• the_post_thumbnail