Vous cherchez une aide-mémoire de thème WordPress pour modifier rapidement votre thème ou créer un nouveau thème personnalisé ? WordPress est livré avec de nombreuses balises de modèle intégrées que vous pouvez utiliser pour prendre une longueur d’avance. Dans cet article, nous partagerons une aide-mémoire sur le thème WordPress pour les débutants.
Avant de commencer
WordPress est livré avec un puissant moteur de modèles qui permet aux développeurs de thèmes de créer de superbes designs pour les sites Web propulsés par WordPress. Il existe des thèmes WordPress premium et gratuits que vous pouvez installer sur votre site Web.
Chaque thème WordPress est livré avec un certain nombre d’options de personnalisation. Ces options vous permettent de modifier les couleurs, d’ajouter des images d’en-tête, de configurer des menus de navigation, etc.
Cependant, vous êtes toujours limité aux fonctionnalités prises en charge par votre thème. Parfois, vous souhaiterez peut-être apporter de légères modifications à votre thème WordPress qui nécessitent un certain codage. Pour ce faire, vous aurez besoin de connaître les bases de PHP, HTML et CSS.
La première chose que vous voudriez faire est de vous familiariser avec le fonctionnement de WordPress dans les coulisses et les modèles de thèmes WordPress.
Après cela, il y a quelques bonnes pratiques que vous voudrez peut-être suivre. Par exemple, créer un thème enfant au lieu d’apporter vos modifications directement dans vos fichiers de thème.
Vous pouvez également vous entraîner sur votre thème en installant WordPress sur votre ordinateur.
Cela étant dit, plongeons-nous dans notre aide-mémoire sur le thème WordPress pour les débutants.
Modèles de thèmes WordPress de base
Chaque thème WordPress est composé de différents fichiers appelés modèles. Tous les thèmes WordPress doivent avoir une feuille de style et un fichier d’index, mais ils proposent généralement beaucoup d’autres fichiers.
Vous trouverez ci-dessous la liste des fichiers de base de chaque thème :
- style.css
- en-tête.php
- index.php
- barre latérale.php
- pied de page.php
- unique.php
- page.php
- commentaires.php
- 404.php
- fonctions.php
- archive.php
- formulaire de recherche.php
- recherche.php
Si vous créez votre propre thème, vous pouvez commencer avec l’un des thèmes de démarrage WordPress. Ces thèmes sont livrés avec des fichiers de modèles WordPress et CSS prêts à l’emploi qui vous offrent un cadre sur lequel vous pouvez vous appuyer.
Balises de modèle dans l’en-tête
WordPress est livré avec de nombreuses fonctions pratiques qui peuvent être utilisées pour générer différentes choses tout au long de votre thème. Ces fonctions sont appelées balises de modèle.
La première et probablement la fonction la plus importante requise dans tous les thèmes WordPress conformes aux normes s’appelle wp_head, et elle ressemble à ceci :
<?php wp_head(); ?>
Ce code récupère tout le HTML important que WordPress doit ajouter dans le <head>
section de chaque page de votre site Web. Il est également essentiel que de nombreux plugins WordPress fonctionnent correctement sur votre site Web.
Voici une liste de balises de modèle que vous trouverez et utiliserez couramment dans le fichier header.php de votre thème. Cependant, ils peuvent également être utilisés ailleurs sur votre thème lorsque vous en avez besoin.
// Title of the Blog, or Blog Name <?php bloginfo('name'); ?> // Title of a Specific Page <?php wp_title(); ?> // Exact URL for the site <?php bloginfo('url'); ?> // Site's Description <?php bloginfo('description'); ?> // Location of Site’s Theme File <?php bloginfo('template_url'); ?> // Link to the Style.css location <?php bloginfo('stylesheet_url'); ?> // RSS Feed URL for the site <?php bloginfo('rss2_url'); ?> // Pingback URL for the site <?php bloginfo('pingback_url'); ?> // WordPress version number <?php bloginfo('version'); ?>
Balises de modèle utilisées dans d’autres fichiers de thème
Jetons maintenant un coup d’œil à d’autres balises de modèle couramment utilisées et à ce qu’elles font.
Les balises de modèle suivantes sont utilisées pour appeler et inclure d’autres modèles. Par exemple, le fichier index.php de votre thème les utilisera pour inclure des modèles d’en-tête, de pied de page, de contenu, de commentaires et de barre latérale.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
Les balises de modèle suivantes sont utilisées dans la boucle WordPress pour afficher le contenu, les extraits et les métadonnées de vos publications.
// Displays the Content of the Post <?php the_content(); ?> // Displays the excerpt that is used in Posts <?php the_excerpt(); ?> // Title of the Specific Post <?php the_title(); ?> // Link of the Specific Post <?php the_permalink() ?> // Category of a Specific Post <?php the_category(', ') ?> // Author of the Specific Post <?php the_author(); ?> //ID of a Specific Post <?php the_ID(); ?> // Edit link for a Post // Oonly visible to logged in users with editing privileges <?php edit_post_link(); ?> // URL of the next page <?php next_post_link(' %link ') ?> // URL of the previous page <?php previous_post_link('%link') ?>
Les thèmes WordPress sont livrés avec des zones prêtes pour les widgets appelées barres latérales. Ce sont des emplacements dans vos fichiers de thème où les utilisateurs peuvent faire glisser et déposer des widgets WordPress. Souvent, un thème a plusieurs emplacements où les utilisateurs peuvent ajouter des widgets.
Cependant, le plus souvent, ces zones de widgets sont situées dans la barre latérale droite ou gauche de la disposition du thème. Pour en savoir plus, consultez notre guide sur la façon d’ajouter des barres latérales dynamiques prêtes pour les widgets dans votre thème WordPress.
Voici le code utilisé pour afficher une barre latérale dans votre thème.
<?php if ( ! is_active_sidebar( 'sidebar-1' ) ) { return; } ?> <aside id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside><!-- #secondary -->
Vous devrez remplacer sidebar-1 par le nom défini par votre thème pour cette zone particulière prête pour les widgets ou la barre latérale.
Balises de modèle pour afficher les menus de navigation
WordPress est livré avec un puissant système de gestion de menus qui permet aux utilisateurs de créer des menus de navigation pour leur site Web. Un thème WordPress peut avoir plusieurs emplacements de menu de navigation.
Consultez notre guide sur la façon de créer vos propres menus de navigation personnalisés dans un thème WordPress.
Voici le code qui sera utilisé dans votre thème pour afficher un menu de navigation.
<?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
L’emplacement du thème dépend du nom que votre thème a utilisé pour enregistrer le menu de navigation. La classe de conteneur CSS peut être appelée comme vous le souhaitez. Il entourera votre menu de navigation, afin que vous puissiez le styliser en conséquence.
Divers modèles de balises
Voici quelques-unes des balises que vous utiliserez couramment dans votre thème WordPress.
// Displays the date current post was written <?php echo get_the_date(); ?> // Displays the last time a post was modified get_the_modified_time // Displays the last modified time for a post <?php echo the_modified_time('F d, Y'); ?> // Displays post thumbnail or featured image <?php the_post_thumbnail( ); ?> // Displays monthly archives <?php wp_get_archives( ); ?> // Displays the list of categories <?php wp_list_categories(); ?> // Displays the gravatar of a user from email address // 32 pixels is the size, you can change that if you need <?php echo get_avatar( 'email@example.com', 32 ); ?> // Displays gravatar of the current post's author <?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Balises conditionnelles dans les thèmes WordPress
Les balises conditionnelles sont des fonctions qui renvoient des résultats en True ou False. Ces balises conditionnelles peuvent être utilisées dans tout votre thème ou plugin pour voir si certaines conditions sont remplies, puis faire quelque chose en conséquence.
Par exemple, si le message actuel a une image en vedette ou non. S’il n’a pas d’image en vedette, vous pouvez afficher une image en vedette par défaut à la place.
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />'; } ?>
Voici quelques balises conditionnelles supplémentaires que vous pouvez utiliser.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Il existe de nombreuses autres balises conditionnelles que vous pouvez utiliser. La liste complète des balises conditionnelles peut être trouvée dans la page du codex WordPress à propos de balises conditionnelles.
La boucle WordPress
La boucle ou la boucle WordPress est le code utilisé pour récupérer et afficher les publications dans WordPress. De nombreuses balises de modèles WordPress peuvent uniquement fonctionner à l’intérieur de la boucle car elles sont associées aux objets post ou post_type.
Voici un exemple de boucle WordPress simple.
<?php // checks if there are any posts that match the query if (have_posts()) : // If there are posts matching the query then start the loop while ( have_posts() ) : the_post(); // the code between the while loop will be repeated for each post ?> <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p> <?php the_content(); ?> <p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p> <?php // Stop the loop when all posts are displayed endwhile; // If no posts were found else : ?> <p>Sorry no posts matched your criteria.</p> <?php endif; ?>
Pour en savoir plus sur la boucle, consultez Qu’est-ce qu’une boucle dans WordPress (infographie).
Nous espérons que cet article vous aidera en tant qu’aide-mémoire de base sur le thème WordPress pour les débutants. Vous pouvez également consulter notre liste des astuces les plus utiles pour le fichier de fonctions WordPress.