Dans la famille des “Cadeaux Web Design qu’il vaut mieux donner que jeter à la poubelle”, voici une petite liste d’astuces CSS glanées au fil du temps. Elles est destinée à tous les niveaux, et peut être agrandie par vous-même en m’envoyant vos supers astuces, ou bien par moi-même si jamais d’autres idées lumineuses me reviennent…

Après mon tutoriel CSS : l’Art et la Science, voici un tutoriel sur l’autre partie importante de mon expérience d’intégrateur : WordPress le Tutoriel.

Je considère mes connaissances comme étant open-source. Et, de peur de les voir perdues à jamais, je préfère les écrire et les faire partager gratuitement avec la communauté des intégrateurs que nous sommes.

Ce tutoriel WordPress vous aidera à créer vous-même votre propre thème WordPress, mais contient aussi un thème WordPress vide gratuit sur lequel vous pouvez vous baser.

Si vous êtes friands de paysages arides, de reptiles sauvages ou encore de culture aborigène, abonnez-vous au flux RSS !

WordPress vient d’annoncer une Release Candidate pour la version 3. J’ai pour ma part installé et mis en prod la version Beta 2 qui, ma foi, est très stable. Si vous comptez l’installer, allez-y! Les mises à jour se font comme les WP actuellement, c’est à dire automatiquement. Et le système de template pour les thèmes est identique donc vos thèmes marcheront sans souci! Le seul souci est qu’il n’y a pas de version française encore mais bon, c’est uniquement pour l’admin qui est vraiment très simple en anglais.

Nouveautés WordPress 3

Dans les nouveautés, il y a :

• choisir son login et son mot de passe : au lieu d’avoir “admin” et un mot de passe généré automatiquement, on peut les choisir soi-même.
• un nouveau thème par défaut, bourré de nouvelles fonctions et qu’on va customiser dans ce tutoriel
• custom background : un outil dans l’admin pour pouvoir choisir un fond pour le site. Si vous développez des thèmes vous même, ça vous est inutile.
• Multi-sites! En fait, WordPress et WordPress µ ont fusionné : il est donc possible avec 1 seule installation WP de mettre en place autant de blogs différents que l’on veut. Par exemple : css.bbxdesign.com pour un blog de CSS, inspiration.bbxdesign.com pour un blog d’inspiration etc.
• Custom Post Types
• Custom Taxonomies

Je vais développer ces 2 derniers points car ils sont les plus intéressants.

Custom Post Types : vos propres Posts et Pages

Si vous utilisez WP, vous savez qu’il y a 2 grand types d’éléments pour poster :

• Posts : ce sont les billets du blogs rangés chronologiquement. Ils peuvent être dans des Catégories et avoir des Tags.
• Pages : ce sont des pages contenant du contenu fixe et intemporel. Il n’y a pas de notion de chronologie, ni de catégorie, ni de tags. Il y a uniquement une notion de hiérarchie (relation page parent/page enfant).

Si vous avez un blog, ces 2 types d’éléments sont parfaitement suffisants. Vous créez des billets avec les Posts et vous ajoutez une page “A propos” et “Contact” avec les Pages.

Mais imaginons qu’en plus de ça, vous voulez une catégorie Portfolio qui regroupe vos plus beaux travaux, avec un screenshot, une description et quelques infos sur le client. Comment faire ? Vous pouvez créer des Posts que vous classerez dans une catégorie “Portfolio”. Mais c’est non seulement fastidieux à mettre en place dans votre thème mais c’est aussi fastidieux à gérer dans l’admin.

On va donc créer un autre type de post : les “Projets“. Pour ça, on va utiliser le fichier functions.php.

Une fonction pour customiser l’admin

On va regrouper tout notre code dans une fonction qui sera appelée à l’initialisation de l’admin. Comme ça, lorsqu’on lance l’admin, on activera toutes les fonctions décrites dans my_custom_init :

add_action('init', 'my_custom_init');
function my_custom_init()
{
/* notre code PHP pour rajouter les custom post type */
}

Tout le code que je vais écrire maintenant devra être inclus dans la fonction my_custom_init.

Déclarer le Custom Post Type

Maintenant nous allons rajouter l’élément “Projet” dans notre admin :

register_post_type('projet', array(
 'label' => __('Projets'),
 'singular_label' => __('Projet'),
 'public' => true,
 'show_ui' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'supports' => array('title', 'author', 'thumbnail')
));

Il faut utiliser la fonction register_post_type qui porte bien son nom : elle enregistre un nouvel élément, un nouveau type de Post. Il y a ensuite plusieurs paramètres. Ils n’y sont pas tous parce que beaucoup sont optionnels. J’ai mis les plus importants :

