L’espace d’expérimentation de Maccimum Communication

Souscrire par E-mail

WordPress : comment widgetiser un thème

Depuis la sortie de la version 2.2 de WordPress, la quasi totalité des thèmes sont widget ready, ce qui signifie que vous pouvez ajouter des gadgets à votre blog directement depuis l’interface d’administration, et donc sans avoir à mettre les mains dans le code. Pour rappel, cette fonctionnalité permet d’organiser la sidebar de votre thème (ou le footer) grâce à un système de glisser-déposer très astucieux. Toutefois, si vous souhaitez créer votre propre thème — ou personnaliser un thème qui n’est pas widget ready — vous devrez effectuer quelques manipulations simples pour rendre vos sidebars et vos footers « widgetisables ». Cet article vous explique la marche à suivre.

Pour widgetiser un thème WordPress, il convient de procéder en deux étapes :

1. Création du template functions.php

Situé dans le répertoire de votre thème, le fichier functions.php permet d’ajouter différentes options et paramètres à votre thème. Puisqu’il n’est pas obligatoire, il se peut que vous deviez en créer un, avant de poursuivre. Si votre thème en possède déjà un, ouvrez-le puis copiez-collez le code ci-dessous dans le fichier.

<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

Si vous avez plus d’une colonne dans votre sidebar, précisez le nombre de colonnes dans le code. Par exemple, si vous avez deux colonnes, vous devez avoir le code suivant:

<?php if ( function_exists('register_sidebar') ) register_sidebar(2); ?>

Pour améliorer la mise en page de votre sidebar, utilisez le code ci-dessous :

<?php
   if ( function_exists('register_sidebar') )
   register_sidebar(array(
   'name' => 'sidebar 1',
   'before_widget' => '<div class="widget">',
   'after_widget' => '</div>',
   'before_title' => '<h3 class="widgettitle">',
   'after_title' => '</h3>',
   ));
?>

Sous le nom de la sidebar (ici sidebar 1) s’affiche la structure du widget. En utilisant les sélecteurs de classes (.widget et .widgettitle) il est possible de personnaliser la présentation de votre sidebar grâce à la feuille de style. Bien évidemment, vous pouvez modifier les noms de ces classes et d’adapter la structure de vos widgets en fonction de vos besoins.

• ‘before_widget’ et ‘after_widget’ : permettent d’encadrer votre sidebar d’une balise div pour la styliser ;
• ‘before_title’ et ‘after_title’ : permettent d’appliquer un style aux différents intitulés de vos widgets (archives, catégories, articles récents, articles populaires…).

Vous avez également la possibilité de créer plusieurs sidebars. Par exemple pour en créer deux, dupliquez le premier code et modifiez le nom de la deuxième sidebar.

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'name' => 'sidebar 1',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widgettitle">',
 'after_title' => '</h3>',
 ));
 if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'name' => 'sidebar 2',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widgettitle">',
 'after_title' => '</h3>',
 ));
?>

Sauvegardez votre fichier, puis rendez-vous sur le panneau d’administration, à la section Widgets (Apparence > Widgets). Là vous devriez voir apparaître votre nouvelle sidebar. Mais avant d’y ajouter les widgets de votre choix, vous devrez effectuer une dernière manipulation, tout aussi simple.

2. Modifications du modèle sidebar.php

Nous allons donc ajouter quelques lignes de code dans le fichier de modèle sidebar.php pour permettre aux widgets de s’afficher correctement. La plupart des thèmes possèdent un div nommé sidebar. Placez le code suivant à l’intérieur de ce div :

<?php
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header') ) : ?>
  CONTENU DU SIDEBAR
<?php endif; ?>

Enregistrez votre fichier sidebar.php. Votre thème est maintenant prêt à prendre en charge les widgets WordPress. Pour les activer, rendez-vous dans l’administration de votre blog et sélectionnez ceux de votre choix. Ils sont disponibles dans la partie gauche de la page Widgets (Apparence > Widgets).

En ajoutant vos propres Widgets, vous remplacez tout ceux qui y étaient auparavant et qui n’étaient autres que les widgets par défaut prévus par le créateur du thème. Pour les retrouver, il suffit de les désactiver à nouveau en les retirant de(s) colonne(s) latérale(s) située(s) sur la partie droite de la page Widgets (Apparence > Widgets).

——
Pour tous renseignements complémentaires, contactez-nous :
www.maccimum.fr (communication globale, tous supports, tous médias).
——

WordPress : comprendre les thèmes et les modèles

Si vous souhaitez vous lancer dans la création de votre thème WordPress, vous devrez au préalable faire l’effort de comprendre les principes de bases qui régissent cette plate-forme de blog. Cet article explique de quelle façon est organisée la structure d’un thème WordPress.

En bref, on a avec WordPress un système de template PHP classique, avec des fichiers de modèles hiérarchisés (la page index.php étant la page par défaut, puis les pages spécifiques dédiées aux catégories, aux auteurs, aux archives, aux commentaires), et des fichiers spécifiques tels que le header, le footer, les sidebars, qui vont apparaître à l’intérieur des pages.

Qu’est-ce qu’un thème WordPress (template) ?

C’est le thème qui donne son identité au blog et qui “habille” son contenu. C’est en fait la couche graphique que voit l’internaute, mais pas uniquement. En effet, le thème prend en charge non seulement le design (polices utilisées, couleurs des différents éléments et hyperliens…), mais aussi la mise en page du contenu de votre blog (quels éléments afficher et leurs positionnements). Précisons également qu’un thème modifie la façon dont le site est affiché, sans changer le logiciel sous-jacent.

Un thème WordPress est composé d’un ensemble de fichiers de modèles qui fonctionnent conjointement. Ils forment une structure unifiée. Ces fichiers sont rassemblés dans un dossier unique portant le nom de votre thème et sont situés dans le répertoire (../wp-content/themes/votre-theme/).

Dans ces fichiers de modèles sont insérés des balises de modèles. Ce sont ces marqueurs PHP qui extrait les informations de chacun des fichiers de modèles pour l’injecter dans la page qui sera affichée.

Voici les différents éléments composant un thème WordPress :

• la feuille de style du blog : style.css (CSS = Cascading Style Sheets).
• les fichiers composant le thème, appelés fichiers de modèles : header.php, index.php, footer.php, sidebar.php…
• un fichier permettant d’ajouter des fonctionnalités optionnelles à votre thème : functions.php. Il n’est pas obligatoire.
• les images utilisées pour habiller le blog.

Les noms des fichiers de modèles sont identiques quels que soient le thème WordPress utilisé. Un gain de temps énorme lorsque l’on passe son temps à personnaliser des thèmes WordPress récupérés à droite à gauche. On retrouve plus facilement les différents éléments puisqu’ils sont toujours à la même place.

Quelle est la structure d’un thème ?

Un blog WordPress est généralement composé de quatre zones, nécessitant au moins quatre fichiers de modèles et une feuille de style :

Seuls deux fichiers sont obligatoires pour qu’un thème puisse être considéré comme valide par WordPress : index.php pour le code PHP, et style.css pour la mise en forme du blog.

Signalons la place essentielle du fichier index.php : c’est là où se déroule principalement l’action. Ce fichier extrait les articles du blog et les affiche. Lorsque le fichier template demandé n’existe pas, c’est lui que WordPress affiche, si bien que l’on pourrait très bien n’utiliser que ce fichier-là pour contrôler l’apparence du site. Mais ce ne serait pas très pratique.

Qu’est-ce qu’une feuille de style ?

Écrit à l’aide du langage CSS (Cascading Style Sheet), le fichier style.css ne sert pas à produire le contenu du site, mais plutôt à le formater. En fait, ce fichier pilote tous les aspects de mise en page du thème de votre blog : emplacement des différents éléments, polices utilisées, couleurs des hyperliens. Ce fichier contient également les informations que WordPress affichera au sujet du thème : nom du thème, version, nom de l’auteur, date de publication…

Pour que WordPress puisse reconnaître correctement votre thème et afficher les infos le concernant, il faut que le fichier style.css contienne les premières lignes suivantes (à adapter selon votre cas) :

/*
   Theme Name: Le Nom de votre Theme
   Theme URI: http://www.votre-site.com/
   Description: Thème personnel et personnalisé de…. Création originale de… pour…
   Version: 1.0
   Author: Votre Nom
   Author URI: http://www.votre-site.com/profil.html
   ************************************************
   * COPYRIGHT ou LICENCE (à personnaliser)
   * Ce theme est une creation exclusive de… pour…
   * Tous droits reserves Copyright (C) 2012 Votre Nom/Société
   * This theme was designed and built by… for…
   * All rights reserved Copyright (C) 2012 Votre Nom/Société
   ************************************************
 */

Chaque thème est illustré dans le panneau d’administration par une image miniature nommée screenshot.png. On la trouve à la racine du dossier de thème (wp-content/themes/mon-theme/screenshot.png).

Qu’est-ce qu’un fichier de modèle (template files) ?

L’appellation fichiers de modèle (template files) regroupe tous les fichiers PHP du thème, à l’exception des fichiers spéciaux comme functions.php.

Il existe deux types de fichiers de modèles :

• Les fichiers principaux qui composent le thème. Reliés entre eux, ils vont créer et afficher la page Web. Les principaux sont : index.php, single.php, page.php, category.php, archive.php, search.php…
• Les fichiers partiels qui sont des inclusions affichant des parties spécifiques à l’intérieur des pages du blog. Les plus utilisés sont : header.php, footer.php, sidebar.php, searchform.php…

