<

div class=”entry atype”>Il y a quelque temps, nous vous avons présenté le concept de création d’un thème WordPress à partir de HTML. Nous avons divisé le didacticiel en deux parties et aujourd’hui, nous sommes tous sur le point de compléter les deux didacticiels, alors n’hésitez pas à considérer ce message comme la troisième portion de la série d’articles. Mon objectif est de démonter le thème WordPress pour vous donner une image claire de son fonctionnement (le thème).

Cet article suppose que vous avez une connaissance pratique du HTML et du CSS. Je vais aller de l’avant et déclarer que posséder des compétences HTML et CSS est une condition préalable à la conception de thèmes WordPress. Encore une chose, cet article restera à l’écart des grands mots et des concepts difficiles – il sera facile à comprendre, alors soyez prêt à vous amuser et à apprendre.

Un peu d’amorçage HTML

Chaque page Web HTML est divisée en différentes parties à l’aide de la balise

<

div>. Par exemple, vous pouvez diviser le corps () de votre site Web en plusieurs sections telles que la navigation, l’en-tête, le contenu principal, la barre latérale et le pied de page, entre autres.

Une fois que vous avez votre page Web en sections, vous pouvez ordonner (ou organiser) les sections comme vous le souhaitez en utilisant CSS. Ce processus est connu sous le nom de style et implique l’ajout d’autres éléments de style tels que la couleur, la taille, les bordures, les effets spéciaux, etc. Telle est la puissance du CSS, qui est d’ailleurs l’abréviation de Feuilles de style en cascade. Lorsque vous assemblez vos fichiers HTMl et CSS et ajoutez quelques images, vous vous retrouvez avec un site Web complet.

Les choses ne sont pas très différentes avec les thèmes WordPress. Comme nous l’avons vu dans la partie 1 de Comment créer un thème WordPress à partir de HTML, les thèmes WordPress sont divisés en différents fichiers. Si vous ne pouvez pas déceler une certaine similitude à ce stade, permettez-moi de vous expliquer.

Les pages Web HTML statiques sont divisées en divisions (ce que nous avons appelé des sections plus tôt) à l’aide de balises

(ou de tableaux si vous êtes vraiment old school). D’autre part, les thèmes WordPress sont divisés en différents fichiers php, qui sont ensuite reconstitués à l’aide de balises de modèle.

Par conséquent, au lieu d’avoir tous les éléments du corps (en-tête, contenu principal, barre latérale, pied de page, etc.) vivant dans un seul fichier (comme c’est le cas avec le HTML statique), chacun des éléments du corps (dans les thèmes WordPress) vit dans des fichiers séparés.

Ainsi, l’en-tête vivra dans header.php, la barre latérale trouvera la maison dans sidebar.php, le contenu principal vivra dans index.php, ou single.php (si c’est un article) ou page.php (si c’est une page ). La section de pied de page vivra dans footer.php et ainsi de suite.

Suivez-vous? Consultez l’illustration ci-dessous:

D’après notre illustration ci-dessus, , et sont appelés balises de modèle. Leur travail consiste à récupérer header.php, sidebar.php et footer.php dans cet ordre à partir de votre répertoire de thème, et d’afficher le contenu dans votre index.php, complétant ainsi la page Web.

Ne laissez pas le .php L’extension vous fait peur, le contenu des fichiers php n’est que du code HTML que vous connaissez bien. Par exemple, votre header.php peut contenir une navigation de liste HTML typique. De même, vous pouvez mettre du code HTML typique dans footer.php, sidebar.php et index.php.

Vous pouvez également placer le loop.php fonction dans votre index.php (ou partout où vous le souhaitez) pour afficher vos articles de blog, mais je devrais ralentir et revenir à l’anatomie des thèmes WordPress. J’ai mentionné une chose ou deux à propos de la boucle dans la partie 2 de la création d’un thème WordPress à partir de HTML. et nous en parlerons (la boucle) et d’autres fonctions dans le futur.

Passons à autre chose…

Un thème WordPress de base est composé d’au moins quatre fichiers de modèle, à savoir:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Voyons ce qui se passe dans chacun de ces magique des dossiers:

