css 4 design » Template

Création de site WordPress de A à Z — B comme Basics

Bruno Bichet — Fri, 06 May 2011 14:28:21 +0000

Je comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème minimaliste dès le début serait une meilleure idée. J’ai donc plongé plus profondément dans le Codex pour voir si l’eau était bonne. J’en ai profité pour organiser concrètement les éléments abordés dans WordPress de A à Z — A comme Allons-y ! : installer la dernière version de WordPress en français et HTML5 Boilerplate, puis ajouter les fonctionnalités du moteur de WordPress à l’aide du Codex. A l’issue de cet article, vous aurez donc un Blank Theme qui servira de support pour la suite des articles de cette série et de base pour de nouveaux thèmes WordPress. Dans cet article, j’ai choisi de détailler (parfois brièvement) l’ensemble des éléments composant Basics. D’autres articles viendront bientôt pour justifier certains choix ou expliciter certaines notions ; il reste encore pas mal de lettres dans l’alphabet après la lettre «B» ;-)

Articles déjà publiés dans la série WordPress de A à Z :

Logo « WordPress je thème »
WordPress de A à Z… avec le Codex
A comme Allons-y !
Vous lisez : B comme Basics
Prochain article : C comme Commentaires

→ WordPress Basics.

Note : Ce lien pointera toujours vers la dernière version du thème Basics qui sera en évolution quasi permanente pour refléter les progrès de la science, mais aussi et surtout pour la correction des bugs qui ne manquent jamais de survenir aux endroits où on les attend le moins. Par conséquent, il y aura des différences entre les exemples de code présentés ici et le thème Basics. Nhésitez pas à me faire parvenir vos suggestions pour améliorer Basics dans les commentaires ou à l’adresse bruno.bichet@gmail.com

Basics, un thème WordPress basique

Basics est composé d’un fichier index.php et d’une feuille de style CSS. Pour des raisons de modularité qui deviendront évidentes à mesure que la série WordPress de A à Z s’étoffera – un thème un peu complexe nécessite souvent plusieurs fichiers –, index.php est scindé en plusieurs fichiers : header.php, sidebar.php, footer.php eux-même éventuellement constitués de plusieurs parties.

Ce système de construction gigogne permettra de créer facilement un nouveau thème. Il suffira de dupliquer et de renommer index.php en single.php, category.php ou tag.php, etc., pour modifier l’affichage des différents contextes d’affichage.

Comme on a souvent besoin d’afficher des boucles personnalisées sur la page d’accueil, j’ai également inclus un fichier home.php qui sera utilisé par WordPress pour afficher la page d’accueil. Ce fichier contient un exemple de boucle que vous pourrez adapter. Si vous n’en n’avez pas besoin, faites glisser home.php dans le dossier /utils et n’en parlons plus.

Basics contient également une page 404.php pour permettre aux visiteurs de trouver ce qu’ils sont venu chercher, lorsque vos pages sont «aux fraises».

Basics à la maison

La meilleure façon d’apprendre, c’est de faire soi-même. C’est pourquoi, je vous invite à télécharger et à installer les éléments suivants :

Version française de la dernière version de WordPress,
HTML5 Boilerplate,
Le serveur Apache, PHP & MySQL WampServer.

Le serveur web s’installe comme n’importe quel logiciel. L’important est de repérer son emplacement et de naviguer dans l’arborescence pour trouver le dossier /www dans lequel vous y installerez le dossier wordpress une fois «dézippé». Il suffira ensuite de copier le contenu de HTML5 Boilerplate dans le dossier themes de wordpress. Et voilà !

Pssst, n’oubliez pas d’emporter le Codex avec vous ;-)

HTML5 Boilerplate

J’ai opté pour la version sans commentaire, mais rien ne vous empêche d’utiliser la version complète ou personnalisée.

Pour commencer, je vais alimenter les fichiers header.php et footer.php avec H5BP. Je m’occuperai ensuite du fichier index.php proprement dit. Pour connaitre les explications concernant le contenu de H5BP, je vous conseille la lecture de la documentation officielle.

functions.php

Pour éviter certaines redondances que l’on retrouve souvent dans les thèmes, j’ai regroupé certaines portions de code dans le fichier functions.php. Certains préfèrent inclure ces bouts de code dans des fichiers à la racine du thème ou dans un dossier /inc/.

C’est un choix tout aussi judicieux, mais je voulais éviter : 1) d’augmenter le nombre de fichiers déjà conséquent pour un thème «basique», et 2) permettre de redéfinir ces fonctions dans le fichier functions.php d’un thème enfant (Child Theme) grâce à la vérification suivante :

Si la fonction basics_title() n’a pas été redéfinie dans le fichier functions.php de votre thème enfant, c’est la fonction basics_title() du thème Basics qui sera prise en compte.

La mise en place d’un thème enfant n’est pas obligatoire pour créer votre thème avec Basics. Il est tout à fait possible de modifier directement functions.php de Basics et dupliquer les fichiers index.php ou home.php pour adapter les Templates à votre projet de site web.

phpDocumentor

Au début de chaque fichier, je précise quelques informations avec la syntaxe PHPDoc qui permet de générer une documentation d’après des commentaires formatés.


* @version 0.1
* @since Version 0.1
* @todo Check the markup http://validator.w3.org/
*/
?>

→ Ressources :

Internationalisation

Basics est prêt à chanter l’Internationale dans la langue de votre choix ! Toutes les chaines de caractères sont situées dans les fonctions prévues à cet effet :

__( 'Ma chaine', 'basics' ) — Retourne le résultat « Ma chaine » dans une fonction
_e( 'Ma chaine', 'basics' ) — Affiche « Ma chaine » (équivalent à echo __( 'Ma chaine', 'basics' )
etc.

J’ai choisi de conserver l’anglais comme langue de départ afin d’ajouter facilement des portions de code en provenance du Codex dont les exemples sont dans cette langue.

→ Ressources :

Codex – http://codex.wordpress.org/I18n_for_WordPress_Developers

header.php

Doctype HTML5 et balise

Le Doctype précise le type du document. Il permet principalement au navigateur de savoir ce qu’il doit afficher. En effet, il n’existe pas qu’une seule version de HTML. On trouve : HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict.

Le Doctype permet de proposer les pages au validateur, tout en permettant de faire basculer Internet Explorer dans le model de boite standard, ce qui est bien pratique.

→ Ressources :

http://openweb.eu.org/articles/toi_comprendre_moi

Classes pour cibler IE9

j’ai effectué quelques changements par rapport à H5BP :

Ajout des classes `.ie` pour cibler d’un seul coup toutes les versions d’Internet Explorer «au cas où»,
Ajout de la classe `.ie9` : je ne partage pas l’optimisme de Paul Irish quand à la capacité d’IE9 de se comporter comme Firefox, Google Chrome ou Opera… J’espère toutefois que Microsoft rendra une copie correcte avec IE 10 ;)

Attributs de langue

J’ai remplacé la propriété en et l’attribut lang par la fonction pour obtenir les informations concernant la langue et le sens de lecture du site.

→ Ressources :

Admin — Le paramètre de langue est spécifié dans le fichier wp-config.php à la ligne `define(‘WPLANG’, ‘fr_FR’);`
Codex — Language attributes
W3C – http://www.w3.org/TR/html5/semantics.html#the-html-element-0

Cette balise regroupe un ensemble de meta-données sur votre document.

Ouverture de la balise head.

→ Ressources :

http://www.w3.org/TR/html5/semantics.html#the-head-element-0

Jeu de caractère (Charset)

Encodage des caractères utilisés dans le document.

→ Ressources :

Admin – Réglages -> Lecture (Options de lecture) ou directement à l’adresse [votre_site]/wp-admin/options-reading.php.
Codex – http://codex.wordpress.org/Function_Reference/bloginfo
W3C – http://www.w3.org/TR/html5/semantics.html#attr-meta-charset

X-UA-Compatible

Force l’utilisation du moteur de rendu le plus récent disponible dans les navigateurs Internet Explorer à partir de la version 8.

→ Ressources :

http://msdn.microsoft.com/fr-fr/ie/cc405106

</h4> <p><pre><title><?php echo basics_title(); ?> Ce titre identifie le document. Afficher le nom du site seul n’est utile que sur la page d’accueil. Pour les pages d’articles il est préférable d’inclure également le titre du billet. C’est le but de la fonction `basics_title()` située dans le fichier functions.php.

→ Ressources :

Admin – Réglages -> Général (Options générales) ou directement à l’adresse [votre_site]/wp-admin/options-general.php.

W3C – http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Slogan ou description du blog. Comme pour le title vu au-dessus, il est préférable de moduler cette description selon le contexte dans une optique SEO (amélioration pour les moteurs de recherche). C’est le but de cette fonction située dans functions.php.

→ Ressources :

Admin – Réglages -> Général (Options générales) ou directement à l’adresse [votre_site]/wp-admin/options-general.php.

Affichage du prénom et du nom de l’administrateur du site. N’oubliez pas de renseigner ces élément dans les réglages de WordPress, sinon c’est votre pseudo qui s’affiche à la place.

