Axxcom

A la découverte de Genesis – Un framework pour WordPress

daniel — Wed, 12 Dec 2012 17:00:24 +0000

Le développement d'un thème représente un travail conséquent, pouvant devenir laborieux à l'occasion, c'est pourquoi il est souvent plus rationnel de créer un thème enfant en partant d'un thème principal dont la structure nous convient.
Si nous sommes amenés à créer régulièrement de nouveaux thèmes, il y a cependant une autre solution, c'est l'utilisation d'un "framework".

Cette technique va nous permettre de gagner beaucoup de temps en mettant à notre disposition une structure éprouvée et optimisée, suffisamment souple pour que nous puissions l'adapter facilement à nos besoins.
En effet, nul besoin de réinventer continuellement la roue, le framework va nous fournir toutes les "briques" nécessaires, nous n'aurons plus qu'à adapter et assembler en fonction du résultat voulu, en ayant l'avantage d'utiliser toujours la même structure de base.

J'ai donc choisi de vous présenter Genesis édité par StudioPress, qui est un framework largement répandu, performant et ayant fait ses preuves.
Genesis va mettre à notre disposition un panneau d'options plutôt complet qui nous permettra de régler de nombreux paramètres, tels que la mise en page, le fil d'ariane, les paramètres des commentaires, les images à la une, etc...

Panneau d'options (partiel) et Genesis Toolbar Extras

Il se présente tout simplement comme un banal thème, sauf qu'ici, il n'est pas conçu pour être utilisé tel quel. En effet, Ce framework est basé sur le principe de l'héritage et du thème parent/enfant, il s'utilise donc par l'intermédiaire d'un thème enfant, mais avec quelques particularités qui vont faire toute la différence.
En effet, Genesis est truffé de points d'ancrage, les fameux "Hooks" de WordPress, qui vont permettre d'intervenir pratiquement à tous les niveaux, et ce sans toucher au thème parent, comme le veut le principe.

Si vous êtes débutant et que vous n'y connaissez rien ou pas grand-chose, cet outil ne vous aidera pas beaucoup. En effet, Genesis ne dispose pas d'interface utilisateur et donc, pas de "drag and drop" et autre clickodrome...
Ici, tout se fait dans les fichiers en codant en css ou php, et il faut tout de même connaitre "a minima". Par contre, si vous êtes un tant soi peu à l'aise avec le code, une fois la nécessaire période de prise en mains passée, vous pourrez réaliser vos travaux aisément sans toujours réinventer la roue, et en réduisant de façon conséquente vos temps de développement tout en conservant un excellent niveau de qualité.
On pourra en outre trouver sur le site de l'éditeur quelques thèmes "starter" (gratuits) qui vous mettrons le pied à l'étrier en vous évitant de partir de zéro.

En matière de documentation et d'assistance, on trouvera chez Studiopress un forum permettant d'échanger, ainsi qu'une bibliothèque de snippets, des tutoriaux, etc. Il existe également une vaste communauté qui rédige régulièrement des billets et des tutoriaux sur le sujet.
L'inconvénient (tout relatif) est que tout celà est dans la langue de shakespeare. A noter que l'ensemble du framework se bascule très facilement en français à l'aide d'un plugin dédié.
Afin de s'y retrouver facilement, Grégoire Noyelle met également à disposition sur son blog une liste des ressources qui pourra nous faciliter la vie.

Genesis n'est pas gratuit, il est disponible sur le site de l'éditeur Studiopress au prix de 59,95 dollars (prix du framework seul), ce qui représente à peine plus qu'un thème "premium", investissement qu'il faut bien entendu évaluer. En effet, celà à surtout un sens si on est amené à développer régulièrement des thèmes, mais dans ce cas, je pense que cela en vaut la peine.
On trouvera également, toujours chez l'éditeur, un choix de thèmes enfants prêts à l'usage en cas de besoin urgent, ça peux toujours servir, mais fait grimper la note.

Pour conclure, je vous dirai que j'utilise ce framework depuis quelques temps déjà, et, vous l'aurez compris, je n'en pense que du bien (mais ca n'engage que moi). La documentation en anglais n'est pas réellement un handicap, quant on développe, on a au moins quelques notions et celà est bien suffisant pour arriver à se débrouiller.

