Dans cet article, nous allons aborder les bases de la création de thème personnalisés avec WordPress. Nous commencerons à partir d’un petit nombre de fichier que nous enrichirons progressivement avec les fonctions clefs de l’API WordPress.

INTRODUCTION

Commençons par la début, à savoir, où ranger un thème wordpress ? Et bien ils sont dans /wp-content/themes/

Chaque thème est rangé dans dans un dossier (respectez la nomenclature en vigueur lors du choix du nom pour votre dossier – pas de caractères ésotériques :P ). Dans ce tutorial, j’ai nommé le dossier /formation.

Pour que le thème soit disponible dans l’admin, 2 fichiers sont obligatoires : styles.css et index.php. Nous allons donc créer ces 2 fichiers. pour le moment, Vous pouvez laisser ces fichiers vide. Votre thème est présent dans l’admin prêt à être activé.

Hum… Bien entendu nous allons aller un peu plus loin. Commençons par soigner la présentation du thème dans l’admin. Nous allons afficher les informations pratique concerant notre thème. Pour cela nous allons ajouter un commentaire dans le fichier style.css.

/*
Theme Name: Formation Wordpress
Theme URI: http://studio.jacksay.com
Description: Thème de démonstration dans le cadre de cours consacrés à Wordpress
Version: 1.0
Author: Jacksay
Tags:
*/

Ensuite nous allons ajouter une image au format PNG (300×225) que nous nommerons screenshot.png à la racine de notre dossier.

En rafraichissant l’écran de sélection des thèmes de l’admin, ça devrait ressembler à ça :

Magnifique :)

Vous pouvez maintenant activer votre thème, nous allons maintenant retrousser nos manches et aborder les bases pour réaliser son propre thème…

Hello template

Nous allons commencer par respecter la tradition en affichant un bon vieux « Bonjour WordPress » dans notre template. Nous en profiterons pour poser la structure de base HTML.

Ouvrez le fichier index.php, et entrez ce code :

<!DOCTYPE html>
	<html dir="ltr" lang="fr-FR">
	<head>
		<title></title>
 
		<meta charset="UTF-8" />
	</head>
	<body>
		<div id="container">
			BONJOUR WORDPRESS !!!
		</div>
	</body>
</html>

Ca fonctionne, votre message est affiché. Maintenant nous allons commencer à remplir un peu cette page en utilisant les données enregistré dans WordPress.

Afficher les informations du blog

Commencez par allé dans l’admin vous rafraîchir la mémoire, rendez-vous dans la partie Réglages. Les informations que nous allons exploiter sont le titre du site et le slogan (options générales), et également l’encodage qui lui est précisé dans les options de lecture.

Pour obtenir ces informations, l’API WordPress nous fournis une fonction couteau-suisse : bloginfo.

Cette fonction prend pour paramètre une chaine de caractère et retourne l’information demandée, parmis les informations incontournables, on trouve :

name : Le nom du Blog
description : Slogan
url : Adresse du blog
stylesheet_directory : Dossier où sont rangées les CSS du thème
stylesheet_url : Le lien vers la feuille de style principale
template_directory : URL vers le dossier template (celui dans lequel sont nos fichiers)
charset : Encodage définit dans l’admin
html_type : text/html
language : La langue principale du Blog
text_direction : sens de la lecture

Nous allons maintenant enrichir notre fichier index.php avec la fonction bloginfo

<!DOCTYPE html>
	<html dir="<?php bloginfo('text_direction'); ?>" lang="<?php bloginfo('language'); ?>">
	<head>
		<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
 
		<meta charset="<?php bloginfo('charset'); ?>" />
	</head>
	<body>
		<div id="container">
 
			<div id="header">
				<h1><a href="<?php bloginfo('url') ?>"><?php bloginfo('name'); ?></a></h1>
				<h2><?php bloginfo('description'); ?></h2>
			</div>
 
			<div id="content">
				CONTENU ICI
			</div>
 
			<div id="footer">
				Mon premier template
			</div>
 
		</div>
	</body>
</html>

Allez voir si les informations sont correctement affichées dans le code source (principalement les métas).