→ Ressources :

Admin – Utilisateurs -> Votre profil (Options personnelles) ou directement à l’adresse [votre_site]/wp-admin/profile.php.
Codex – http://codex.wordpress.org/Function_Reference/the_author_meta
Using the_author_meta() to fill the meta name=”author” tag

Gestion de l’affichage par défaut sur les périphériques mobiles.

Favicons

Emplacement du favicon pour votre site.

Emplacement du favicon affiché sur les iPhones et certains terminaux Android.

Feuille de style principale

Feuille de style principale de votre site. Le paramètre stylesheet_url nous amène directement à la feuille de style du thème. Dans Basics, cette CSS ne contient que les éléments permettant d’identifier le thème ainsi que les règles imports pour importer les feuilles de style situées dans le dossier /css.

→ Ressources :

Codex – http://codex.wordpress.org/Function_Reference/bloginfo
CSS débutant

Librairie Javascript Modernizr

Modernizr est une bibliothèque Javascript qui permet, d’une part d’activer les nouvelles balises HTML5 dans Internet Explorer, et d’autre part de de cibler précisément les fonctionnalités CSS3 et HTML5 dans les feuilles de styles. Le paramètre template_directory nous amène directement dans le répertoire du thème.

WordPress propose plusieurs façons de pointer vers le dossier du thème pour permettre une meilleure gestion des thèmes enfants, notamment. J’aborderai cette question dans un autre article.

→ Ressources :

http://www.modernizr.com/

Microformat XFN

Ce microformat est utilisé par WordPress lorsqu’on utilise le type de contenu Liens. Il permet de représenter les relations humaines en utilisant les hyperliens. Par exemple, je pourrais indiquer que j’aime WordPress.org par la relation <a href="http://wordpress.org" rel="muse">

→ Ressources :

GMPG – http://gmpg.org/xfn/
http://microformats.org/wiki/xfn-fr

Commentaires imbriqués

Activation des commentaires imbriqués dans WordPress.

→ Ressources :

Admin – Réglages -> Discussion (Options de discussion) ou directement à l’adresse [votre_site]/wp-admin/options-discussion.php.
Codex – http://codex.wordpress.org/Function_Reference/get_option et http://codex.wordpress.org/Option_Reference

Pingback et trackback

URL pour permettre les pingbacks.

→ Ressources :

Admin – Réglages -> Discussion (Options de discussion) ou directement à l’adresse [votre_site]/wp-admin/options-discussion.php.
Codex – http://codex.wordpress.org/Function_Reference/get_bloginfo

Crochet wp_head

Crochet (Hook) pour permettre aux plugins WordPress d’ajouter des éléments dans la balise head.

→ Ressources du Codex :

Fermeture de la balise head

→ Ressources :

W3C – http://www.w3.org/TR/html5/semantics.html#the-head-element-0

Ouverture de la balise body

C’est le corps de la page qui contient l’ensemble du document. On met généralement à la suite une autre balise servant de container.

Toutefois, la balise body peut très bien servir de «container» global pour votre document. Dans ce cas, vous pouvez utiliser…

 role="document">

…et supprimer la balise div#page. N’oubliez pas de supprimer également la balise de fermeture correspondante </div>  dans le fichier footer.php !

Notez la possibilité d’ajouter une classe à la fonction body_class() dont le rôle est d’ajouter une foultitude de classes à la balise body en fonction du contexte. Cette fonctionnalité qui a fait son apparition avec WordPress 2.8 était déjà présente dans le thème Sandbox.

→ Ressources :

W3C – http://www.w3.org/TR/html5/sections.html#the-body-element-0

Balise HTML5


    
        
        
     
    
        
        
            
        
         'first' ) ); ?>

→ Ressources W3C :

Balise

Sans surprise, cette balise nav regroupe les éléments pour naviguer dans le site : lien d’échappement pour accéder directement au contenu et les éléments de menu situés dans l’emplacement nommé «primary» dans le fichier functions.php où j’ai déclaré mes zones de menus personnalisés.

Les classes CSS .visuallyhidden et .focusable issues de H5BP. Sur l’élément h1, .visuallyhidden sert à masquer proprement le titre au cas où il ne serait pas essentiel dans votre mise en forme, tout en le rendant accessible aux lecteurs d’écran. Idem pour le lien d’évitement ; quant à la classe .focusable, elle permet de donner le focus à l’élément en question quand on navigue au clavier au clavier, par exemple.

→ Ressources :

W3C – http://www.w3.org/TR/html5/sections.html#the-nav-element
Codex – http://codex.wordpress.org/Function_Reference/wp_nav_menu

Début de #content

Cet élément englobe le contenu principal et les barre latérale. La balise de fermeture correspondante </div>  est située au tout début du fichier footer.php.

L’intérêt de commencer l’ouverture de cette div dans l’en-tête et de la terminer dans le pied de page réside dans le fait que les Templates de certains plugins (Newsletter, Agenda, etc.) placent leur contenu directement entre le header et le footer.

index.php

Les fonctions get_header(), get_sidebar() et get_footer() permettent d’inclure respectivement les fichiers header.php, sidebar.php et footer.php. Si l’on indique un paramètre entre les parenthèses, comme par exemple get_header('home'), c’est le fichier header-home.php qui sera inséré automatiquement. Dans notre cas, il s’agit des barres latérales sidebar-one.php et sidebar-two.php.

→ Ressources du Codex :

La balise div#primary contient le contenu principal (les articles), tandis que les barres latérales sont chargées d’afficher des contenus annexes regroupés chacun dans une balise aside.

Conditional tag

Le marqueur conditionnel is_singular() permet de vérifier si l’on se trouve dans le contexte d’un article seul, d’une page ou d’un fichier attaché

→ Ressources :

Codex – http://codex.wordpress.org/Conditional_Tags

Navigation entre les articles

La fonction basics_content_nav() située dans functions.php permet d’afficher les éléments pour naviguer dans la succession des billets «suivants» et «précédents». Le paramètre nav-above ou nav-below sert à préciser l’identifiant de la balise nav, selon qu’elle est située au-dessus des billets ou au-dessous ; le paramètre menu indique la classe associée à cet élément de navigation.

→ Ressources :

Codex – http://codex.wordpress.org/Function_Reference/posts_nav_link

La boucle WordPress (The Loop)

L’élément principal de ce fichier est constitué par la boucle qui permettra d’afficher le contenu des articles en appelant le contenu approprié en fonction du format du billet.

Les différents type de boucle seront détaillées dans un prochain article.

→ Ressources :

Codex – http://codex.wordpress.org/The_Loop

Types de format de contenus

Les types de format pris en charge sont spécifier dans functions.php. Il s’agit de :

aside
chat
gallery
link
image
quote
status
video
audio

Ces types de format ont été popularisés par des plate-formes comme Tumblr ou Posterous qui permettent d’afficher différemment les contenus selon leur type. Le format aside a été popularisé par Matt Mullenweg qui l’utilisait pour donner des nouvelles brèves, sans titre, entre deux billets.

L’intérêt des Post Format réside dans le fait, qu’une fois paramétrés, ils permettent de diversifier la présentation des différents type de contenus que vous publiez sur votre site.

Le choix du type de contenu s’effectue depuis l’interface de rédaction des articles. Il s’agit d’une option à cocher parmi celles qui ont été définies dans votre thème dans functions.php.

Exemple d’activation de tous les types de format disponibles :

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

→ Ressources :

Codex – http://codex.wordpress.org/Post_Formats

get_template_part

Cette fonction ressemble beaucoup à ses petites soeurs get_header(), etc. il suffit de spécifier un ou deux paramètres pour que la magie s’opère :

get_template_part( 'content' ) — inclue automatiquement le fichier content.php situé à la racine de votre thème,
get_template_part( 'content', 'home' ) — idem pour content-home.php,
get_template_part( 'content', get_post_format() ) — idem pour content- suivi du type de format spécifié, tel que content-aside.php, content-gallery.php, etc.

Cette dernière option est donc très pratique, puisqu’elle va chercher, comme une grande, le fichier spécialement conçu pour votre format de billet.

→ Ressources :

Codex – http://codex.wordpress.org/Function_Reference/get_template_part

content.php

Le fichier content.php rassemble les éléments disponibles dans la boucle principale : le titre et le contenu de l’article, mais aussi les informations de date, d’auteur ainsi que les rubriques et les tags qui ont été associés à l’article lors de sa rédaction.

>
    
        
        post_type ) : ?>
        
            
        
        
    
    
    
        →', 'basics' ) ); ?>
    

    
    
        →', 'basics' ) ); ?>
         '' . __( 'Pages:', 'basics' ), 'after' => '' ) ); ?>

On commence par une balise article qui affiche, entre les balises header et footer, soit un extrait du billet si le visiteur effectue une recherche sur votre site, soit le billet (complet ou non, selon que vous avez utilisé la balise ou non).

Les informations liées au billet comme la date de publication, le nom de l’auteur, la catégorie, les tags, etc. sont affichées via les fonctions basics_posted_on() et basics_posted_in() dans functions.php.