Tous ces fichiers templates sont reliés entre eux sous forme de hiérarchie. En fonction de ce qu’il doit afficher, WordPress regarde dans le répertoire du thème et utilise le premier fichier de modèle qu’il trouve… selon la hiérarchie d’appel reproduite dans le schéma synoptique ci-dessous.

Si votre blog est à l’adresse http://mon-site.com// et qu’un visiteur charge la page http://mon-site.com/, WordPress cherche un fichier de modèle appelé home.php et l’utilise pour générer la page. Si home.php n’existe pas, WordPress recherche un fichier appelé index.php dans le répertoire du thème et l’utilise alors pour générer la page.

Qu’est-ce qu’une balise de modèle (template tag) ?

Les balises (ou marqueurs) de modèles permettent :

• de connecter tous les fichiers de modèles entre eux pour former le thème qui devient une seule et même entité.
• de gérér et générer l’ensemble des contenus dynamiques de WordPress.

Un marqueur de modèle est une instruction PHP qui demande à WordPress de faire ou d’afficher quelque chose. Dans le cas du marqueur de modèle header.php permettant d’afficher le nom de votre site WordPress, il ressemble à :

<?php bloginfo('name'); ?>

Chaque balise débute par une fonction qui lance PHP (<?php) et se finit par une fonction qui l’arrête (?>). Entre ces deux commandes se trouve la requête faîte à la base de donnée lui indiquant ce qu’il doit récupérer et afficher (ici bloginfo).
Dans cet exemple, le mot name lui demande de récupérer le nom du blog. On appelle cela un paramètre. Les paramètres sont placés entre les parenthèses de la balise, et entre guillemets. Le plus souvent, ils tirent leur valeur des paramètres du panneau d’administration de WordPress. À noter que beaucoup de balises ne possèdent pas de paramètre.

Voici la liste complète des balises valides de modèles WordPress, par catégories :

Pour tout savoir sur les balises de modèles et leurs paramètres, consultez les articles du Codex WordPress :

• Découvrir les Marqueurs de modèles.
• Marqueurs de modèles.
• Liste exhaustive et officielle des Template Tags (en anglais).

Qu’est-ce que la boucle WordPress (The Loop) ?

La Boucle (The Loop) est une fonction PHP permettant d’appeler n’importe quel contenu (titre d’article, texte de commentaire, liens…) depuis la base de données, à l’aide des fameuses balises (ou marqueurs) de modèles évoqués plus haut. Par l’utilisation de La Boucle, WordPress traite tous les Articles devant être affichés sur la page active et adapte leur présentation en utilisant les critères décrits par les marqueurs de La Boucle.

La Boucle est présente non seulement dans index.php mais aussi dans single.php, category.php, page.php, archive.php, search.php… Elle est l’élément central et indispensable permettant d’afficher précisément ce que l’on souhaite. Ainsi, il est possible d’afficher tous les articles en ordre chronologique décroissant, ou bien tous les articles d’une catégorie, ou encore les articles d’une période donnée et enfin les articles d’un auteur. Si on désire afficher une sélection d’article personnalisée, il faut mettre les mains dans le code avec la requête query_posts().

Pour en savoir plus sur la Boucle WordPress, et les différents marqueurs de modèles qui ne fonctionnent que dans la Boucle :

• Codex fr : La Boucle.
• Codex : The Loop in Action.

Qu’est-ce que le fichier functions.php ?

Ce fichier – qui n’est pas obligatoire – permet d’ajouter certaines fonctionnalités au thème, dont certaines peuvent être gérées via l’interface d’administration de WordPress.

Par exemple, c’est dans ce fichier que se trouve la fonction PHP permettant de « widgetiser » la sidebar (c’est-à-dire de la rendre gérable par l’administration de wordpress), ou bien encore celles permettant de filter les headers 301 et 404 (redirections, héritages…) ou de gérer les fichiers de traductions…

Conclusion

Comprendre les thèmes et les modèles WordPress c’est la possibilité de créer son propre thème, à son image, mais aussi la possibilité d’avoir le contrôle total sur la façon dont il fonctionne.
——
Pour tous renseignements complémentaires, contactez-nous :
www.maccimum.fr (communication globale, tous supports, tous médias).
——

Apture : insérer des contenus multimedia de qualité à votre blog

Inventé en 1965 par Ted Nelson, la généralisation des liens hypertextes a radicalement transformé la façon d’accéder à l’information, puisqu’il a rendu possible l’accès aléatoire à de multiples sources agrégées dans un contenu unique. Mal maîtrisée, cette profusion entraîne néanmoins une dispersion de l’attention du lecteur qui se perd alors dans une prolifération de liens. Le risque est encore plus important si ces liens conduisent à des sources riches, elles-mêmes très arborescentes. Potentiellement, cela peut se traduire par la perte d’une partie de votre lectorat.