• ‘projet’ correspond au nom du nouvel élément. Il sera utilisé dans les fichiers de template.
• ‘label’ est le nom qu’on retrouvera dans la colonne de gauche de l’admin. Il est préférable de mettre un pluriel.
• ‘singular_label’ est l’équivalent au singulier
• ‘public’ définit si les posts seront publics ou non.
• ‘show_ui’ définit si ce nouvel élément apparaît dans l’admin
• ‘capability_type’ définit si le nouvel élément est identique à un Post classique ou à une Page classique. Ici on veut un titre et une image miniature donc Post. En général, les Posts sont beaucoup plus intéressants car ils ont davantage de fonctions que les Pages.
• ‘hierarchical’ définit si il peut y avoir une hiérarchie (comme pour les Pages). Ici, c’est non car chaque élément est au même niveau.
• ‘supports’ est un array qui définit quels éléments d’un Post normal on veut avoir. Ici je veux juste le titre, l’auteur du Post et une miniature. Il y a pleins d’autres éléments :
  • ‘title’
  • ‘editor’ (la fenêtre principale de contenu)
  • ‘author’
  • ‘thumbnail’
  • ‘excerpt’
  • ‘trackbacks’
  • ‘custom-fields’
  • ‘comments’
  • ‘revisions’ (la sauvegarde automatique de versions passées)
  • ‘page-attributes’ (choix de template pour les pages et gestion de la hiérarchie)

Pour avoir les thumbnails dans votre thème, il faut ajouter dans functions.php :

add_theme_support( 'post-thumbnails' );

Merci à benoit pour m’avoir rappelé de mettre cette astuce.

Si vous avez tout bien fait vous devriez voir :

Vous pouvez maintenant créer un nouveau projet en cliquant sur “Add New”

Whaaa, c’est vide! Eh oui : on a juste mis “title”, “author” et “thumbnail”. Et c’est tout ce dont on a besoin! Hop je rajoute un Projet “bbxdesign” avec un screenshot :

Ok c’est cool, j’ai réussi à rajouter un nouveau projet! Ca marche nickel dans l’admin. Sauf que pour l’instant, j’ai rien qui s’affiche dans le blog!

Afficher les Custom Post Type

Sur votre blog (sur la home par exemple), dans la boucle des posts, il y a actuellement les Posts normaux. Mais nous on veut afficher les Projets! Pour ça, il faut faire un query_posts avec comme post_type le mot “projet”. Sur index.php par exemple, mettez :

<?php
$home_paged = (get_query_var('paged'));
$arguments = array(
 'post_type' => 'projet',
 'post_status' => 'publish',
 'paged' => $home_paged
);
query_posts($arguments);
get_template_part( 'loop', 'index' );
?>

Le $home_paged est une astuce qui permet de récupérer la valeur de la page courante et ainsi éviter de casser la pagination! Ensuite vient un array d’arguments : post_type en projet, post_status en publish (pour éviter d’afficher les brouillons) et page avec la variable.
Ensuite on fait le query_posts avec ces options puis on appelle la boucle avec get_template_part. Il faut savoir que get_template_part est une nouvelle fonction de WordPress 3 qui permet d’inclure d’autres fichiers php. Ici on appelle le fichier loop.php. C’est d’ailleurs très pratique pour éviter de copier-coller la boucle WP dans plusieurs fichiers.

Si vous ouvrez le fichier loop.php du thème “twentyten”, vous verrez qu’il est vraiment très long. On va tout virer et mettre juste un peu de code pour la home, histoire de vous montrer facilement comment afficher les éléments pour un projet. Nous, tout ce qu’on veut, c’est afficher le titre (c’est à dire le nom du projet), ainsi que la miniature.

<?php while ( have_posts() ) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <h2><?php the_title(); ?></h2>
 <?php the_post_thumbnail(); ?>
 </div>
<?php endwhile; ?>

Donc là, c’est très simple. On met la div avec le bon id et la bonne classe, on met le nom du projet (the_title) et l’image (the_post_thumbnail) et ça donne :

J’ai pris le thème de base “twentyten” et j’ai donc customisé les fichiers index.php et loop.php. La home contient donc des Projets et non pas des Posts. Mais vu que j’ai les 2, je peux faire une page /blog où j’aurais tous mes Posts!

Maintenant vous pouvez ajouter des projets à la volée, virer la sidebar, le header et gérer une partie Blog avec les Posts et une partie Portfolio avec les Projets.

Custom Taxonomy : de nouvelles catégories et de nouveaux tags

Derrière ce nom barbare de “Taxonomy” se cache tout simplement les Catégories et les Tags. Avec WordPress 3, vous pouvez créer d’autres taxonomies. Imaginons qu’avec ce Portfolio vous voulez ajouter 2 choses :

• le type de projet : un logo, un site vitrine, une animation flash….
• les couleurs utilisées

On pourrait utiliser les Catégories et les Tags, mais elles sont déjà utilisées par les Posts pour le Blog! On va donc créer d’autres catégories et d’autres tags, exclusivement pour le Portfolio.

