Intégration 4 : découper un gabarit html vers wordpress

Sur base d’une page html et de sa css, on peut fabriquer un thème pour wordpress. Ici un rappel de quelques étapes "de base", chaque thème ayant ses petites spécificités.

Précédent | 19/20 | Suivant

Découper les fichiers, et insérer les "inclusions"

1) Créer un dossier dans le dossier "thème" de votre wordpress. Y placer les deux fichiers : le fichier html et le fichier css.
Vérifier que la feuille de style s’appelle bien "style.css". Wordpress aura besoin de ce nom précis.
Renommer le fichier html en "index.php". ouvrir le fichier.
2) Isoler le haut de la page (depuis le haut jusque le début de la partie "main") et le placer dans "header.php"
3) Isoler la sidebar (juste après le partie main et avant le footer normalement) et le placer dans la partie "sidebar.php"
4) Isoler le bas de la page (juste après la partie "sidebar" jusqu’au la fin de la page) et le placer dans un fichier "footer.php".

Dans le fichier html, il ne reste maintenant que la partie "main". Ajouter avant ce code :

<?php get_header(); ?>

et ajouter après la partie "main" :

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Placer les informations de thème dans la css

Comme déjà évoqué dans les didacticiels de ce module, il est nécessaire de placer un commentaire en tête de la css, que Wordpress affiche au moment de choisir le thème. Sans ce commentaire, le thème est considéré comme incomplet, c’est donc très important. Le code placé en tête de la page style.css est formé comme suit :

/*
Theme Name: -ici le nom du theme-
Theme URI: -url du createur-
Description: -une petite description-
Version: 0.1
Author: -votre nom-

Creation Theme by -votre nom- || -adresse web-
*/

Placer le code additionnel du header

Il est maintenant temps d’ouvrir le fichier header.php, créé à l’étape précédente. La partie "head" comporte peut-être déjà des informations, mais il faut les rendre compatibles avec Wordpress.
Là où nous avions un simple lien vers la css nous devons mettre demander à Wordpress de faire le lien correct :

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Avant la clôture de

, placer <?php wp_head(); ?> qui permet à wordpress d’insérer des codes nécessaires à son fonctionnement et celui des éventuels plugins. Voici un bout de code pour le head, un peu plus complet avec un lien de syndication pour votre site.
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<?php wp_head(); ?>

Insérer la boucle wordpress

La boucle Wordpress est un morceau important. Comme déjà évoqué dans ce module, elle est en fait un appel aux articles contenus dans la base de données, ce qu’on appelle un "query". La boucle reçoit une liste de choses (allant de 0 éléments à des centaines selon les cas) et va les afficher les uns après les autres en utilisant les balises que nous placeront dans la boucle.

La structure de la boucle, isolée, donne ceci :

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
Ici on affiche les articles
<?php endwhile; ?>
A la fin de l'affichage de tous les articles on peut ajouter un truc ici, typiquement un bouton "plus récents, plus vieux"
<?php else : ?>
Si rien ne correspond à la demande, on affiche ici un message d'erreur
<?php endif; ?>

Ainsi, un code html comme celui-ci :

<div class="article">
<h2><a href="#" >Le titre</a></h2>
<div class="date">2 avril 2011</div>
<div class="texte">
Texte de l'article
</div>
<div class="infos">Pas de commentaires</span></div>
</div>

va devenir classiquement :

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="date"><span class="post-month"><?php the_time('M Y') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
<div class="texte">
<?php the_content(' <div class="more"> <br>Read more &raquo; </div>'); ?>
</div>
<div class="infos">
<span id="metadata"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> </span></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Pas de résultat</h2>
<p class="center">Désolé, pas de résultat.</p>
<?php endif; ?>

On peut afficher les catégories auquelles appartient l’article en ajoutant :

<?php the_category(', ') ?>

ou encore les tags associés à l’article en ajoutant :

<?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?>

Insérer la sidebar

Si votre thème ne comporte pas de sidebar (ce n’est dans le fond pas obligatoire), on peut sauter cette partie.
La sidebar, depuis la version 2.7 de Wordpress, peut être composée dynamiquement par webmaster du site, sans passer par du code HTML. C’est ce qu’on appelle la "dynamic sidebar". Pour donner cette possibilité, il faudra signaler dans notre thème combien de sidebar on place dans le thème (car il peut y en avoir plusieurs) et placer un code qui permet à Wordpress de savoir où il doit placer les contenus "dynamiques".

On créera donc dans notre thème un fichier "functions.php" (le nom de ce fichier est important) et on y placera le code suivant :

<?php
if ( function_exists('register_sidebar') )
        register_sidebar(array(
                'before_widget' => '<li id="%1$s" class="widget %2$s">',
                'after_widget' => '</li>',
                'before_title' => '',
                'after_title' => '',
        ));

?>

Il décrit pour Wordpress les choix du thème : une seule sidebar, avec des éléments placés dans des éléments de type "li".

On codera ensuite dans le fichier "sidebar.php" ce qui suit :

<div id="menu">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<!-- mettre ici ce qui apparait quand la sidebar dynamique n'est pas activée -->
<?php wp_list_pages('title_li=' . __('Pages:')); ?>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>

<?php endif; ?>
</ul>
</div>

Si le webmaster du site n’utilise pas la dynamic sidebar, la sidebar par défaut sera utilisée : ici les deux fonctions "wp_list_pages" et "wp_list_categories" listent logiquement les pages et les catégories. Voir la page sur la création d’un thème pas à pas pour plus de détails sur la sidebar.

Un peu d’info dans le footer

Le footer n’est pas non plus une obligation, mais il peut contenir une information générale sur le thème, vos coordonnées, des mentions légales et un lien vers le site de Wordpress. Assez typiquement on placera dans le fichier footer.php :

<div id="footer">
<p>
Copyright © <?php print(date(Y)); ?> <?php bloginfo('name'); ?>
<br />
Motorisé par <a href="http://wordpress.org/">WordPress</a>
</p>
</div>

Petits codes utiles

Une image "en dur" dans un template
Vous pouvez aussi inclure une image directement dans un thème (ou un autre type d’objet) en utilisant la fonction bloginfo(). Voici un exemple pour une image :

<img src="<?php bloginfo('template_directory'); ?>/monimage.png" />

Inclure Jquery et/ou du javascript
Si vous voulez utiliser jquery pour donner des effets intéractifs dans votre site, placez le code suivant avant le la fonction wp_head() :

<?php wp_enqueue_script("jquery"); ?>

Placez ensuite votre page de javascript dans le dossier du thème et faites le lien comme suit (pour une page dont le nom est javascript.js) :

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript.js" ></script>

Inclusions supplémentaires
Si vous voulez inclure d’autres fichiers que header.php, sidebar.php et footer.php, vous pouvez employer la fonction include :

<?php include(TEMPLATEPATH."/custom.php"); ?>