Logo WordPress Channel

Design > Tutoriels WordPress

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

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.

thumbnail

Comment redimensionner / rogner une image sous WordPress sans timthumb.php ?

timthumb.php est sans doute l’un des scripts PHP les plus populaires sous WordPress. Il permet de rogner et de redimensionner à la volée vos images. Basé sur un système de cache, ce script n’en reste pas moins gourmand en CPU et présente de graves failles de sécurité… alors même que WordPress propose en natif des fonctionnalités de gestion des images similaires !

thumbnail

Tout savoir sur la gestion des miniatures (thumbnails) avec WordPress

Depuis la version 2.9 de WordPress, les miniatures d’articles ont fait leur apparition sous la forme d’un module « Image à la une » dans l’éditeur. Ces miniatures nécessitent que le thème prenne en charge une telle fonctionnalité ce qui est encore loin d’être le cas. Je vous propose donc de suivre ce tutoriel pour rendre compatible votre thème et de bénéficier ainsi d’une fonctionnalité au combien utile.

elephant-php-ini

Afficher du code source sans plugin dans WordPress

Procédure de conversion du code source via TinyMCE

Voici la procédure que je suis pour partager les astuces PHP sur WordPress :

  1. Créez un nouvel article ou une nouvelle page depuis votre administration WordPress ;
  2. Dans la zone de saisie de texte en mode Visuel, collez votre bout de code source – PHP par exemple ;
  3. Cliquez dessus pour placer le curseur dans la ligne de code puis déroulez le menu Format. Choisissez Pré-formaté, cela aura pour effet d’entourer le code de balises <pre> ;
  4. Vérifiez que le code a bien été converti en HTML en passant par l’onglet HTML de TinyMCE (l’éditeur de WordPress) ;
  5. Vous remarquerez que les guillemets ouvrant donne ceci &lt; et les fermants &gt; preuve de la conversion ;

En résumé, il suffit de coller du code dans l’éditeur puis de cliquez sur le bouton du mode HTML pour convertir le code. N’oubliez pas d’ajouter les balises <pre> et le tour est joué !

Adaptation visuelle via CSS

Pour donner un aspect programmation à vos lignes de code, rendez-vous dans Apparence puis Editeur. Modifiez ensuite le fichier style.css de votre thème.

Recherchez tout d’abord si la balise pre est présente ou non. Si ce n’est pas le cas, ajoutez des propriétés CSS dans le même genre que celles-ci :

Ceci aura pour conséquence d’appliquer un style au pré-formaté.

pre {
background:none repeat scroll #f9f9f9;
border-left:5px solid #ccc;
clear:both;
font:normal normal normal 11px/18px Monaco, monospace;
margin-bottom:18px;
overflow:auto;
padding:10px 15px;
}

Différence entre la balise pre et code ?

La première différence à mes yeux reste que la balise pre s’utilise pour un paragraphe alors que la balise code peut s’appliquer pour un mot dans un paragraphe.

Par exemple, si vous consultez le code source de cet article via le navigateur vous vous apercevrez que j’ai utilisé les 2 types de balises.

Il existe sans doute d’autres différences mais je ne les connais pas !

Cette technique fonctionne avec du code HTML, CSS mais notamment PHP. Je n’ai pas essayé pour d’autres langages mais je vous invite à la tester car elle présente le gros avantage de ne pas avoir recours à des plugins souvent très lourds (nombreuses feuilles de styles CSS et requêtes).

Crédits photo : Laughing Squid