Avant de nous pencher sur l’affichage de nos articles, nous allons ajouter 3 appels de fonction dans notre template : wp_head, wp_footer et body_class, les 2 premières fonctions donne la main à l’API de WordPress pour permettre l’injection de code, c’est ce qu’on appel des Hooks.

Le concept de Hooks est intéressant à souligné car il n’est pas spécifique à WordPress, il apparait dans beaucoup de framework/API/CMS sous différents noms. La traduction littérale est Hameçon, on pourrait également dire « point d’entrée« , l’idée est relativement simple, l’appel d’un hook va déclencher l’exécution par l’API de scripts (de l’API elle-même ou de plugins tiers) qui ont besoin d’intervenir à ce moment.

Le Hook du heal par exemple est généralement utilisé par des plugins (SEO par exemple qui va ajouter des metas données dans le head, ou google analytics qui lui ajoute des scripts JS avant la fin du body.

Nous avons également ajouté la fonction body_class(), elle va générer un attribut class= »classname » généré par wordpress. Vous pouvez ajouter des classes perso en paramètre : body_class(‘ma_class_css mon_autre_class_css’).

Nous allons également ajouter un link dans l’entête pour importer notre feuille de style :

<!DOCTYPE html>
	<html dir="<?php bloginfo('text_direction'); ?>" lang="<?php bloginfo('language'); ?>">
	<head>
		<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
 
		<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
 
		<meta charset="<?php bloginfo('charset'); ?>" />
		<?php
			// Récupération des headers générés par Wordpress et plugins installés
			wp_head();
		?>
	</head>
	<body <?php body_class(); ?>>
		<div id="container">
 
			<div id="header">
				<h1><a href="<?php bloginfo('url') ?>"><?php bloginfo('name'); ?></a></h1>
				<h2><?php bloginfo('description'); ?></h2>
			</div>
 
			<div id="content">
				CONTENU ICI
			</div>
 
			<div id="footer">
				Mon premier template
			</div>
 
		</div>
 
		<?php
			// Récupération des footers générés par Wordpress et plugins installés
			wp_footer();
		?>
	</body>
</html>

Modifier également la feuille de style, pour l’instant, la mienne ressemble à ça (Notez que j’y intègre un Script d’Eric Meyers qui permet de reset les paramètres gênants définit dans certains navigateurs.

/*
Theme Name: Formation Wordpress
Theme URI: http://studio.jacksay.com
Description: Thème de démonstration dans le cadre de cours consacrés à Wordpress
Version: 1.0
Author: Jacksay
Tags: 
*/
 
 
/******************************************************************************
 * Le fragment de CSS qui suit est déstiné à réinitialisé les paramètres
 * par defaut des navigateurs.
 * @version 1.0
 * @author Eric Meyer (http://meyerweb.com/eric/tools/css/reset/index.html) 
**/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/******************************************************************************/
 
 
/** DEBUT de la feuille de style **/
body {
	font-size: 12px;
	font-family: Helvetica, sans-serif;
	background: #DEDEDE;
}
 
h1 {
	font-size: 3em;
}
 
#header {
	display: block;
	width: 100%;
	background: #EEE;
}
 
#container {
	width: 750px;
	margin: 0 auto;
	display: block;
	background: #FFF;
}
 
#content {
	width: 100%;
	display: block;
	background: #EEE;	
}

Notre page est prête, passons à l’affichage avec la liste des articles

Afficher la liste des articles

L’affichage des articles passent par l’utilisation des loops de WordPress , le principe est très simple, une première fonction lance la loop : have_posts(), et une deuxième dans la loop var récupérer les infos de l’article de l’itération en cours, le bout de code qui suit devrait éclaircir mon propos :

<!-- dans la div "content" -->
<?php while ( have_posts() ): the_post(); ?>
 
	<div <?php post_class(); ?>>
		<h1><?php the_title();?></h1>
		<div class="post_content"><?php the_content()?></div>
	</div>
 
<?php endwhile; ?>

Allez voir votre page d’accueil, vous devriez ressentir vos premières émotions à peine contenues. Votre thème prend vie :)

Avant de continuer, prenez le temps d’insérer des articles via l’interface d’administration. Pour ma part j’ai créé des catégories :

Catégorie A
Catégorie B
- Catégorie A1
- Catégorie A2
- Catégorie A3
- Catégorie A4
Catégorie C
Catégorie D

