Le souci, c’est que quand on veut créer un thème, vu qu’il n’y a pas encore de documentation, c’est pas toujours évident de trouver les bonnes informations pour créer un menu de navigation avec cette fonction. Dans cet article, je vais donc vous montrer le plus simplement possible, comment créer un menu, voire même plusieurs. Ensuite, à vous de vous amuser avec l’outil pour en tirer toutes les possibilités. Une chose est sûre, c’est qu’il y encore quelques semaines, on se posait la question de savoir s’il fallait coder en dur ces menus, et bien, force est de constater qu’avec cette nouvelle fonction, vous allez pouvoir créer tout type de menu, avec des liens, qu’ils soient internes au blog, ou bien externes.

Alors, que faut-il pour utiliser la nouvelle gestion des menus de WordPress ?

Si vous arrivez avec un thème que vous avez créé vous-même ou que vous avez acheté il y a encore quelques mois, il y a de grandes chances pour que vous ne puissiez pas utiliser cette nouvelle fonction. Pourquoi ? Tout simplement parce qu’il faut qu’elle soit “générée” ou “autorisée” dans le fichier functions.php. Ca fonctionne un peu comme la widgétisation ou l’utilisation des vignettes depuis WordPress 2.9. D’ailleurs, j’écrirai un tutoriel sur cette fonction dont on entends finalement peu parler.

Pour vérifier tout ça, allez sur l’onglet “Menus” du menu “Apparence”. Si vous ne pouvez pas créer de menu, c’est que votre thème ne le permet pas. Sinon, vous n’avez pas besoin de lire plus loin ce billet !

Donc, pour “mettre en marche” la gestion des menus, il va falloir insérer une ligne de PHP dans ce fichier functions.php. Cette ligne est:

add_theme_support( 'menus' );

Retournez ensuite dans l’onglet “Menus” et vous verrez que vous pourrez alors créer un ou plusieurs menus de navigation.

“Comment faire fonctionner ce menu sur mon thème maintenant ??”

C’est bien joli d’avoir intégré du code dans le fichier functions.php mais il a de grandes chances pour que le ou les menus que vous avez créé ne s’affiche pas sur votre blog. Pour les afficher, j’ai retenu deux possibilités qui me semblent intéressantes.

La première est d’insérer la fonction qui va vous permettre d’afficher votre menu:

 <?php wp_nav_menu(); ?>

La deuxième solution, que je trouve tout aussi intéressante, sinon voire plus intéressante, c’est d’utiliser les widgets. En effet, vous avez la possibilités d’utiliser le widget “Navigation Menu” pour insérer votre menu de navigation dans votre thème.

Pour cela, rien de plus simple. Il faut bien entendu que votre thème soit widgétisé. Si ce n’est pas le cas, vous pouvez toujours passer par ce tutoriel. Cela dit, depuis que cette fonction existe, votre thème a de grandes chances d’être widgétisé.

Donc, imaginons que nous voulons créer deux menus, un pour les pages du blog et un autre pour les catégories du blog. Vous allez donc créer ces deux menus et vous allez aller dans le fichier functions.php et créer 2 zones widgétisables pour ces deux menus. Un exemple de code à utiliser va être le suivant:

    if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Menu_Pages',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''
    ));
    register_sidebar(array(
        'name' => 'Menu_Categories',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''
    ));

Maintenant, il reste quand même à positionner ces deux zones dans votre thèmes. Vous allez procéder comme n’importe quelle zone widgétisable en insérant le code suivant, là où vous souhaitez voir apparaître vos deux menus:

et

Ensuite, en allant dans l’onglet “widgets” de l’administration de votre blog, vous allez trouver ces deux nouvelles zones widgétisables. Vous n’avez, alors, plus qu’à leur ajouter le widget “Navigation Menu” et y choisir l’un des deux menus que vous avez créé préalablement dans l’onglet “Menus”:

Allez maintenant sur votre thème et vos deux menus y apparaissent.

J’ai pris ici l’exemple avec deux menus, mais vous pouvez, bien entendu, en utiliser qu’un !! Et dans la plupart des cas, la fonction wp_nav_menu() sera suffisante. Mais la grande force de cette nouvelle gestion des menus, au delà de pouvoir y insérer ce que l’on veut, permet aussi facilement de créer plusieurs menus et de les placer comme on veut, où l’on veut !

Prochainement, je vous ferai un petit tuto sur la gestion des vignettes, apparues avec la version 2.9. J’essayerai aussi d’en faire un aussi sur la création de X blogs avec la fonction “network” qui débarque avec la 3.0

Et ce soir, je suis tombé sur un article de Ian Stewart, le créateur de Thematic, le célèbre Framework de thèmes pour WordPress, qui vient d’avoir l’idée de reprendre un peu ce qui a été fait il y a quelques années au niveau des tutoriels de création de thèmes et de les remettre au goût du jour. Au programme, il a l’intention de revoir certains aspects qui ont évolué depuis 2/3 ans au sein même de WordPress et d’aborder toute une série de sujets qui ont évolué au niveau de webdesign même depuis quelques années. Bien entendu, il parlera de Thematic.

Je me suis dit que c’était une bonne opportunité pour faire une petite “update” sur les tutoriels que j’ai fait il y a de cela deux ans et de vous proposer quelques tutoriels de plus en tenant compte de ce que Ian va proposer à ces lecteurs. Je pense que ce sera utile pour tout le monde et notamment pour ceux qui ne lisent pas très bien l’anglais.

Donc, je ne sais pas encore comment vont s’articuler ces articles puisque ceux de Ian ne sont pas encore en ligne, mais au fur et à mesure de leur parution, soit je vous ferai une traduction si ça s’impose, soit je retranscrirai les idées mais à ma sauce, le tout conçu pour qu’un maximum de vous comprenne ce dont on parle. J’ai eu l’aval de Ian pour pouvoir travailler à partir de ses tutoriels à venir. Chaque aspect abordé sera lié directement à l’article original paru sur ThemeShaper.com.

Enfin, ce sera également une bonne opportunité pour vous de découvrir Thematic qui semble s’imposer actuellement comme étant le “theme framework” de WordPress par excellence.

Je vous tiendrai donc au courant dès que j’aurai plus de news. Les articles devraient arriver progressivement à partir de la première semaine de juillet ( là, je suis en vacances !! ).

PS: A noter que les tutos concernant la création du design d’un thème WordPress est toujours en cours et est planifié pour l’été…

A très bientôt

Francis

Update: plutôt que d’écrire un nouvel article sur le croquis, je préfère réactualiser celui que j’avais déjà écrit il y a pas mal de temps mais qui est toujours d’actualité. Qui plus est, je ne suis pas sur que beaucoup d’entre vous l’aient lu donc le voici mis à jour et republié à la date d’aujourd’hui avec les commentaires d’origine que je vous invite à venir compléter !

Nous allons donc commencer une nouvelle série de tutoriels pour apprendre à créer soi-même le design de son blog. Ces tutos vont être sensiblement différents de ceux que l’on a pu faire jusqu’à présent parce qu’ici, on va faire appel surtout à la créativité et à un brin de marketing. Donc, pendant plusieurs articles, on ne parlera que très peu technique, et quelque part, je dirais tant mieux, parce que le côté créatif de la chose est certes beaucoup plus subjectif, mais c’est aussi de là que vient tout l’inspiration et c’est à partir de ça que l’on créera un design qui nous ressemble.

Alors, bien sûr, on va suivre une trame que j’aurai défini. Cette trame est calquée sur ma manière de travailler et de voir les choses. Je viens d’un univers artistique et créatif. Je vous montrerai donc comment je perçois la créativité. Ca peut être vraiment différent d’une personne à une autre, et d’une compétence à une autre. Un designer pense souvent très différemment que le développeur. Et ce, parce que nous avons appris les choses également de manière différente. Donc, ce que j’exposerai ici n’est pas forcément à suivre à la lettre. A vous de trouver le terrain qui vous convient le mieux. Je ne dis pas que ce que j’expose ici est la meilleure méthode qui soit. Elle est juste celle qui, pour moi, permet le mieux à la créativité de s’exprimer. Et certaines étapes, comme celle du croquis, font parties de ce processus.

Commencer le design de son site web sur son ordinateur, c’est comme construire une maison en commençant par le toit !

Ce n’est pas moi qui le dit, mais le célèbre designer Jason Santa Maria. Ne touchez pas encore à Photoshop. C’est trop tôt. Photoshop est un formidable outil qui va vous aider à mettre en pratique vos idées, et vous permettre de les perfectionner, mais commencer directement va tout de suite vous mettre sous la contrainte. C’est pour ça qu’il est toujours mieux de commencer avec un morceau de papier et un crayon. Et comme l’a dit un jour un autre designer, Jeff Croft, “tools do not a designer make“. Je vous conseille d’ailleurs de lire son article. Je ne suis pas entièrement d’accord avec ce qu’il dit mais certaines vérités sont criantes !

Alors, comment va-t-on procéder ? Et bien, ce n’est pas très difficile. Réfléchissez déjà à ce que vous voulez faire. Voici quelques questions à se poser:

• Je veux un blog pour faire quoi exactement ? Blog perso ? web 2.0 ? Politique peut-être ? Bien savoir ce que vous voulez faire va vous aider à savoir quel type de blog vous allez faire.
• Ai-je besoin d’un blog 1 colonne ? 2 colonnes ? 3 colonnes ?
• Placement de la ou des sidebars à gauche ? à droite ? de chaque côté ? 2 à droite ?
• Largeur du contenu ? Large ? Etroit ? Idem pour la ou les sidebar.
• Et mon header ? Haut ? Visible ? Lumineux ? Fin ? Idem pour le footer
• Une barre de navigation ? Je la place où ? Et la fonction “recherche” ? Est-ce que j’en ai besoin ? En haut ? A gauche ? A droite ?

J’ai lu il y a quelques jours un excellent article qui parlait de l’orientation de la lecture d’un site web. Par exemple, et pour vous donner une “référence” artistique, une peinture se “lit” d’en bas à gauche, vers le haut à droite. Donc, en gros, si vous voulez impressionner ceux qui regardent vos peintures, créez un visuel de couleurs qui va aller graduellement d’une couleur à une autre, en suivant cette ligne.

Pour ce qui est des blogs, c’est plus simple et plus logique, puisqu’on suit le sens de l’écriture. Donc, on va lire d’en haut à gauche, vers le bas à droite. Donc l’information doit se “diluer” progressivement vers le bas et vers la droite.

C’est pour ça que l’on trouve le titre et la description du blog en haut à gauche. Ensuite, en descendant, on trouve le contenu et ainsi de suite. L’auteur donc de cet article propose une façon simple d’aborder cette organisation:

Identité du site > Sections > Header de la page > Contenu > liens

En ce qui concerne nos blogs, je dirais plutôt quelque chose de ce genre-là:

Identité du blog > Navigation (Sections) > Header > Contenu > Sidebar (Liens) > Footer

Donc, maintenant qu’on voit globalement comment devraient s’organiser notre blog, et si on commençait un peu à dessiner ?

Un papier, un crayon et une gomme, y a rien de mieux !

Finalement, la créativité ne tient à pas grand chose non ? Il va juste falloir réussir à faire les premières lignes. Les autres suivront sans aucun problème. Laissez votre inspiration vous guider. Ca n’a pas besoin d’être parfait, ce n’est qu’un croquis, qu’une première idée.

Ici, on est très loin de la technique et bon nombre de personne ont tendance à zapper ce côté “ludique” et créatif pour attaquer directement la maquette sur Photoshop. C’est pour moi une erreur. L’étape du croquis est libre de toute contrainte technique. Elle doit être prise comme une sorte de brainstorming. C’est le moment où l’on couche les premières ideés.

Pour commencer, vous allez dessiner une esquisse de la page d’accueil. Bien entendu, si vous n’y faîtes pas apparaître grand chose d’original, ce croquis n’aura pas grand intérêt. Essayez donc justement d’être un peu plus créatif sur certaines parties du blog comme l’entête, le fameux “header”. Pourquoi ne pas y prévoir une image ? Et vous allez placer votre barre de navigation à quel endroit ? Au dessus du titre du blog ? entre le titre et le contenu ? Vous verrez rapidement qu’un croquis n’est pas uniquement là pour faire un schéma d’ensemble du design de votre blog mais aussi et peut-être surtout pour en dessiner certains aspects. Donc, laissez vous aller à un peu de créativité !

Si vous arrivez à un truc comme ça, vous n’allez pas en tirer grand chose… :

L’inspiration est partout. Pensez à toujours avoir un carnet et un crayon avec vous, ça peut servir!

Là, je prêche un peu ma paroisse mais je vous jure que vous pouvez avoir des idées à n’importe quel moment, en voyant n’importe quoi, n’importe où. Donc, un stylo et un papier vous sera toujours utile. On peut avoir une idée à n’importe quel moment. Alors, “couchez-là” avant qu’elle ne disparaisse. L’inspiration peut donc être à chaque coin de rue…. mais aussi et surtout sur le web !

Passez un maximum de temps à gauche et à droite pour découvrir de nouveaux sites web. Pas forcément besoin que ce soient des blogs. N’importe quel design de site web peut vous inspirer. Et là encore, le carnet vous aidera, ainsi que Delicious !! Je vous donne donc quelques sites de référence qui ont justement pour but de référencer les plus belles réalisations sur le web:

• We Love WP, galerie de blogs sous WordPress et aux designs uniques,
• Logopond, si vous souhaitez créer un logo,
• Most inspired, qui regroupe les meilleures galeries de design web,
• Unmatched style, autre site proposant les plus beaux designs de sites web,
• CSSleak, le petit français de la bande !

Déjà, avec ça et votre inspiration personnelle, vous devriez pouvoir vous amuser pour un petit moment…

Alors, bien sûr, vous allez me dire que tous ces designs sont superbes, mais que vos compétences en Photoshop ne vous permettront pas d’arriver à un tel résultat ! C’est pour ça que je vous ai dit plus haut de ne pas commencer en travaillant directement avec Photoshop. Si vous ne maîtrisez pas bien l’outil, vous allez freiner votre créativité. Ici, on cherche des idées, originales si possible. Restez ouvert à tout et laissez votre imagination s’exprimer, sans contraintes techniques.

Donc allez-y, griffonnez, surfez, explorez ! Exprimez-vous !

Il existe également des applications ou de sites web qui vous permettent de prendre des instantanés ( “screenshots” ) de pages web et de les garder dans un coin pour vous aider à trouver l’inspiration le jour où vous allez vouloir dessiner un site web. Comme site, il y a le très connu Scrnshots.com où vous pourrez stocker tous vos screenshots. En applications, il y a le très bon LittleSnapper sur Mac OSX qui vous permet aussi de partager vos découvertes via FlickR ou leur site propre, QuickSnapper.

Screenshot de mon LittleSnapper avec de jolis sites !

Enfin, je vous conseille ces deux articles en anglais qui vous donneront quelques exemples de croquis mais qui aussi vous apprendront à mieux tirer profit de ce temps passé à griffonner:

• Improving the transition from paper to Photoshop  par Creative briefing,
• The Paper Version of the Web, par Deeplinking.

Donc, cherchez l’inspiration partout où elle se trouve. Pour le moment, ne vous limitez pas techniquement, que ce soit par rapport à vos compétences en Photoshop ou en WordPress. Laissez votre créativité s’exprimer et trouvez une manière originale d’afficher votre header, votre footer, les titres de vos articles, ou encore vos commentaires !

Dans le prochain tutoriel, je vous montrerai des exemples précis de croquis que j’ai fait pour différents sites mais aussi pour le thème que l’on va réaliser ensemble ici ! Rendez-vous donc au prochain numéro et d’ici là, n’hésitez pas à poser vos questions, et à montrer vos croquis !

Je viens de vérifier, j’ai commencé ma longue série de tutoriels sur la création de thème pour WordPress, il y a bientôt 2 ans… Ca fait une éternité dans le monde du web je trouve !! Quoi qu’il en soit et après de nombreux rebondissements dans ma vie, j’ai enfin trouvé le temps de me consacrer à une nouvelle série de tutoriels dans lesquels, on va apprendre à faire le design d’un site web et de le transformer en thème WordPress.

Le rythme sera environ le même que pour la première série, à savoir un tutoriel par semaine, voire plus, voire moins, et l’ensemble va s’axer autour du plan suivant:

1. Tout d’abord, nous allons penser le thème, tenter d’en concevoir une première version sur le papier, à travers un croquis. J’en ai déjà parlé dans la première série de tutoriels, mais il sera bon de reprendre l’ensemble dans le cadre du thème que l’on va réaliser.
2. Ensuite, on va passer sur Photoshop et on va découvrir ensemble comment créer une première maquette de notre site, comment travailler avec les couleurs, comment bien les choisir, etc. Cette étape aboutira par une maquette complète du thème que l’on découpera pour la préparer à la mise en page web.
3. Puis, nous transformerons cette belle maquette en une version HTML et CSS. On ne parlera pas encore de thème, mais d’une représentation simple en HTML de ce que le thème sera.
4. Enfin, nous construirons le thème autour de cette structure HTML et nous lui injecterons tout le PHP nécessaire.

D’un point de vue organisation des tutoriels, j’aurais tendance à dire que ce qui a été déjà fait devrait s’intégrer entre l’étape 3 et 4. C’est-à-dire qu’on n’en a pas forcément besoin au départ, mais qu’il faudra comprendre aisément la structure d’un thème WordPress pour intégrer ensuite tous les éléments nécessaires à notre thème. Donc, au final, l’ensemble des tutoriels reprendra tout ce qu’il faut savoir ou presque pour créer son thème WordPress, dans une organisation somme toute assez logique.

L’objectif de départ était de créer une structure de thème pour ensuite, venir lui greffer différents éléments qui pourraient en faire un thème. C’est ce que j’ai fait pour mon livre sur WordPress, mais que je préfère éviter ici, pour reprendre une structure classique et largement plus abordable. Bien sûr cette organisation n’est pas parfaite, mais je pense que c’est celle qui sera la plus accessible au plus grand nombre.

Donc, j’espère que vous êtes prêts pour cette nouvelle étape dans la vie du blog. Depuis le temps que certains d’entre vous attendent, je me doute bien que vous devez être prêts et que vous n’avez sûrement pas attendu tout ce temps sans apprendre de votre côté !! Mais quoi qu’il en soit, j’espère sincèrement que cette nouvelle série de tutoriels vous apportera autant que ce qui a été fait il y a 2 ans et qui a beaucoup apporté à la notoriété de ce blog.

Encore merci pour votre patience et fidélité et je vous donne rendez-vous la semaine prochaine pour le premier tutoriel !!

Avec la mode des thèmes magazines on a vu également l’arrivée des vignettes, ou miniatures sur les blogs. Ca permet d’avoir un aperçu visuel de l’article. Depuis, même les thèmes plus “blog” tendent à les utiliser. Au cours de différents projets, j’ai eu l’occasion d’essayer différentes techniques pour afficher ces miniatures, et à chaque fois, avec plus ou moins de succès… Entre celles qui utilisent les images insérées dans les articles et celles qui utilisent les champs personnalisés, difficile de trouver une solution idéale. Pourtant, il en est une que je réutilise, c’est TimThumb.

TimThumb est un script développé dans le cadre du projet de Darren Hoyt pour Mimbo Pro. Celui-ci fonctionne avec les champs personnalisés. Alors, bien sûr, vous allez me dire qu’il est assez simple d’utiliser les champs personnalisés pour afficher des vignettes. C’est vrai, mais ici, vous n’allez mettre qu’une image dans le champ personnalisé, et le script va redimensionner automatiquement cette image en fonction des paramètres que vous aurez défini et surtout en fonction des pages sur lesquelles afficher ces vignettes. 

Prenons un exemple. Imaginez que vous souhaitiez utiliser des vignettes sur votre pages d’accueil mais aussi sur vos pages de catégories, et que vous souhaitiez que ces vignettes soient de taille différentes… mmm ? Et bien TimThumb redimensionne tout ça en fonction des paramètres attitrés à chaque type de page. De quoi se simplifiez la vie…

Page d'accueil Mimbo Pro

Page catégorie Mimbo Pro

Alors, comment ça s’installe ?

Tout d’abord, vous allez télécharger le script qui se trouve ici. Ensuite, vous l’uploadez sur votre serveur et vous le placez dans un dossier “scripts”, au même niveau que les autres fichiers du thème.

1

yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php

Toujours dans ce dossier “scripts”, vous allez en créer un nouveau et l’appeler “cache”.

1

yourdomain.com/wp-content/themes/your-theme/scripts/cache/

Ensuite, vous allez ajouter quelques lignes de code dans votre thème pour appeler le script et le faire fonctionner sur vos images. Vous allez placer ce code dans le loop, bien entendu, et au niveau où vous souhaitez faire apparaître les vignettes. Ici, vous avez trois possibilités:

1. N’affiche que la vignette, sans lien

1
2
3
4
5
6
7

<?php // This will show only the image. Alter the width and height (in both places) to your needs. ?>
 
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb"> 
		<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
	</div>
<?php } ?>

2. Affiche la vignette avec lien vers l’URL de l’article

1
2
3
4
5
6
7

<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
 
        <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb"> 
		<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> 
	</div>
<?php } ?>

3. Affiche la vignette avec lien vers URL à déterminer

1
2
3
4
5
6
7
8

<?php 	// This will show the image and link it to anything you place into another custom field of "imglink". 
		// Alter the width and height (in both places) to your needs.    ?>
 
<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
	<div class="postthumb"> 
		<a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
	</div>
<?php } ?>

Une fois le code inséré au bon endroit dans le loop, vous allez pouvoir rédiger un article dans lequel vous allez paramétrer un champ personnalisé pour vos vignettes. Vous allez donc uploader une image et la stocker dans le dossier wp-content/uploads.

Ensuite, au niveau du champ personnalisé, vous allez saisir “thumb” comme “clé” du champ” et l’URL complète de l’image comme “valeur”. Si vous souhaitez envoyer le lien de la vignette vers une autre URL, donc si vous choisissez l’option 3, vous devrez saisir un autre champ personnalisé avec “imglink” comme “clé” et l’URL comme “valeur.

Champ Personnalisé à saisir pour TimThumb

Vous enregistrez ensuite le tout, publiez votre article et si tout va bien, une vignette de cette image aura été créé et appraîtra au bon endroit sur votre page web. Ensuite, à vous de mettre en style tout ça !!

ce qui est bien avec TimThumb c’est bien entendu qu’il génère automatiquement les vignettes mais que vous pouvez facilement en déterminer les tailles et la qualité. Dans le code présenté ci-dessus, vous avez plusieurs paramètres:

• w: largeur,
• h: hauteur,
• zc: rognage de la photo en zoomant dessus… ( 0 ou 1 )
• q: qualité de la vignette ( 75 par défaut et maximum à 100 ).

Voilà, je crois que j’ai fait le tour de TimThumb, si vous avez des questions n’hésitez pas !!

Source: Chad Coleman

Si vous utilisez un menu de navigation horizontal dans votre thème, vous voudriez probablement “surligner” la page sur laquelle vous êtes. Beaucoup de thèmes le font déjà mais si vous avez réalisé vous-même votre menu, vous ne savez peut-être pas comment surligner ces pages. Dans WordPress, il existe des règles qui génèrent automatiquement des classes qui seront utilisées dans la feuille de style. Celles-ci sont: .current_page_item et .current_page_parent si vous avez des pages “enfants” ou autrement appelées sous pages.

En entrant ces balises dans votre feuille de style, les pages qui se seront affichées seront surlignées dans le menu.

Afficher la page ou la catégorie dans le menu (source image: snoupix.com)

Mais comment fait-on si on utilise les catégories dans le menu à la place des pages ?

Le processus est globalement le même. WordPress crée automatiquement des balises qui sont en autres : .current-cat et .current-cat-parent. Ainsi, quand vous allez cliquez sur une catégorie dans votre menu de navigation, vous allez faire afficher les articles de cette catégorie et surlignez par là même cette catégorie dans le menu. Très intéressant pour que le visiteur s’y retrouve.

Cependant, dès que l’on clique sur un article à partir de cette page de catégorie, la catégorie à laquelle appartient l’article n’est plus surlignée. Il serait intéressant de pouvoir la surligner et donc de la mettre “en avant”. Ca pourrait être un plus pour le visiteur et s’il arrive directement sur la page de l’article, ça peut l’inciter à aller chercher plus loin dans la catégorie…

Le problème ici est que WordPress ne gère pas automatiquement de classe qui permettrait de dire: “pour cet article, afficher la catégorie associée, avec une classe du style .current-category. Je suis donc parti à la recherche d’une solution sur le web et je suis tombé sur un plugin. N’étant pas un grand fan des plugins à tout va, j’ai continué mes recherches et je suis tombé, comme souvent, sur un super topic sur le forum US de WordPress. Et là, j’ai trouvé la solution.

En fait, il suffit de créer quelques lignes de code pour dire à WordPress d’afficher la classe .current-cat au niveau de la page article. Le code est le suivant:

<?php
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
wp_list_categories('hierarchical=1&use_desc_for_title=0&orderby=name&title_li=&depth=3&current_category='.$myCat);
?>

Vous l’insérez dans votre entête, au niveau du menu de navigation, à la place du code qui permet d’afficher les catégories. Ensuite, à vous de choisir quels paramètres attribuer à l’affichage de ces catégories.

Et plus bas, un autre utilisateur propose une solution encore plus intéressante pour ceux qui affichent à la fois les pages et les catégories dans leur menu de navigation:

<?php
if  (!is_page() && !is_home()){
	$catsy = get_the_category();
	$myCat = $catsy[0]->cat_ID;
	$currentcategory = '&current_category='.$myCat;
}
wp_list_categories('hierarchical=1&use_desc_for_title=0&exclude=12&depth=1&orderby=id&title_li='.$currentcategory);
?>

Ici, le code prend en compte le fait que l’on ne soit ni sur une page ni sur la page d’accueil. Encore une fois, adaptez les paramètres à vos besoins.

A partir de là, sur les pages d’articles, si vous avez bien paramétré les classes dans votre feuille de style, la catégorie à laquelle appartient l’article devrait être surlignée. Attention, pour ceux qui utilisent les catégories multiples pour un article, la catégorie surlignée sera la première dans l’ordre alphabétique, sauf si vous dîtes à WordPress d’en faire autrement.

Petit truc qui peut s’avérer très utile si vous utilisez un menu de navigation et encore plus pour ceux qui ont un thème magazine sur lequel on peut facilement se perdre si le thème n’a pas de “breadcrumb”…

Il y a quelques jours, adabwebmaster m’a demandé s’il était possible de traduire mes tutoriels de création de thème WordPress en arabe. J’avais déjà eu une demande similaire en Avril pour les traduire en Chinois. Je n’ai jamais eu de nouvelles par la suite mais ce coup-ci, c‘est déjà dans la boîte !

Pour l’instant, il n’y a qu’un article de traduit, mais le reste devrait suivre prochainement. Je trouve ce genre d’initiative intéressante parce que ça permet à d’autres pays ou cultures de pouvoir profiter de ces informations, et j’avoue que c’est un côté du web que j’aime bien: le partage à l’international.

Troisième et dernière partie concernant les changements à venir sur le blog ! En fait, ici, ce n’est pas vraiment un changement mais plutôt une remise à flot, celle des tutoriels. Ca a été pendant longtemps le coeur de ce blog, que ce soit pour la création de thèmes mais aussi pour tout ce qui concerne WordPress. Si on a largement fait le tour de la plateforme, il en est autrement du blogdesign. Et je promets depuis bien longtemps une nouvelle série de tutoriels qui ne voit jamais le jour.

La faute principalement à mon emploi du temps parfois trop chargé qui ne me permet pas de prendre le temps de rédiger ces billets qui demandent pas mal de disponibilité. La faute aussi à un exemple de thème que je ne trouvais pas. En effet, pour pouvoir créer une série de tutoriels autour de la création d’un thème, il faut déjà en avoir un !! Alors, j’ai eu pas mal d’idées mais je trouvais à chaque fois qu’elles ne permettaient pas d’aller assez loin que ce soit au niveau de la conception de la maquette, des CSS ou encore de la personnalisation de WordPress.

J’ai finalement trouvé le thème idéal via un de mes projets qui va voir le jour en septembre. Ce sera également un bon moyen de le promouvoir ! Ce thème nous permettra d’aborder le blogdesign sur WordPress en profondeur:

• Choix du design et de l’ergonomie
• Création d’un prototype
• Réalisation de la maquette
• Intégration du design
• Mise en place des fonctionnalités personnalisées de WordPress (champs personnalisés, extraits, etc. )

Les premiers tutos arriveront quelques jours après le lancement du projet, donc courant septembre. J’ai d’ores et déjà prévu de l’espace dans mon emploi du temps à consacrer à ces articles. J’espère qu’ils vous plairont !

Cet article est rédigé par Maxime, étudiant dans les technologies de l’information et de la communication, et qui tient le blog http://blogtoolbox.fr/ où il parle de blogging : comment améliorer son blog en termes de référencement, design, promotion, concept, wordpress, etc.

Ajouter une description de chaque auteur à la fin de leurs articles respectifs est un bon moyen de donner des informations pratiques aux lecteurs quant à savoir qui et ce que fait l’auteur de cet article, et tout cela sans renvoyer vers une page “A propos”.

Si vous êtes seul rédacteur sur votre blog, cette petite description n’a pas grand intérêt (une page à propos serait plus approprié), mais lorsque vous êtes plusieurs rédacteurs ou que vous avez beaucoup d’invités (Monétiweb par exemple) cela peut-être très utile.

1. Ecrire la bio de l’auteur

Dans votre gestion des utilisateurs WordPress, vous avez certainement du apercevoir la boite “A propos de l’utilisateur”, et c’est cette boite qui va nous permettre de réaliser ce que l’on veut. Il suffit dans un premier temps de remplir la biographie de présentation et ceci pour chaque compte utilisateur :

2. Afficher la bio de l’auteur

Ensuite, nous allons utiliser le tag permettant d’appeler la biographie de l’auteur de l’article :

Ce tag n’accepte aucun paramètre, il ne renvoie que la biographie brute de l’auteur.
On pourrait s’arrêter simplement là, mais on va quand même styler cette boite de texte à l’aide de quelques lignes de CSS pour la différencier de l’article (qui sera expliqué un peu plus loin). On lui ajoute donc une classe et notre code devient ainsi :

Comme nous voulons ajouter la petite note d’informations biographiques à la fin de chaque article, il nous faut donc ajouter ces trois lignes de code dans le fichier index.php de notre thème. Le bon endroit se situe juste après :

Il est probable que ce soit légèrement différent selon le thème utilisé, mais il suffit de placer ces trois ligne après le tag qui affiche le contenu de l’article (the_content).

Nous obtenons à présent notre petite bio à la fin de nos articles :

3. Créer la classe CSS correspondante

Ca fonctionne et ca tient la route mais c’est pas superbement mis en valeur. Nous passons donc maintenant à la classe CSS authorbio pour intégrer proprement nos bios à notre thème. Nous pouvons ainsi changer la police, les couleurs, les bordures, etc. Pour l’exemple, voici le code CSS que j’ai utilisé (ajouté au fichier style.css du thème) :

.authorbio {
color: #777;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 5px;
}

4. Et voilà le résultat

Ce qui transforme la description brute de base en une réelle zone à par entière dans le contenu de l’article.

Si vous voulez également faire apparaitre les bios sur les pages d’articles seuls, il suffit de réaliser la même manipulation, mais cette fois-ci sur le fichier single.php de votre thème.

Pour finir, je vous renvoie vers le codex WordPress relatif au tag the_author, vous pourrez ainsi utiliser d’autres tags pour appeler les différentes informations disponibles dans l’onglet “Utilisateurs” (nom complet, pseudo, email, messagerie instantanée, etc).

Source: Hack WordPress

Et oui, le temps a passé depuis la première partie de ce tutoriel qui remonte au 13 novembre dernier…

Pour faire suite aux différents aspects abordés la dernière fois, nous allons voir aujourd’hui principalement le contenu de notre sidebar et faire un petit tour sur la page article. Ensuite, il sera temps de repasser sur les croquis et d’aborder les premières étapes avec Photoshop.

Pour commencer (ou recommencer) et comme vous êtes peut-être nombreux à avoir loupé la première partie de ce tutoriel, je vous remets ci-dessous, les premières parties abordées et j’enchaînerais directement ensuite avec les parties suivantes (ça m’apprendra é prendre tellement de temps entre mes tutos moi… ).

Aujourd’hui, on va donc terminer notre première ébauche de thème. On a déjà un premier “jet” que l’on va améliorer en plaçant de manière plus précise les éléments du blog. Encore une fois, ici on va surtout se poser pas mal de questions d’architecture plutôt que de design. Il va être important de bien positionner les différentes parties du blog, leur donner une première dimension, afin de travailler de manière plus efficace dès que l’on passera sur Photoshop. On va donc reprendre les différentes “boîtes” du blog et voir comment les “articuler” et les mettre en valeur.

Plutôt que de faire de longs paragraphes à vous expliquer les pour et les contre de chaque technique ou de chaque design, j’ai préféré vous faire une sorte de To Do List ou checklist que vous pourriez réutiliser à chaque création de site web ou de blog. Cette liste n’est pas exhaustive et je l’améliorerai en fonction de vos remarques.

Tous ces points ne vont pas être cruciaux pour réaliser le croquis sur un carnet. Mais par contre, ils vont sûrement vous aider à trouver des idées pour la construction de votre blog:

1. Formes générales

• Quel type de blog souhaitez-vous ? 1, 2, 3 colonnes ?
• Quelle largeur pour chacune des colonnes ( contenu et sidebar(s)) ?
• Quelle largeur pour ce blog ? Fixe ou variable ?
• Forme générale du blog ? Plein écran de haut en bas ? Grande fenêtre distante des bords supérieurs et inférieurs ? Coins droits ? Coins arrondis ?

2. Premiers éléments graphiques

• Quel type de couleur souhaiteriez-vous donner à votre blog ? Chaud ? Froid ? Frais ? Pastel ? Minimaliste ? etc… Essayez d’avoir une cohérence entre le sujet du blog et le style que vous allez choisir. Le succès de votre blog en dépendra quand même un peu…
• Quel type de “background” souhaiteriez-vous mettre en place ? sombre ? clair ? uni ? dégradé ? pattern ?
• Avez-vous pensé à un logo pour votre blog ? Souhaitez-vous mettre en valeur une icône, un logo que vous pourriez réutiliser par exemple sur un avatar ? Ou alors preférez-vous peut-être travailler sur le titre du blog directement en choisissant une police qui donne à votre blog une identité particulière ?

3. La page d’accueil, bloc par bloc…

3.1 le header

• Que contient votre header ? Une image ? Un fond uni ? dégradé ?
• Quelle hauteur pour votre header ? 50, 100, 200, 300 pixels ? Plus peut-être ?
• Vous avez opté pour un logo ou une customisation du titre du blog ?
• Ce titre du blog, va-t-il apparaître à gauche, au centre ou à droite de l’entête ?
• Avez-vous pensé à une description pour cet entête ? Un slogan ? Une phrase personnelle ? Une citation ?
• Avez-vous pensé à y insérer un formulaire de recherche ? oui ? non ?
• Voulez-vous intégrer un menu de navigation dans votre header ? En haut de la page ? Sous le titre, et avant le contenu ? Centré à gauche ou à droite ?
• Avez-vous l’intention de monétiser le header ? Si oui, pensez à garder de la place en fonction du format choisi.

3.2 Le contenu

3.2.1 Aspects gé;néraux

• Je l’ai déjà dit plus haut mais je le redit ici: quelle largeur pour votre contenu ? 500, 600, 700 pixels ? Quelle importance voulez-vous lui donner par rapport à la (ou les) sidebars ?
• Quel type de police allez-vous utiliser ? Serif ? Sans-Serif ? On peut se poser la question pour l’ensemble du blog bien entendu, mais c’est au niveau du contenu que le choix va se faire. On est sur un blog pour lire des articles. Le choix de la police du texte est donc très importante.
• Quelle taille pour cette police ? Quelle couleur ? Une justification ? Aligné à gauche ? Espace entre les lignes ?

3.2.2. Le titre des articles

• Quelle police ? Elle peut tout à fait être différente de celle du texte. Quelle taille ? Quelle couleur ? Souligné, pas souligné ?

3.2.3. Les données méta

Ce sont la date, les catégories, les tags ou encore les commentaires…

• Apparaissent-ils sous le titre ? Sous le contenu de l’article ? Sont-ils séparés les uns des autres ?
• Où apparaît la date ? Sous quel format ? Quelle taille ?
• Idem pour les commentaires et les tags..

3.2.4. Monétisation du contenu

• Vous avez prévu des encarts dans le contenu pour la publicité ? Au-dessus ? Au-dessous ? Directement dans l’article ?

3.2.5. Spécial Page d’accueil

Avec l’arrivée des thèmes “magazine”, on assiste à une remise en question de la page d’accueil du blog. Peut-être auriez-vous envie de faire quelque chose de différent ? Ne pensez pas trop aux difficultés techniques pour le moment. Essayez juste d’apercevoir ce qui vous ferait plaisir !

• Quelle organisation pour le contenu ? Plusieurs articles à la suite ? Sur le même modèle que la page d’article ?
• Combien d’articles ? 5 ? 10 ? plus ?
• Flux complets ou flux tronqués ?
• Ajout d’un “thumbnail” peut-être, une image d’illustration pour vos articles ?
• Et pourquoi pas donner un aspect différent à certains articles ?
• Un article “Ã la une” peut-être ? Ou plusieurs ? A moins que vous souhaiteriez juste “customiser” le dernier article paru ?

Il y a vraiment beaucoup de possibilités à envisager pour le contenu de la page d’accueil. Pour tout ça, le croquis pourra énormément vous aider à trouver des idées. Je le répête mais ne vous lancez jamais tête baissée sur le logiciel, ça va considérablement perturbé vos pensées et comment vous envisagez votre blog. Par la suite, c’est grâce au logiciel que vous pourrez confronter vos idées avec la réalité, mais pour le moment, on fait une sorte de brainstorming. Permettez à votre créativité de s’exprimer LIBREMENT.

3.3 La sidebar

L’été dernier, j’ai posé une question qui me semblait intéressante dans le sens que le rôle de la sidebar est vraiment très différent d’un blog à un autre. Les réponses étaient très intéressantes et plutôt que de vous raconter une nouvelle fois 36 000 choses, je pense que le mieux est de vous proposer les réponses qui m’avaient été faites par différents blogueurs.

Je pense que d’une certaine manière, il faut se poser les questions suivantes:

• A quoi doit me servir ma sidebar ?
• Combien de colonnes pour ma sidebar ?
• Ai-je envie d’y afficher mes abonnés ? Mes fidèles lecteurs via MyBlogLog par exemple ?
• Quels aspects du blog me sont intéressants de mentionner ? Les derniers articles ? Les meilleurs articles ? Les derniers commentaires ? Les meilleurs commentateurs ?
• Est-ce que la blogroll a toujours de l’intérêt ? En tout cas, est-ce que j’estime important d’en avoir une ?

La sidebar a une importance qui n’est pas négligeable. Il est donc important de faire les bons choix dans un souci d’efficacité vis à vis du visiteur, mais aussi pour ce qui est de l’ergonomie générale du site. Une sidebar trop chargée en texte ou en images peut amener plus de confusion qu’autre chose.

4. La page Article

Pour pas mal de personnes, réaliser le design d’un blog revient souvent à plancher sur la page d’accueil… si si, je vous assure !! Il ne faudrait tout de même pas négliger la page article qui correspond bien souvent au plus grand nombre de visites sur votre blog !

Ici, différents points à voir:

• Est-ce que vous souhaitez garder le même design que sur votre page d’accueil ? Il se pourrait que vous souhaitiez en avoir un légèrement différent… Bien penser à tout ça car l’intégration sera elle-aussi différente dans ce cas-là.
• Idem pour le contenu de la sidebar… Même contenu que sur la page d’accueil (si page d’accueil classique) ou alors voulez-vous vous concentrer sur le contenu même de l’article et donc ne proposer que des liens dans la sidebar qui pourraient DIRECTEMENT intéresser le visiteur ?
• Quel style pour les commentaires ? Ils ont une une très grande importance sur les blogs. Ceux sont eux qui créent les discussions. Il va donc falloir bien penser à leur ergonomie pour attirer les commentaires et qu’ils soient agréables à lire.

Sur cette page, hormis la sidebar, on va donc avoir deux grandes parties, l’article lui-même et les commentaires. Pour ce qui est de l’article, on va souvent reprendre les mêmes données que pour son affichage sur la page d’accueil, c’est-à-dire même police, même taille de police et tout ce qui concerne l’alignement.

Cependant, dès lors que l’on a une page d’accueil unique, de type “magazine” ou pas, on va devoir repenser entièrement cette nouvelle page. Et dans ces cas, souvent, on doit penser ici au confort de lecture que l’on a mentionné plus haut.

Ici, on va aussi se demander s’il ne serait pas intéressant de garder un peu plus longtemps notre cher visiteur….

4.1 Renforcer l’expérience visiteur

Et oui, comme on l’a déjà vu plusieurs fois, une grande partie des visites se font sur la page article de votre blog. Et même si le visiteur arrive sur votre page d’accueil, il y a de grandes chances qu’il se rende sur un de vos articles. Il va donc falloir travailler sur ce point pour garder, voir fidéliser ce visiteur. Pour cela, on va devoir se poser les questions suivantes:

• Que puis-je faire au niveau du contenu pour “attiser” le visiteur ?
• Ajouter un lien en bas de l’article pour l’inviter à s’abonner au blog ?
• Lui donner la possibilité de découvrir d’autres articles sur le même sujet ?
• Trouver la technique pour l’inviter à commenter ?
• D’ailleurs, à ce niveau-là, ne serait-il pas utile d’utiliser un plugin de notification par email pour permettre à ce visiteur de revenir facilement sur le blog et ainsi l’inviter à participer à la discussion ?

Il y a vraiment pas mal de techniques que l’on peut utiliser pour fidéliser ce visiteur, que ce soit dans l’article même, sous l’article, au niveau des commentaires, ou encore dans la sidebar.

4.2 Les commentaires

On vient d’en parler largement au dessus, mais il n’est pas inutile de rappeler ici l’importance des commentaires. Il va donc être primordial de donner envie au visiteur de laisser un commentaire ou tout au moins de lire ceux qui sont déjà présents sur le blog. Regardons d’un peu plus près l’ergonomie d’un commentaire. On peut avoir les infos suivantes:

• le nom du commentateur
• la date du commentaire
• le numéro du commentaire
• le contenu du commentaire
• la photo du commentateur…

Toutes ces infos sont à prendre en compte, mais plus important encore, il faudra les disposer dans le design. Donc, une fois de plus, n’hésitez pas à prendre votre carnet, et à faire des croquis pour penser las positionnement de chacun de ses points. Et par dessus tout , bien penser au confort de lecture. Suivre une discussion sur un blog n’est pas toujours aisée, veillez bien à ce que l’ensemble soit facilement lisible. Pas besoin de trop de fioritures !!

5. Conclusion

On pourrait passer des heures et des jours pour penser à tout. Ici, je n’ai pas mentionner les autres pages du blog par exemple, celles notamment des catégories, des archives ou la fameuse page d’”A Propos”. Mais je pense qu’avec tout ce qu’on a évoquer ci-dessus, vous avez suffisamment de cartes en main pour concevoir par vous-même ces différentes pages. Pensez toujours au visiteur, c’est lui le plus important. Pensez à son confort de lecture.

Donc voilà, maintenant, prenez le temps de penser votre blog via votre carnet de croquis. D’ailleurs, à ce niveau-là je ne peux que vous conseiller les célèbres Moleskine. Je les utilise depuis pas mal d’années pour mes illustrations et quelques peintures, et ce sont vraiment des outils indispensables !!

Dans la prochaine étape, on va prendre notre croquis et commencer à lui donner une forme sur Photoshop !!

En octobre, j’ai commencé ma deuxième partie de tutoriels concernant la création d’un thème WordPress de A à Z en abordant maintenant le design et notamment la création d’une maquette sur Photoshop et son intégration par la suite. J’ai commencé avec un premier tutoriel sur une checklist à prendre en compte, et puis ma fille est arrivée et je ne suis pas allé plus loin. Toutes mes excuses auprès de ceux qui ont attendu tout ce temps…

Aujourd’hui, je veux remettre ces tutoriels sur le devant de la scène. Et une de mes priorités pour Fran6art en cette année 2008 est de bosser sérieusement ces tutos. Alors, en quoi tout cela va consister et comment tout ça va-t-il être organisé ?

En fait, je suis en train de bosser sur un nouveau projet personnel de blog et je voudrais profiter de l’occasion pour utiliser ce projet comme fil conducteur. Ca veut dire que tout au long des tutos j’utiliserai cet exemple comme référence. D’un point de vue pratique, l’ensemble tournera autour des différentes étapes suivantes:

1. Analyse du besoin (quel blog pour quel sujet par exemple…)
2. Première maquette papier
3. Passage du papier à Photoshop
4. Réalisation d’une première maquette Photoshop
5. Prise en compte des contraintes techniques (html, css et autres)
6. Intégration du thème (html, css et javascript)
7. Suivi des bugs et hacks Internet Explorer

Bien sûr, rien n’est définitif, et d’autres aspects du design pourront être abordés.

Le ton des tutos restera simple et accessible à tous, et le fait de travailler autour d’un exemple concret sera un grand plus pour permettre à tous de comprendre comment j’ai réalisé ce design.

Cependant, une question se pose à moi. Ne devrais-je pas créer un forum pour toutes les questions autour du blogdesign WordPress ? J’y pense depuis un bon moment à vrai dire. L’idée serait de proposer un forum complet sur la customisation de WordPress. On y retrouverait un sous-forum pour toute la partie PHP, html et CSS abordée l’année dernière, un autre pour tout le côté “design”.

Enfin, je voudrais créer une sorte de groupe de discussion autour de ce qu’on appelle l’expérience utilisateur et de l’accessibilité. Le design est important mais il ne faut surtout pas oublier de se mettre à la place du visiteur et trouver le meilleur compromis pour faciliter sa visite et lui permettre d’accéder le plus facilement à l’information qu’il recherche.

Voir aussi si on n’y parlerait pas référencement pour les blogs WordPress.

Mais j’hésite encore. Je n’ai pas forcément beaucoup de temps à y consacrer et j’aurais sûrement besoin d’aide pour la modération. Mais de l’autre côté, le blog c’est super pour exposer des idées, lancer des discussions dans un sens, c’est-à-dire blogueur vers lecteurs mais la réciproque est beaucoup plus difficile. Beaucoup laissent des commentaires (certains billets ont 150 commentaires !!) mais leur question est souvent noyée dans la masse et peut de monde y répond.

Si je créais ce forum, je voudrais vraiment que ce soit un lieu communautaire autour de la customisation de WordPress et de réflexion autour de l’évolution des blogs. Ca veut donc dire que je ne devrais pas être le seul à y participer…

Donc, l’idée est lancée et j’y réfléchis de manière très sérieuse en ce moment. J’aimerais donc avoir vos avis sur ce sujet. Utile ? Inutile ? Voué au succès ? à l’échec ? Vos commentaires me seront très utiles !

Le blogdesign est vraiment mon fil conducteur pour cette nouvelle année 2008. C’est aussi ce qui m’intéresse le plus. Donc, je vais me mettre à bosser sérieusement sur ces tutos dès maintenant et j’attends avec impatience vos retours sur ce projet de forum.

Encore merci pour votre fidélité au blog.

Vous êtes plusieurs à me les avoir demandé depuis plusieurs mois et j’ai fini par céder. Pendant très longtemps, je me suis dit que ce n’était pas une bonne chose de fournir les fichiers complets du thème réalisé à travers les tutoriels. Je me suis dit que la plupart récupéreraient le dossier et ne s’intéresseraient plus au code et au fonctionnement de WordPress.

Mais si je pense toujours que certains le feront, il existe aussi pas mal de personnes qui ont ou risquent d’abandonner parce qu’ils n’ont pas réussi à passer une étape. Et là, je trouverais ça dommage que tout le monde ne puisse pas créer son propre thème tout simplement parce qu’il bute sur une erreur qu’il ne trouve pas.

Donc, vous trouverez ci-après un zip des fichiers du thème créé dans les tutos. Vous pouvez les utiliser comme vous le souhaitez. Dans les fichiers proposés ici, il y a un lien pointant vers Fran6art dans le footer du thème. Vous n’êtes pas obligé de le laisser, mais si vous le laissiez ce serait un geste sympa pour tout le travail effectué.