Ce fichier content.php peut servir de base pour la création d’autres Templates, comme je l’ai fait pour content-news.php appelé via la fonctionget_template_part().

Barres latérales (Sidebar)

Basics est composé de deux sidebars appelés via get_sidebar( 'one' ) et get_sidebar( 'two' ). J’ai choisi deux fichiers séparés pour faciliter le passage d’une à deux colonnes selon le contexte.

Chaque barre latérale est composée de trois zones de widget : une zone centrale avec du contenu par défaut tant que l’on ne fait rien glisser dedans, une zone facultative au-dessus, et une autre au-dessous.

Toutes les zones de widgets sont déclarées à l’avance dans functions.php.

sidebar-one.php


    
        
            
        
 
    
    
    
         'second' ) ); ?>
        
            
            
                 'monthly' ) ); ?>

sidebar-two.php



    
        
    
 

    

         'third' ) ); ?>

searchform.php

La fonction get_search_form() est prévue pour afficher le formulaire intégré dans le core de WordPress, sauf si le fichier searchform.php est présent à la racine du thème.

footer.php

footer.php est constitué 1) de la fin du document visible et 2) des appels de scripts placés là pour optimiser le temps de chargement de la page, comme cela est conseillé par H5BP.

Fermeture de la balise #content et pied de page

     
    
    
        
            
        
 
    
     'fourth' ) ); ?>
    
        
            
                e('Contact the administrator '); ?>
            
        
 
    
    
        
            
        
 
    
    
         | ( 'Theme: %1$s by %2$s.', 'basics' ), 'Basics', 'WordPress je thème !' ); ?>

Appels des script et fin de la page web

Voici la fin du document HTML avec les liens vers les différentes bibliothèques dont vous pourriez avoir besoin. Mise à part le crochet wp_footer() qui permettra à vos plugins d’injecter du code dans cette zone, le reste suit la logique de H5BP.

home.php

Lorsqu’on réalise un site avec WordPress, on a souvent besoin d’afficher autre chose que la liste des derniers billets publiés en page d’accueil. C’est le rôle de ce fichier home.php qui contient deux boucles que vous pourrez personnaliser en modifiant les paramètres.

Merci au passage à @fabienthomas pour son aide. N’hésitez pas à le retrouver sur son Blog perso et pas forcément sérieux d’un travailleur du Web.



    
     'news',
            'posts_per_page' => 1,
            'paged' => $paged
        );
        $featured_query = new WP_Query( $args );
    ?>
    have_posts() ) : ?>
        
    
    have_posts() ) : $featured_query->the_post(); ?>
        
    
    
    
     'news',
            'posts_per_page' => 5,
            'offset' => 1,
            'paged' => $paged
        );
        $featured_query = new WP_Query( $args );
    ?>
    have_posts() ) : $featured_query->the_post(); ?>

La première boucle affiche le dernier article publié dans la rubrique News en utilisant le fichier conten-{post forma-}.php tandis que la deuxième affiche les cinq articles précédents de cette même rubrique en appelant le fichier content-news.php. J’en ai profité pour inclure une barre latérale spécifique à la page d’accueil.

Page 404

Il est toujours utile d’afficher un message personnalisé à vos visiteurs lorsqu’une page n’existe plus.

Cette page 404.php fait appel au fichier content-404.php pour aider le visiteur à trouver ce qu’il cherche. C’est par ailleurs un exemple de structure que vous pourriez utiliser pour d’autres modèles de pages.

Feuilles de style

Juste un mot sur l’organisation des CSS. J’ai divisisé le fichier style.css — inclu dans le package HTML5 Boilerplate — en trois parties pour faciliter les mises à jour.

reset.css
author.css
tools.css

Normalement, il n’y a pas besoin de toucher à reset.css ou tools.css : le fichier author.css est là pour accueillir votre prose.

La CSS style.css à la racine du thème précise uniquement les informations liées au thème pour WordPress et sert à importer les feuilles de style présentes dans le dossier /css.

Pour éviter que le nombre de requêtes HTTP liées à ces fichiers CSS ne grève les performances d’affichage de votre site, je vous conseille d’utiliser le script PHP Minify ou son équivalent disponible dans W3 Total Cache.

Dossier Utils

Ce dossier contient quelques éléments issus de H5BP comme robots.txt, humans.txt, .htaccess que vous pouvez utiliser dès à présent.

En bref

Ce thème Basics devrait permettre de partir sur de bonnes base lors de la conception d’un thème WordPress en plus de refléter les nouvelles fonctionnalités qui ont fait leur apparition depuis la version 3.0. Les Templates pour personnaliser les commentaires sont inclus dans Basics mais feront l’objet d’un tutoriel dans «C comme commentaire» ;-)

Articles sur le même sujet

WordPress de A à Z — A comme Allons-y ! (on s’organise)

Bruno Bichet — Tue, 12 Apr 2011 11:51:01 +0000

«A comme Allons-y !» est le premier billet d’une série d’articles sur la création d’un site internet avec WordPress que j’ai commencé avec Créer son site web avec WordPress de A à Z… avec le Codex. Il existe plusieurs approches pour mettre en place un site WordPress : modifier un thème existant ; ajouter les fonctions WP dans un gabarit HTML résultant de la découpe d’une maquette Photoshop ; ou créer les pages web directement dans le navigateur. Excepté pour le premier cas, on peut partir d’une feuille blanche, reprendre les éléments du projet précédent ou partir sur un thème minimaliste que l’on aura choisi avec soin.

Méthodes de conception : choisissez votre parfum

Il existe probablement autant de méthodes qu’il y a d’intégrateur WordPress. Voici un aperçu des principales techniques que j’ai eu l’occasion de rencontrer.

1. Modifier un thème WordPress

Partir d’un thème existant est une pratique qui semble assez répandue. La personnalisation d’un site réalisé de cette manière consiste le plus souvent à :

Trouver un thème qui se rapproche le plus des besoins.
Changer les couleurs du thème en ajoutant une feuille de style CSS après les autres, puis jouer sur la cascade pour «bypasser» les déclarations précédentes.
Repérer les identifiants des éléments qui serviront de réceptacle pour les images de fond que l’on aura créés ou piochées sur le web pour l’occasion.
Ne pas oublier de changer l’auteur du thème par son patronyme, bien entendu ^^

Si vous tenez absolument partir sur un thème WordPress existant, TwentyTen est votre ami ;-)

TwentyTen, le thème WordPress par défaut depuis la version 3

La première et dernière fois que j’ai utilisé cette méthode remonte à juin 2006 lors du lancement de ce blogzine. C’est dire tout le bien que je pense de cette méthode : les résultats sont rarement personnalisés. Ce genre de prestations est au web ce que la cuisine rapide est à la gastronomie : un mal parfois nécessaire… à éviter au maximum. Toutefois, cela permet de fournir rapidement un site web clés en main pour un client pressé ou avec un tout petit budget.

→ Si vous êtes souvent dans cette configuration, je vous invite à lire la partie du Codex intitulée Using Themes.

2. Intégrer WordPress dans un gabarit HTML

Cette méthode suppose que vous avez créé (ou que l’on vous a fourni) un ou plusieurs gabarits Photoshop. Après la découpe du fichier image, vous avez réalisé l’intégration HTML & CSS. Vous obtenez généralement une page d’accueil et une page pour afficher le billet seul. A partir de ces deux gabarits, vous déclinerez les autres contextes d’affichage.

Cette méthode transforme un simple intégrateur web en intégrateur WordPress et lui ouvre un hublot sur la partie développement PHP. J’ai coutume de dire que WordPress, c’est le pote développeur toujours prêt à donner un coup de main. Bon, j’exagère, il est souvent utile d’avoir de vrais potes développeurs quand même ;-)

Une fois finalisé, ce template Illustrator devrait faire un bon exemple d’intégration WordPress ! cf. Super Formateur HTML & CSS bientôt dans la place ?

Ex. de mise en scène du logo de ma prochaine activité de formateur web

→ Nous avons là, une méthode de travail éprouvée qui suit le flux de production habituel ce qui présente un intérêt certain en terme de contrôle qualité.

3. Créer un site WordPress dans le navigateur

Cette méthode fait l’impasse sur la partie maquette Photoshop comme préalable à l’intégration. Ce qui ne signifie pas que je délaisse mes outils de dessins préférés. Je les utilise pendant ou après la phase de mise en place de la structure du site. Cette méthode est un peu plus brouillonne que la précédente, mais permet de tester des nouveaux concepts, ce qu’il est déconseillé de faire lorsqu’on travaille pour un client. Je l’utilise plutôt pour mes projets perso.

L’article Conception dans le navigateur avec HTML5 & CSS3 explique comment utiliser HTML5 et CSS3 pour faire du web design dans Firefox ou Google Chrome !

Une esquisse rapide et hop ! on peut faire du webdesign dans le navigateur

Commençons à travailler

Maintenant que nous avons brièvement évoqué les différents moyens dont nous disposons pour aborder la création d’un site avec WordPress, nous pouvons commencer à mettre les mains dans le cambouis

