Avec le temps, il arrivera certainement que vous souhaitiez personnaliser votre thème WordPress. Mais pour cela, ril faut savoir où aller. Cet article est le premier d’une série qui va vous aider à comprendre comment un thème fonctionne, et comment le modifier.
Définir comment créer un thème n’est pas chose aisée. En effet, prenez un thème basique dans ses fonctions, et prenez un thème avancé; comparez alors le contenu des répertoires des deux thèmes en question. Vous comprendrez vite la difficulté de la chose.
Pour me simplifier la tâche, et pour que vous ayez les exemple en tête, je vais m’appuyer tout simplement sur le thème de 4h18. Vous pourrez visualiser rapidement de quoi il est question.
Le Squelette d’un thème
Un thème WordPress fonctionne sur un schéma simple :
On appel le Header, ensuite, on appel le corps (index.php, ou single.php, ou page.php, etc..), les sidebars, puis enfin, le footer.
Selon le ou les développeurs, le fichiers que l’on retrouve dans le dossier de son thème WordPress peuvent varier. Voici la liste des fichiers que j’utilise pour le thème de 4h18 :
404.php
La page d’erreur
comments.php
Le fichier qui gère les commentaires
archives.php, category.php, tag.php, taxonomy.php
Ces pages affichent les contenus relatifs à la demande de l’internaute (les archives du site, les articles rédigés par un auteur, les articles contenus dans un catégorie, et ainsi de suite)
footer.php
Le pied de page
functions.php
Dans ce fichier se regroupe les portions de code que j’ai ajouté pour modifier le comportement de WordPress, les fameux Hacks
header.php
Le header, contient les appels à tout les fichiers utiles au bon fonctionnement du site, mais aussi le menu
index.php
C’est la page d’accueil du site, entièrement widgétisée
search.php
Affiche les résultats d’une recherche faite par le visiteur
page.php
Affiche les pages statique, comme la page Contact par exemple
single.php
Le fichier qui affiche tout les articles
style.css
La feuille de style, c’est d’ici que l’apparence se gère.
Créer son thème, l’intro
Selon la complexité du thème, cette liste de fichier peur gonfler à souhait. J’avoue ne pas être un partisan de cette façon de faire. Je pense qu’il n’est pas utile de réinventer la roue. Si vous utilisez un FrameWork (Thesis et consort), regardez donc l’impressionnante liste de fichiers et fonctions qui viennent se greffer sur votre installation.
Un thème bien conçu se doit d’être léger, cette question est assez primordial dans l’optique d’un site donnant de bonnes performances.
Avant de vous lancer, je vous invite à lire la section sur la création de thème disponible (en anglais) sur l’Extend de WordPress.org
Partie 1 : Le Header
le fichier header.php contient une bonne partie des appels aux fonctions du site que l’on trouve dans la balise <head>, il contient également les balises html pour l’affichage de l’entête du site (image, menu, liens), enfin, c’est dans ce fichier que l’on place désormais le code de tracking de Google Analytics. N’allez pas installer un plugin pour y coller ce code !
Voici le header de 4h18
Je vous invite à copier / coller le code dans un éditeur de texte pour une meilleure lecture du code.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>4h18</title> <!-- le titre du site -->
<meta charset="<?php bloginfo('charset'); ?>"><!-- Le charset iso8859 ou utf8 par exemple -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"> <!-- la feuille de style -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"><!-- url de ping de votre site-->
<?php if ( is_singular() & get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?> <!-- condition pour le chargement des commentaire -->
<!-- code Google Analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- fonction indispensable pour faire fonctionner les js de votre site, entre autre-->
<?php wp_head(); ?>
</head>
<!-- C'est ici que commence l'affichage du site-->
<body>
<div id="header">
<div>
<!-- les liens en forme de ruban-->
<div>
<div>
<a href="http://4h18.com/feed" target="_blank"></a>
</div>
<div>
<a href="http://4h18.com/contact-2/"></a>
</div>
<div>
<a href="http://www.facebook.com/4h18fans" target="_blank"></a>
</div>
<div>
<a href="http://twitter.com/4h18" target="_blank"></a>
</div>
<div>
<a href="http://4h18.com/service-professionnel/"></a>
</div>
</div>
<!-- le logo du site-->
<div>
<a href="http://4h18.com"></a>
</div>
<!-- Navigation et barre de recherche-->
<div>
<div>
<?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>" name="searchform">
<input type="text" value="<?php echo (get_search_query()=='')?'Rechercher':get_search_query();?>" onblur="if(this.value=='')this.value='Rechercher';" onfocus="if(this.value=='Rechercher')this.value=''" name="s" id="s"> <input type="submit" value="Ok">
</form>
</div>
</div>
</div>
</div>
<!-- fin du header -->
Nous venons donc de voir le premier fichier utilise à notre thème. Nous aurions pu commencer par l’index.php, ou autre. Lors de la création de votre propre thème, rien ne vous empêche de faire de façon différente.
Lors du prochain article, nous verrons le contenu du fichier index.php, avec l’utilisation des premiers marqueurs WordPress.
URL courte : http://4h18.com/theme
Jeu de briques
Snake
Pacman
Bubble