Pour revenir au thème en tant que tel, celui-ci est vraiment très simple et pas destiné à une utilisation en l’état. Il est uniquement le reflet des 23 tutoriels et exercices et est un point de départ pour réaliser vous-même votre design de blog.

Le thème a été testé sous Safari, Firefox, IE6 et IE7 et est valide XHTML et CSS. Au niveau des CSS justement, j’ai apporté un petit plus que l’on retrouve sur le thème Sandbox et que j’ai particulièrement apprécié. C’est la possibilité de mettre la sidebar à gauche ou à droite en choisissant une 2ème feuille de style, reprenant les informations de positionnement de cette sidebar.

Par défaut, elle est positionnée à droite. Mais si vous souhaitez la positionner à gauche, il vous faut aller dans votre feuille de style, style.css et au niveau de la ligne suivante:

@import url('layouts-blog/1col-droite.css');

modifiez l’URL pour qu’elle pointe vers le fichier 1col-gauche.css, toujours dans le dosser “layouts-blog”. C’est un petit plus pour les intéressés !!

Voilà, je crois que c’est tout ! Si vous remarquez des erreurs, n’hésitez pas à me le faire savoir ci-dessous, dans les commentaires !

Désolé si les tutoriels en vue de la création d’un thème avec Photoshop mettent du temps à venir, mais ils demandent beaucoup de temps de réflexion et de rédaction et en ce moment, je suis vraiment très pris. Je vais essayer de faire un peu plus rapide sur les prochains, mais je ne peux rien vous promettre !

Plus je travaille pour le web et plus je trouve que le croquis est important. On ne s’en rend pas toujours bien compte quand on veut créer un simple blog parce que, finalement, le layout reste souvent assez classique et on va reprendre un schéma “traditionnel” pour ce genre de site web. Si c’est ce que l’on recherche, effectivement, l’intérêt du croquis est limité. Par contre, si vous souhaitez créer un design original, un peu comme les thèmes de type “magazine” que l’on voit fleurir ces derniers temps, alors là, le passage par le papier/crayon est primordial.

Aujourd’hui, on va donc terminer notre première ébauche de thème. On a déjà un premier “jet” que l’on va améliorer en plaçant de manière plus précise les éléments du blog. Encore une fois, ici on va surtout se poser pas mal de questions d’architecture plutôt que de design. Il va être important de bien positionner les différentes parties du blog, leur donner une première dimension, afin de travailler de manière plus efficace dès que l’on passera sur Photoshop. On va donc reprendre les différentes “boîtes” du blog et voir comment les “articuler” et les mettre en valeur.

Plutôt que de faire de longs paragraphes à vous expliquer les pour et les contre de chaque technique ou de chaque design, j’ai préféré vous faire une sorte de To Do List ou checklist que vous pourriez réutiliser à chaque création de site web ou de blog. Cette liste n’est pas exhaustive et je l’améliorerai en fonction de vos remarques.

Tous ces points ne vont pas être cruciaux pour réaliser le croquis sur un carnet. Mais par contre, ils vont sûrement vous aider à trouver des idées pour la construction de votre blog:

1. Formes générales

• Quel type de blog souhaitez-vous ? 1, 2, 3 colonnes ?
• Quelle largeur pour chacune des colonnes ( contenu et sidebar(s)) ?
• Quelle largeur pour ce blog ? Fixe ou variable ?
• Forme générale du blog ? Plein écran de haut en bas ? Grande fenêtre distante des bords supérieurs et inférieurs ? Coins droits ? Coins arrondis ?

2. Premiers éléments graphiques

• Quel type de couleur souhaiteriez-vous donner à votre blog ? Chaud ? Froid ? Frais ? Pastel ? Minimaliste ? etc… Essayez d’avoir une cohérence entre le sujet du blog et le style que vous allez choisir. Le succès de votre blog en dépendra quand même un peu…
• quel type de “background” souhaiteriez-vous mettre en place ? sombre ? clair ? uni ? dégradé ? pattern ?
• Avez-vous pensé à un logo pour votre blog ? Souhaitez-vous mettre en valeur une icône, un logo que vous pourriez réutiliser par exemple sur un avatar ? Ou alors preférez-vous peut-être travailler sur le titre du blog directement en choisissant une police qui donne à votre blog une identité particulière ?

3. Bloc par bloc…

3.1 le header

• Que contient votre header ? Une image ? Un fond uni ? dégradé ?
• Quelle hauteur pour votre header ? 50, 100, 200, 300 pixels ? Plus peut-être ?
• Vous avez opté pour un logo ou une customisation du titre du blog ?
• Ce titre du blog, va-t-il apparaître à gauche, au centre ou à droite de l’entête ?
• Avez-vous pensé à une description pour cet entête ? Un slogan ? Une phrase personnelle ? Une citation ?
• Avez-vous pensé à y insérer un formulaire de recherche ? oui ? non ?
• Voulez-vous intégrer un menu de navigation dans votre header ? En haut de la page ? Sous le titre, et avant le contenu ? Centré à gauche ou à droite ?
• Avez-vous l’intention de monétiser le header ? Si oui, pensez à garder de la place en fonction du format choisi.

3.2 Le contenu

3.2.1 Aspects généraux

• Je l’ai déjà dit plus haut mais je le redit ici: quelle largeur pour votre contenu ? 500, 600, 700 pixels ? Quelle importance voulez-vous lui donner par rapport à la (ou les) sidebars ?
• Quel type de police allez-vous utiliser ? Serif ? Sans-Serif ? On peut se poser la question pour l’ensemble du blog bien entendu, mais c’est au niveau du contenu que le choix va se faire. On est sur un blog pour lire des articles. Le choix de la police du texte est donc très importante.
• Quelle taille pour cette police ? Quelle couleur ? Une justification ? Aligné à gauche ? Espace entre les lignes ?

3.2.2. Le titre des articles

• Quelle police ? Elle peut tout à fait être différente de celle du texte. Quelle taille ? Quelle couleur ? Souligné, pas souligné ?

3.2.3. Les données méta

Ce sont la date, les catégories, les tags ou encore les commentaires…

• Apparaissent-ils sous le titre ? Sous le contenu de l’article ? Sont-ils séparés les uns des autres ?
• Oû apparaît la date ? Sous quel format ? Quelle taille ?
• Idem pour les commentaires et les tags…

3.2.4. Monétisation du contenu

• Vous avez prévu des encarts dans le contenu pour la publicité ? Au-dessus ? Au-dessous ? Directement dans l’article ?

3.2.5. Spécial Page d’accueil

Avec l’arrivée des thèmes “magazine”, on assiste à une remise en question de la page d’accueil du blog. Peut-être auriez-vous envie de faire quelque chose de différent ? Ne pensez pas trop aux difficultés techniques pour le moment. Essayez juste d’apercevoir ce qui vous ferait plaisir !

• Quelle organisation pour le contenu ? Plusieurs articles à la suite ? Sur le même modèle que la page d’article ?
• Combien d’articles ? 5 ? 10 ? plus ?
• Flux complets ou flux tronqués ?
• Ajout d’un “thumbnail” peut-être, une image d’illustration pour vos articles ?
• Et pourquoi pas donner un aspect différent à certains articles ?
• Un article “à la une” peut-être ? A moins que vous souhaiteriez juste “customiser” le dernier article paru ?

Il y a vraiment beaucoup de possibilités à envisager pour le contenu de la page d’accueil. Pour tout ça, le croquis pourra énormément vous aider à trouver des idées.

Dans la deuxième partie, on va s’attarder sur la ou les sidebars et notamment la page article. Et celui-là, je vous promets qu’il va arriver plus rapidement que les autres !

PS: la photo utilisée un peu plus haut est tirée d’un article de Ryan Imel, de Theme Playground, qui explique les premières étapes de création d’un de ses thèmes pour WordPress.

1. Affichez les articles d’une certaine catégorie en premier

Vous avez envie d’afficher que certains articles en haut de la page ? Disons vos meilleurs, indépendamment du flux chronologique ? Vous pouvez alors créer une catégorie, disons qu’elle s’appelle “A la une” et qu’elle porte l’ID = 10. On va donc créer une requête pour dire au premier loop, le “featured” d’afficher uniquement le dernier article de la catégorie “A la une”. Cette ligne sera la suivante:

1

?php query_posts('cat=10'); ?>

Alors, cette technique est très sympa parce que finalement vos meilleurs articles seront toujours en première ligne mais elle a un défaut. C’est que si le dernier article de la catégorie 10 est le dernier article paru, il va aussi apparaître en dessous. Et ça, vous ne le voulez pas… Alors, il n’y a qu’une solution, c’est que les articles de cette catégorie n’apparaissent pas dans le second loop. On peut pas pas dire à WordPress de mettre tous les articles sauf le dernier de la catégorie 10. Dommage…

Quoi qu’il en soit, il y a une autre idée que je trouve très intéressante. Plutôt que d’avoir un seul article en “une”, pourquoi ne pas mettre les 3 derniers articles de cette catégorie, c’est-à-dire vos préférés ? Et puis, les autres, on les mets en dessous, moins visibles peut-être. Une bonne idée serait de placer les articles à la une en avant, puis de n’avoir, par exemple, que les titres pour les articles suivants. C’est l’avantage de 2 loops car vous pouvez très bien retirer le contenu du deuxième loop pour décider de n’afficher que les titres.

Donc, vous voyez, il y a toute une panoplie de mises en page que l’on peut faire avec 2 loops et les “query_posts”. Personnellement, j’aime beaucoup, et je trouve que ça permet de bien mettre en avant les articles les plus importants.

2. Utilisation d’un plugin pour mettre en avant certains articles

Si la gestion par catégorie vous est trop compliquée, il y a une autre solution qui est celle d’utiliser un plugin, et ce plugin c’est WP-Sticky. Ce plugin va vous permettre de mettre n’importe quel article de votre blog devant les autres, en une sur la page d’accueil. Tout se gère via une nouvelle fenêtre à droite de votre éditeur de billets. Par défaut, tous les articles ont le statut “Normal”, mais bon, c’est pas trop ça qui nous intéresse non ?

Nous on va plutôt s’intéresser aux deux autres statuts, “sticky” et “announcement”. “Sticky” vous permet d’afficher en premier l’article du jour le plus important. C’est-à-dire que vous pouvez choisir l’article du jour que vous voulez voir apparaître devant les autres. Moi, j’y vois pas trop d’intérêt, mais bon, chacun fait comme il veut ! Par contre, la fonction “announcement”, je la trouve très intéressante. En fait, en cochant cette case, vous allez placer cet article devant TOUS les autres. Il va tout simplement apparaître en premier, que vous ayez un ou deux loops, il apparaîtra en premier. Donc, une bonne manière de mettre en avant ses articles sans avoir à jouer avec les catégories ! Et ce que j’aime bien avec cette technique, c’est que vous gardez la mise en forme du premier loop qui est utilisé pour afficher cet “announcement”. Et cet article restera en premier tant qu’il n’y aura pas d’autres “annonces”. A partir de là, l’article retournera à sa place dans le loop. Intéressant non ?

Donc, vous voyez que l’on peut faire des choses intéressantes sur sa page d’accueil ! Et c’est ce qu’on va voir en faisant ensemble le design sous Photoshop d’un thème pour WordPress. On fera une page d’accueil originale, avec un article mis en valeur, puis dessous les articles du loop, et à droite, les meilleurs articles du blog. Et vous savez quoi ? Je crois bien que ce thème sera téléchargeable !

En tout cas, n’hésitez pas à donner à votre page d’accueil un look différent. Les blogs c’est bien, mais les visiteurs scrollent très peu finalement. Alors, s’ils peuvent trouver un maximum d’information, rapidement, et dans un espace réduit, c’est ce qu’il y a de mieux. Ne pas le noyer sous des articles dont il se fout. Mais si on peut lui proposer le meilleur en arrivant sur la page d’accueil, le taux de “conversion” en sera plus grand.

Aujourd’hui, on continue la customisation de la page d’accueil, et je vais vous montrer différentes options qui vous permettront de choisir les articles qui y apparaîtront. On va en profiter pour découvrir une autre méthode pour changer l’apparence du premier post, mais on va également regarder comment modifier celle des articles du dessous.

Pour bien comprendre ce qu’on va faire, il faut bien comprendre comment fonctionne le “query_posts” de WordPress. J’ai écrit un article complet là-dessus, que je vous invite à aller lire avant de continuer ce tutoriel. Vous allez très vite comprendre que cette requête est très puissante et qu’elle va beaucoup nous aider pour mettre en place notre page d’accueil. Alors, tout d’abord, on va s’occuper du premier article.

1. Modifier l’apparence du premier article avec l’utilisation d’un 2ème loop

Si vous avez suivi l’ensemble des tutoriels sur la création d’un thème pour WordPress, vous savez probablement ce qu’est le loop WordPress. Si ce n’est pas le cas, dirigez-vous vers ces 3 articles . Ici, on va introduire un deuxième loop afin de différencier le premier article. Et le but ne va pas uniquement être de styliser différemment le premier article mais aussi et surtout de pouvoir choisir l’article que l’on veut voir apparaître ici.

“Alors, comment on introduit ce deuxième loop ?” Et bien, en fait, vous allez créer un nouveau template, que vous allez appeler “featured.php”. Vous allez y coller le contenu du template index.php de votre thème qui contient, normalement, le loop WordPress. Ou alors, si vous êtes sous k2, il se trouve dans le template “theloop.php”. Ici, on ne va garder que le loop. Donc éliminez toutes les données qui sont au-dessus de:

1

<?php while ( have_posts() ) : the_post() ?>

Et tout ce qu’il y en dessous de:

1

<?php endwhile ?>

Il vous reste ainsi le loop WordPress. A ce nouveau loop, on va lui donner des classes spécifiques pour ce qui est du titre de l’article, du contenu ou encore des méta-données. Avec des classes spécifiques, cet article apparaîtra différemment de ceux de l’index. Prenons un exemple. Vous voulez que votre premier article soit affiché avec un fond gris clair, disons de la couleur #ccc. Pour cela, il va vous falloir attribuer une classe spécifique dans le template “featured.php” pour que les changements apparaissent uniquement sur cet article et non sur les autres. Pour cela, vous pouvez très bien modifier la balise “post” mais le plus simple est d’ajouter une balise qui va l’entourer. En effet, comme ça, vous pouvez facilement ajouter un intitulé à ce premier post. Du coup, on obtient quelque chose comme ça:

1
2
3
4
5

<div class= "featured">
<div id="post-<?php the_ID() ?>
...
</div><!-- .post -->
</div>

Ensuite, allez dans votre fichier CSS, et tapez par exemple la ligne de code suivante:

1
2
3

div#featured {
background-color: #ccc;
}

Puis, avant de terminer le tout, il va falloir aller insérer la ligne de code dans le template index pour que ce deuxième loop soit visible. Pour cela insérez la ligne de code suivante avant le loop principal:

1

<?php include (TEMPLATEPATH . "/featured.php"); ?>

Mais si vous en restez là et que vous retournez sur la page d’accueil de votre blog, vous allez voir 2 fois vos articles apparaître, dont la première série avec un fond gris. C’est là que l’on va utiliser les “query_posts”. Si vous souhaitez uniquement afficher le dernier article dans le “featured”, vous allez alors dire au loop d’afficher uniquement 1 article. Il affichera automatiquement le dernier sorti chronologiquement. Pour cela, vous allez placer le code suivant AVANT le loop:

1
2

<?php query_posts('showposts=1'); ?></quickcode>
...puis le loop qui commence avec <quickcode:noclick><?php while ( have_posts() ) : the_post() ?>

Dans ce cas-là, vous allez n’avoir que le dernier article qui apparaît en gris en haut de votre page d’accueil. Mais ce n’est toujours pas fini, parce que cet article se retrouve aussi dans les articles du dessous puisqu’on est ici dans l’index et qu’il affiche l’ensemble des articles. Il va donc falloir lui dire de ne pas afficher le dernier article, grâce à la condition “offset” du “query_posts”.

Donc, allez dans votre fichier index, et toujours AVANT le loop, insérez la ligne de code suivante:

1

<?php query_posts('offset=1'); ?>

Rafraîchissez le navigateur, vous avez maintenant votre dernier article qui est “stylisé” différemment que les autres articles. Mais ce n’est que le début ! Demain, on verra différentes possibilités pour mettre cet article en lumière, pour véritablement le différencier des autres.