Le Journal du Blog - L’actualité des blogs

Modules à onglets

D’une manière générale, les modules à onglets ont fait une apparition massive sur le web au cours de l’année 2008. Outre l’effet visuel, cela permet de proposer beaucoup d’informations dans une place réduite. En règle générale, les modules à onglets permettent d’accéder aux articles populaires, derniers articles, articles les plus commentés etc. Il y a des dizaines de solutions différentes pour mettre en place un module à onglets sur votre blog, en voici une petite selection (en) :

1. StereoTabs – Module simple utilisant la librairie js scriptaculous
2. DOMTabs – solution que l’on rencontre souvent sur les blogs
3. TabMenu – un module à onglets légers
4. Tabifier – un équivalent léger en javascript
5. UI Tabs – module fonctionnant sans JQuery
6. Yahoo Tab – tutoriel basé sur la solution Yahoo tab View
7. Voir également un excellent tutoriel chez Fran6

Article Featured (à la une) – Slideshow

Le nombre de blogueurs qui écrivent quotidiennement a clairement augmenté (malgré l’apparition de Twitter). Le principe de mise en avant d’article en particulier (Featured) va tout simplement permettre aux articles que vous jugez intéressants/importants de ne pas sombrer dans le flux des articles. Qui plus est, il est possible (javascript ou Flash) de rendre cette zone de mise en avant dynamique grâce à un slideshow cliquable !

1. s3Slider – l’une des solution les plus utilisées pour les Featured Post
2. JSGallery – pour afficher uniquement des images
3. Agile Carousel – un slideshow en JQuery
4. jCarousel Lite – uarrousel en javascript très léger
5. Nettuts – propose également un excellent tutoriel

Miniatures d’articles (Thumbnails)

Les miniatures d’articles permettent de donner un côté plus visuel à vos articles. Elles s’accompagnent souvent d’un résumé de l’article (ou extrait), ce qui permet de donner une homogénéité au blog puisque votre page d’accueil est bien organisé titre + miniature + raccourci. D’une manière générale, l’utilisation de la miniature + extrait permet aux lecteur de voir plus d’articles sur la page d’accueil sans avoir à scroller. Voici une solution simple pour ajouter une miniature à votre blog wordpress par l’intermédiaire des custom fields (champs personnalisés).

Etape 1

Dans le dossier de votre thème, éditez le fichier function.php pour y ajouter :

[html]
/*Custom Field Images*/
function image_attachment($key, $width, $height) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if($custom_field) {
echo ‘<img src="’.$custom_field.’" alt="Post Image" width="’.$width.’" height="’.$height.’" />’;
}
else {
return;
}
}
[/html]

Etape 2

Toujours dans le dossier de votre thème, éditez le fichier single.php puis ajoutez cette ligne de code à l’endroit où vous souhaitez afficher la miniature. (veillez à rester dans la « Loop« )

[html]
<?php $thereisimage = get_post_meta($post->ID, $rs_image_key, true);
if($thereisimage){ ?>
<div class="post-image">
<?php image_attachment($rs_image_key, 512, 200); ?></div>
<?php }?>
[/html]

Pour changer la taille de la miniature, il vous suffit de changer les valeurs 512, 200

Etape 3

Lors de la rédaction d’un article, uplodez une image (à la bonne taille), récupérez l’url puis copiez là dans l’encart champs personnalisés (custom field) dans le champ valeur (value) et image dans le champ nom (key)

Transparence multi-navigateurs

On voit de plus en plus de design avec des titres ou des bordures utilisant des effets de transparence. C’est joli mais compliqué à afficher correctement sur les navigateurs obsolète type Internet Explorer 6 (au hasard…). Vous pouvez  remplacer le format PNG par du GIF mais vous risquez de perdre en qualité. Voici quelques solution (hack) pour pouvoir gérer la transparence sur la majorité des navigateurs :

1. IEpngFix – de loin la meilleure solution
2. jQuery IEpngFix - un équivalent via Jquery

Menu déroulant animé (Dropdown)

Encore une solution pour afficher plus d’informations dans un espace réduit tout en offrant un effet visuel sympa. L’arrivée des systèmes de menus déroulants permet de mieux utiliser les niveaux de catégories proposés par wordpress. Voici quelques solutions et plugins Jquery pour mettre en place un menu déroulant animé :

1. CSS-Tricks.com Tutorial – tutoriel très complet pour vous initier aux menus déroulants en JQuery
2. Superfish – un plugin JQuery populaire et facile à utiliser
3. Simple Dropdown – un équivalent tout aussi efficace et fonctionnel

Modal Box, Shadow Box, Light Box

Donnez lui le nom de vous voudrez, c’est la solution (toujours en javascript) qui permet d’afficher une image (ou une vidéo) avec un effet de zoom et une opacité sur le fond. Vous pourrez même y intégrer des boutons de navigation pour en faire une galerie par exemple.

1. ShadowBox JS – un plugin wordpress simple et efficace
2. Facebox 1.2 – plugin simple et léger
3. Lightwindow – même genre à quelques détails prêts
4. FancyZoom – toujours pareil mais avec un autre style (JQuery)

Une page d’option pour le thème

Wordpress a du mal à évoluer aussi vite que la communauté wordpress. Par conséquent on s’organise pour mettre en place des solutions parallèles. Ainsi pour proposer des thèmes toujours plus complets on met à disposition de l’utilisateur une page d’options pour qu’il puisse par exemple gérer ses encarts pubs ou modifier les options d’affichage (couleurs, logo etc.) Voici deux tutoriaux (en) pour vous aider à mettre en place une page d’options sur le thème que vous utilisez ou celui que vous allez créer.

1. Tutoriel de ForTheLose.org – pourquoi et comment créer une page d’options pour votre thème
2. Tutorial du blog ThemeForest – un tutoriel tr§s détaillé sur la création d’une page d’option

J’ai bien conscience qu’une bonne partie de ces tutoriaux sont en anglais, s’il y en a un qui vous intéresse en particulier nous le traduirons. Sachez toutefois que nous ferons un article détaillé sur la page d’option d’un thème et sur la gestion des miniatures/thumbnails.

Article en partie traduit de ForTheLose.org

Vous avez aimé cet article : abonnez-vous au flux RSS