Comment réaliser un thème pour Wordpress

Créer un thème peut être facile et rapide si l'on suit le bon chemin. Ce n'est pas toujours ce que font les webmasters. La plupart des thèmes pour Wordpress sont créés à partir du modèle inclu avec le CMS ou à partir d'un autre thème, ce pourquoi ils ont presque tous la même disposition avec le menu à droite et une largeur fixe.

Comment créer un thème

On crée à partir de zéro un thème en définissant une feuille de style, que l'on teste sur une page HTML. Ensuite on remplit l'interface avec les briques fournies par Wordpress, comme on assemble les pièces d'un jeu de légo!

On procèdera en plusieurs étapes:

Installer localement Wordpress pour les tests.
Définir la structure générale.
Créer une feuille de style que l'on met au point sur une page HTML statique.
Décomposer cette page statique en parties (header, footer, etc...) dans des fichiers à inclure.
Créer des éléments graphiques personnalisés.

Si vous trouvez dans la liste des thèmes proposée sur le site de Wordpress, des thèmes dont l'apparence vous plaît quand aux polices de caractères, l'agencement des éléments, les utiliser les avec votre propre structure de thème, vous coûtera moins de temps que de reprendre un thème existant pour en modifier la structure.

Ce tutoriel se base sur un exemple pratique pour lequel nous avons défini une structure et une liste de fichiers classique, et une feuille de style également académique avec en-tête et pied de page, deux colonnes et menu à gauche.

Structure du thème

Le thème est réparti en plusieurs fichiers, mais reprennent chacun une partie de la structure globale. Celle-ci correspond à ceci:

<html>
<head></head>
<body>
    <header>
    </header>
    <content>
    </content>
    <leftside></leftside>
    <rightside></rightside>
    <footer></footer>
</body>
</html>

La position du contenu et des barres latérale dépend du choix de conception de l'interface. On ajoute souvent un container global dans body, mais il n'est pas indispensable, car on peut associer un style à body.

Fichiers du thème

Et le thème de base est implémenté dans les fichiers suivants:

header.php
Description de l'en-tête.
single.php
Définition de la page d'un article.
index.php
Définition de la page d'accueil.
footer.php
Le pied de page.
sidebar.php
Définition des panneaux latéraux.
comments.php
Template des commentaires.

A cela on ajoute au moins deux fichiers:

functions.php
Fonctions PHP utilisables par le thème.
style.css
Feuille de style globale. Toute la présentation est définie dans ce fichier.

D'autre fichiers peuvent être ajoutés pour développer le thème comme par exemple search.php pour décrire le formulaire de recherche.

Connaissances préalables

Avant de construire le thème, il faut connaître la liste des composants fournis par Wordpress pour créer une interface.

Les composants d'une page.
Comment les affecter dans l'interface. Ce sont des appels de fonctions définie par Wordpress.
Le code des widgets d'articles.
Ce sont les éléments d'interface qui permettent d'accèder aux pages du site, par différents moyens.

Construction du thème

Nous allons voir en 8 chapitres comment réaliser un thème pour Wordpress, en partant de zéro et avec les composants pré-définis par le logiciel Wordpress.

Installer localement Wordpress.
La définition d'une page. (single.php)
On inclut dans la page l'en-tête, de panneau latéral, et le pied de page.
La page d'accueil. (index.php)
Elle contient une liste d'article plutôt que le corps d'un article, mais on peut aussi lui donner une présentation différente. Elle affiche aussi une liste par catégorie, le résultat de recherche, les archives.
L'en-tête. (header.php)
Le pied de page. (footer.php)
Le panneau latéral. (sidebar.php)
La feuille de style. (style.css)
On la met au point sur une page HTML statique qui est mise en ligne ici.

Un thème requiert aussi un template des commentaires (comment.php) qui sera inclu automatiquement à la fin de l'article . Nous avons repris la celui du thème par défaut. On peut la personnaliser au besoin.

Application:

Le thème Cryonie est la mise en oeuvre de ce tutoriel.

Télécharger

Le thème Cryonie.

Documentation

Designing theme for public release. Instructions par le site Wordpress. (Anglais).
Check list. (Anglais).

Forum

Modifier la structure d'une page

19-01-2012 19:25:57

link93

Bonjour le forum, J'aurai une petite question, j'ai vu que dans chaque thème il y a une page.html par défaut et qu'il était possible d'avoir plusieurs modèle dans un même thème. J'ai crée une page type en me basant sur sur celle de base mais j'aimerai ajouter 3 cases en dessous de la zone de texte ou je pourrai incorporer des liens. Je voulais savoir si c'est possible et si oui comment :). je mets une copie du code de ma page test : <?php /* Template Name: page avec 3 colones au milieu */ ?> <?php get_header(); ?> <?php get_sidebar(); ?> <div id="content" class="page"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2><br /> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> <?php comments_template(); ?> </div> <?php get_footer(); ?> SI vous avez une idée de comment faire ou un tuto qui pourrai m'aiguiller je suis preneur. à bientôt j'espère ^^.

20-01-2012 19:33:57

webmaster

Bonjour Si j'ai bien compris, il s'agit de placer des liens sous le contenu de la page? Avant les commentaires? Cela se fait dans le calque <div class="post"></div> Après la balise de fermeture ou ailleurs.