43.9. Développement de thèmes à partir de zéro : ajout de la prise en charge des images en vedette et des menus personnalisés

Développement de thèmes à partir de zéro : ajout de la prise en charge des images sélectionnées et des menus personnalisés

Développer un thème WordPress à partir de zéro vous permet de créer une expérience unique et personnalisée pour les utilisateurs de votre site Web. L'une des fonctionnalités les plus importantes lors du développement d'un thème est la possibilité d'ajouter la prise en charge des images présentées et des menus personnalisés. Ces fonctionnalités sont essentielles pour la plupart des sites Web modernes et offrent une grande flexibilité aux utilisateurs finaux et aux administrateurs de sites.

Images en vedette (Publier des miniatures)

Les images sélectionnées, également appelées miniatures de publication, sont un moyen visuel de représenter le contenu d'une publication ou d'une page. Ils sont largement utilisés pour capter l'attention des visiteurs et constituent un élément clé dans la conception de nombreux sites Web.

Pour ajouter la prise en charge des images sélectionnées à votre thème WordPress, vous devez ajouter quelques lignes de code au fichier functions.php de votre thème. Vous trouverez ci-dessous un exemple de la façon de procéder :

add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, vrai);
add_image_size('custom-size', 220, 180, true);

Le code ci-dessus accomplit les tâches suivantes :

• add_theme_support('post-thumbnails') : active la prise en charge des images sélectionnées dans le thème.
• set_post_thumbnail_size(150, 150, true) : définit la taille par défaut des images sélectionnées. Le troisième paramètre true indique que l'image sera recadrée pour s'adapter exactement aux dimensions spécifiées.
• add_image_size('custom-size', 220, 180, true) : ajoute une nouvelle taille d'image personnalisée qui peut être utilisée dans le thème. Ceci est utile pour créer différentes tailles d'image pour différentes sections du site Web.

Après avoir ajouté la prise en charge des images sélectionnées, vous devrez insérer l'image sélectionnée dans votre modèle à l'endroit où vous souhaitez qu'elle apparaisse. Cela se fait en utilisant la fonction the_post_thumbnail() dans la boucle WordPress :

<?php if (has_post_thumbnail()) : ?>
    <div class="post-thumbnail">
        <?php the_post_thumbnail('custom-size'); ?>
    </div>
<?php endif; ?>

La fonction the_post_thumbnail() vérifie si la publication contient une image en vedette et, si c'est le cas, l'affiche. Dans l'exemple ci-dessus, nous utilisons la taille d'image personnalisée que nous avons définie précédemment avec add_image_size().

Menus personnalisés

Les menus personnalisés dans WordPress constituent un moyen puissant de fournir une navigation personnalisable aux utilisateurs de votre site Web. Ils permettent aux administrateurs de sites de créer et d'organiser des menus de navigation selon leurs besoins.

Pour ajouter la prise en charge des menus personnalisés dans votre thème WordPress, vous devrez également ajouter du code au fichier functions.php. Voici un exemple simple :

fonction register_my_menus() {
  registre_nav_menus(
    tableau(
      'header-menu' => __('Header Menu', 'theme'),
      'footer-menu' => __('Menu de pied de page', 'thème')
    )
  );
}
add_action('init', 'register_my_menus');

Ce code définit deux emplacements de menu dans le thème, un pour l'en-tête et un pour le pied de page. La fonction register_nav_menus() est utilisée pour enregistrer les emplacements de menu et la fonction add_action() ajoute cette fonctionnalité au hook de démarrage de WordPress.

Après avoir enregistré les emplacements des menus, vous devrez ajouter les menus à votre thème. Cela se fait en éditant les fichiers modèles appropriés (généralement header.php et footer.php) et en utilisant la fonction wp_nav_menu() pour afficher le menu :

<nav id="site-navigation" class="main-navigation" role="navigation">
    <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>
</nav>

La fonction wp_nav_menu() accepte une variété de paramètres, mais le plus important est theme_location, qui spécifie lequel des emplacements de menu enregistrés vous souhaitez afficher.

Conclusion

L'ajout de la prise en charge des images sélectionnées et des menus personnalisés est une étape fondamentale dans le développement d'un thème WordPress à partir de zéro. Ces fonctionnalités améliorent non seulement la fonctionnalité et la flexibilité de votre thème, mais offrent également une meilleure expérience aux utilisateurs finaux en leur permettant de personnaliser leurs sites Web pour répondre à leurs besoins spécifiques. En suivant les étapes et les exemples de code fournis ci-dessus, vous serez sur la bonne voie pour créer un thème WordPress robuste et personnalisable.

N'oubliez pas que le développement d'un thème est un processus continu d'apprentissage et d'expérimentation. La documentation officielle de WordPress est une ressource précieuse qui peutpour vous aider à étendre davantage les fonctionnalités de votre thème et à comprendre les meilleures pratiques de développement. Soyez toujours au courant des mises à jour WordPress et des nouvelles fonctionnalités qui peuvent être intégrées à votre thème pour le maintenir à jour et fonctionnel.