Fichier de modèle Index.php

Il s’agit du fichier principal sans lequel vous n’avez pas de thème WordPress fonctionnel. C’est le premier fichier (ou par défaut) qui se charge lorsque vous visitez un site Web WordPress. Considérez cela comme l’équivalent de index.html.

Un index.php typique dans les thèmes WordPress ressemblera à ceci:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Vous pouvez ajouter la boucle entre et pour afficher les articles de blog sur la page d’accueil (index.php) comme indiqué ci-dessous:

<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
    <div class="date"><?php the_time( 'M j y' ); ?></div>
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
    <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
    <?php the_content(); ?>
    <?php edit_post_link(); ?>
    <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div class="post-footer">
    <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
    <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
    <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Fichier modèle Header.php

Ce fichier de modèle contient votre code d’en-tête, votre navigation et votre code d’en-tête HTML. Fondamentalement, header.php stocke tout ce que vous souhaitez afficher en haut de votre site Web. Vous savez, des choses comme le titre de votre site Web et des choses comme ça.

Vous créez également un lien vers votre feuille de style CSS dans le header.php. Voici un exemple de base de header.php:

<html>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>

Fichier de modèle Sidebar.php

Sidebar.php contient tout ce dont vous avez besoin pour apparaître dans vos barres latérales. La barre latérale contient des menus supplémentaires, des widgets, des catégories, des icônes de médias sociaux, du contenu personnalisé, du code HTML tel que des publicités, etc.

Sidebar.php peut contenir du balisage HTML pur ou des appels de fonction php selon vos besoins. En tant que tel, un sidebar.php de base pourrait ressembler à:

<div class="sidebar">

Put your custom content or HTML code here.

</div>

Fichier de modèle Footer.php

Que pensez-vous qu’il y a dans footer.php? Vous pouvez mettre vos informations de copyright ici, des menus supplémentaires, des liens, des icônes de réseaux sociaux – tout ce que vous voulez! Souhaitez-vous voir à quoi ressemble un footer.php basique? Ici:

<footer class="footer">

Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.

</footer>

</body>

</html>

Remarquez les balises de fermeture et dans le footer.php? Pouvez-vous deviner pourquoi ils doivent être inclus dans le footer.php? De même, pouvez-vous deviner pourquoi les balises d’ouverture et sont incluses dans le header.php? Faites-nous part de vos suppositions dans la section commentaires à la fin de cet article 😉

Les quatre fichiers de modèle que nous venons de couvrir ci-dessus constituent un thème WordPress très basique. Il existe de nombreux autres fichiers modèles; il existe un fichier modèle pour chaque élément que vous voyez sur un thème WordPress, qu’il s’agisse de commentaires, de résultats de recherche et de pages d’erreur 404, pour n’en citer que quelques-uns.

Pour bien comprendre l’anatomie d’un thème WordPress, vous devez vous familiariser avec différents fichiers de modèles. Vous pouvez tout parcourir tuiles de modèles utilisables sur WordPress.

Ensuite, nous avons des balises de modèle, que WordPress utilise pour récupérer les fichiers de modèle à partir du répertoire de thème. Vous pouvez en savoir plus sur les balises de modèle et le rôle qu’elles jouent sur WordPress.

Sommaire

Un thème WordPress se compose des éléments anatomiques suivants:

  • Fichiers de modèle tels que index.php, header.php, search.php, category.php etc.
  • Les balises de modèle telles que , etc.
  • CSS
  • Images et autres fichiers multimédias
  • Fichiers JavaScript

Et voici une illustration qui résume l’anatomie d’un thème WordPress:

Vous cherchez à continuer à apprendre? Consultez les détails guide d’anatomie du thème dans le Codex WordPress.

Conclusion

Chaque thème WordPress que vous voyez sur le Web utilise la même structure anatomique (même notre populaire Thème WordPress total), que vous pouvez personnaliser pour répondre à vos besoins. Une fois que vous avez compris les bases du développement de thèmes WordPress, il n’y a pas de limite à ce que vous pouvez faire avec / aux thèmes WordPress.

Share: