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 :

1. Créez votre template mobile :

           <title></title>
   
   
       <div>
               <h1>
                   css4design | Version mobile du blogzine d'un intégrateur web
               </h1>
   
           <div>
               <h2></h2>
               <div></div>
               <p>Publié le  par .</p>
               <hr />
           </div>
   
       </div>
   

2. Créez ensuite une nouvelle Page (Ecrire -> Page),

3. Donnez-lui le titre Version mobile,

4. Sélectionnez le modèle de page mobile (Modèle de page -> choix du modèle dans la liste déroulante),

5. 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
• Le Petit Journal du Web — 09/2011
• Création de site WordPress de A à Z — B comme Basics
• WordPress de A à Z — A comme Allons-y ! (on s'organise)
• Créer son site web avec WordPress de A à Z… avec le Codex

Comment utiliser has_tag() ?

Contrairement à is_tag() qui permet d’afficher un contenu spécifique lorsqu’une page de tags est demandée et qui peut être placé n’importe où dans votre template, has_tag(), qui est très utile pour détecter si un billet contient un ou plusieurs mots-clés, doit se situer dans la boucle WordPress.

Pour ce faire, il suffit d’ajouter le code suivant juste après la boucle while…

<?php while (have_posts()) : the_post(); ?>
    <?php if ( has_tag('News') ) continue; ?>

Plus d’informations

• has_tag() repère tous les billets avec un tag quelconque,
• has_tag('News') pour les billets tagués « News »,
• has_tag('News','Insolite','Humour') pour isoler les billets possédant tous les tags fournis en argument.
• MAJ : il semble que la ligne au-dessus ne fonctionne pas. Pour arriver au même résultat écrivez plutôt :

  <?php
      if ( has_tag('News') || has_tag('Humour') || has_tag('Insolites') ) continue;
  ?>

Pourquoi utiliser has_tag() ?

Dans le cadre de la réorganisation quasi-permanente de mon blog, j’ai fusionné les catégories En bref et News avec Revue de web pour réduire le nombre de rubriques. Or, seul le premier billet de cette catégorie doit s’afficher en haut du blog sous l’intitulé C’est vite dit… ; les anciens billets de cette catégories sont affichés plus bas dans la barre latérale.

Par ailleurs, pour garder une certaine cohérence avec les autres rubriques du blog, j’ai reclassé les billets appartenant auparavant à News dans des catégories plus précises. Ainsi, une News taguée « News » concernant WordPress est désormais classée dans… WordPress !

L’effet de bord, c’est que toutes les petites News se sont affichées dans la suite des billets du blog, ce que je voulais éviter pour des raisons esthétiques et éditoriales : je ne veux pas que le lecteur de passage qui atterrit sur la Home ait le sentiment que le blog est composé uniquement de petites brèves sans grande valeur ajoutée ;)

Dans un cas comme ça, has_tag() s’avère donc indispensable pour isoler tous les billets partageant les mêmes tags sans se soucier de leurs catégories respectives. WordPress, quelle souplesse !

Allez, has_fun() ^_^

Articles sur le même sujet

• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Danse avec les loops #1 : un thème WordPress mis à nu
• Le petit journal du web — WordPress, développement web, etc.
• WordPress de A à Z — E comme Extensions (les plugins)

De nombreux thèmes à tendance « magazine » se servent des champs personnalisés pour afficher une image au-dessus d’un billet. Pour cela, on crée la clé illustration et on met l’URL de l’image dans le champs valeur.

Voici un exemple concret :

ID, 'illustration', $single = true); ?>

Le contenu de la clé llustration est placée dans la variable $image pour l’afficher plus loin :

<img src="" />

C’est déjà fini ?

Les problèmes commencent

Maintenant, il faut saisir l’URL de votre image dans la section Champs personnalisés en bas de l’interface d’édition du billet.

Oui, mais voilà, cette URL, vous ne l’a connaissez pas encore. En effet, WordPress s’occupe lui-même de l’emplacement de votre image dans un dossier du genre /files/2008/08/...

1ère solution : télécharger l’image via un client FTP

Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l’usage, ça reste très lourd au point d’enlever presque tout intérêt à l’affichage d’images par ce moyen.

<img src="mes-images/" />

Toutefois, il existe une option sous forme de case à (dé)cocher (organiser mes fichiers envoyés dans des dossiers mensuels et annuels) pour mettre toute les images en vrac dans le dossier /uploads. Comme ça, il suffit d’ajouter le nom du répertoire dans le thème et de saisir le nom de l’image dans le champ valeur :

<img src="uploads/" />

Toutefois, ces images en vrac ne sont pas une solution satisfaisante : on risque de créer plus de problèmes sur le long terme que ça en a réglé sur le court terme. Et puis, il est toujours nécessaire de télécharger les images à part, même si l’on économise la création d’un dossier ;)

2ème solution : utiliser la boite de dialogue prévue…

En réfléchissant un peu à la question, j’ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans /uploads

1. Ajouter une image comme vous le feriez si vous vouliez l’afficher dans le billet,
2. Copier l’adresse de l’image qui apparait dans la boite de dialogue.
3. Fermer la fenêtre d’importation
4. Coller l’adresse de votre image dans le champ valeur à côté de la clé llustration dans les Champs personnalisé.

Voilà, c’est simple, efficace et sans bavure ;)

MAJ : Dans la version 2.7, l’adresse n’apparait plus dans la boite de dialogue d’importation. Il est nécessaire d’incorporer l’image pour obtenir l’url.

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Quelques notes sur un thème magazine de A à Z — E comme épure

Un nouveau menu à onglets sur ce blog !

Ce bookmarklet m’a tellement emballé que j’ai mis en place un deuxième menu à onglets sous les catégories du blog pour accueillir les fruits de mes petites découvertes au gré du surf quotidien. J’ai inauguré cette zone avec un onglet « News » pour des brèves plutôt généralistes. Mais à l’avenir, ce menu devrait accueillir des onglets plus spécialisés comme « Insolite », « ludique », histoire de rendre le développement web un poil plus fun ;)

Je n’ai pas encore tout testé mais il semble possible de publier directement les images présentes sur une page Flickr ou les vidéos sur Youtube (peut-être même que des plugins verront le jour pour élargir l’offre). Pratique pour ajouter un onglet « Vidéo » et/ou un onglet « Image » à mon nouveau menu à onglets.

Les billets affichés sont donc sélectionnés selon le tag, ce qui est moins lourd que la création d’une catégorie qu’il faudrait éventuellement masquer dans d’autres boucles WordPress présentes sur le blog (ce qui me fait une partie de la réponse au commentaire de Kynerion par la même occasion !)

A noter que j’ai quand même créé une sous-rubrique News pour garder une certaine cohérence avec la catégorie Revue de web, mais ce n’est pas une obligation. Cette souplesse de WordPress est assez magique car elle permet toutes les fantaisies : on pourra facilement créer un billet dans une catégorie et ajouter le tag « News » pour afficher le billet à un autre emplacement du template.

De plus, dans la boucle qui suit, rien n’empêche d’afficher des billets contenant d’autres tags pour avoir encore plus de souplesse dans l’étiquettage des billets. Il suffira de remplacer 'tag=news&showposts=3' par 'tag=news+insolite+comique&showposts=3'.

N’ayons plus peur du loop !

Pour les billets taggués « News », par exemple, il suffit de faire la boucle suivante :