WordPress Boilerplate

Jusqu’à il y a peu, j’avais l’habitude de partir d’une ossature, issue des derniers projets. Puis, je me suis laissé tenté par HTML5 Boilerplate comme point de départ pour aboutir à un fichier index.php en HTML5 comprenant l’ensemble d’un blog de base : en-tête, contenu principal, barre latérale, pied de page, etc. avec quelques boucles de base, deux ou trois zones de menus et autant de zone de widgets.

Thème Toolbox

Je suis ensuite tombé sur le thème Toolbox. C’est probablement un des meilleurs thèmes minimalistes pour WordPress. Il m’a séduit par sa ressemblance conceptuelle avec le thème Sandbox. Le fait qu’il soit créé par Automattic y est peut-être pour quelque chose. C’est en tout cas un très bon point de départ si vous n’aimez pas être dérangé par les fioritures inutiles qui détournent votre attention : il vaut mieux se concentrer sur son travail que sur celui des autres ;)

Organiser son plan de travail

Une fois que j’ai obtenu le bon mix entre Toolbox et HTML5 boilerplate (de nombreux thèmes WordPress en HTML5 sont basés sur HTML5 Boilerplate et/ou sur Twenty Ten) et que l’arborescence des différents dossiers est opérationnelle, je crée un dossier «Grenier» dans lequel je déplace tous les fichiers du thème à l’exception de index.php, de style.css et de functions.php pour maitriser les différents contextes d’affichage.

Ainsi, je peux adapter index.php à mon projet puis le dupliquer en single.php en allant piocher dans le «Grenier» — le cas échéant — les fonctions du core de WordPress dont j’ai besoin à chaque fois. A moduler évidemment selon le nombre et la complexité des modifications : il peut être judicieux de n’ajouter que quelques balises aux fichiers d’origines du thème plutôt que dupliquer le fichier index.php !

→ Cette méthode permet de se concentrer sur l’essentiel et d’éviter de surcharger le thème avec des fichiers et des fonctions inutiles. Elle offre un bon compromis entre le fait de ne pas réinventer la roue à chaque projet tout en étant très flexible.

Note : j’ai pris l’habitude d’utiliser le minimum de fichier pour gérer les différents contextes d’affichage. Toutefois, la hiérarchie des Templates nous suggère que l’existence de tous les contextes d’affichage pourrait avoir un impact sur les performances, vu que WordPress vérifie d’abord toute la chaine des fichiers possibles avant de se rabattre sur index.php. A ce niveau, les gains ou les pertes de performances sont-elles significatives ?

Organiser les feuilles de style

Comme je conserve l’arborescence de HTML5 Boilerplate pour faciliter les mises à jour, j’ai deux fichiers style.css : celui du thème Toolbox dans /montheme/style.css et celui de H5BP dans /montheme/css/style.css. Je déplace donc une partie du deuxième dans le premier dans lesque je place les styles « Auteur » et les déclarations qui suivent pour respecter l’ordre des éléments préconisés par le Template H5BP.

Les autres feuille de style CSS dont j’ai besoin restent dans /montheme/css/ et sont importées dans montheme/style.css. La question des performances due aux requêtes HTTP des multiples fichiers est réglé en fin du projet, généralement via le script PHP Minify ou son équivalent disponible dans W3 Total Cache. Si vous n’aimez ni l’un ni l’autre, vous avez toujours la possibilité de faire des copiés-collés de vos fichiers CSS dans le fichier style.css principal, c’est toujours marrant ;-)

En bref

Pas beaucoup de Codex dans cette première partie qui sert surtout à planter le décors. Le Codex viendra en son temps. En attendant, nous somme prêts à intégrer notre maquette dans une environnement stable et évolutif à la fois : de projets en projets, il suffira de vérifier HTML5 Boilerplate ou Toolbox ont été mis à jour pour bénéficier d’un environnement à la pointe des dernières technologies et des bonnes pratique de développement, autant en ce qui concerne le web en général que WordPress en particulier. En effet, un thème comme Toolbox est susceptible de refléter les avancés de WordPress d’une manière générale

Articles sur le même sujet

Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

Bruno Bichet — Fri, 01 Apr 2011 15:30:57 +0000

Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un framework CSS, en mettant en lumière leurs avantages et inconvénients respectifs. Tout naturellement, j’ai voulu les mélanger pour ne garder que le meilleur. Pour faire bonne mesure, j’ai ajouté The Simpler Grid découvert récemment que j’ai ajouté à ma réflexion pour créer un espèce de The Blue «940» Grid Simpler. J’envisage d’utiliser ce système de grille simple et efficace en complément du concentré de bonnes pratiques HTML5 Boilerplate.

J’importe le fichier 940.css dans H5BP lors de la mise en place du zoning des pages web. Lorsque cette étape est validée, je fais le ménage dans le code HTML en supprimant les classes inhérentes au système de grille pour mettre les déclarations appropriées dans la feuille de style. En effet, il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. CSS avancées — Vers HTML5 et CSS3, page 72. ⁽¹⁾.

C’est ainsi que :

devient :


#logo {
    position: relative;
    float: left;
    width: 220px;
    clear: left;
}

Cela dit, si le site comporte un grand nombre de gabarits différents et/ou si ces gabarits sont susceptibles de changer dynamiquement selon le contexte, il peut être judicieux de garder les classes de la grille dans le code HTML pour moduler le colonage en jouant uniquement sur les classes .span-x. En outre, il est facile de cibler le premier élément enfant en CSS ou en Javascript pour ajouter une classe .first. A cet égard, la prise en charge plus large de la pseudo-classe :first-child (à partir de IE7) par rapport à :last-child (à partir de IE9) milite en faveur de l’introduction de The Simpler Grid dans l’affaire (cf. Compatibilité CSS et Internet Explorer).

Système de grille sur mesure

Suite au comparatif 960.gs vs. Blueprint, j’ai décidé de fusionner les deux frameworks en faisait le minimum de modifications pour obtenir :

Le système de marge unique à droite proposé par Blueprint pour créer les gouttières entre les colonnes. L’ajout de la class `.last` est déjà un tue-l’amour de l’intégration, alors ne parlons pas des classes `.alpha` et `.omega` de 960 Grid System.
Le placement des colonnes dans la page indépendamment de leur position dans le code proposé par 960 Grid System avec des classes `.push` et `.pull` plus concises grâce à la déclaration `position: relative;` sur chaque colonne.
En chemin, j’ai été également tenté par The Simpler CSS Grid qui reprend le meilleur de 960 Grid System et de Blueprint CSS tout en diminuant légèrement le nombre de déclarations pour parvenir au même résultat.

Mis en place par Nick La de Webdesigner Wall (@nickla), The Grid Simpler revisite les frameworks CSS Blueprint et 960.gs

The Grid Simpler : une grille simple et souple

Contrairement à Blueprint, The Simpler Grid place la gouttière à gauche des colonnes. La classe .last est remplacée par .first, ce qui oblige par ailleurs à modifier les classes .border et .colborder dans la feuille de style pour créer des bordures à gauche des colonnes et non plus à droite. Ceci peut éventuellement être un problème (ou un avantage) selon votre maquette et la hauteur respective des zones situées de part et d’autre de la bordure. Selon le cas, la bordure peut suivre la hauteur de votre sidebar ou de votre zone de contenu.

Dans le code HTML, il faut aussi supprimer les classes .last et ajouter les classes .first en conséquence, sans oublier de modifier l’emplacement des classes .border et .colborder.

J’ai encore un peu de mal à me représenter cette gouttière à gauche des colonnes plutôt qu’à droite, certainement en raison des habitudes liées au sens de lecture mais je m’accroche ;)

The Blue «940» Grid Simpler

Après quelques tentatives aussi burlesques qu’inutiles pour proposer ma propre nomenclature pour le nom des différentes classes, j’ai conservé les intitulés de Blueprint qui permettent de profiter des générateurs de grilles disponibles sur le marché, comme l’excellente application Air Boks pour modifier plus rapidement le pas de la grille (il suffira de copier-coller les déclaration contenant des largeurs).

En ce qui concerne la grille elle-même, elle est composée de 24 colonnes de 20 pixels chacune séparées par une gouttière de 20 pixels en adaptant légèrement la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or. Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixel en utilisant : font-size: 13px; line-height: 1.539.

Elément de base pour afficher une grille en background

Tout cela nous donne une largeur de 940 pixels. Il s’agit de la largeur utile disponible dans 960 Grid System une fois que l’on a retranché les marges de 10 pixels à droite et à gauche. Pour retrouver ces marges — pour mettre une image en background, un dégradé CSS3 ou un simple aplat de couleur, par exemple –, il suffit d’indiquer une largeur de 960 pixels sur la balise body qui servira ainsi de container, and the cat’s in the bag!

Astuce : l’excellent http://griddle.it permet de créer l’image de votre grille personnalisée à la volée en ajoutant la largeur, le nombre de colonnes et la largeur de la gouttière à la fin de l’url comme http://griddle.it/940-24-20?vertical=20 ou http://griddle.it/940-12-20?vertical=20 par exemple.