Parfois qualifié d’application web 3.0 (une notion qui reste toutefois à définir), Apture révolutionne une nouvelle fois l’écriture en permettant de mettre en place des liens contextuels hypertextes Rich Media.

Qui utilisent Apture et qu’elles en sont les différentes utilisations possibles ? Nous vous conseillons la visite du Showcase d’Apture dont voici le texte de présentation :

“Some of the most engaging and influential sites on the web have enabled Apture, from large news outlets like The New York Times. With Apture, multimedia can be integrated in as many different ways as there are ideas, and we hope you’ll enjoy this peek into a few of the many sites that are using Apture”.

Le principe d’Apture est simple : afficher une boite de dialogue associée à un mot pour proposer des contenus pertinents, à la fois riches et facilement assimilables, sans pour autant ensevelir le lecteur sous une montagne de textes et surtout sans l’envoyer sur un site tiers, ce qui signifierait éventuellement le perdre. Comme le souligne Alain Joannes, dans son article Apture révolutionne l’écriture avec des hyperliens en rich media , « avec Apture, le danger de dispersion de l’attention est considérablement atténué. La fenêtre qui s’ouvre n’est pas une digression aussi perturbante que la perdition dans une arborescence infinie. Le lecteur ne perd pas le fil. » En d’autres termes, il accède à de nombreux contenus sans jamais quitter la page Web où il est. Il est captif dans l’environnement pourtant ouvert de l’internet. Un tour de force étonnant.

Selon Philippe Gammaire, Apture “limite considérablement l’effet labyrinthe induit par les liens hypertextes et par conséquent améliore le confort de lecture, notamment pour les appareils mobiles”.

Ajouté à cela, un rendu du plus bel effet, et une ergonomie intuitive et bien pensée.

Enfin, signalons le fait qu’Apture permet l’attibution de droits d’éditions à plusieurs éditeurs, qui peuvent intervenir sur le même contenu pour l’enrichir (pour éditer, il est nécessaire d’être loggué au site de l’éditeur). Apture peut donc tranformer n’importe quel site internet en vrai site collaboratif façon Wiki, soit en restraignant les autorisations à quelques personnes choisies, ou en contraire, en l’ouvrant à tous, sans distinction.

Une couche d’informations supplémentaires rapidement accessibles

Apture est à ce jour la seule solution capable d’embarquer autant de contenus à valeur ajoutée dans le corps d’une page Web. Vous pouvez ajouter des liens contextuels vers les services suivants :

• contenu de référence (Twitter, Wikipédia, CrunchBase, IMDB, Amazon…)
• vidéo (YouTube, Vimeo, Metacafe, Veoh…)
• images (Flickr, Wikipédia, Yahoo image search, et aussi les vôtres)
• audio (imeem)
• articles de presse (Washington Post, BBC…)
• cartes (Google Map et MyMap)
• documents PDF (via Scribd) ou PowerPoint.

Si les ressources disponibles par syndication automatique dans le hub d’Apture sont encore limitées en français, cette lacune peut être comblée par la sélection manuelle d’Urls pointants vers les pages Web de votre choix ou vers des contenus vidéos, audios, photos et autres documents.

Installation et fonctionnement

Il faut tout d’abord créer un compte sur le site Apture et y inscrire son ou ses blog(s). C’est gratuit. Un script est attribué à chaque site ou blog. Pour implémenter cette ligne de code, un tutoriel propose une procédure généraliste ainsi que des méthodes adaptées aux principaux éditeurs de blogs.

Un plugin existe pour les principales plateformes de blogging : WordPress, Blogger/Blogspot, TypePad, Ning, Tumblr, Druppal et Movable Type.

Pour les utilisateurs de WordPress, Apture vous propose de télécharger un plugin sous forme d’un fichier PHP. Dans ce fichier (apture.php) se trouve votre numéro Apture (token). Le plugin intégrer automatiquement le code javascript à vos pages si votre thème fait appel à wp_footer().

Dès lors qu’Apture est intallé, on peut enrichir le contenu d’un billet au sein d’une même bulle. Pour cela, il suffit d’invoquer le widget (grâce à un raccourci clavier), puis de sélectionner un ou plusieurs mots de la page Web. Immédiatement, un second widget s’affiche qui effectue des recherches de contenu relatif sur Wikipedia, Yahoo images, CrunchBase, Youtube, Twitter…

La simplicité d’utilisation d’Apture en images.
——
Pour tous renseignements complémentaires, contactez-nous :
www.maccimum.fr (communication globale, tous supports, tous médias).
——

Copyright 2009 Maccilabo – Société Maccimum. All rights reserved

• Contactez-nous
• Nos Services
• Mentions Légales