Francis Chouquet Graphiste Lettering

Une semaine avec WordPress #14

0

Cette semaine, je vous propose une revue hebdomadaire un peu particulière parce que j’ai décidé de focaliser la revue sur des tutoriels, particulièrement intéressants cette semaine. Vous trouverez ensuite quelques thèmes gratuits et payants bien sympas, et enfin avec un plugin pour insérer des photos en provenance de FlickR !

les tutoriels de la semaine

1. Créer une section d’articles « A la une »

Commençons tout d’abord avec un tutoriel relativement simple qui va vous permettre d’ajouter une section « Featured » (en anglais dans le texte), où que vous souhaitiez sur votre blog. Ca peut toujours être intéressant de proposer certains articles que vous pensez pourraient intéresser certains visiteurs. Pas besoin pour cela d’avoir un thème magazine, vous avez toujours la possibilité de ne proposer que les titres sans le contenu en haut ou en bas de votre page d’accueil par exemple.

La méthode utilise simplement les query_posts dont j’ai déjà parlé dans ce billet. Si vous ne connaissez pas encore cette technique, n’hésitez pas à aller le lire parce que c’est une fonction importante pour customiser le contenu de WordPress.

1 2 3 4 5 6 7 
<ul> <?php query_posts('category_name=Featured&showposts=5'); while (have_posts()) : the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> </li> <?php endwhile; ?> </ul>

Donc, ici, on va créer une catégorie, que l’on appelle dans l’article « featured » (category_name=Featured) mais que vous pouvez appeler comme vous le souhaitez tant que le nom de la catégorie et celui qui figure dans le code est le même. Ensuite, on choisit le nombre d’articles à afficher (showposts=5), puis en dessous on retrouve les composant de la boucle WordPress. Là, encore si vous souhaitez en apprendre plus sur cette boucle, plus communément appelée « loop », je vous conseille ce billet. Ici, on ne met que le titre de l’article, mais on pourrait également y mettre un extrait par exemple. A vous de voir en fonction de vos besoins.

Et, pour terminer, l’auteur du tutoriel vous propose un bout de code à insérer dans votre feuille de style CSS, histoire de styliser votre rubrique:

1 2 3 4 5 6 7 
#featured ul li a, #featured ul li a:visited { /* preferred styling here */ }   #featured ul li a:hover { /* preferred styling here */ }

Basique comme tutoriel mais toujours utile !! 😉

2. Créer une sidebar dynamique

Toujours en provenance de WPProject, cette fois-ci, l’auteur nous propose de créer une sidebar dite « dynamique ». En gros, vous insérez quelques lignes de code dans votre template sidebar.php qui contient différentes requêtes selon la page sur laquelle vous vous trouvez:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
<div id="sidebar">   <?php if (is_home()) { include (TEMPLATEPATH . '/purpose.php'); include (TEMPLATEPATH . '/featured.php'); include (TEMPLATEPATH . '/news_events.php'); include (TEMPLATEPATH . '/recent.php'); include (TEMPLATEPATH . '/recent_comments.php'); include (TEMPLATEPATH . '/resources.php'); } elseif (is_single()) { include (TEMPLATEPATH . '/featured.php'); include (TEMPLATEPATH . '/recent.php'); include (TEMPLATEPATH . '/recent_comments.php'); } else { include (TEMPLATEPATH . '/featured.php'); include (TEMPLATEPATH . '/recent.php'); } ?>   </div>

En gros, ça dit que « si je suis sur la page d’accueil, j’insère ces fichiers-là. Si je suis sur telle page, j’insère tels fichiers » et ainsi de suite… Donc, pour résumer, vous n’avez qu’un fichier pour votre sidebar mais vous allez aller chercher différents templates qui peuvent être utilisés sur différentes pages, comme featured.php, recent.php, etc.

La méthode classique serait de créer une sidebar différente par page, du style sidebar_home.php pour la page d’accueil ou sidebar_article pour les permaliens, avec dans chacun des templates, le code complet de chacun des composants.

Cependant, pour l’auteur du tuto, utiliser cette méthode plus « dynamique » permet une meilleure gestion du contenu des différentes sidebars. Par exemple, vous avez envie de modifier le nombre d’articles « featured » proposés. Vous allez dans un fichier, le featured.php et vous y faîtes vos modifs, sans avoir besoin de le faire dans les différentes sidebars.

3. Créer des champs personnalisés (Custom Fields) par défaut