Le blog est ouvert si vous aussi avez déjà utilisé Genesis (ou un autre framework) et que vous souhaitez faire un retour d'expérience. De même toutes les remarques et les questions seront les bienvenues (je suis accueillant ;-) ).

Liens utiles
Le site de StudioPress
La liste des ressources de Grégoire Noyelle

Vous voulez en savoirplus sur WordPress ?

Cet article fait partie d’une chaîne d’articles sur WordPress entre plusieurs Blogueurs, je vous invite a découvrir leurs articles respectifs grâce aux liens ci dessous :

Réalisation d’un widget WordPress

daniel — Tue, 30 Oct 2012 20:18:41 +0000

Les Widgets WordPress sont largement répandus et tout un chacun en fait usage afin d'afficher les choses les plus diverses. La réalisation d'un Widget pour WordPress n'est pas vraiment une chose très compliquée en soi. Ce petit article a pour but de vous aider à comprendre le fonctionnement des Widget et vous donner une trame si vous avez envie de créer le votre, étant entendu que dans ce cas une connaissance minimale de PHP est requise.

J'ai choisi un thème simple pour cet exercice afin de ne pas complexifier et alourdir inutilement l'ensemble et rester focalisé sur l'objectif.
L'idée est de réaliser un Widget qui va simplement afficher deux lignes de texte et un bouton. Le fait d'actionner le bouton via un terminal mobile déclenchant le numéroteur téléphonique du terminal afin d'initialiser un appel vers un numéro prédéfini. Le Widget ne devra s'afficher que si le terminal client est un mobile, cette fonctionnalité n'ayant en effet que peu de sens sur un ordinateur de bureau.

Aperçu du widget

Ceci nous donnera l'occasion de rencontrer, outre diverses fonctions courantes de WordPress, une petite nouvelle ayant fait son apparition avec la version 3.4 : wp_is_mobile(), et un schéma d'URI assez peu utilisé jusqu'à présent : href:tel.

Passons donc au menu :

Description de la fonction wp_is_mobile().
Description du schéma d'URI "tel".
Structure générale d'un Widget.
C'est la Classe.
Le panneau de paramétrage.
La sauvegarde des options.
L'affichage du Widget.
Intégration dans le thème.
Un peu de style.
L'internationalisation.
Conclusion.
Ressources et références.

Description de la fonction wp_is_mobile()

Cette fonction toute récente, apparue avec la version 3.4 de WordPress, permet de détecter si votre visiteur utilise un périphérique mobile. Il s'agit d'une fonction booléenne ne prenant pas de paramètres et retournant TRUE ou FALSE.

Description du schéma d'URI "tel"

Schéma d'URI permettant de déclencher un appel téléphonique sur les terminaux équipés pour ce type d'opération. Ce schéma est enregistré auprès de l'IANA et est décrit dans la RFC3966, modifiée par la RFC 5341. Il se présente sous la forme suivante :

<a href="tel:+330610100000">Appelez moi</a>

Structure générale d'un Widget.

Pour la création des Widgets, WordPress met à notre disposition la classe WP_Widget, qu'il nous suffira d'étendre et d'adapter.
A la base, nous avons besoin de la structure suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Class mon_widget extend WP_Widget {

function mon_widget() {
/* constructeur */
}

function form($instance) {
/* Formulaire du panneau de réglages du widget */
}

function upddate($new_instance, $old_instance) {
/* Gestion de la sauvegarde des options */
}

function widget($args, $instance) {
/* Affichage du widget */
}
}

La classe mon_widget va étendre la classe WP_Widget et mettre en oeuvre les 4 fonctions nécessaires au bon fonctionnement de l'ensemble.

C'est la Classe.

Nous allons d'abord créer le fichier de notre futur widget et le stocker dans l'arborescence de notre thème. Dans cet exemple, j'ai choisi de le sauvegarder dans un répertoire nommé lib au sein de mon thème. Ceci fait, nous pouvons nous attaquer à notre projet.

Nous allons débuter en définissant une classe et en lui donnant un nom évocateur, que nous allons de plus préfixer afin d'éviter tout risque de conflit.
Attaquer nous ensuite à la première fonction, que nous allons baptiser du même nom que notre classe. Cette fonction sera le "constructeur" de l'objet et va procéder à l'initialisation de quelques paramètres avant de passer à la création de notre classe proprement dite.

Nous allons pour commencer définir un tableau $widget_options qui sera destiné à stocker quelques valeurs globales, qui seront dans ce cas :

classname : ce sera le nom de la classe CSS de notre widget.
description : ce sera la description de notre widget, qu'on retrouvera dans le panneau d'administration de WordPress.

Nous procédons ensuite à la création de la classe en nous référant à WP_Widget et nous lui assignons plusieurs paramètres : une chaine de caractères qui sera l'ID CSS du widget, une seconde chaine qui sera le nom de notre widget dans le panneau d'administration de WordPress, et finalement notre tableau précédemment défini.

1
2
3
4
5
6
7
8
9

class axx_callme_widget extends WP_Widget {

function axx_callme_widget() {
$widget_options = array(
'classname' => 'axx-callme-widget',
'description' => __('Add a callme box on mobile devices','axxcom'));
$this->WP_Widget('axx_callme', __('Axxcom - Call Me Widget', 'axxcom'), $widget_options);
}
}

Voilà, c'est tout pour ce qui concerne le constructeur, passons maintenant à la réalisation du panneau de paramétrage.

Le panneau de paramétrage.

C'est la fonction form qui va être chargée du travail. C'est en effet elle qui va :

définir le formulaire qui va constituer le panneau de réglages.
définir la valeur par défaut des champs du formulaire.
récupérer les éventuelles valeurs sauvegardées.
initialiser les champs et afficher le formulaire.

Nous allons définir pour notre widget 5 éléments qui pourront être modifiés via notre formulaire :

Le titre du widget, qui apparaitra côté client.
le numéro de téléphone à composer lors de l'appui sur le bouton.
une chaine de caractère qui se positionnera au-dessus du bouton.
une chaine de caractères qui se positionnera sous le bouton.
le libellé du bouton.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function form($instance) {
$defaults = array(
'widget_title' => '',
'widget_call_number' => '',
'label1' => '',
'label2' => '',
'button_label' => '');

$instance = wp_parse_args( (array) $instance, $defaults);
$widget_title = $instance['widget_title'];
$widget_call_number = $instance['widget_call_number'];
$widget_label1 = $instance['label1'];
$widget_label2 = $instance['label2'];
$widget_button_label = $instance['button_label'];

echo '

' . __('Title', 'axx') . ' :
. $this->get_field_name('widget_title') . '" type="text" value="' . $widget_title . '" size="35" />

';
echo '

' . __('Call number', 'axx') . ' :
. $this->get_field_name('widget_call_number') . '" type="text" value="' . $widget_call_number . '" size="35" />

';
echo '

' . __('Label 1', 'axx') . ' :
. $this->get_field_name('label1') . '" type="text" value="' . $widget_label1 . '" size="35" />

';
echo '

' . __('Label 2', 'axx') . ' :
. $this->get_field_name('label2') . '" type="text" value="' . $widget_label2 . '" size="35" />

';
echo '

' . __('Button label', 'axx') . ' :
. $this->get_field_name('button_label') . '" type="text" value="' . $widget_button_label . '" size="35" />

';

}

Nous allons donc commencer par définir un nouveau tableau destiné à contenir ces diverses variables, en laissant les valeurs vides.
Ce tableau sera utilisé tel quel dans le cas où le widget viens d'être ajouté et n'a pas encore été configuré. Dans le cas contraire, les valeurs précédemment sauvegardées sont récupérées dans la variable $instance en paramètres de notre fonction. Nous allons donc fusionner nos deux tableaux et ensuite récupérer nos valeur de manière individuelle pour pouvoir ensuite les injecter dans les champs de notre formulaire que nous définirons à l'aide des balises HTML classiques.

Il est à noter qu'il n'est pas nécessaire d'utiliser la balise ni le bouton de soumission, la classe WP_Widget gérant cela pour nous.

La sauvegarde des options.

La sauvegarde des paramètres de notre widget s'effectue via la fonction update.
Cette fonction récupère d'une part les nouveau paramètres, et d'autre part les anciens, il nous reste à remplacer les uns par les autres en n'oubliant pas de "nettoyer" au passage les données introduites via le formulaire.
Le mécanisme de la sauvegarde est entièrement géré par WordPress, ce qui nous simplifie pas mal la vie.

1
2
3
4
5
6
7
8
9

function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['widget_title'] = strip_tags($new_instance['widget_title']);
$instance['widget_call_number'] = strip_tags($new_instance['widget_call_number']);
$instance['label1'] = strip_tags($new_instance['label1']);
$instance['label2'] = strip_tags($new_instance['label2']);
$instance['button_label'] = strip_tags($new_instance['button_label']);
return $instance;
}

L'affichage du Widget.

Voici venu le moment de s'occuper de l'affichage du widget côté client et c'est la fonction widget qui est chargée du travail.

Nous allons commencer par vérifier si nous sommes en présence d'un terminal mobile, auquel cas nous pourrons procéder à l'affichage. Dans le cas contraire, la fonction s'arrêtera là, il n'est en effet pas utile d'afficher ce type de widget si le terminal est dépourvu de fonction de téléphonie. La fonction wp_is_mobile() va ici nous prêter main forte en nous indiquant le type de terminal auquel nous avons à faire.

Si le résultat de la détection est positif, nous effectuerons le traitement des paramètres d'entrée de notre fonction.
Le premier paramètre va contenir les variables propres au thème, telles que les valeurs des éléments qui précèdent et suivent le widget. Nous allons immédiatement en extraire les valeurs et commencer par afficher le contenu de la variable $before_widget. Nous allons ensuite examiner le contenu des variables transmises via le second argument en commençant par le titre de notre widget.

Si le titre est défini (ce qui devrait être logiquement le cas) nous afficherons tout d'abord le contenu de la variable $before_title, suivi de notre titre et pour finir le contenu de $after_title.

Nous vérifions ensuite si le numéro d'appel est bien défini. Si c'est le cas, nous affichons la première zone de texte, suivie du bouton d'appel pour terminer avec la seconde zone de texte.
Si le numéro d'appel n'est pas défini, on affichera simplement un petit message d'erreur.

On clôture les opérations en affichant le contenu de la variable $after_widget. La "logique" a été gardée volontairement simpliste afin de ne pas alourdir l'ensemble, le but étant de "disséquer" un widget, mais il est évident qu'on pourrait améliorer largement tout ceci en ajoutant, par exemple, des contrôles de validité, etc...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function widget($args, $instance) {
if ( wp_is_mobile() ) {
extract($args);
echo $before_widget;

if (!empty($instance['widget_title'])) {
echo $before_title . $instance['widget_title'] . $after_title;
}

if ( !empty($instance['widget_call_number'])) {
echo '

' . $instance['label1'] . '

';
echo '

. __('Call me') .'" href="tel:' . $instance['widget_call_number'] . '">' . $instance['button_label'] . '

';
echo '

' . $instance['label2'] . '

';
}
else {
echo '

Paramètres non définis

';
}

echo $after_widget;
}
}

Intégration dans le thème.

Notre widget est à présent terminé mais pour qu'il soit visible et donc utilisable, il faut aussi l'intégrer dans notre thème. Pour cela, direction notre fichier function.php.

Nous allons commencer par incorporer le fichier de notre widget à l'aide d'un include.

include_once( CHILD_DIR . '/lib/axx_callme_widget.php');

Attention, j'utilise ici un thème enfant, il vous faudra adapter cette ligne en fonction du thème utilisé et de l'endroit où vous avez stocké votre fichier. Si vous n'utilisez pas de thème enfant, vous emploierez vraisemblablement la fonction get_template_directory() au lieu de CHILD_DIR.

Pour rappel, la fonction wp_is_mobile n'est présente que depuis la version 3.4 de WordPress, et comme l'a judicieusement fait remarquer Rémy, afin d'éviter tout risque de plantage en cas de version incorrecte, j'ai inclu un test afin de vérifier au préalable l'existence de ladite fonction.

Si notre fonction est bien présente, nous allons effectuer le référencement du widget au sein du thème, et pour cela nous aurons recours à un hook : widgets_init, qui est déclenché par WordPress juste après l'enregistrement des widgets par défaut.

L'interception du hook est effectuée par un add_action et on lui passera le nom de la fonction qui va effectuer le référencement, fonction qui tiens en fait à peu de choses, juste une ligne de code.
A noter que si votre thème utilise déjà une fonction pour référencer ses widgets, vous pouvez tout à fait vous en servir et n'y ajouter que la 4ème ligne du code ci-dessous, attention toutefois à la version de WordPress.

1
2
3
4
5
6

if (function_exists('wp_is_mobile')) {
add_action('widgets_init', 'axx_register_widget');
}
function axx_register_widget() {
register_widget('axx_callme_widget');
}

Une fois ceci effectué, notre widget doit apparaître parmi les autres widgets déjà présents dans l'administration de WordPress.

Un peu de style.

Notre widget apparaît enfin, mais il est peut-être un peu... moche...
Pour remédier à cela, quelques lignes de css feront l' affaire. Vous pourrez donc à loisirs ajouter vos classes css dans le fichier de votre thème en vous référant aux noms de classes que vous aurez définis dans le code et harmoniser ainsi votre widget avec son environnement.

L'internationalisation.

Comme vous aurez pu le constater, toutes les chaines de caractères ont été rédigées en anglais, et sont utilisées en faisant appel a la fonction d'internationalisation "__()".
Sans action de votre part, votre widget restera en anglais. Pour l'avoir dans la langue de votre choix, il vous faudra passer par le fichier ".po" de votre thème dans lequel ces nouvelles chaines viendront s'ajouter. Il ne vous restera plus qu'à compléter le fichier à l'aide de vos traductions et du programme poedit.

Conclusion.

Ce petit billet est destiné principalement aux personnes ayant déjà un minimum de bagage en terme de développement, tout ceci risque de paraitre bien obscur aux yeux des parfaits débutants, quant aux "vieux broussards", vous aurez plus à apporter ici qu'à apprendre...
J'espère en tout cas avoir fait le tour du sujet et n'avoir rien omis.

A partir de là, vous avez maintenant une trame, un chemin qui devrait vous aider a réaliser vos propres widgets sans trop de difficultés.
Vous trouverez en fin d'article des liens qui vous permettront de télécharger le code complet, mais aussi qui vous mèneront vers les références des différentes fonctions utilisées.

Des coquilles, des questions ? n'hésitez pas à laisser un commentaire.

Ressources et références.

J'ai mis à disposition le code complet ainsi qu'un petit bout de css, vous pouvez le télécharger ici.

Et pour terminer, quelques références utiles :

La fonction wp_is_mobile (codex).
La description du schéma d'uri RFC3966 et RFC 5341
L'API Widgets Description de la classe WP_Widget.
La fonction register_widget (codex).
Les fonctions d'internationalisation (codex).

Et quelques lectures intéressantes :

Programming the mobile web, de Maximiliano Firtman aux éditions O'Reilly
Professional WordPress Plugin Development, de Brad Williams, Ozh Richard et Justin Tadlock aux éditions Wrox.

WordPress – La traduction des thèmes enfants

daniel — Thu, 09 Aug 2012 21:41:35 +0000

Vous avez créé votre thème enfant, vous l'avez préparé pour l'internationalisation en utilisant les bonnes fonctions comme __(), _e(), _x(), esc_attr__() etc... et tout va bien.

Viens maintenant le moment de mettre en place les fichiers de traduction (les fameux .po et .mo) mais... comment faire pour que le thème enfant puisse les intégrer et les utiliser ?

Il vous faut créer dans l'arborescence de votre thème enfant un répertoire destiné à accueillir les fichiers de traduction, par exemple "languages" et y déposer vos fichiers .po et .mo

Ensuite, il faut indiquer à votre thème l'endroit ou se trouvent ces fichiers, et pour cela, ouvrez votre fichier function.php et collez-y tout au début après la balise php la ligne suivante :

load_child_theme_textdomain( 'toto', get_stylesheet_directory() . '/languages' );

On suppose ici que le thème enfant a été baptisé "toto"...

Attention, contrairement à ce qui est en usage pour les plugins, le nom des fichiers .po et .mo doit être constitué uniquement par la locale, donc par exemple pour les fichiers français :

fr_FR.po et fr_FR.mo

Si vous ajoutez dans le nom de fichier le nom du thème, cela ne fonctionnera pas.

Pour les utilisateurs du framework Genesis, cette procédure est également valable pour vos thèmes enfants.

