slDesign

III – Création du thème

1°) Initialisation

Intéressons nous dans un premier temps à notre feuille de style ; ce fichier va nous permettre d’initialiser notre thème ; nous allons y saisir des informations relatives à notre thème :

/*
Theme Name: slDesign
Theme URI: http://slDesign.openwab.com/projets/sldesign-worpress-theme
Description: Light and clean WordPress theme from slDesign. Localization support and theme options available
Version: 0.1
Author: slDesign - Steve Leherpeux
Author URI: http://sldesign.openwab.com
Tags: light, two-columns, fixed-width, flexible-width, right-sidebar, theme-options, threaded-comments, white

	Fusion WordPress theme

http://slDesign.openwab.com/projets/sldesign-worpress-theme

	Theme designed by slDesign. See the project page for more information and updates

	The CSS, XHTML and design is released under GPL.

http://www.opensource.org/licenses/gpl-license.php

*/

Saisissez le code ci-dessus dans votre fichier ‘style.css’ et enregistrez les modifications :

Si vous vous rendez dans votre espace d’administration WordPress, vous pourrez maintenant voir votre thème dans la liste des thèmes disponibles :

N’activez pas encore votre thème, le résultat serait sans aucun intérêt. Nous allons devoir avant cela éditer notre index.

2°) Préparer l’internationalisation

WordPress vous permet de réaliser des thèmes multi-langues. Si le thème /site que vous développez n’a pas pour vocation à être internationalisé, vous pouvez passer cette étape, dans le cas contraire, voici les étapes vous permettant de publier des thèmes multi-langues.

Etape 1 – Théorie

WordPress utilise une API de traduction basée sur la bibliothèque “gettext”. L’ensemble des fonctions de traduction sont regroupées dans le fichier “wp-includes/l10n.php”. Pour réaliser cette traduction, il est nécessaire de générer des fichiers .po et .mo. Un fichier .mo est un fichier d’initiaisation en quelque sorte, il donne les informations relatives à une traduction. Le fichier .po liste l’ensemble des traductions sous la forme d’e “texte original” => ‘”texte traduit”.

Etape 2 – Outil

Vous n’aurez besoin que d’un seul outil, voir deux si vous n’êtes pas trop doué en anglais… Le premier est “Poedit” qui comme son nom l’indique est un éditeur de fichier .po et .mo. Téléchargez le logiciel à l’adresse suivante : http://www.poedit.net/download.php et choisissez la plateforme qui convient. Installez le logiciel.

Le second outil dont vous pourriez avoir besoin est un dictionnaire Anglais / Français. Il existe de nombreux outils en ligne, à vous de faire votre choix :

http://translate.google.fr/

http://www.reverso.net/

http://www.worldlingo.com/

http://fr.babelfish.yahoo.com/

Etape 2 – Structure

Nous allons créer un dossier “lang” à l’intérieur de ce dossier seront regroupés l’ensemble de nos fichiers de traduction.

Etape 3 – Configuration

Exécutez poedit et créez un nouveau projet. Dans un premier temps, complétez les informations de configuration :

Rien de spéciale… Complétez les informations comme présentées sur la figure ci-dessus.

Complétez ensuite le(s) chemin(s). Le chemin correspond à l’emplacement de vos fichiers source PHP :

Reste à définir les mots clés ; ces mots clefs seront ceux interprétés par WordPress comme des éléments à traduire :

Ces mots clés sont en réalité des fonctions :

<?php
_e([texte source],[domaine]);
?>

Nous partirons sur la base d’une traduction “Anglais => Français” . Le texte source correspond au texte à traduire et le domaine correspond à une clef unique référencant votre thème ; j’ai chois le domaine “sldesign”

L’utilisation sera la suivante :

<?php
	echo '<h2>'.__('My Text','sldesign').'</h2>';
	_e('My Text','sldesign');
	_x('My Text','theme','sldesign');
?>

• __($text,$domain); retourne une chaine String traduite
• _e($text,$domain); retourne un ‘echo’
• _x($text,$context,$domain); est utilisée pour éviter des collisions entre différentes traductions en ajoutant un contexte gettext. Deux chaines similaires peuvent ainsi êtres traduites différemment.

Note : Certains scripts/thémes utilisent la fonction _c() en remplacement de la fonction _x(). La fonction _c() est dépréciée depuis la version 2.9 de wordpress.

Après avoir cliqué sur “OK” vous devrez enregistrer votre fichier dans le répertoire “lang” de votre thème sous le nom sldesign-fr_FR.po. Avant de continuer, fermez poedit et suivez les étapes suivantes :

Allez dans votre dossier “sldesign/lang” et réalisez un copier/coller du fichier sldsocial.po et renommez le en sldesign.pot cette manipulation permettra de d’avoir pour tous les traducteurs une version identique de votre configuration de traduction.

Nous verrons plus tard lors de l’éditions de nos fichiers source comment générer nos traductions mais voici un aperçu :

Vous devriez avoir 3 fichiers dans votre dossier de traduction :

3°) Edition des fichiers de base

Nous allons commencer par créer les fichiers de base de notre thème WordPress :

• index.php : Fichier principal qui inclut les autres fichiers
• header.php : En-tête de notre site, il regroupe les balises ‘<head></head>’ ainsi que les balises Meta
• footer.php : Le pied de page de votre site, on y retrouve les informations légales et le fameux “Propulsed By WordPress”. Ce fichier peut également intégrer des extensions
• sidebar.php : La barre latérale qui intègre la plupart du temps des extensions et des données de navigation
• functions.php : Si il existe, ce fichier est automatiquement chargé par WordPress, il intégre des fonctions relatives à votre thème.
• style.css : Feuille de style principale de notre thème

Créez l’ensemble de ces éléments :

Le fichier index.php est le fichier qui sera chargé, ce fichier appellera lui même d’autres fichiers. Le code suivant permet d’insérer différentes parties de notre thème :

Fichier index.php

<?php
/** slDesign WordPress theme */

//Chargement du header - header.php
get_header();
?>

<div id="content">
<!-- Chargement du contenu -->
</div>

<?php
//Chargement de la barre latérale - sidebar.php
get_sidebar();
?>

<?php
//chargement du footer - footer.php
get_footer();
?>

Nous allons maintenant éditer nos fichiers header.php, sidebar.php et footer.php. Nous reviendrons ultérieurement sur la partie “<content></content>”

Fichier header.php

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"
	content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
	type="text/css" media="screen" />
<link rel="shortcut icon"
	href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<?php
/**
 * Foncion permetant d'initialiser les headers
 * générés par certaines extensions
 */
wp_head();
?>
<?php
//Intégration de jQuery
wp_enqueue_script('jquery');
?>
</head>
<body <?php body_class(); ?>>
<div id="page">
<div id="header" role="banner">
<h1><a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

Fichier sidebar.php

	<div id="sidebar">
	<h2>SideBar::</h2>
	<p><!-- Ici les différents modules de la sidebar... --></p>
	</div>

Je n’ai pas édité ce fichier, je reviendrai dessus ultérieurement lors d’une autre section

Fichier footer.php

<div id="footer">
<div id="site-info">
<p><?php
	//Integration des informations relatives au theme et autres infos...
	_e('Theme slDesign By','sldesign');?> <a
	href="http://sldesign.openwab.com/projets/sldesign-wordpress-theme"
	title="<?php _e('slDesign Website','sldesign');?>">slDesign</a> | <a
	href="http://wordpress.org/"
	title="<?php _e('Wordpress Website','sldesign');?>">Wordpress</a></p>
<p><a href="<?php echo home_url( '/' ) ?>"
	title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
	rel="home"> <?php bloginfo( 'name' ); ?> </a></p>
</div>
</div>
<?php
/**
 * Inclure wp_footer juste avant la balise de fermeture </body>
 * Cette fonction est utilisée par de nombreux plugins
 * pour référencer leurs fichiers javascripts
 */
wp_footer();
?>
</body>
</html>

Maintenant que nous avons édité ces fichiers, activez votre thème et rendez-vous sur la page d’accueil de votre Blog.

Le résultat n’est bien évidement pas définitif … mais vous avez maintenant compris dans les grandes lignes le principe :

Un fichier index.php incluant d’autres fichiers (système de template) dans lesquels vous y placer du contenu et des fonctions relatives à WordPress.

4°) Un peu de mise en page CSS

Notre thème dispose de différentes balises HTML et identifiants (id) que nous allons utiliser pour mettre en page notre site. Pour cela, rien de plus simple, il suffit d’éditer notre feuille de style généré dans notre “header” :

<link rel="stylesheet" href="http://localhost/wp/wp-content/themes/sldesign/style.css" type="text/css" media="screen" />

Ouvrez votre fichier CSS et éditez le comme ceci :

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 1em;
    height: 100%;
}

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
    font-size: 0.75em;
    font-style: normal;
    color: #000;
    min-height: 100%;
    height: auto !important; /* ie6 ignores it */
    height: 100%; /* fix */
    position: relative;
}

a {
    color: #2d83d5;
    text-decoration: underline;
}

#wrapper {
    position: relative; /* IE7 overflow bugfix */
    clear: both;
    float: left;
    width: 100%;
}

#header {
    background-color: #2C2A28;
    padding: 2em;
}

#header a {
    color: #CDA869;
}

#header .description {
    color: #fff;
}

#content {
    width: 980px;
    min-width: 780px;
    margin: 0 auto;
    min-height: 400px;
	float:left;
}

#sidebar {
    float: left;
    position: fixed;
    padding:0;
    overflow-x: visible;
    overflow-y: visible;
	width: 34%;

left: 66%;
    background-color: #E0E0E0;
}

#footer {
    background-color: #2C2A28;
    padding: 0.8em;
    color: #fff;
	clear:both;
}

#footer p {
    text-align: center;
}

#footer a {
    color: #CDA869;
}

Ce code évoluera au fil des modifications.

Le résultat devrait ressembler à cela :

5°) Vérifier la compatibilité

Lors du développement de votre thème, il peut être utile de vérifier la compatibilité avec d’autres versions de WordPress. C’est là qu’entre en jeux notre première fonction que nous éditerons dans notre fichier ‘functions.php’.

Ouvrez ce fichier et éditez le comme ceci :

Cette vérification nous permet d’afficher un message sur le panel d’administration et sur le frontend spécifiant l’incompatibilité de version

6°) Retour vers Poedit

Maintenant que nous avons cette base, ouvrez votre fichier ‘sldesign/lang/sldesign-fr_FR.po’ avec poedit ; vous devriez voir une liste de termes à traduire. Traduisez les éléments  puis enregistrez votre fichier.

Reste encore à initialiser notre internationalisation. Pour cela, nous allons utiliser la fonction “

load_theme_textdomain([domain-name],[path]);

Cette fonction, nous allons l’insérer dans notre fichier “functions.php” ; rappelez-vous, ce fichier est initialiser au chargement de votre thème.

Fichier functions.php

//Chargement de la traduction
load_theme_textdomain('sldesign', get_template_directory().'/lang');

Après enregistrement, retournez sur le frontend de votre site et actualisez la page (F5) ; vous devriez voir votre site passer de l’Anglais au Français :