Skip to content

Creer son thème WordPress #4 – Hiérarchie des fichiers

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

4ème tutoriel pour la création d’un thème WordPress. Nous allons voir dans ce tutoriel les différents fichier que vous pouvez créer pour votre thème WordPress. Nous verrons dans un premier temps les pages indispensables pour finaliser votre thème WordPress, puis les autres pages que vous pouvez créer !

Créer un thème WordPress

Nous avions vu durant le premier tutoriel pour la création d’un thème wordpress, qu’il existait une liste de fichier indispensable pour créer votre thème. Nous avions vu les fichiers suivants :

  • header.php
  • sidebar.php
  • footer.php
  • loop.php
  • index.php

Il nous reste à voir :

  • archive.php
  • page.php
  • single.php
  • searchform.php

Créer votre thème WordPress, Hiérarchie des fichiers

archive.php

Le fichier archive.php est utilisé lorsque vous parcourez les catégories, ou les archives de votre site sous WordPress. C’est le fichier support qui sert à afficher les afficher la liste des articles d’une même catégorie ou d’une même année. Il sera structuré de la sorte :

<header>
<contenu>
<sidebar>
<footer>

Voici le code qui vous permettra d’afficher les archives ou les catégories :

<?php get_header(); ?><!-- Appel de header.php -->
<article id="article">
	<div id="main">
<!-- On affiche le titre de la page en fonction du type de page -->
<?php if ( is_category() ) : ?>
    <header><h1>Catégorie : <?php single_cat_title(); ?></h1></header>
  <?php elseif ( is_tag() ) : ?>
    <header><h1>Mot-clef : <?php single_cat_title(); ?></h1></header>
  <?php elseif ( is_year() ) : ?>
    <header><h1>Année : <?php the_time('Y'); ?></h1></header>
  <?php elseif ( is_month() ) : ?>
    <header><h1>Mois : <?php the_time('F Y'); ?></h1></header>
  <?php elseif ( is_day() ) : ?>
    <header><h1>Jour : <?php the_time('j F Y'); ?></h1>
  <?php endif; ?>
<!-- On affiche la liste des articles correspondant à la recherche -->
  <?php get_template_part('loop'); ?>
<!-- navigation à travers les pages (si nécessaire ) -->
      <div class="nav">
          <?php previous_posts_link(); ?>
          <?php next_posts_link(); ?>
      </div>
  </div>
</article>
<!-- on récupère le footer -->
<?php get_footer(); ?>

C’est une page très simple à créer, mais vous pouvez toujours l’agrémenter de fonctionnalités diverses et variées.

page.php

Ce fichier est le support de l’affichage d’une page. Il est structuré de la même manières que les autres fichiers, à la différence qu’il n’appelle pas le fichier loop.php. Il est structuré de cette manière :

<header>
<contenu de la page>
<sidebar>
<footer>

Voici le code qui vous permettre d’afficher les pages :

<?php get_header(); ?><!-- Récupération de header.php -->
<article>
  <?php if (have_posts()) : ?><!-- Si il y a quelque chose à afficher -->
    <?php while (have_posts()) : the_post(); ?>
      <header><h1><?php the_title(); ?></h1></header><!-- afficher le titre de la page -->
        <div id="main">
        	<section>
         		<?php the_content(); ?><!-- affciher le contenu de la page -->
        	</section>
      	</div>
    <?php endwhile; ?>
  <?php endif; ?>
<?php get_sidebar(); ?><!-- récupération de la sidebar -->
<?php wp_link_pages('before=<section id="page-links">&after=</section>'); ?><!-- afficher les autres pages -->
</article>
<?php get_footer(); ?>

Encore une fois, le code est simple, mais n’hésitez pas à ajouter des fonctionnalités à cette page pour par exemple identifier l’auteur…

 single.php

C’est le même type de page que page.php à la différence qu’elle affiche les articles et possèdent des liens de navigations entre les articles :

<?php get_header(); ?><!-- Récupération du fichier header.php -->
<article>
		<?php wp_reset_query('posts_per_page=1'); ?><!-- On affiche qu'un seul article -->
		  <?php if (have_posts()) : ?>
<!-- on affiche l'article -->
            <?php while (have_posts()) : the_post(); ?>
              	<header><h1><?php the_title(); ?></h1></header>
                <div id="main">
                	<section>
                    	<h3 class="author"><?php the_author(); ?></h3>!-- on affiche l'auteur -->
                        <h4 class="info">Posté le <?php the_date(); ?> dans <?php the_category(', '); ?> avec les tags <?php the_tags(', '); ?>.</h4><!-- les infos de l'article -->
                        <div class="content">
                        	<?php the_content(); ?><!-- le contenu -->
                        </div>
                    </section>

                    <section>
                    <!-- on affcihe les commentaire -->
                    	<h3>Les commentaires</h3>
                        <?php comments_template(); ?>
                    </section>
              	</div>
    		<?php endwhile; ?>
  		<?php endif; ?>
	<?php get_sidebar(); ?>
</article>
<?php get_footer(); ?>

De la même manière, n’hésitez pas à ajouter des fonctionnalités de navigation comme des articles similaires ou les métadonnées de l’auteur !

searchform.php

Le fichier searchform.php est simplement le formulaire pour la recherche :

<form method="get" id="form" action="<?php echo home_url(); ?>/">
  <input type="text" value="<?php the_search_query(); ?>" name="s" id="s">
  <input type="submit" id="submit">
</form>

Bon, si vous voulez, vous pouvez l’exploiter un peu plus, je ne l’utilise pas vraiment sur mon blog.

Nous avons vu tous les fichiers indispensables pour la création d’un thème WordPress. Maintenant, nous allons voir les autres fichiers que vous pouvez créer pour améliorer l’affichage.

La hiérarchie des fichiers WordPress

Voici le schémas de la hiérarchie des fichiers WordPress. Il se lit de gauche à droite. Voici un exemple :

Quelle page cherche-t-on ? La liste des articles du 18 septembre 2012.
Nous cherchons donc tous les articles pour cette date. WordPress cherche donc dans les archives.
il va donc utiliser le fichier date.php, sauf s’il n’existe pas dans ce cas, il utilisera le fichier archive.php.

Voilà ! A vous de voir si vous souhaitez créer tous les fichiers pour afficher le contenu en fonction de ce qui est demandé par l’utilisateur !

 

Mon tutoriel est fini. N’hésitez pas à partager cette page avec vos amis et à me dire ce que vous en pensez !

Soyez Sociable ! Partagez !
Published inTutoriel
banner