<div id="tab6">
    <ul>
        <?php /* Affichage des toutes les news */
        query_posts('tag=news&showposts=3'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <li>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            </h2>
            <div>
                <?php the_content('Lire la suite &raquo;'); ?>
            </div>
        </li><!-- end .post -->
        <?php endwhile; ?>
    </ul>
    <p><a href="/tag/news" title="Tous les articles tagué news">Voir toutes les news</a></p>
</div>

Bref, je n’ai pas encore fait le tour de cette nouvelle version de WordPress, mais il semble que l’équipe de développement se dirige vers la création d’une véritable plate-forme de CMS aussi complète qu’efficace.

Mais que manque-t-il donc à WordPress ?

Tiens, ça me rappelle que j’ai un brouillon en cours sur ce qui manque à WordPress par rapport à d’autres outils de gestion de contenu. Comme je suis loin de tous les connaitre, et si le coeur vous en dit, vous pouvez m’aider en me donnant des pistes du genre : « sur Joomla! on peut faire ça facilement », ou « avec SPIP, je fais ce que je veux avec mes cheveux »… Enfin, vous voyez l’idée générale ;) Merci par avance !

La chaine ! la chaine ! la chaine !

Si j’osais, je lancerai bien une chaine de blog sur ce qui manque à WordPress pour permettre à chacun d’y réfléchir à tête reposée dans le cadre d’un billet, ce qui me permettra ensuite de compiler les contributions de chacun(e).

Allez, j’ose : tous les lecteurs et lectrices sont invitées à participer à cette chaine de blog d’intérêt public !!!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• 390 ressources Javascript & jQuery
• S'il ne devait rester qu'un tutoriel pour faire un menu CSS avec onglets…

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 (<?php if ( is_category() ) : ?>), j’affiche la description de la catégorie
• Dans la page affichant l’article seul (<?php if ( is_single() ) : ?>), 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 (<?php if ( !is_single() && !is_page() && !is_category() ) : ?>), 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 <?php bloginfo('description'); ?>. 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) :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header2') ) : ?>
<div>
    <h2>Description du blog</h2>
    <div><?php bloginfo('description'); ?></div>
</div>
<?php endif; ?>

<?php $my_query = new WP_Query('category_name=editorial&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();?>
    Votre boucle ici
<?php endwhile; ?>

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 <?php echo category_description(); ?>. 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 :

<?php if(!is_paged()) : ?>
    <?php $my_query = new WP_Query('cat=1&showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle
    <?php endwhile; ?>
<?php endif; ?><!-- end !is_paged -->

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 :

<?php $my_query = new WP_Query('cat=1&showposts=6'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle
<?php endwhile; ?>

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 :

<?php if(!is_paged()) : ?>
    <?php query_posts("$query_string&cat=-1,-16&showposts=10");
    /* Affichage des articles sauf featured et édito */?>
<?php else : ?>
    <?php query_posts("$query_string&showposts=15"); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
        Contenu de la boucle
<?php endwhile; ?>

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 :

<?php if ( !is_single() && !is_page()) : ?>
    <div id="menu-wide">
<?php else : ?>
    <div id="menu-narrow">
<?php endif; ?>

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 :

<?php /* Affichage des tous les billets tagué "tutoriels" */
query_posts('tag=tutoriel&showposts=1&orderby=rand');
while (have_posts()) : the_post(); ?>
    Contenu de votre boucle
<?php endwhile; ?>

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 :

1. header1 – présentation de l’auteur (widget Texte),
2. header2 – présentation du blog (inactive pour l’instant),
3. article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
4. tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
5. tab2 — derniers billets publiés,
6. tab3 — articles les plus commentés par les visiteurs,
7. tab4 — derniers commentaires des visiteurs
8. tab5 — listes des tags les plus utilisés
9. sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
10. sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
11. sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
12. sidebars-bottom –zone située sous les deux colonnes latérales,
13. sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
14. sidebar1-bottom — zone placée en dessous,
15. 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.),
16. 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),
17. footer – zone disponible au début du footer (inactive pour l’instant),
18. adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
19. 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

• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• Quelques notes sur un thème magazine de A à Z — E comme épure