La référence codex de la fonction utilisée : load_child_theme_textdomain

Deux blank themes pour WordPress

daniel — Thu, 14 Jun 2012 19:36:20 +0000

Pour développer votre propre thème WordPress, il vous faut un peu d'imagination, un zeste de bon goût, un minimum de connaissances dans les divers langages utilisés (php, html, css, un peu de javascript ou assimilé...) et si vous voulez éviter de finir chauve ou dépressif, un "blank theme"...

Le "blank theme", c'est généralement un thème ultra minimaliste, reprenant uniquement les éléments essentiels d'un thème, sans fioritures et souvent avec une feuille de style minimaliste. Le but étant d'avoir une base de travail propre sur laquelle vous allez pouvoir apporter tous les aménagements que vous désirez sans avoir à faire un grand nettoyage au préalable.
Idéalement cette base doit proposer un code propre et sans bavure, bien lisible et documenté afin que vous puissiez le manipuler sans craindre des "effets de bord" indésirables.

On rencontre régulièrement des articles nous présentant une panoplie de ce genre de thèmes, la grande majorité étant d'origine anglo-saxonne. Ils sont généralement assez bons, mais présentent l'inconvénient de ne proposer qu'un support en anglais, ce qui n'est pas forcément rédhibitoire mais ne simplifie pas la tâche.

J'ai choisi quant à moi de vous présenter ici deux thèmes de base bien Français (non, ce n'est pas du chauvinisme...) car je trouve que nous avons des gens qui font du très bon boulot et qu'on n'en parle pas suffisamment, mais aussi parce que nous trouverons si nécessaire un support dans la langue de Molière, ce qui est un "plus" incontestable.

Honneur aux Dames, commençons par le thème de Julie Franck d'Xbitionart

CLEAN