Ce tutoriel, est, je trouve, tout particulièrement intéressant. Admettons que vous avez un thème qui utilise des vignettes d’images en page d’accueil. Vous utilisez les Custom Fields pour les faire apparaître. Cependant, il faut qu’à chaque billet vous pensiez à inclure cette vignette, aux bonnes dimensions. Et bien ici, vous allez apprendre à avoir une vignette « par défaut », dans le cas où vo9us n’auriez pas de vignette à mettre pour un article ou que vous auriez oublié.

Tout d’abord, l’auteur de ce tutoriel vous propose le code pour l’utilisation de texte via les Custom fields:

1 2 3 4 5 6 7 8 
<?php $var = get_post_meta($post->ID, 'My Custom Key', true); if ($var == '') { echo "<p>I'm the default text!</p>"; } else { echo "<p>" . $var . "</p>"; } ?>

Ici, on utilise la méthode classique des Custom Fields, mais avec des conditions. Si la clé possède une valeur, on affiche cette valeur. Si la clé n’est pas associée à une valeur, alors, on affiche un texte par défaut, ici « I’m the default text ».

Ensuite, il utilise la même méthode, mais cette fois-ci pour les images:

1 2 3 4 
<?php $thumb = get_post_meta($post->ID, 'Homepage Image', true); if ($thumb == '') { ?>

Ici, on va insérer une variable ($thumb) que l’on va associer à la valeur de la clé ( faut suivre !! ). Ensuite, on vérifie si cette variable est vide ou s’il n’y a carrément pas de clé du tout. Alors, pour chacune de ces possibilités, on va proposer une image par défaut, disponible sur le serveur du blog:

1 2 3 4 
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="http://domain.com/images/defaultimage.jpg" alt="<?php the_title(); ?>"/> </a>

Et si on ne se retrouve pas dans un de ces cas-là, ça veut dire qu’on a bien renseigné une valeur à la clé voulue, auquel cas on va l’afficher, de manière classique:

1 2 3 4 5 
<?php } else { ?> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="<?php echo $thumb; ?>" alt="<?php the_title(); ?>"/> </a> <?php } ?>

Encore là, un tutoriel pas forcément simple à comprendre mais facile à implémenter et qui peut vous être d’une grande aide.

4. Utiliser des widgets où vous souhaitez sur votre blog

On l’oublie trop souvent mais il est possible de placer des widgets un peu partout sur son thème. Pour y arriver, il faut déjà déterminer les zones que l’on veut widgetiser. L’article en propose 4.

Ensuite, il faut aller dans le fichier functions.php. S’il n’existe pas, créer le en insérant le code suivant:

1 2 3 4 
<?php if ( function_exists('register_sidebars') ) register_sidebars(4); ?>

Ici, on a mis le chiffre 4 dans « register_sidebars », parce qu’on va avoir 4 « colonnes latérales », même si le terme n’est pas exact, dans lesquels on va utiliser des widgets.

Dans l’onglet « Widgets » de votre interface d’administration, sous l’intitulé « Widgets actuels », vous allez trouver 4 colonnes latérales, numérotées de 1 à 4.

Maintenant, il vous faut créer un template pour chacun des emplacements, dans lesquels, vous allez introduire le code suivant:

1 2 3 4 5 
<ul id="topcolumn"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> insérer ici le code du template <?php endif; ?> </ul>

Le chiffre de « dynamic_sidebar » correspond au numéro de la « sidebar » en question. N’oubliez pas de mettre le tout sous une balise pour pouvoir styliser l’emplacement par la suite. Ici, l’auteur l’a appelé « topcolumn » pour ce template.

Ensuite, il ne vous reste plus qu’à insérer le code pour vos différents emplacements aux endroits où vous souhaitez les voir apparaître, via ce code:

1 
<?php include (TEMPLATEPATH . '/topcolumn.php'); ?>

En prenant ici en compte le template créé dans le tuto pour le premier emplacement, c’est-à-dire topcolumn.php. Pour les autres emplacements, vous n’avez qu’à changer le nom du template.

5. Proposer différents affichages au visiteur (thèmes galeries en particulier)

Je ne sais pas si vous connaissez BestWebGallery, un très bon site pour l’inspiration. Ce site donc, permet, selon la volonté de l’utilisateur, d’afficher le contenu, de 3 manières différentes (en haut à droite sur l’image):

Bestwebgallery

Dans son tutoriel, WPElements nous explique comment utiliser cette technique. Et en fait, le concept est tout con puisqu’il tourne autour d’un plugin WordPress, Theme Switcher, que l’on détourne légèrement de son utilisation initiale…quoi que…