J’ai également créé plusieurs articles dans ces catégories sauf une (la C), j’ai également ajouté des mots clef et certains articles sont dans 2 catégories. Arranger vous pour que le contenu des articles soit « réaliste » (du gras, des liens, des images et des titres). Profitez en pour compléter un peu votre feuille de style pour faciliter la lisibilité. Et si vous n’avez pas le courage, ajouter le code qui suit à la css :

.post {
	margin: 25px 10px 10px 20px;
	background: #fff;
	padding: 5px;	
}
 
.post h1 {
	font-size: 2.4em;
}
 
.post_content {
	color: #555;
	margin: 0 20px;
}
 
.post_content h1 {
	font-size: 1.8em;
	margin-top: 8px;
}

Affichage des articles

Voyons maintenant les différentes fonctions utiles pour afficher les informations relatives à un article dans notre Boucle infernale. (Liste non-exaustive).

Notez que la majorité des fonctions de l’API WordPress déstinée à l’affichage du contenu font directement des echos. En outre, le contenu retournée est généralement préformaté en HTML avec des liens voir des structures HTML complètes. Ce fonctions autorisent souvent d’utiliser un paramètre pour forcer la fonction à retourner la donnée plutôt que de faire un écho, ou parfois une autre fonction existe sous la forme get_[nom_fonction], n’hésiter pas à consulter la documentation.

Le titre de l’article

Pour cela on utilise la fonction the_title($before:String= »", $after:String= »", $echo:Boolean=true).Elle Dispose de 3 paramètres facultatifs. $before et $after permet d’injecter du contenu avant et après le titre, par exemple :

<?php the_title("<h1>","</h2>"); ?>

Le dernier paramètre détermine si la fonction affiche directement la valeur (fait un echo) ou retourne la valeur (fait un return).

<?php 
$title_article = the_title("","",false);

voir la documentation officielle

Lien vers l’article

the_permalink(). Retourne le lien permanent vers l’article, cela tiens compte de l’activation (ou pas) de la réécriture d’URL et des modifications à la vollée du pattern de réécriture.

// Exemple d'utilisation de the_permalink()
<a href="<?php the_permalink(); ?>" title="<?php the_title()">En savoir plus</a>

Pas de paramètre pour obtenir le return, pour cela l’API dispose d’une fonction dédiée : get_permalink()

voir la documentation officielle

Contenu

Concernant le contenu, 2 fonctions peuvent être utilisées : the_content et the_excerpt, respectivement, la première va afficher le contenu complet de l’article, la seconde le résumé. Si le résumé n’est pas renseigné, WordPress en aura généré 1 automatiquement à partir du contenu complet.

l’autre fonction, the_content, va afficher le contenu complet. A noter que si vous avez placer un marqueur MORE dans l’article, vous pouvez placer automatiquement un lien vers l’article complet en passant le texte du lien en paramètre.

// Lien type "lire la suite..."
the_content("lire la suite");

Vous devez également tenir compte des articles mis en avant, pour cela une fonction is_sticky() permet de la savoir. Elle retourne TRUE si l’article doit être mis en avant, FALSE dans le cas contraire. Si par exemple, vous voulez afficher le contenu complet des articles étiquettés, et seulement les résumés pour les autres, vous pouvez procéder de cette manière.

<div class="post_content">
<?php if (is_sticky()) { ?>
	<!-- Article étiquetté -->
	<?php the_content(); ?>
<?php } else { ?>
	<!-- résumé + Lire la suite -->
	<?php the_excerpt(); ?>
	<hr />
	<a href="<?php the_permalink();?>">Lire la suite</a>
 
<?php } ?>

A noter, is_sticky() est ce qu’on appel un marqueur conditionnel, nous reviendrons sur ce type de fonction à la fin de ce tutoriel.

the_excerpt dans la documentation officiel

the_content dans la documentation officielle

L’auteur

the_author(). Retourne l’auteur de l’article sous la forme d’un lien, si l’utilisateur clique sur ce lien, une page (notre index dans notre cas) s’affiche avec uniquement les articles de cet auteur.

// Exemple d'utilisation de the_autor()
par <?php the_author();?>

the_author() dans la documentation officielle

