Aide-mémoire sur le thème WordPress pour les débutants
Êtes-vous à la recherche d’un aide-mémoire pour un 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 pour le thème WordPress pour les débutants.
Avant de commencer
WordPress est livré avec un puissant moteur de création 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 les 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 peu de codage. Pour ce faire, vous aurez besoin de connaissances de base en PHP, HTML et CSS.
La première chose que vous voudriez faire est de vous familiariser avec le fonctionnement de WordPress en coulisses et avec les modèles de thèmes WordPress.
Après cela, vous souhaiterez peut-être suivre quelques bonnes pratiques. 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 de nombreux 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 prêts à l'emploi et du CSS qui vous offrent un cadre sur lequel 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 afficher différentes choses dans votre thème. Ces fonctions sont appelées balises de modèle.
La première fonction, et probablement 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 tous les éléments HTML importants que WordPress doit ajouter dans la section <head> 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 comporte 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 présentation 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 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.
Balises de modèles divers
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 ', 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 True ou False. Ces balises conditionnelles peuvent être utilisées dans tout votre thème ou plugin pour voir si certaines conditions sont remplies et ensuite faire quelque chose en conséquence.
Par exemple, si la publication actuelle contient ou non une image en vedette. S'il n'a pas d'image sélectionnée, vous pouvez afficher une image sélectionnée 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 sur la page du codex WordPress sur les 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 ne peuvent fonctionner qu’à 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 pour les thèmes WordPress pour les débutants. Vous voudrez peut-être également consulter notre liste des astuces les plus utiles pour le fichier de fonctions WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.