Pour ceux qui ne connaîtraient pas Theme Switcher, c’est le plugin utilisé pour proposer plusieurs thèmes pour le même blog. Il est très utilisé par ceux qui proposent des thèmes au téléchargement.

Et ici, et bien on va tout simplement l’utiliser pour afficher 3 pages d’accueil différentes selon la vue que l’on veut. On crée 2 autres thèmes identiques à celui que l’on a et on va modifier le template de la page d’accueil pour afficher une vue différente sur les 3 thèmes ( le premier à partir duquel on « part » et les 2 autres que l’on crée ). Ensuite, on les associe au plugin et l’affaire est jouée ! Tout simplement…

Dans le cas de ces galeries, il a fallu créer 3 boutons pour les 3 vues et les associer aux URL des différents thèmes utilisées par le plugin:

1 2 3 4 5 
<div id="themeswitch"> <img src="<?php bloginfo(’template_directory’); ?>/images/theme1.gif" alt="Theme1" /> <a href="<?php bloginfo(’url’); ?>/index.php?wptheme=Gallery2"><img src="<?php bloginfo(’template_directory’); ?>/images/theme2off.gif" alt="Theme2" /></a> <a href="<?php bloginfo(’url’); ?>/index.php?wptheme=Gallery3"><img src="<?php bloginfo(’template_directory’); ?>/images/theme3off.gif" alt="Theme3" /></a> </div>

Fallait juste y penser !! 😉

les thèmes de la semaine

1. F8 Remix

F8 WordPress Theme

2. Corporate Sandbox

Corporate WordPress Theme

3. DirtyGirl

Dirty Girl WordPress Theme

4. Thesis

Thesis WordPress Theme

5. Shade

Shade WordPress Theme

6. Simple

Simple WordPress Theme

7. Openbook

Openbook WordPress Theme

Les plugins de la semaine

Cette semaine, je vous présente un petit plugin pour vos photos que j’ai trouvé via ce billet. Si vous avez un compte FlickR, vous allez, grâce à ce plugin, pouvoir les insérer facilement dans vos billets, via la ligne « Ajouter un média »:

FlickR Plugin WordPress

Comme pour les autres médias, vous avez une fenêtre qui s’ouvre et qui vous permet de visualiser vos photos FlickR, soit en continu, par albums ou vous avez également la possibilité de visualiser les photos de tous les utilisateurs:

FlickR Plugin WordPress 2

Ensuite, vous avez la possibilité d’afficher une photo ou bien tout un album et vous pouvez également paramétrer l’affichage de ces photos en choisissant si vous ne souhaitez que des vignettes, un petit format, format moyen ou encore taille originale:

Image FlickR Plugin WordPress Album FlickR Plugin WordPress

Pour ce qui est du paramétrage, il vous faut une clé API FlickR, et autoriser l’utilisation du plugin. Le tout se paramètre facilement, bien qu’en anglais. Donc si vous avez un souci, n’hésitez pas à me faire signe.

Là où le plugin est vraiment intéressant, c’est que vous avez la possibilité d’afficher vs photos flickR sur votre blog. Dans les paramétrages, il vous suffit de donner une URL à partir de laquelle le plugin peut afficher ces photos. Par exemple, vous prenez www.monblog.com/photos et sur cette URL s’afficheront toutes vos photos FlickR:

Photos FlickR Plugin WordPress

Et ce, pour CHACUNE de vos photos ! Ce qui veut dire que chacune de vos photos aura une URL sur votre blog.

Per Photo FlickR Plugin WordPress

Vous avez la possibilité de laisser un commentaire, mais qui vous emmenera sur la page FlickR de la photo. Par contre, les commentaires déjà laissés sur FlickR apparaîtront sur votre blog…

Seuls inconvénients, c’est que le style du thème peut ne pas « coller » avec l’affichage de vos photos. Pour cela, il vous faudra peut-être mettre les mains dans le cambouis… 😉 Et puis, l’autre souci c’est que les photos peuvent longues à charger. Mais le potentiel est, je trouve très intéressant !!

Voilà, c’est tout pour cette semaine ! 😉 … mais c’est déjà pas mal ! 😛