La date / L’heure

the_time(). Affiche la date de publication de l’article. Par défaut, le format utilisé est l’heure seule, mais vous pouvez définir un pattern d’affichage, a utiliser également, la fonction the_modified_time, je vous laisse deviner ce qu’elle fait :)

publié le <?php the_time('j F Y à g:i');?><br />
Dernière modification le <?php the_modified_time('j F Y à g:i');?><br />

the_time() dans la documentation officielle

the_modified_time() dans la documentation officielle

Les catégories / tags des l’articles

the_category(). Affiche les catégories de l’article sous la forme d’une liste HTML de liens (organisés avec des UL/LI), vous avez également la possibilitée de définir en premier paramètre un caractère séparateur pour ces liens, par exemple :

la fonction the_tags() fonctionne de la même façon, mais avec les mots-clefs (tags)

// Affichage en liens séparés par des virgules
Catégorie(s) : <?php the_category(", ");?><br />
Tags : <?php the_tags(',');?>

the_category() dans la documentation officielle

Où suis-je, et dans quel étagère ?

Nous avons mis en place notre liste d’article, et placé quelques liens, la plus part de ces liens fonctionnent déjà nativement car il affiche une liste d’article selon un filtre, par exemple en cliquant sur une catégorie, j’obtiens la liste des articles de cette catégorie, même fonctionnement pour les tags… Mais comment savoir par exemple que l’utilisateur a cliqué sur « En savoir plus » afin d’afficher, non pas le résumé mais l’article complet ???

La réponse, les marqueurs conditionnels (conditional tags). Ces « marqueurs » vont vous permettre de déterminer quel page est en cours d’affichage pour adapter l’organisation des informations. Dans notre cas, nous allons tester la page pour afficher l’article complet avec le marqueur « is_single() ».

<div class="post_content">
<?php if (is_sticky() || is_single() ) { ?>
	<!-- Article étiquetté ou affichage type article complet / page -->
	<?php the_content(); ?>
<?php } else { ?>
	<!-- résumé + Lire la suite -->
	<?php the_excerpt(); ?>
	<hr />
	<a href="<?php the_permalink();?>">Lire la suite</a>
 
<?php } ?>

Nous allons également utiliser ce type de marqueur avant d’afficher la liste des articles en indiquant à l’utilisateur quel type de page est en cours d’affichage :

<div id="content">
	<!-- Page d'accueil -->
	<?php if( is_home() ) {?>
		<h1>Tous les Article(s)</h1>
 
	<!-- Trie selon une catégorie -->
	<?php } elseif( is_category() ) {?>
		<h1>Article(s) dans la catégorie : <?php single_cat_title(); ?></h1>
 
	<!-- Trie selon un mot-clef -->
	<?php } elseif( is_tag() ) {?>
		<h1>Article(s) pour le mot-clef : <?php single_tag_title(); ?></h1>
 
	<?php }?>

Vous pouvez également utiliser ce genre de condition dans pour afficher par exemple le titre de l’article ou la catégorie affichée…

Voici la liste des principaux marqueurs conditionnels :

is_home() : Retourne true quand la page d’accueil est affichée.
is_single() : Retourne true quand une page seule est affichée.
is_category() : Retourne true quand une page de catégorie est affichée.
is_tag() : Retourne true quand une page de catégorie est affichée.

Cette liste n’est pas exhaustive et les marqueurs conditionnels permettent également des test plus pousser (tester une catégorie précise via son ID, slug… Un tag précis, 404 not found, etc…), tout ceci est détaillé dans la documentation officielle (en français)

Et voilà, un prochain tutorial nous amènera vers la hiérarchie des fichiers de modèles qui constituent l’étape suivant naturel à ce que nous avons survolé dans ce tutorial.

Infos

Dans cet article, nous allons aborder les bases de la création de thème personnalisés avec WordPress.

Niveau : Débutant
Catégorie : Wordpress
Publié le : 20 septembre 2010
Dernière Mise à jour : 01 décembre 2010
Notions abordées :
- PHP bases
- PHP conditions

Commentaires

Aucun commentaires

Laisser un commentaire


Pseudo
Email	Votre email ne sera pas publié
Site web
Message

Création d'un thème (bases)