Pour tester The Blue «940» Grid Simpler, je me suis basé sur les exemples de pages et de grilles disponibles dans les démonstrations de Blueprint CSS en adaptant le code source en conséquence.

→ The Blue «940» Grid Simpler.
→ La démonstration de la grille de Blueprint à comparer avec l’originale.
→ La démonstration de l’échantillon de page à comparer avec l’originale.
→ Les avantages apportés par The Simpler Grid.
→ Frameworks CSS — Blueprint vs 960 Grid System pour plus d’information concernant les éléments ajoutés ou retranchés dans The Blue «940» Grid Simpler par rapport aux frameworks utilisés.
→ Tous les articles concernant les grilles de mise en page web et les frameworks CSS sur ce blog.

Clearfix ?

Si vous n’utilisez pas HTML5 Boilerplate et si vous avez besoin d’un clearfix (la classe .first peut ne pas suffire), ajoutez-donc quelques lignes à la fin de votre feuille de style principale et la classe clearfix sur les boites contenant des éléments span pour rétablir le flux :

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

(1) Petit clin-d’œil au dernier livre de Raphaël Goetter que je remercie au passage pour la citation en attendant une fiche de lecture à venir concernant cet excellent ouvrage que je vous recommande d’acheter avant que les stocks soient épuisés !

Articles sur le même sujet

Créer son site web avec WordPress de A à Z… avec le Codex

Bruno Bichet — Fri, 18 Mar 2011 13:49:25 +0000

La saga Créer son site web avec WordPress de A à Z… avec le Codex — et quelques ressources supplémentaires, ne boudons pas notre plaisir –, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z’ai fini !». Cet article est un prologue, un galop d’essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d’un site (ou d’un blog, soyons fou !) avec WordPress, il m’arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C’est une véritable mine d’information qu’il est profitable de consulter en première intention avant d’aller voir ailleurs si le code est plus vert. A ce propos, de nombreuses ressources ne font que reprendre le Codex avec plus ou moins de bonheur, alors autant puiser la connaissance directement à la source.

Le bonheur est dans le Codex ?

Les exemples de codes disponibles dans le Codex répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les forums de WordPress pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions ;-)

Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une version française, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J’imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de ~~Richard Stallman~~ William Shakespeare pour se débrouiller ;-)

N’hésitez pas à vous rendre sur WordPress-fr, la communauté francophone du CMS WordPress. Ne ratez pas le blog qui présente les dernières actualités autour de WordPress et faites le tour de la planète WordPress avec une sélection des articles publiés par des blogueurs amoureux de WordPress.

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

Faire un site avec WordPress revient à faire un thème WordPress. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : index.php et style.css.

→ Using Themes explique rapidement ce qu’est un thème WordPress.

style.css

Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d’administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de recherche de thème en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :

Post Thumbnails (vignettes miniatures)
Navigation Menus (menus de navigation)
Widgets
Post Formats (format de billet)
Custom Backgrounds (fonds de page personnalisés)
Custom Headers (Image d’en-tête personnalisée)
Editor Style (style pour l’édition des billets)
Automatic Feed Links

Voici le code permettant à votre CSS style.css d’être reconnue :

