Logo WordPress Channel

Design > Développement Web > Tutoriels WordPress

Des tutoriels pour apprendre à modifier l’apparence de votre site WordPress.

infinite-loop

Masonry et Infinite Scroll sous WordPress sans plugin

Masonry et Infinite Scroll sont 2 scripts jQuery qui permettent respectivement de gérer des hauteurs de contenus différentes –  pour une disposition en colonnes de vos articles, et d’afficher les pages suivantes sans rechargement de page – au clic sur un bouton ou par simple défilement à la manière de Facebook ou encore Twitter. Face à l’absence de tutoriel complet sur l’intégration de ces 2 scripts jQuery sous WordPress, je vous ai concocté un tutoriel complet – ou presque, sur le sujet.

avatar-wordpress

Changer la taille par défaut des gravatars sous WordPress

Les gravatars donnent un côté humain à votre blog WordPress en affichant l’avatar de celui ou celle qui commente vos articles. Le principe est simple : associer une adresse e-mail à un utilisateur pour afficher son image partout sur la toile. Pour autant, ces derniers sont bien souvent affichés dans une taille inférieure à 64 pixels ce qui n’est guère la tendance actuelle ou qui ne conviendra pas en fonction de votre besoin. Une petite modification dans le code va nous permettra de la modifier.

jQuery_logo_color_onwhite

jQuery & WordPress – Une sidebar flottante

Il arrive parfois que le contenu d’une page soit long et que votre molette de souris chauffe à force de faire des allez-retours pour pouvoir accéder aux éléments de la sidebar. Une manipulation très simple vous permet en CSS de fixer cette sidebar afin qu’elle soit toujours visible à l’écran. Mais ce n’est pas suffisamment swag pour votre site alors nous allons-y ajouter un effet de décalage, en utilisant la fonction animate de jQuery.

wpchannel-isotope-portfolio-1

Concevoir un portfolio responsive avec filtre via Isotope.js sous WordPress

Un thème premium qui se respecte comporte des modèles de pages de type portfolio, très utile pour mettre en valeur vos créations artistiques notamment. La plupart d’entre eux sont dotés d’un système de filtre basé sur les termes d’une taxonomie spécialement créée pour l’occasion et le redimensionnement de la fenêtre réajuste automatiquement les éléments avec une transition en CSS3. Ce tutoriel va vous apprendre comment mettre en place un tel système sous WordPress et sans avoir recours à un plugin.

veille-tv-responsive

Ajouter des vidéos responsive sous WordPress avec FitVids.js

L’avènement du responsive design dans la communauté des concepteurs de thèmes WordPress nécessite d’aller plus loin dans le développement d’un thème. L’affichage d’une vidéo est l’une des complexités d’un design adaptatif dans le sens où nous devons prendre en compte le redimensionnement en fonction de la résolution du navigateur. C’est là qu’intervient le script FitVids.js que nous allons intégrer dans un thème WordPress en quelques minutes.

slider-wordpress

Créer un slider en pure CSS3 / HTML5 pour WordPress

HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition. Néanmoins, je vous propose aujourd’hui un tutoriel (inspiré de celui-ci) permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Et encore mieux, je l’adapte à WordPress. Au risque de me répéter, le slider présenté ici, n’est proposé qu’a titre expérimental afin de vous montrer les possibilités du CSS3  /HTML5. Il n’est pas conseillé de l’utiliser dans un cadre de développement cross-browser.

Définir une miniature d’article par défaut sous WordPress

Le module Image à la une introduit sous WordPress 2.9 permet d’afficher une image d’accroche pour vos articles. Les thèmes WordPress sont très friands de ce type de fonctionnalité… mais cela vous oblige à définir une image pour chacun de vos billets pour éviter de « casser » l’affichage de votre site. Prévenons ce problème en définissant une image par défaut.