Voici donc un thème léger sur une structure Html5 simple.
Très épuré comme il se doit (et comme son nom l'indique) il comprend néanmoins tout ce qu'il faut pour bien démarrer :

deux sidebars
template de page simple
page pour les archives
page pour les liens
page de recherche
page 404
page portfolio avec custom post type

Vous aurez en prime une feuille css de base, simple et soignée, dans laquelle vous pourrez vous y retrouver sans chercher pendant trois jours. Cette feuille par défaut donne par ailleurs un "look" très sympa d'entrée de jeu.
Voici donc un ensemble parfait pour qui veut commencer à "tâter du thème" sans frôler la dépression. Il représente une excellente base avec laquelle vous pourrez expérimenter plein de choses et obtenir rapidement un résultat si vous voulez tailler votre site sur mesure.

Le site de xbition-art : http://www.blog.xbition-art.fr/
Le site du thème : http://www.wp-clean.fr/

Voyons maintenant le thème réalisé par Bruno Bichet

BASICS

L'appellation "blank theme" prend ici tout son sens. Cet ensemble est en effet livré sans fioritures, volontairement brut. Basé sur une structure HTML5 boilerplate, "Basics" est très complet et particulièrement détaillé.
La structure est ici plus complexe, si vous êtes débutant et que vous voulez plonger dans le code, respirez un bon coup, ce thème est un beau morceau, très bien structuré et également bien documenté, il y a ici beaucoup à apprendre.
Si le code est documenté, l'auteur propose également beaucoup d'explications sur son site (ou vous trouverez également beaucoup d'autres choses).

Dans la boite vous trouverez tous les templates nécessaires, y compris deux sidebar avec de multiples zones de widgets.
Le thème "basics" est accompagné d'un thème-enfant "beyond-basics" qui vous permettra de dériver facilement vos propres déclinaisons tout en gardant le bénéfice des mises à jours du thème principal.
Vous trouverez également un dossier "languages" contenant les fichiers nécessaires à la traduction de votre thème, car bien entendu "basics" est prévu pour l'internationalisation. A ce propos, le code est documenté en anglais, mais vous trouverez un support en français et la documentation sur le site est en français également.

Le blog de Bruno Bichet
La documentation du thème
Le site de Basics

Pour conclure

Voici donc de bonnes matières premières si vous voulez vous lancer dans l'aventure. Réaliser son thème est un travail prenant mais gratifiant, encore faut-il démarrer sur de bonnes bases, et ces bases, les voici, à vous de les faire évoluer.
Si d'aventure vous venez à croiser d'autres thèmes de base qui vous semblent intéressants, n'hésitez pas à m'en faire part et je complèterai cet article.

Le stockage des données dans WordPress

daniel — Sun, 13 May 2012 16:29:52 +0000

Ce petit billet s'adresse avant tout aux néophytes, à ceux qui en sont à leurs premiers pas avec WordPress et qui voudraient en savoir un peu plus.
Wordpress, c'est avant tout un "CMS", une entité qui gère le contenu d'un site. Il va donc s'employer à gérer les données et les afficher à l'écran par l'intermédiaire de thèmes qui eux vont s'occuper de la présentation desdites données.

Définition des données

C'est d'abord le contenu que vous ajoutez, le texte des pages et des articles, les images et illustrations, les liens, les mots-clé, les définitions de catégories...
C'est également les coordonnées des utilisateurs du site, le paramétrages propre à WordPress, mais aussi aux plugins que vous aurez installés, etc...

Si un problème survient, comme un plantage du serveur, une infection virale, une mauvaise manoeuvre, il peut être nécessaire de refaire l'installation du site et de remettre en place les données. Cette opération ne peut être menée à bien que si on a pris la sage précaution de sauvegarder ce précieux contenu, mais pour cela, il ne suffit pas de recopier simplement les fichiers que l'on trouvera dans les dossiers d'installation de WordPress.

En effet, les fichiers constitutifs de WordPress, des thèmes et des plugins ne sont pas considérés comme des données, ce sont des éléments qui font partie de la "mécanique" du site. Pour les remettre en place après un gros "plantage", il suffit de réinstaller ces composants et de les reparamétrer... mais les précieuses données, le contenu des pages et des articles, ce qui peut représenter de nombreuses heures de travail, où est-il ?

Stockage des données

La base de données de WordPress se charge de conserver et d'organiser toutes les données du site. En effet, chaque fois que vous rédigez une page ou un article, son contenu textuel est sauvegardé dans les tables de la base de données, il en va de même pour les liens, les mots-clés, les catégories, etc... à l'exclusion des images, pour lesquelles seule la référence est enregistrée.
Il est donc primordial d'effectuer une sauvegarde de cette base de données, c'est la seule façon de garantir la pérennité de votre travail.

Les images sont quant à elles sauvegardées dans une structure de dossiers au sein de l'installation de WordPress, par défaut dans wp-content/uploads/ ensuite dans des dossiers mensuels et annuels. Cet emplacement peut toutefois être paramétré via l'interface d'administration.

Vous pourrez trouver toutes les informations sur la base de données, sa structure et son fonctionnement sur le codex WordPress

Comment effectuer une sauvegarde efficace de son site ?

Cela n'arrive pas qu'aux autres... n'attendez pas l'accident pour prendre vos précautions...
Il faut sauvegarder dans un premier temps tout ce qui a été modifié, aussi bien les données que les fichiers des thèmes ou des plugins que vous auriez retouchés à postériori, comme les feuilles de style par exemple, ainsi que le contenu de la base de données et le contenu du dossier "uploads" où sont stockées les images (a moins que vous n'ayiez modifié l'emplacement par défaut).

Par la suite, si vous ne modifiez pas la structure ou la présentation du site, une sauvegarde de la base de données seule et du dossier "uploads" devraient s'avérer suffisante. Cette sauvegarde devrait s'effectuer à intervalles réguliers, en tout cas, idéalement, chaque fois que vous ajouterez un article ou une page.

Il existe de multiples façons d'effectuer un backup complet d'un site, de la ligne de commande jusqu'aux plugins les plus élaborés. Je ne parlerai ici que la méthode classique, qui devrait cependant convenir à la majorité des cas. En ce qui concerne les fichiers, point de problèmes... il suffit d'un programme de transfert de fichiers en mode ftp tel que Filezilla et le tour est joué, ne pas oublier les dossiers contenant les images.

Pour la sauvegarde de la base de données, WordPress vous propose en natif dans la rubrique "outils" la possibilité d'exporter (et d'importer) le contenu de la base sous forme de fichier XML. Une fois la sauvegarde créée, il fichier devra être sauvegardé en local comme les autres.

En cas de pépin, il suffira d'effectuer l'opération inverse, pour les fichiers, toujours grâce au programme de ftp, quant aux données, via l'option "importer" de la rubrique "outils" de WordPress.

Les zones de menus dans WordPress

daniel — Tue, 01 May 2012 14:20:22 +0000

Qu'est-ce que c'est ?

La plupart des thèmes WordPress proposent une ou plusieurs zones de menus, accessibles via l'interface d'administration. Ces zones permettent d'ajouter, de soustraire et de réorganiser les différents éléments de menu en quelques clics de souris.

Le but de cet article est de voir de quelle façon sont définies ces zones au sein d'un thème, et comment en ajouter soi-même .
Depuis WordPress 3.0 un mécanisme simple est à la disposition des développeurs afin d'intégrer facilement l'accès aux menus via le panneau d'administration, dans le menu "apparence" sous la rubrique "menus".
Il s'agit des "zones de menus", vides à l'origine, et que nous pouvons utiliser très facilement afin de créer nos propres menus, grâce aux différentes listes déroulantes et cases à cocher. A ce stade, aucune compétence en programmation n'est requise.

Afin de déclarer une zone de menu, la première opération à réaliser est d'effectuer l'enregistrement de ladite zone via la fonction "register_nav_menu()". L'appel de cette fonction s'effectue au sein du fichier "functions.php" du thème actif, la méthode d'appel pouvant varier.

Voici quelques exemples :

Appel via un "hook" :

Appel au sein d'une fonction personnalisée :

De nombreux thèmes définissent dans le fichier "functions.php" une fonction destinée à initialiser cetaines variables et les différents composants du thème. C'est le plus souvent au sein de cette fonction que nous retrouverons notre définition de menu.

Pour voir comment votre thème appelle cette fonction, le plus simple est d'effectuer une recherche dans le fichier "functions.php".

Quelle que soit la méthode utilisée, l'appel de la fonction s'effectuera de la façon suivante :

register_nav_menu( 'primary', 'Menu principal' );

Le premier paramètre sera l'identifiant interne, le second sera le libellé qui apparaîtra dans l'interface d'administration. A noter que pour garder un maximum de simplicité je n'ai pas utilisé la fonction d'internationalisation sur le second paramètre.

La description de la fonction register_nav_menu sur le codex WordPress

Attention, il existe une fonction similaire et à la syntaxe très proche : "register_nav_menus()" qui permet d'effectuer l'enregistrement de plusieurs zones de menus d'un seul jet. Cette fonction prend en argument un tableau regroupant les paramètres de chaque zone à référencer.

register_nav_menus(

array( 'navigation01' => __( 'Menu01' ), 'navigation02' => __( 'Menu02' ))

);

La description de la fonction register_nav_menus sur le codex WordPress

Une fois cette simple ligne ajoutée, la zone de menu apparait dans l'interface d'administration, il reste maintenant à définir l'emplacement de ce menu dans le thème, et pour ce faire la fonction "wp_nav_menu()" sera introduite dans le thème à l'endroit ou nous souhaitons voir notre menu s'insérer.

Le paramètre a passer à cette fonction est du type "array", il comporte 16 éléments qui permettent de définir la majorité des éléments constitutifs de notre menu.
Voici la référence du codex WordPress qui détaille l'ensemble de ces paramètres :

Description complète de la fonction wp_nav_menus sur le codex WordPress

Tous ces éléments ne doivent pas forcément être initialisés lors de l'appel de la fonction, mais il faut au moins définir celui qui devra identifier l'emplacement de menu que nous avons précédemment référencé :

'primary' ) ); ?>

Voici l'exemple du menu de navigation du thème "Twenthyeleven" défini de cette façon dans le fichier "header.php" Il faudra bien entendu s'adapter en fonction du thème utilisé.

1
2
3
4
5
6
7
8
9
10

<nav id="access" role="navigation">
<h3 class="assistive-text">h3>
�
<div class="skip-link">div>
<div class="skip-link">div>

'primary' ) ); ?>

nav>

Une fois le code mis en place, il suffira de passer par le panneau d'administration afin d'ajouter des pages à notre notre menu et les réorganiser comme bon nous semble.
La figure ci-dessous montre une partie de l'écran de gestion :