/*
Theme Name: WTF
Theme URI: http://css4design.com/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: http://css4design.com/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/

En dehors de l’administration du site pour le choix du thème, il est possible de récupérer ces informations d’en-tête de fichiers. Pour afficher le nom de l’intégrateur et son site web, on peut utiliser la fonction get_theme_data() :

index.php

Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d’afficher les contenus. Ce seul fichier peut gérer tout les contextes d’affichage (archives, recherche, page d’erreur, etc.). Dans la terminologie de WordPress, ces appels de fonctions s’appellent des Template tags, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.

Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction bloginfo() :

Comprendre la hiérarchie des templates

Si le fichier index.php vu plus haut peut afficher tous les contextes d’affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de index.php, c’est la même chose pour tag.php, search.php, category.php, etc.

Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.

La hiérarchie des templates dans WordPress. Cliquez pour agrandir l'image.

A Chaque fichier PHP correspond une fonction permettant de tester si l’on se trouve dans un contexte d’affichage ou non. Par exemple, en utilisant uniquement le fichier index.php, on peut mettre un marquage HTML différent pour le contexte des catégories avec is_category() ; des pages avec is_page(), dans une page affichant l’article complet avec is_single(), etc.

→ Lire la page consacrée aux tag conditionnels.

The Loop (1)

Le coeur de WordPress est consitué par la boucle (The Loop). Il s’agit d’un ensemble de fonction qui collecte les variables nécessaires à l’affichage des informations comme le titre de l’article, la date de publication, l’auteur, le contenu du billet lui-même et tout un tas d’autres choses dont l’énumération serait bien fastidieuse.

Exemple minimal de boucle :

→ Lire The Loop.

(1) Les titres auxquels vous avez échappé jusque là : Danse avec les loops ; She got the loop, Loop, y es tu ? T’en loop pas une… ;-)

Les marqueurs de modèle (Template Tags)

Il s’agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d’appeller <?php the_title(); ?> pour afficher le titre du billet. De nombreux marqueurs comme the_title() doivent être utilisés à l’intérieur de la boucle tandis que d’autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme get_sidebar() si le coeur vous en dit.

→ Lire Template Tags.

WordPress & Webdesign

J’en profite également pour attirer votre attention sur mon petit blog WordPress & Webdesign (WP 4 Design) où vous trouverez des nouvelles de WordPress sur le même principe que Javascript et Webdesign (JS 4 Design) : des articles brefs mais courts.

Voici en avant-première une ébauche de logo pour l’en-tête de WP 4 Design. N’hésitez pas à me dire ce que vous en pensez. OK, c’est un peu plus qu’une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.

Ebauche de logo pour WordPress & Webdesign

Comme d’habitude, j’ai commencé par le commencement, c’est-à-dire le contenu avant de réfléchir à son organisation. En attendant d’avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j’ai installé Toolbox. C’est un thème minimaliste HTML5 créé par Auttomatic croisé avec HTML5 boilerplate.

Articles sur le même sujet

Quel tarif pour un thème WordPress ?

Bruno Bichet — Thu, 24 Jun 2010 12:36:25 +0000

C’est une question récurrente : mais combien coûte un thème WordPress ? A cette question simple, je voudrais apporter quelques éléments de réflexion. J’ai la conviction qu’une réponse toute faite ne peut être juste. Par ailleurs, je trouve qu’il règne une certaine hypocrisie sur la formation des prix dans le Webdesign. Il semble normal — lorsqu’on achète une voiture ou une machine à laver — de donner des indices sur le budget que l’on est prêt à consacrer. Dans le Web Design (et sans doute dans les prestations de services en général), la question du budget semble taboue. J’ai même parfois l’impression que les clients potentiels ne se posent pas la question, comme si l’on vendait du vent ; pourtant, livrer un site Web correspondant aux besoins du client n’est pas une mince affaire et demande beaucoup de travail, y compris en utilisant un CMS comme WordPress (mais c’est valable aussi pour Drupal, Pluxml ou NekoCMS).

5 étapes pour concevoir un thème WordPress

La création d’un thème pour le CMS WordPress se décompose idéalement en cinq étapes :

Recueil des besoins — Réception d’un email expliquant le contexte de la demande ou document plus complexe en plusieurs partie (cahier des charges ?).
Récapitulatif des besoins — Envoi d’un email précisant ce qui sera effectivement vendu, en tenant compte du périmètre des fonctionnalités retenues (document à faire valider avant d’attaquer le point n°3).
Conception de la charte graphique — Il s’agit de formaliser graphiquement les besoins du client (à cette étape, il a versé 30% de la commande) en présentant une ou plusieurs pistes graphiques selon ce qui aura été défini à l’étape précédente. Notez que le nombre de proposition est souvent lié avec l’importance du budget alloué (document à faire valider avant d’attaquer le point n°4).
Intégration Web (HTML, CSS & jQuery) — Lorsque la charte graphique est acceptée et que les BAT sont OK, il est temps de transmuter le design réalisé sous Photoshop dans un format lisible par les navigateurs.
Mise en place des fonctions WordPress — Affichage des billets et autres éléments constitutifs du blog ou du site Web (ne soyons pas sectaire).

A cela, il faut ajouter les allers-retours pour les modifications (corrections, changements, etc.) qui sont chronophages… Vous l’aurez compris : la mise en place d’un thème WordPress ne diffère en rien de la mise en place d’un site Web dynamique ! La seule différence, c’est le point n°5 qui permet de faire l’économie de la partie PHP/MySQL : les équipes de WordPress ont déjà fait tout le travail de développement.

L’intérêt d’utiliser WordPress pour son site Web ou son blog, c’est de pouvoir profiter de l’étendue des fonctionnalités proposées par ce CMS, sans compter la qualité du Back Office accessible aux utilisateurs les moins avertis. On peut dire que WordPress est l’ami développeur PHP/MySQL qui travaille gratuitement, ou presque.

Toutefois, et sans vouloir relancer la polémique pour savoir si l’on peut parler de développement WordPress, il faut savoir que l’API de WordPress ne vient pas s’intégrer toute seule dans la maquette. Il faut un minimum de connaissance en développement Web (PHP, MySQL) pour mettre en place un thème WordPress un peu complexe. Et il est normal que le tarif en tienne compte.

Un thème, des Templates ?

J’allais oublier. Maintenant que nous avons en tête toutes les étapes nécessaires, il faut encore prendre en compte le fait qu’un thème WordPress est composé d’un nombre de Templates variable selon les besoins exprimés à l’étape n°1 et retenus à l’étape n°2.

Un thème WordPress peut se composer d’un seul modèle de page (index.php) pour accueillir l’ensemble des contextes d’affichage possibles (catégories, tags, recherche, articles seul, images, etc.). Le thème WordPress par défaut (Twenty Ten) comporte plus de 10 Templates. Le tarif tiendra évidemment compte à la fois du nombre de Templates et des différences qu’ils présentent entre eux.

Et les plugins ?

Qui dit WordPress, dit Plugins. Il est rare d’installer WordPress sans passer par le menu Extensions. Celles-ci peuvent nécessiter des réglages de configuration plus ou moins complexes. Certaines nécessitent de mettre les mains dans les Templates et les fichiers CSS pour adapter le code HTML produit en sortie à votre charte graphique toute neuve.

Combien ça coooûûûte !

cf. point n°1 ;)

Articles sur le même sujet

WordPress — Menus «funky» avec wp_list_bookmarks()

Bruno Bichet — Wed, 24 Feb 2010 18:56:47 +0000

WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog.

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.


    
        &after='); ?>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}

En fonction de la grille de mise en page que j’ai mise en place sur ce blog, j’ai opté pour l’affichage de 8 liens occupant chacun 2 colonnes sur les 16 disponibles. Si vous voulez disposer d’un deuxième menu comme celui que j’ai ajouté dans mon pied de page, il suffit de dupliquer la fonction wp_list_bookmarks, de changer l’id de la catégorie des liens et de remplacer #featured-posts par .featured-posts and the cat’s in the bag!

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui, toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de WordPress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur WordPress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !

Articles sur le même sujet

Pluxml — un mini CMS sans base de données

Bruno Bichet — Sat, 02 Jan 2010 10:51:54 +0000

Après 3 ans d’existence, Pluxml vient de passer en version stable. J’ai eu l’occasion de l’utiliser à ses débuts sur un projet et j’en avait été satisfait. Vous y trouverez l’essentiel : gestion des catégories, pagination, flux de syndication RSS et Atom, gestion des commentaires (version blog), gestion des images et documents liés. Pluxml a la particularité d’utiliser des fichiers XML pour le stockage des données. Son point fort est la simplicité d’installation et la légèreté.

Un CMS léger et efficace

Pour l’installer, un identifiant et un mot de passe suffisent. Quant à l’empreinte sur le serveur, elle est très légère : après décompression, l’ensemble des fichiers occupe 350 Ko. Pour ce poids vous aurez quand même droit aux thèmes defaut et defaut.mobile situés dans le répertoire themes dont la composition des fichiers vous semblera familière si vous utilisez WordPress. Le système de templates est très clair et le thème par défaut est un bon départ (valide XHTML 1.0 Strict) pour vos créations personnelles.

Un écosystème complet

Ceux qui utilisent un CMS au quotidien le savent bien : rien ne remplace une forte communauté pour avoir des ressources et une documentation mises à jour. C’est le cas avec Pluxml :

Wiki pour la documentation,
Centre de ressources regroupant pas moins de 63 thèmes Pluxml,
Forum avec plusieurs milliers de messages.

Pour qui pour quoi ?

Pluxml est idéal pour la mise en place d’un site vitrine ou d’un blog si vous voulez offrir à vos visiteurs une expérience de rapidité dans l’affichage des pages. En effet, la sobriété du système de template et l’absence de base de données fera de votre blog sous Pluxml l’un des plus rapide de la blogosphère !

Articles sur le même sujet

WordPress — Un blog version «mobile» sans plugin

Bruno Bichet — Tue, 02 Sep 2008 07:45:47 +0000

Avec la réduction des tailles d’écrans qui va des téléphones portables aux ultra-portables comme l’eeePc, il devient urgent de proposer aux visiteurs une version mobile de votre blog. Il existe de nombreux plugins pour WordPress permettant d’obtenir une version mobile ou une version iPhone, mais je me suis amusé à chercher une solution minimaliste pour afficher mes derniers articles sans fioriture.

J’ai écarté la mise en place d’un style switcher pour changer la feuille de style CSS standard par une CSS spécifique aux mobiles ; difficile dans ce cas de partager une URL de type http://mobile.css4design.com ! Sans compter la reconnaissance des périphériques qui va du format 240 x 320 pixels des téléphones portables aux 800 x 480 pixels des premiers eeePC !

Créez votre version mobile à partir des modèles de pages WordPress

Je suis donc partie sur l’idée d’utiliser le moins de ressources possible (y compris intellectuelles) et de voir ce qu’il est possible de faire sans quitter WordPress. La création d’une nouvelle Page Version mobile basée sur une le Modèle de page mobile.php s’est imposée :

Créez votre template mobile :



    
        
    
    
    
            
                css4design | Version mobile du blogzine d'un intégrateur web
            
            
        
            
            
            Publié le  par .

Créez ensuite une nouvelle Page (Ecrire -> Page),
Donnez-lui le titre Version mobile,
Sélectionnez le modèle de page mobile (Modèle de page -> choix du modèle dans la liste déroulante),
Enregistrez, c’est fini.

Ce template affiche les 5 derniers billets et il suffit de modifier le paramètre showposts="5" pour l’adapter à vos besoins en gardant à l’esprit que le poids de votre page fait partie des éléments à surveiller de près pour un affichage optimum sur un téléphone portable notamment.

En savoir plus : sur la création d’un modèle de page et sur les boucles WorPress.

les plus

Basique, permet d’aller à l’essentiel : proposer un lien pour afficher les 5 derniers billets sans formatage, donc accessibles depuis n’importe quel périphérique accédant au web,
Service minimum, rapidité maximum ;)
l’identifiant dans le body permettra de styler légèrement cette version mobile de votre blog (changer la taille de la police de caractère, gérer les interlignage de texte, etc.)

Les moins

Il s’agit d’une page unique qui ne permet pas (d’après des tests rapides) l’affichage des commentaires de l’article,
Les liens internes pointent vers la version standard,
Il ne s’agit pas d’une vraie version mobile (manque le Doctype adapté, code HTML non-valide au regard des possibilité des mobiles, page encore un peu lourde, etc.),

Ressources pour la conception de pages web « mobiles »

Voici quelques liens en relation avec la conception de sites pour mobiles :

ready.mobi — Cet outil de test gratuit évalue la conformité de votre page ou de votre site web au regard des standards et des bonnes pratiques spécifiques à ce secteur d’activité. Les résultats se présentent sous la forme d’une note de 1 à 5 et d’une analyse approfondie de la page pour en évaluer les performances sur un périphérique mobile. Nombreux conseils pour corriger les erreurs.
dev.mobi — Toutes les informations pour développer votre site mobile ready : guide du développeur, outil pour construire votre site rapidement, etc.
Votre blog sur un téléphone portable, really ready ? — Présentation détaillée de ready.mobi avec l’analyse de mon blog.
W3C mobileOK Checker [Beta] — Make your Web site mobile-friendly! Déclinaison pour mobile du validateur du W3C.
Developing Wireless Content using XHTML Mobile — Cet article montre comment créer un document XHTML adapté aux périphériques mobiles : mise en place de l’environnement de travail et transformation d’un document XHTML en WML.

Peut mieux faire !

Coluche vous le dirait, cette solution ne promet pas le grand soir, mais juste à manger et à boire ;) Elle s’inscrit dans une démarche visant à proposer aux lecteurs différentes manières d’accéder aux articles en complément des flux RSS. N’hésitez pas à proposer vos idées pour l’améliorer (notamment pour afficher les commentaires, n’afficher qu’un seul article avec pagination pour alléger la page, etc.).

Articles sur le même sujet

Danse avec les loops #1 : un thème WordPress mis à nu

Bruno Bichet — Sat, 19 Jul 2008 17:30:23 +0000

~~Après le thème Agrumz et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design.~~ Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot.

Une ligne éditoriale moins linéaire

Je ne m’étendrai pas trop sur les interrogations existentielles qui m’ont poussé à changer le design et la structure de ce blog. La première chose, c’est que la succession simple des billets dans l’ordre chronologique inverse ne correspond plus vraiment à mes aspirations et aux différentes rubriques qui composent ce blog.

En effet, si le coeur de la ligne éditoriale est consacré à la création de site web en général en mettant l’accent sur les problématiques liées à l’intégration HTML et CSS et à la structuration des contenus, j’aborde d’autres sujets comme le Web 2.0, le e-commerce et il m’arrive de publier des billets d’humeur sur l’actualité du web.

Si ces sujets peuvent très bien s’accommoder d’une structure de blog classique, j’avais envie de mieux distinguer les articles de fond des billets plutôt brefs, tout en mettant en avant mes billets d’humeur. Le problème du blog « classique », c’est que les billets disparaissent vite de la page d’accueil et perdent rapidement en visibilité, même si l’ami américain Google est là pour les faire remonter à la surface.

Il me fallait donc un système pour conserver une certaine unité dans la liste des articles en rapport avec les thèmes principaux abordés sur le blog tout en autorisant la publication de billets brefs et d’humeur. Un blogzine, en fait ;)

Voici pour les explications éditoriales. Jetons maintenant un oeil sous le capot !

Hiérarchie des Templates

Grâce à WordPress, il est possible de construire un thème en utilisant uniquement le fichier index.php. Chaque requête — le fait de cliquer sur une catégorie, une page d’archive, le titre d’un billet, un tag, etc. — crée un contexte de variables qui pointera vers ce fichier.

Si l’on veut afficher les contenus différemment sur le billet seul, par exemple, deux solutions s’offrent à nous : les marqueurs conditionnels (Conditional Tags) comme is_single() ou la création d’un fichier single.php.

S’il s’agit de modifier une largeur de colonne au passage du billet seul, le marqueur conditionnel suffit. En revanche, si les modifications sont plus profondes, le fichier single.php sera sans doute plus adapté sachant que dans la plupart des cas, la solution passe par un mélange des deux techniques.

La première chose à prendre en compte est le nombre de maquettes dont on dispose pour afficher tous les contextes possibles, même si dans la plupart des cas, il n’est pas nécessaire de mettre en place tous les Templates possibles.

Pour y voir un peu plus clair, voici une table des correspondances entre les marqueurs, les templates et la hiérarchie qui leur est associée (Template Hierarchy) :

Pour SquaryBluevie par exemple, je voulais tout faire en utilisant uniquement le fichier index.php, mais bien que cela soit possible, le risque est grand de se mélanger les pinceaux entre la multitude des conditions…

J’ai donc ajouté à index.php, les fichiers home.php, page.php et single.php. Le reste étant composé de fichiers inclus de manière conditionnelle ou en fonction du Template. C’est le cas pour header.php, footer.php, tutoriels.php, sidebar0.php, sidebar1.php, sidebar2.php, etc.

Un découpage en 7 grandes zones

1 L’en-tête

Le fichier header.php est composé de deux grandes parties. La première contient les éléments qui apparaissent sur l’ensemble du blog. C’est la partie header :

Sommaire en haut à gauche,
Classement Wikio en haut à droite,
Texte de présentation de l’auteur,
Logo,
Texte de présentation du blog,
Liste des pages statiques en dessous.

La deuxième partie header2 est située juste en dessous :

Photo de l’auteur,
Icône du flux RSS,
Texte situé entre les deux.

C’est ce texte qui affichera un contenu différent selon le contexte :

Dans une catégorie (), j’affiche la description de la catégorie
Dans la page affichant l’article seul (), j’affiche une introduction générale pour les articles,
Ni dans une page d’article ni dans une page statique ni dans une catégorie (), j’affiche le dernier billet dans la rubrique « Editorial ».

La description du blog est celle que l’on renseigne habituellement dans Réglages -> Options générales -> Slogan du panneau d’administration. L’appel du texte se faisant avec la fonction . Comme il s’agit — avec la présentation de l’auteur — d’une zone de widgets, il est possible de remplacer aisément la description du blog par un texte libre (notamment si la description est trop courte) en utilisant un widget texte.

Ceci est possible grâce à la fonction suivante (voir ce billet consacré à la création de zones widget dans WordPress) :



    Description du blog

L’éditorial regroupe tous les billets appartenant à la catégorie… « editorial » ;) La boucle WordPress utilisée est la suivante (plus d’informations sur les boucles) :

have_posts()) : $my_query->the_post();?>
    Votre boucle ici

Note : le fait d’utiliser le nom de la catégorie à la place de son id, permettra de faciliter la mise en place du thème : il suffira de créer la catégorie Editorial au lieu de chercher le numéro identifiant et de mettre les mains dans le code.

A l’affichage d’une catégorie, cet édito est remplacé par la description de la catégorie idoine. Cette description est accessible dans l’administration via Gérer -> Catégories -> Description. Le code à utiliser dans le Template est . Enfin, lorsqu’on affiche l’article seul, cette description est remplacée par un texte libre (widget texte).

2 Billet « C’est vite dit ! » (En bref)

Sous le header, la deuxième zone se compose d’un billet « En bref » (cet intitulé — comme d’autres sur le blog — est modifiable dans le fichier functions.php) surmonté d’un visuel optionnel géré par les champs personnalisés (Customs fields).

Cette rubrique n’est ni plus ni moins que la catégorie 1 (uncategorized à l’origine) dont j’ai modifié l’intitulé. L’avantage est de pouvoir compter sur l’identifiant présent dès l’installation du blog, ce qui évite d’avoir à mettre les mains dans le code pour masquer cette catégorie dans les autres boucles. Par ailleurs, cette catégorie « originelle » est cochée par défaut, ce qui permet de gagner du temps lorsqu’on veut rédiger un billet court ;)

Note : pour afficher une seule rubrique, il est possible de se servir de son nom, mais pour l’exclure, il semble nécessaire de passer par l’identifiant numérique (à moins qu’une option m’ait échappée).

Voici le code pour cette boucle :


    have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle

Notez la variable $do_not_duplicate initialisée avec la valeur de l’identifiant du billet : comme les anciens articles de cette catégorie se retrouvent plus bas dans la première barre latérale, il sera important de l’exclure de la prochaine boucle.

Pour cela, en plus d’initialiser la variable $do_not_duplicate dans la première boucle, il faut exclure le billet en question de la deuxième boucle :


have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle

Grâce au mot-clé PHP continue, on saute le billet repéré plus haut en passant directement au suivant. Et hop ! Ce billet est censé s’afficher sur la Home uniquement et la condition !is_paged() permet de s’assurer que l’utilisateur n’a pas cliqué sur les billets plus anciens, auquel cas ce billet « En bref » ne s’affiche pas. Je pense que l’on pourrait utiliser la nouvelle condition is_front_page() apparue avec WordPress 2.5 pour obtenir le même résultat.

La fonction update_post_caches() est là pour pallier le fait que certains plugins ne fonctionnent pas correctement lorsque plusieurs boucles sont présentes sur la même page. Cette fonction réinitialise le cache des billets pour éviter d’éventuels problèmes.

3 Les articles du blogzine proprement dit

Cette zone est suivie de la liste des billets publiés au fil de l’eau sur le blog à l’exception de l’édito et des billets « En bref ». Toutefois, je voulais que ces deux rubriques puissent apparaitre lorsque les visiteurs cliquent sur les Articles plus anciens car si la redondance est gênante sur la première page, elle l’est moins sur les autres :


    

    


        Contenu de la boucle

Comme vous pouvez le constater, j’en ai profité pour afficher un nombre plus important de billets sur les « pages suivantes » grâce au paramètre showposts=15 histoire de donner à voir plus d’articles à chaque fois. Celà n’est pas indispensable ici, mais si vous envisagez de n’afficher qu’un seul article complet sur la Home, ça peut-être très utile.

Il ne faut pas oublier le paramètre $query_string qui permet de recréer le contexte de la requête (ici is_paged() ) car la fonction query_posts() est un peu l’auberge espagnole : seules les variables précisées en paramètres sont disponibles sur votre page.

4 Le menu à onglets sur la droite

Ce pavé inaugure la barre latérale et est en quelque sorte le pivot du blog, la boussole qui sert de point de repère dans ce qui pourrait apparaitre comme une cacophonie de textes :

Catégories — le moins mauvais des systèmes pour se repérer dans un blog ;
Derniers articles publiés afin que le lecteur ait une vision « applatie » des parutions sur le blog. En effet, l’édito ou le billet « En bref » peuvent rester un certain temps avant d’être remplacés, même si le contenu du blog proprement dit (la quatrième zone) peut évoluer plus rapidement ; à moins que l’inverse se produise car il est tout à fait possible de publier plusieurs billets courts dans « En bref » ou de prendre un coup de sang quotidien avec l’édito !
Articles les plus commentés. Si les derniers commentaires (voir plus bas) permettent aux visiteurs de se faire une idée sur les dernières discussions en cours, la liste des articles les plus commentés permet de faire remonter certains articles anciens qui ont, en leur temps, fais parler d’eux ;)
Derniers commentaires avec le gravatar, l’URL du commentateur et l’adresse du billet commenté. Pratique, pour donner au visiteur un aperçu des sujets qui suscitent actuellement le plus d’intérêt.
Nuage de tags pour donner un aperçu des thèmes abordés sur le blog au visiteur de passage (qui représente quand même plus de la moitié des visites).

A noter que lorsqu’on se trouve sur les pages single.php (affichage des billets seuls) et page.php (affichage des pages « statiques »), ce menu ne propose que les 3 premiers onglets afin de laisser plus de place pour l’article. Voici le code :

5 Tutoriels aléatoires

Sous le menu à onglets, j’affiche un article aléatoire parmi ceux qui sont tagués « tutoriel ». Ca tombe bien car c’est un des rares tags que j’ai employé à bon escient depuis de début ! Ca permet de faire « remonter » des billets rédigés il y a plus de deux ans et sur lesquels j’ai le plus transpiré ;) La boucle est relativement similaire aux autres :


    Contenu de votre boucle

Le nerf de la guerre étant ici, les paramètres tag et orderby. Notez que si l’on voulait obtenir les billets contenant plusieurs tags il suffirait de préciser : tag=tutoriel+wordpress.

Cette zone peut être précédée ou suivie d’une zone widgétisable pour placer une éventuelle publicité (actuellement des vidéos virales de unrulymedia) ou tout autre élément à la mode. Une zone est même prévue au-dessus du menu à onglets pour la même chose. Bon, rassurez-vous, une publicité placée au-dessus du menu principal vaut son pesant de cacaouettes : le jour où ça arrive, je vous invite à boire un café sur Lyon :D

6 Deux barres latérales pour le prix d’une !

C’est le moment de diviser la barre latérale en deux afin d’accueillir d’autres types de contenus. Pour le moment la première sidebar accueille la suite des billets « En bref » suivie d’une petite publicité virale (oui, j’essaie de trouver des alternative à Google Adsense… pas si facile non plus ;) )

La deuxième barre latérale est destinée à accueillir des liens externes comme les liens sponsorisés (saymal, mais saybon quand même :D ), les flux RSS externes, etc.

A noter que sous cette double sidebar, il est possible d’afficher du contenu à l’aide d’une zone widgétisée sur la largeur des deux colonnes.

7 Le footer

Ce footer est lui-même divisé en deux : un big footer (inactif pour l’instant) et le footer proprement dit qui affiche quelques informations classiques comme les droits réservés, l’adresse des différents flux RSS, le lien vers le formulaire de contact, etc.

Les widgets

Ce thème est truffé de zones widgets ready pour permettre une certaine souplesse dans l’administration du blog en minimisant les allers-retours dans le code. Pour information, SquaryBluevie ne compte pas moins de de 19 zones de widgets, certaines actives et d’autres pouvant être activées sur un claquement de souris.

Voici la liste des différentes zones de widget et leur utilisation actuelle ou prochaine :

header1 – présentation de l’auteur (widget Texte),
header2 – présentation du blog (inactive pour l’instant),
article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
tab2 — derniers billets publiés,
tab3 — articles les plus commentés par les visiteurs,
tab4 — derniers commentaires des visiteurs
tab5 — listes des tags les plus utilisés
sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
sidebars-bottom –zone située sous les deux colonnes latérales,
sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
sidebar1-bottom — zone placée en dessous,
sidebar2 — l’ensemble de la deuxième barre latérale étroite est gérée par cette zone. Principalement pour des liens externes et/ou publicitaires (flux RSS, liens sponsorisés, blogroll, etc.),
bigfooter – si le besoin s’en fait sentir, une zone big footer est diponible sur toute la largeur de la page en 2, 3, 4 ou 5 colonnes en fonction des besoins. (inactive pour l’instant),
footer – zone disponible au début du footer (inactive pour l’instant),
adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
sidebar-single – permet d’afficher des élément sous le menu à onglets lorsqu’on lit un billet seul.

Grille de mise en page, feuilles de styles CSS et Javascript

Je ne m’étendrai pas trop sur ces questions qui feront l’objet d’un autre article : ce design est provisoire (ce qui n’est pas le cas de cet article) et je ne suis pas sûr de vouloir garder la même approche. Mais pour ceux qui sont curieux et qui n’ont pas envie de regarder le code source, voici quelques informations.

Pour ce thème, j’ai utilisé le framework CSS Blueprint en redéfinissant totalement la grille horizontale proposée par défaut en utilisant l’excellent Blueprint Generator pour générer automatiquement le fichier grids.css : il suffit de préciser quelques informations. J’ai opté pour une grille en 14 colonnes de 52 pixels chacune, séparées par une gouttière de 18 pixels, pour une largeur totale de 962 pixels.

L’avantage du framework Blueprint est de pouvoir tester rapidement plusieurs mises en page à partir de la même grille. La prise en main est relativement facile si l’on possède des bonnes notions de CSS et si l’on si sait à quel moment il faut rétablir le flux après les flottants : lorsqu’on détermine une largeur à l’aide de Blueprint, on utilise un float: left en même temps !

J’ai utilisé également le script ie7.js de Dean Edwards pour faire en sorte que Internet Explorer 6 se comporte comme IE7. Je vous invite à lire l’article Quelques notes sur la bibliothèque Javascript IE7 qui vous permettra d’en savoir plus sur les comportements ajoutés à Internet Explorer pour le rendre plus friendly ;)

Conclusion

Dans ce billet, je n’ai pas abordé les aspects graphiques : comme je l’ai déjà évoqué, ce thème est pour moi un saut dans l’inconnu car je n’ai pas l’habitude de travailler le bleu, les blocs carrés ou encore les designs symétriques ! Tout celà donne un aspect institutionnel qui n’était pas recherché au départ mais qui peut faire son petit effet ;)

Rassurez-vous toutefois, mon objectif n’était pas d’obtenir des backlinks d’un site se terminant par .gouv, mais simplement de mieux structurer le blog et d’utiliser une palette de couleur tendant vers la monochromie (deux couleurs froides) afin que le regard du lecteur ne se disperse pas trop : plus les contenus sont nombreux et variés et plus la sobriété est importante.

Par ailleurs, le graphisme de ce blog est destiné à évoluer régulièrement pendant quelques temps, le temps de trouver un rythme de croisière entre l’édito, les brèves, les articles de fond, les tutoriels, etc…

Stay tuned and mind the gap!

Articles sur le même sujet

Les widgets dans WordPress 2.5 avec widgétisator ;)

Bruno Bichet — Thu, 20 Mar 2008 22:29:38 +0000

La mise-à-jour vers WordPress 2.5 ne se limite pas seulement à des améliorations ergonomiques et cosmétiques au niveau de l’interface d’administration. Prenons les widgets : la page elle-même est profondément remaniée, et toute la partie destinée au choix du nombre de widgets (texte, RSS, catégorie, etc.) disparait, puisque avec cette version, le nombre de certains widgets n’est plus limité. Et comme vous êtes sympa, je vous donne les éléments nécessaires pour nommer et personnaliser vos zones widgétisables dans votre template WordPress.

L’est passé où, le glissé-déposé ?

Conséquence directe sur l’interface, il n’est plus possible d’utiliser le glissé-déposé des widgets vers les différentes « sidebars ». En effet, cette fonction n’était déjà pas très pratique lorsqu’on déclarait quatre zones widgétisables (improprement appelées « sidebars »), alors vous imaginez le dawa avec plus ;)

A la place, nous avons une interface robuste avec à gauche, les différents widgets disponibles, et à droite, les zones widgétisables et les widgets associés, avec les options disponibles pour chacun d’eux.

A noter qu’il est préférable de bien nommer vos zones widgétisables pour vous y retrouver car le choix de ces dernières s’effectue désormais au dans un menu select.

Modifier l’intitulé des zones widgétisables

Dans un précédent article sur les widgets dans WordPress, je n’étais pas parvenu à modifier l’intitulé des zones widgétisables, cette fois, c’est réglé : à la place de sidebar1, sidebar2, etc. voici le code à mettre dans le fichier functions.php pour donner un nom explicite à chaque zone, avec en prime, la possibilité de spécifier pour chacune les balises HTML enveloppantes qui vont bien :

Widgétisator

A mettre dans le fichier functions.php de votre thème
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'header',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array('name'=>'sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array('name'=>'content',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array('name'=>'footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

L’idée est de déclarer individuellement chaque zone, de manière à controler :

le nom de la zone (header, sidebar, content, footer),
la balise html servant à encadrer le code fournit par le widget avec une class CSS spécifique (widget-header, widget-sidebar, widget-content, widget-footer),
la balise de titre avec sa classe CSS spécifique (widgettitle).

Sinon, il reste toujours la possibilité de déclarer plusieurs zones d’un seul coup avec le code :

 '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    );
    register_sidebars(4, $widgetWrap);
?>

Dans les deux cas, pour terminer, il est nécessaire de définir votre zone widgétisable dans votre template à l’aide des lignes suivantes :

A mettre dans votre template là où vous voulez déclarer une WAR
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header') ) : ?>

/*
Placez ici le code qui doit s'afficher si la zone
n'est pas remplie avec des widgets -- facultatif
*/

En bref

Vous l’aurez compris, je suis conquis par cette nouvelle version de WordPress, et vous n’avez pas fini d’en entendre parler ;) Pour avoir d’autres informations sur cette version, n’hésitez pas à faire un tour sur WordPress francophone, chez nicolargo ou encore chez Here With Me.

Stay tuned!