33 Commentaires

  • Merci beaucoup pour ton lien vers OpenBook 🙂
    Très bon article par ailleurs, que je vais lire plus en détails de ce pas!

  • De rien ! 😉 T’aurais dû me prévenir au moment de la sortie, j’en aurais parlé de suite, c’est pas souvent qu’on a des thèmes français magazines !! 😉 Bon boulot en tout cas ! 😉

  • Un petit message en passant pour te dire que j’aime beaucoup ces articles hebdomadaire. Continue comme ça !

  • Merci Stéphane 😉

  • Sympa le plugin Flickr, je pense que je vais l’installer ! 😛

    Merci et à la semaine prochaine ! 🙂

  • ah oui effectivement le plugin flickr est énorme ! je me dois de tester ça tout de suite !

    (tient c’est marrant, sur les 6 premiers commentateurs, je suis le troisième jean baptiste 🙂 )

  • J’aime beaucoup Thesis et sa magnifique typographie, mais alors le tarif : 87 dollars !!!

  • Merci bien pour le lien. Je vais mettre un lien dans mon tutoriel comme ‘version français’.

    Alex

  • J’aime beaucoup tes articles hebdomadaires. Continue ton bon travail!

  • J’avais envie de faire un « gros » footer widgetisé (derniers articles, partenaires, etc…). Ton article m’a donné la solution technique pour le faire. Je vais essayer un de ces jours.

  • Ah les semaines avec WordPress. Celle ci est super 😉

    Pour le thème Simple, j’en avais fait une traduction FR il y a de ça un mois mais pour l’instant le lien n’est pas accessible. En tout cas j’ai complètement flashé sur lui, pourtant je ne suis pas très fan des thèmes à 1 colonne ^^

    Sinon pour côté plugin il y a fotobook qui est pas mal aussi. Bon, il ne permet pas d’insérer les albums dans les articles ni de rapatrier les commentaires mais il est tout de même intéressant. Il récupère les albums depuis un compte facebook et créé automatiquement une galerie dans WordPress en utilisant les pages. Quelques autres options intéressantes. A voir 😉

  • Merci à tous pour vos compliments ! 😉 Y a des moments où je me dis que je pourrais en faire 5 à 10 articles de tout ça, mais au final, je pense que le lecteur prendra plus le temps de lire cette revue complète que 7 ou 8 articles sur la semaine…

    Epic Alex > Merci. Ce n’est pas une traduction complète mais on y comprend le principal ! 😉 Merci à toi pour le tutoriel ! 😉

    Bertrand > Ces derniers temps je découvre pas mal de thèmes payants qui ne sont pas trop trop magazines, mais qui sont de qualité. Thesis en fait partie. En fait, tous ces thèmes font monter le niveau général des thèmes. Dommage qu’ils soient payants et certains si chers…

    Many > Merci pour toutes ces infos. Faut que je prenne le temps de t’envoyer un email pour ce dont je t’avais parlé il y a quelques semaines !! ^^ Que le temps passe vite….

  • redpeppers > Héhé 😀

  • Francis > C’est vrai que le temps passe vite. Prends ton temps pour le mail car je me lance dans un nouveau projet 😀

  • Sympa tout ça. Merci !

  • @redpeppers & Jean-Baptiste: Oui les Jean-Baptiste sont sur-représentés chez les bloggueurs 😉

  • Excellent, merci !

  • Que dire de plus si ce n’est BRAVO pour cette excellente SAW !!!

  • Didier

    Bonjour,

    [b]Ma configuration WP actuelle[/b]
    [b]- Version de WordPress[/b] :2.51

    [b]Problème(s) rencontré(s) :[/b]

    salut à tous, je ne sais pas trop dans quel rubrique placer mon problème,mais voilà…

    j’ai regardé les codes des fichiers dans différents thèmes…

    quand je vois ça:

    [b]OU[/b]

    Recent Entries

    quelle est la diférence, quelle est le code le plus propre….??

    2) [u]autres codes:[/u]

    [b]ou[/b]

    quand utiliser ce « [b]wp_[/b]  »

    [b]existe t il un tuto ou un site français, pour comprendre l’appelle de ces fonctions wp_ ?.[/b]

    3)[u]autres codes:[/u]

    [b]ou[/b]
    ‘,  »,  », FALSE, ‘id’, FALSE, FALSE, -1, FALSE); ?>

    la différence pour ces 2 codes c’est quoi?, là je n’ai plus de wp_ ; mais un [b]list_[/b] ou un [b]get_[/b] …..

    [u]même questions[/u] : existe t il un tuto ou un site français,pour comprendre l’appelle de ces fonctions list_ ou get_ et je pense qu’il doit y en avoir beaucoup d’autres….

    [b]la question bonus[/b], c’est en plus de mieux comprendre l’appelle de ces wp_, list_, get_….
    mais aussi de [b]savoir ce que l’on peut faire comme code entre les parenthèses[/b]…

    car on peut le voir souvent, l’appelle de ces fonctions est paramètrable avec des lignes de code dans les parenthèses…

    mon problème est [b]comprendre plus clairement[/b] les auteurs de ces thèmes wordpress, [b]dans la façon de coder et l’utilisation des fonctions ‘standart’ avec un paramètrage complémentaires dans les parenthèses…[/b]

    Mrerci d’avance( je post bien pour comprendre l’utilisation des codes, bravo )

  • Désolé Didier mais tu ne poste pas ta question au bon endroit !! 😉 Je te conseille d’aller poser ta question sur le forum de WordPress Francophone ( http://www.wordpress-fr.net ), c’est le forum officiel de WordPress et eux pourront t’aider.

    Encore toutes mes excuses ! 😉

  • Francis, j’ai une petite question à propos du tuto « Créer des champs personnalisés (Custom Fields) par défaut ». A quel endroit doivent être placées les lignes de code ?

  • Gérald > Tout simplement à l’endroit où tu veux voir apparaître le contenu du champ personnalisé. Ils sont souvent utilisé pour la page d’accueil donc soit home.php, soit index.php

  • Hello Francis !

    Ton post tombe pile poil au moment où je voulais mettre une galerie FiclkR sur mon site 🙂
    Mais malheureusement, j’ai un petit soucis, j’ai tout bien fais comme ils ont dit (autorisation coté blog et coté flickr, y’a toutes les clés API etc), mais mon blog ne me répond qu’une seule chose :

    Your Photo Album is not currently linked to a Flickr account.

    Pourtant, j’ai tout bien suivi !
    Est-ce que tu saurais où est-ce que je pourrais me renseigner concernant ma petite panne ?
    (si ça se trouve, toi, tu sauras me répondre :)).

    Merci d’avance.

    Souriya

  • Souriya > Est-ce que tu est sûr(e) d’avoir bien récupéré les clés chez FlickR, il y en a 2… Moi aussi j’avais ce problème au début parce que j’avais mal saisi les numéros…

  • Oui, j’ai bien collé les deux clés (la super longue et la plus petite nommé « secret »).

    Dès ce moment là, ça affiche toujours :

    Your Photo Album is not currently linked to a Flickr account.

    Après, je clique sur le bouton STEP 1 et STEP 2, et aucun changement 🙁

    (D’ailleurs, je comprend pas trop pkoi je suis renvoyé vers ma propre page d’accueil après avoir cliqué sur le STEP 1).

    Y’aurait pas une sorte de forum ou je pourrai me renseigner au lieu de t’embeter 🙁 ?

    En tout cas, merci pour le soutien !

  • Merci pour les tutoriels, ils sont très instructifs

  • Nicolas

    Bonjour,
    Mon premier commentaire bien que je ne rate aucune SAV ! Encore bravo !

    Je rentre dans le vif du sujet, en réaction au tuto « Sidebar dynamique » avec une petite question :

    dans l’exemple les conditions sont placées pour la home page et l’aperçu seul (single) de l’article. Est-il possible de faire figurer une troisième (voire plus) condition pour une page que l’on a créée ?

  • Nicolas > Oui, il faut que tu remplaces is_home par is_page et entre les parenthèses, tu dis quelle page c’est… En gros… regardes sur le codex, tu devrais y trouver des exemples…

  • Souriya> Je ne crois pas qu’il y ait un forum pour ça… Moi ça me l’a fait quand j’ai fait des tests en local, mais dès que je suis passé sur un blog en ligne, ça fonctionnait… Je ne sais pas trop quoi te dire !! 😉

  • Nicolas

    Merci Francis ! ça fonctionne nickel, pour ce que ça intéresse je peux fournir le code…

  • Francis > Je suis un idiot, je suis un idiot ! J’ai tout bêtement oublié de mettre « application de bureau » quand je prenais les deux clés API … en tout cas merci pour tes conseils parce que mine de rien, c’est ce qui m’a mis sur la piste 🙂

    Bonne continuation, en tout cas, j’adore ton blog !
    Merci pour tout.

  • Un grand merci Fran6, je trouve que cette série de mini tuto est vraiment super, je teste actuellement le pluhin FlickR, ainsi que la technique des sidebar dynamiques… Je te monterai le résultat dès que possible !

  • @Bertrand

    Thesis le vaut les 87$ , confirme

Success, your comment is awaiting moderation.