Dans mon premier tutoriel, je vous avez parlé des généralités d’un thème wordpress. Dans ce nouveau tutoriel, je vous expliquerai comment découper votre thème WordPress pour qu’il soit exploitable par le CMS.
Découper son thème
Si vous êtes un bon développeur Web, votre templates devrait plus ou moins ressembler au schémas ci-dessus. C’est la structure de base d’un site web :
- Un header (en-tête) qui comprend généralement, le titre du site, le slogan et éventuellement une barre de navigation
- Un sidebar (barre latérale) où l’on trouve des liens internes ou externes, des informations supplémentaires…
- Un footer (pied de page) où l’on trouve les informations concernant le site, et éventuellement quelques liens internes
- Un content (contenu) représentant le contenu principal de la page.
Dans mon précédent tutoriel, j’avais expliquer que pour créer son thème wordpress, un certain nombre de fichiers “php” étaient indispensables :
- archive.php
- footer.php
- header.php
- index.php
- loop.php
- page.php
- searchform.php
- sidebar.php
- single.php
- style.css
- screenshot.png
Nous allons donc découper notre thème pour les insérer dans ces différents fichier. Dans un premier temps, je n’intégrerai pas les variables de WordPress, on intégrera le fichier BRUT !
Découper un thème wordpress : header.php
Commençons donc par le haut de notre thème. Nous mettrons dans ce fichier, les première balises ouvrante, le <head></head>, ainsi que l’en-tête de votre site et l’éventuelle barre de navigation :
<!DOCTYPE html>
<html>
<head <?php language_attributes(); ?>>
<meta charset="<?php bloginfo('charset'); ?>">
<!-- meta -->
<meta name="keywords" content="mots-clés" />
<meta name="description" content="description" />
<meta name="author" content="auteur">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- include GOOGLE API -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&v1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz">
<!-- STLESHEET -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<title>Titre de la page</title>
<!-- Obligatoire dans le header -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header role="banner">
<div id="titre"><a href="#">Titre du blog</a></div>
<p>Slogan du blog</p>
</header>
<nav>
<!-- ICI on insert le menu de wordpress -->
<?php wp_nav_menu( $args ); ?>
</nav>
Découper un thème wordpress : sidebar.php
Dans un premier temps, nous allons récupérer la sidebar au format BRUT, nous verrons comment widgetiser cette sidebar plus tard.
<div id="sidebar_container">
<aside>
<h3>Sidebar #1</h3>
<ul>
<li><a href="#">lien #1</a></li>
<li><a href="#">lien #2</a></li>
<li><a href="#">lien #3</a></li>
<li><a href="#">lien #4</a></li>
<li><a href="#">lien #5</a></li>
</ul>
</aside>
<aside>
<h3>Sidebar #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin dui in erat eleifend porta. Cras ac felis felis, vitae vestibulum nulla. Praesent eleifend accumsan.</p>
</aside>
<aside>
<h3>Sidebar #3</h3>
<ul>
<li><a href="#">lien #1</a></li>
<li><a href="#">lien #2</a></li>
<li><a href="#">lien #3</a></li>
<li><a href="#">lien #4</a></li>
<li><a href="#">lien #5</a></li>
</ul>
</aside>
</div>
Découper un thème wordpress : footer.php
De manière identique, nous allons mettre simplement notre footer, ainsi que les balises fermantes <body>, <html> !
<footer role="contentinfo">
<p>Copyright © <?php bloginfo('name'); ?> design from <a href="http://paulgruson.fr" title="Paul Gruson">Paul Gruson</a></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Découper un thème wordpress : loop.php
Le fichier loop.php ! C’est l’un des plus importants. C’est lui qui se charge de l’affichage de votre contenu. Quand j’étais en école, on m’apprenait à faire des algos, je vais vous en faire un petit :
SI (il-y-a-des-posts()) : ALORS
POUR CHAQUE post DANS posts FAIRE
afficher posts;
FIN POUR CHAQUE
SINON
AFFICHER ‘rien’
FINSI
Voilà, en fait, le fichier loop.php sert à afficher des listes d’articles dans :
- les archives
- les catégories
- les tags
- les auteurs
- la page d’accueil
Voici ce que ça donne chez moi :
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<section id="<?php the_ID(); ?>" <?php post_class(); ?>>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<h3><?php the_author(); ?></h3>
<h4>Posté le <?php the_date(); ?> dans <?php the_category(', '); ?>.</h4>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<?php the_excerpt(); ?>
</section>
<?php endwhile; ?>
<?php else : ?>
<section>
Rien à afficher pour le moment !
</section>
<?php endif; ?>
<?php wp_reset_query(); ?>
Découper un thème wordpress : index.php
Le fichier index.php est important, c’est la base de votre thème, il appelle les différentes parties de votre thème !
<?php get_header(); ?> <!-- appelle votre header.php -->
<article>
<div id="main">
<?php get_template_part('loop'); ?> <!-- appelle le fichier loop.php -->
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?><!-- Ces deux lignes sont là pour gérer le suivant précédent de la page d'accueil -->
</div>
<?php get_sidebar(); ?> <!-- appelle le fichier sidebar.php -->
</article>
<?php get_footer(); ?><!-- appelle le fichier footer.php -->
A partir de là, on a nos principaux fichiers. Il faut maintenant les appeler dans :
- archive.php
- page.php
- single.php
Nous verrons ça dans un prochaine tutoriel…