register_taxonomy( 'type', 'projet', array( 'hierarchical' => true, 'label' => 'Type', 'query_var' => true, 'rewrite' => true ) );
register_taxonomy( 'couleur', 'projet', array( 'hierarchical' => false, 'label' => 'Couleur', 'query_var' => true, 'rewrite' => true ) );

On utilise la fonction register_taxonomy. Dans l’ordre on choisit

• le nom de la taxonomie
• l’élément auquel il s’applique (ça peut être ‘post’, ‘page’ ou un post type qu’on a créé, en l’occurence ‘projet’)
• ‘hierarchical’ definit si il y a une relation parent/enfant. Si oui, c’est comme les Catégories. Si non, c’est comme les Tags.
• ‘label’ c’est le nom plus descriptif qui s’affichera dans l’admin
• ‘query_var’ à mettre sur true pour qu’on puisse appeler cette taxonomie dans nos templates
• ‘rewrite’ c’est la chaîne de caractères présente dans les permaliens. Si on met “true”, ça prend la valeur par défaut, c’est à dire le nom de la taxonomie.

(Bien sûr, tout ceci est toujours à mettre dans la fonction my_custom_init commencée tout à l’heure.)

Si vous rechargez l’admin, vous voyez par magie :

J’ai déplacé les blocs “Type” et “Couleur” à gauche pour que ce soit plus lisible. Maintenant vous pouvez ajouter le type “animation flash”, “logo”, “direction artistique”… et les couleurs “vert”, “orange”, “bleu”… Ca ressemble à peu près à ce qui ai fait sur Steaw Web Design (sauf qu’on utilise des sous-catégories).

Afficher les Custom Taxonomies dans le thème

Ok c’est cool, vous avez vos Custom Taxonomies dans l’admin. Maintenant faut les afficher dans le thème! On va reprendre le fichier loop.php de tout à l’heure et rajouter ça :

<?php while ( have_posts() ) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <h2><?php the_title(); ?></h2>
 <?php echo get_the_term_list( $post->ID, 'type', '<p>Type de projet : ', ', ', '</p>' ) ?>
 <?php the_post_thumbnail(); ?>
 <?php echo get_the_term_list( $post->ID, 'couleur', '<p>Couleurs : ', ', ', '</p>' ) ?>
 </div>
<?php endwhile; ?>

On utilise la fonction get_the_term_list pour afficher les taxonomies du post courant ($post->ID). C’est dans un paragraphe, et les éléments sont séparés par des virgules. En fait, la taxonomie c’est l’ensemble de la liste (ex: “Couleurs”) et terme c’est chaque élément de la liste (ex: “orange”, “vert”).

Visuellement, ça donne ça :

Vous remarquerez que ça crée des liens pour chaque terme. En cliquant dessus, on arrive à une archive. En local, j’arrive pas à le faire marcher mais ça fonctionne sur mon JukePod pour l’année 2004 par exemple.

Conclusion

Avec les custom post type et les custom taxonomy, vous pouvez créer plusieurs “flux” sur votre site, comme par exemple un blog et un portfolio, sans avoir à mélanger les deux ou à s’embêter avec des sous-catégories.

Par exemple, pour le blog Steaw et le portfolio Steaw, on a du créer 2 WordPress différents avec d’un côté des Posts, des Catégories, des Tags et de l’autre… ben pareil : des Posts, des Catégories, des Tags! On le ferait aujourd’hui, on utiliserait le custom post type Projet pour le Portfolio. Il y a même un gars qui a fait un IMDB avec WordPress 3…

Sources : Nettuts et kovshenin

Tumblr c’est magnifique. C’est très facile à utiliser, que ce soit pour poster des images, des liens, des vidéos… C’est un gros aggrégateur de tout et n’importe quoi, on a pas besoin de se soucier de l’hébergement, on peut utiliser son propre nom de domaine, il y a pas mal de services intégrés (Twitter, Feedburner entre autres) et surtout : créer un thème Tumblr est un jeu d’enfant!

Avec cette facilité pour poster tout ce que je veux (et vite!), et un système de template vraiment simple, je me suis dit que j’allais lancer mon petit site d’inspiration en web design, qui regroupera pleins de sites et d’éléments de sites (formulaires, headers, icônes…) : DDDSGN.

Pourquoi “DDDSGN” ?

Je voulais un nom court, simple et fun. Il fait bien évidemment référence à ffffound.

Pourquoi c’est tout noir et blanc ?

J’ai testé beaucoup de couleurs et de palettes de couleurs pour des designs parfois sympas mais qui ne mettaient pas assez le contenu en valeur. Avec un site en fond blanc et le texte en nuances de gris, les couleurs des images ressortent très bien! D’ailleurs, il n’y a aucune image appelée par la CSS. C’est que de la typographie et des couleurs. Plus simple à entretenir, tiens.

Je vous invite à visiter le site et pourquoi pas à vous y abonner !