Les images sont essentielles pour capter l’attention d’un visiteur. Elles permettent de rompre de longs morceaux de contenu, et permet de favoriser le partage de vos articles sur le Web. Mais, d’un autre côté, les images augmentent également le “poids” de vos pages.
Lorsque vous ajoutez une image dans une page, elle est alors téléchargée par le visiteur à partir de votre serveur vers son ordinateur. Cela contribue à augmenter le temps de chargement de la page, ce qui peut frustrer l’internaute et avoir un effet négatif sur le classement des moteurs de recherche.
La présence d’une grande quantité d’images augmentera la bande passante de manière significative et utilisera plus d’espace sur votre serveur. Ce n’est probablement pas un problème au début de la vie de votre site, mais cela pourrait augmenter, à terme, vos frais d’hébergement.
Je vais vous présenter dans cet article comment vous allez pouvoir optimiser vos images pour votre site WordPress.
Les différents formats de fichiers
Les logiciels de graphisme proposent d’enregistrer vos images sous différents formats. Les formats de fichiers en ligne les plus couramment utilisés sont le JPEG et le PNG.
Le JPEG convient mieux aux photographies car ils contiennent beaucoup d’informations de couleurs. Ce format utilise la compression pour réduire la taille du fichier. Le PNG, quant à lui, est plus adapté aux captures d’écran et aux images servant à la conception de sites web tels que les icônes et les boutons. Il utilise des techniques de compression sans perte donc la qualité est plus élevée, mais cela génère par conséquent des fichiers plus volumineux.
Optimiser les images permettra de réduire la taille du fichier, mais cela aura une incidence sur la qualité de l’image.
L’autre format que vous rencontrerez fréquemment sur internet est le GIF. Le format GIF est bien adapté aux images de faibles qualités avec peu de couleurs. Bien connu sur la toile, le GIF animé, est Le format de fichier pour les fichiers animés.
Optimiser vos images avant de les uploader sur votre site web
WordPress inclut une fonction bien utile de miniaturisation des images . Elle va créer automatiquement trois tailles différentes de toutes les images que vous allez télécharger. Vous trouverez ces indications dans votre tableau de bord WordPress sous Réglages > médias.
Vous pourrez ajuster les tailles de miniatures qui vous conviennent. Par exemple, vous pouvez configurer WordPress pour qu’il génère une image de 150 × 150 pixels pour les miniatures, une image moyenne de 300 × 200 pixels et une image de grande taille de 600 × 600 pixels.
Si vous avez téléchargé une image disons de 1000 pixels de large, vous pourrez afficher la version grande taille dans votre article avec un lien vers l’image en taille réelle. C’est exactement ce que font de nombreux blogueurs, mais ce n’est pas la meilleure façon de procéder dans le traitement de vos images. Le poids des fichiers des images réduites par WordPress sera plus petit, WordPress réduisant la taille de l’image téléchargée, mais il ne compresse pas les images quand il crée les vignettes. Une méthode plus efficace consiste donc à optimiser les images avant de les télécharger sur votre site.
La plupart des applications d’édition graphique vous permettent de réduire la qualité d’une image pour un usage sur internet. Par exemple dans GIMP, passez par Fichier > Export As…puis choisir le format de fichier approprié et éventuellement son taux de compression en faisant glisser le curseur “Qualité”. Cochez donc la case “Affichez l’aperçu” afin de vous rendre compte de l’impact sur l’apparence de l’image et faites ainsi le meilleur choix dans le rapport poids / qualité de l’image. Si votre logiciel ne possède pas d’option pour une sauvegarde optimisée sur le web il existe des logiciels qui peuvent s’en occuper. Pour Windows il existe, par exemple, RIOT qui peut aussi être installé en tant que plug-in dans GIMP, IrfanView ou encore XnView. Riot permet de comparer l’image originale à l’image optimisée. Un bouton “Full Auto Mode” permet l’optimisation de manière entièrement automatique.
Si vous n’avez encore jamais optimisé vos images sur votre site WordPress, Smush.it est un moyen rapide et efficace de réduire le poids de toutes vos images téléchargées. L’extension peut être très gourmande en ressources pour votre serveur lorsqu’il opère l’optimisation. Il est donc préférable d’exécuter l’application lorsque les visites sur votre site web sont moins importantes, par exemple la nuit.
Il existe des alternatives à WP Smush.it. Notamment : EWWW Image Optimizer , image CW Optimizer , Imsanity ou encore Hammy . Certains utilisateurs WordPress préfèrent utiliser ces extensions du fait qu’elles ne reposent pas sur un serveur externe pour traiter vos images.
Pour conclure
L’optimisation de vos images est importante et ne doit pas être sous-estimée. Optimiser vos images permettra de réduire le temps de chargement de votre site Web, de réduire la bande passante et d’améliorer ainsi l’expérience de navigation pour vos internautes. Vos pages s’affichant plus rapidement, votre classement dans les moteurs de recherche devrait également s’en trouver amélioré.
N’oubliez pas que le fait de comprimer une image va permettre de réduire la taille du fichier, certes, mais, si vous la comprimez de manière trop importante, la qualité visuelle s’en verra notablement réduite . Il est donc important de trouver l’équilibre entre la qualité de l’image et la taille du fichier d’image.
Pour ceux d’entre vous qui accordent une grande importance à la qualité d’image (par exemple, les photographes), il est possible de charger les images seulement lorsque l’utilisateur fait défiler la page vers le bas. Cela s’appelle le “Lazy loading”. Il existe des extensions comme charge Lazy (pas mis à jour depuis 2 ans…). Une fois activée, vos images ne seront affichées aux visiteurs que lorsqu’elles sont visibles dans leur navigateur. Cela réduit considérablement la taille initiale des pages Web contenant un grand nombre d’images.
Bien sûr, il existe encore d’autres méthodes pour optimiser son site WordPress (futurs posts ?)
Si vous avez des questions par rapport à ce tutoriel, utilisez les commentaires ci-dessous.
Pour beaucoup de personnes, WordPress sera probablement le premier CMS (Content Management System ou, en français, Système de Gestion de Contenu) qu’ils installeront pour réaliser leur site internet. C’est la raison pour laquelle les débutants de WordPress auront souvent tendance à commettre des erreurs « basiques ».
Dans cet article j’aimerais vous exposer quelques erreurs que les utilisateurs de WordPress peuvent être amenés à faire lorsqu’ils commencent à utiliser WordPress.
Installer des extensions qui ne servent pas
Les extensions qui ne sont pas utilisées devraient être désactivées et désinstallées si vous ne prévoyez pas de les utiliser.
Il n’est pas rare, lorsque l’on débute avec WordPress, d’installer bon nombre d’extensions. Les ressources pour faire tourner votre site sont plus importantes et aura pour effet de ralentir votre site, surtout si vous avez fait le choix d’un hébergement mutualisé premier prix.
Je vous conseille donc de n’utiliser que les extensions qui sont vraiment nécessaires pour votre site et aux objectifs que vous vous êtes fixés. Ne tombez pas dans le piège d’installer des dizaines d’extensions que vous n’utiliserez pas voire très peu. Je pense aux extensions de statistiques, par exemple, qui peuvent être très gourmandes en ressources et peu pertinentes si vous ne les utilisez pas régulièrement.
Installer WordPress dans un sous-dossier appelé…Wordpress
Le dossier compressé de WordPress compresse tous les fichiers de base dans un dossier appelé « WordPress ». Les débutants peuvent faire l’erreur de télécharger par FTP ce dossier sur leur site plutôt que les fichiers et dossiers contenus à l’intérieur de ce dossier. Ce qui fait que leur site se situe à une adresse http://monsiteweb.fr/wordpress plutôt que http://monsiteweb.fr.
Wordpres vous permet d’installer votre site dans un dossier différent que celui dans lequel il est situé. Cependant, dans la plupart des cas, il est plus simple d’installer WordPress dans le même emplacement. C’est généralement à la racine de votre site ou dans un sous-dossier, comme « /blog », par exemple.
Ne pas utiliser la ré-écriture « propre » des liens
Par défaut, la ré-écriture des liens dans WordPress est de type http://localhost/wp01/?p=123 ; cela affiche des liens du type http://monsiteweb.fr/?p=35 plutôt qu’une adresse plus « parlante » comme http://monsiteweb.fr/mots-clés-pertinents.
Beaucoup de débutants laissent la structure des permaliens par défaut plutôt que d’utiliser une structure plus orientée vers l’utilisateur, qui utilise des mots clés. C’est ce qu’on appelle parfois la ré-écriture propre des URLs.
La page WordPress des options de permaliens
J’utilise « Nom de l’article » (http://localhost/wp01/exemple-article/) sur la plupart de mes sites web. Cela permet de conserver des liens courts et me permet d’insérer des mots clés pertinents dans l’adresse URL. Pour ce faire, cliquez sur « modifier » au niveau du permalien, sous le titre de votre article.
Pour modifier les permaliens à partir de l’administration de WordPress, les droits d’accès à votre fichier .htaccess devraient être réglés à 644.
Droits d’accès, sur FileZilla
Si vous n’avez pas les permissions suffisantes pour mettre à jour les droits d’accès de votre fichier .htaccess à partir de l’administration de WordPress, ce dernier vous donnera le code à insérer en fonction de la structure du permalien choisie. De cette manière, vous pourrez mettre à jour le fichier .htaccess manuellement avec le gestionnaire de fichiers distants de votre hébergeur ou bien en utilisant un logiciel FTP comme FileZilla.
Publier des pages incomplètes
Un site qui fait apparaitre des pages incomplètes fait vraiment amateur. L’erreur d’un débutant est de publier un site incomplet. Le visiteur se retrouve alors face à une page indiquant « Bientôt… » ou encore « En cours de construction ».
Ceci devrait être une règle : vous ne devriez jamais faire de lien vers une page qui n’est pas complète. Faire cela éloignera vos visiteurs et donnera l’impression que vous ne prenez pas votre site au sérieux.
Je vous conseille plutôt d’attendre que votre site soit complet avant de le mettre en ligne. Pendant que vous mettez à jour votre site WordPress vous pouvez toujours utiliser une extension de maintenance qui permettra de pouvoir annoncer la date de lancement de votre site ou encore de récupérer les adresses mails des personnes qui souhaitent être tenues informées de la mise en ligne du site ou de vos services.
Ne pas faire les mises à jours de WordPress
Il est important de garder votre installation WordPress à jour. Cela est vrai aussi pour le thème et les extensions que vous utilisez. Ne pas faire ces mises à jour va, d’une part, augmenter les chances de piratage de votre site, puis, d’autre part, rendre l’ajout de nouvelles extensions ou de thèmes de plus en plus compliqué.
WordPress étant conscient des risques résultants de la non mise à jour des versions, a mis en place, depuis la version 3.7 d’octobre 2013, la mise à jour automatique. La maintenance et les failles de sécurité se font donc, depuis cette version, de façon automatique. Reste à vérifier, quand même, que cela n’entraîne pas d’incompatibilités avec les extensions utilisées.
Depuis la version 3.7 la mise à jour de WordPress se fait automatiquement et ce, par défaut.
Ce n’est cependant pas le cas pour votre thème ou les extensions.
Afin d’activer les mises à jour automatiques pour vos extensions vous devrez ajouter ces codes dans votre fichier wp-config.php :
Si vous utilisez une version plus ancienne que la 3.7, je vous conseille vivement de faire la mise à jour vers la dernière version de WordPress. Cela permettra de conserver beaucoup plus facilement votre site à jour et à l’abri des mauvaises surprises.
Ne pas utiliser un mot de passe suffisamment fort
Deviner votre nom d’utilisateur et votre mot de passe est la première façon qu’utilisera une personne malveillante pour accéder à l’administration de votre site. Auparavant, lors de l’installation de WordPress, le nom d’utilisateur principal était systématiquement « admin ». Cela a évolué et, dorénavant, il est possible, et recommandé, de choisir son nom d’utilisateur. Par contre, un mot de passe « faible » sera toujours du pain bénit pour un hacker souhaitant accéder à votre site.
Cela vaut pour votre site sous WordPress comme pour tous les autres services que vous utilisez sur internet et qui demandent un identifiant et un mot de passe.
Pour créer un mot de passe fort il existe différents services sur internet ainsi que des logiciels. Je vous présente celui que j’utilise depuis plusieurs années avec satisfaction. Il s’agit d’un logiciel libre et multi-plateforme. C’est à dire que vous pourrez l’utiliser quelque soit votre système d’exploitation (Linux, Mac OS ou encore Windows). Il s’agit de Keepass. Ce logiciel vous permettra de générer des mots de passe forts ainsi que de les mémoriser. Je ferais un tutoriel complet sur son utilisation ultérieurement.
Générateur et gestionnaire de mots de passe
Ne pas faire de sauvegardes régulières
Les nouveaux utilisateurs de WordPress (voire d’autres CMS) peinent à reconnaitre l’importance de la sauvegarde régulière de leur site. C’est une erreur qui peut se prolonger jusqu’au jour où leur site se retrouve piraté et qu’ils perdent leurs données. Cela vaut aussi pour vos données stockées sur votre ordinateur, mais cela pourrait faire l’objet d’un autre article.
Il est vraiment dommage qu’il faille passer par une perte de données pour, finalement, se rendre compte de l’importance que représente une sauvegarde régulière de votre site, d’autant qu’il y a des solutions assez faciles à mettre en œuvre. Cela peut se faire à l’aide d’extensions comme BackWPup Free, par exemple. Vous aurez alors le choix de réaliser vos sauvegardes par FTP, sur un service de stockage en ligne (Dropbox, Amazon S3…) ou encore sur votre PC. Notons aussi la solution proposée par Vaultpress et orchestrée par Automatic, la société qui gère wordpress.com. Votre site sera alors sauvegardé sur les mêmes serveurs que ceux de wordpress.com, plutôt fiable. Solution efficace et assez facile à mettre en œuvre, donc, mais qui vous coutera 5$ par mois. Vérifiez également au niveau de votre hébergeur s’il ne propose pas déjà une offre permettant de réaliser ce type de sauvegardes. L’idéal étant que la sauvegarde s’effectue sur un autre serveur que celui sur lequel est situé votre site, bien sûr.
Ne pas avoir réfléchi à la structure de son site
Avant de vous lancer dans la réalisation de votre site, prenez le temps de prendre un crayon et un papier. Couchez sur papier, même grossièrement, la structure de votre site, les informations que souhaitez y faire figurer, leurs hiérarchisations… Cela vous fera gagner beaucoup de temps dans la création de votre site en vous évitant de revenir sur sa conception une fois qu’il sera en ligne. Réfléchissez aux informations qui resteront « statiques » et celles qui seront amenées à évoluer ou à s’enrichir régulièrement. Quelles pages, quels articles, quels catégories, quels mots clés allez vous utiliser ? N’hésitez pas à vous inspirer de sites déjà existants et qui sont dans le même domaine d’activité que le votre. Surtout, essayez de vous mettre à la place de l’internaute qui visitera votre site. Faites donc tester votre site par une ou plusieurs personnes et observez comment ils se comportent, quels sont leurs retours, leurs impressions…
Nombreuses sont les personnes qui customisent leur thème WordPress. Cependant, il semblerait qu’une minorité d’utilisateurs de WordPress utilise un thème enfant. Serait ce dû à un manque de compréhension à ce qu’est un thème enfant dans WordPress ? Ou peu-être est-ce l’impression qu’il est difficile d’en créer un ? Dans ce tutoriel je vous propose de voir comment en créer un simplement. Nous allons voir aussi pourquoi créer un thème enfant WordPress peut se révéler très pratique et vous faire gagner du temps, notamment lors des mises à jours de votre thème principal, le thème « parent ».
Pourquoi devriez vous utiliser un thème enfant ?
Créer un thème enfant lorsque vous opérez des modifications de code dans votre thème peut vous épargner de futurs mots de tête. Les thèmes enfants vous permettent de modifier et d’adapter le code de votre thème d’origine. Ainsi, les futures mises à jour de votre thème parent n’effaceront pas vos modifications et ne modifieront donc pas l’apparence de votre site que vous aurez paramétrée dans votre thème enfant. En créant un thème enfant, vous créez un ensemble de fichiers séparés qui seront utilisés pour personnaliser votre thème sans que cela n’affecte le thème d’origine. Non seulement cela permet de rendre les mises à jours plus faciles, mais cela vous assure aussi de ne jamais rendre votre thème d’origine (thème parent) inutilisable du fait que vous ne modifierez jamais ses fichiers. Vous pourrez toujours désactiver votre thème enfant WordPress et ainsi revenir à l’original.
Pour commencer
Dans cet exemple, nous allons créer un thème enfant pour le thème Twentytwelve, qui fut le thème WordPress par défaut en 2012. Le thème par défaut en 2014 est appelé Twentyfourteen. Avant toutes choses nous avons besoin de créer un nouveau dossier pour votre thème enfant. Nommons le de la manière la plus conventionnelle, c’est à dire /twentytwelve-child/. Dans ce nouveau dossier de thème, créez un fichier appelé style.css et remplissez-le avec les informations ci-dessous. Le nom du thème (Theme Name), son adresse (Theme URL), sa description et son auteur (Author) sont à remplir selon votre cas et votre inspiration.
Description: C’est un thème que j’ai personnalisé avec telle couleur pour tel élément. C’est un thème qui peut s’adapter à tel secteur d’activité.
Template: twentytwelve
This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you’ve learned with others. */
@import url(« ../twentytwelve/style.css »);
/* =La personnalisation de votre thème commence ici ——————————————————- */
Les parties les plus importantes de ce fichier sont « Template : » et « @import » qui identifient les sources CSS du thème parent. Assurez vous que l’adresse vers votre thème parent est bien la bonne et que le nom du « Template : » correspond bien au nom du thème parent. Si vous utilisez un autre thème modifiez ces paramètres en conséquence. Veillez à bien respecter la casse, c’est à dire qu’une lettre majuscule est reconnue différemment de la même lettre en minuscule. Ici, dans notre exemple, le thème twentytwelve est tout attaché et en minuscule.
Activez votre thème enfant
Une fois que vous avez créé votre dossier de thème enfant contenant le fichier style.css, vous pouvez transférer et activer votre nouveau thème enfant. Transférer et activer un thème enfant se fait de la même façon que pour un thème « normal ». Depuis votre tableau de bord WordPress, transférez votre thème enfant via Apparences>Thèmes>Ajouter>Mettre un thème en ligne>Parcourir puis sélectionnez votre thème sur votre ordinateur. L’upload débutera et vous n’aurez plus qu’à l’activer. Au préalable, vous devrez compacter votre fichier au format zip. Bien sûr, pour que cela fonctionne le thème parent devra être présent. Il est aussi possible de transférer tous ces éléments par FTP, avec FileZilla, par exemple, sans avoir à les zipper au préalable.
Modifiez le style CSS de votre site
Nous avons donc créé notre thème enfant et nous l’avons téléchargé sur notre serveur distant. Bien. Vous ne verrez pour l’instant aucune incidence sur l’apparence de votre thème. En effet, tout ce que nous avons fait est d’importer le thème parent mais nous n’avons pas encore appliqué d’ajout de CSS. Tous les ajouts de CSS que nous ferons dans le thème enfant seront chargés après le thème parent. Tous les nouveaux styles CSS viendront remplacer ceux du thème parent. Par exemple, disons que nous voulons changer la couleur des titres de notre site. D’origine la couleur hexadécimale est #515151 ce qui correspond à un gris. Admettons que nous voulions plutôt une couleur rose qui est en hexa #FD6C9E. Il suffit d’ajouter le code css comme sur l’image ci-dessous :
Une fois la modification effectuée et votre page rafraîchie, le CSS de votre thème enfant va remplacer celui du thème parent, ici, twentytwelve. Dans notre exemple le titre de notre site sera rose, comme le montre les deux images ci-dessous :
Avant la modification du CSS
Après la modification du CSS
Éditez le fichier functions.php
Functions.php est le fichier php où sont habituellement stockées les fonctionnalités principales d’un thème WordPress. Les fonctionnalités d’un thème parent sont toujours chargées avec le thème enfant, mais si vous avez besoin d’ajouter des fonctionnalités particulières à votre thème alors vous pouvez le faire en créant un nouveau fichier functions.php au sein de votre dossier de thème enfant, ici twentytwelve-child. Ce nouveau fichier functions sera chargé juste avant celui du thème parent. Votre fichier functions de votre thème enfant doit commencer par la balise d’ouverture php <?php et se terminer par la balise de fermeture php ?>. Entre les deux vous pouvez ajouter le code php requis.
Editez d’autres fichiers du template
Au delà du fichier CSS et du fichier functions.php, vous pourrez opérez des modifications structurant votre site en modifiant d’autres fichiers php constituant votre thème. Ceci est à réaliser avec précaution , mais de la sorte vous pourrez intervenir sur n’importe quel aspect de votre site. Contrairement au fichier functions.php qui est chargé automatiquement par le thème parent, les autres fichiers php devront être entièrement copiés dans votre dossier de thème enfant puisqu’ils remplaceront complètement ceux du thème parent. Ils pourront alors être édités et modifiés comme souhaité. Les fichiers php du thème parent seront alors complètement ignorés. La première chose dont nous avons donc besoin est de dupliquer le fichier du thème parent pour pouvoir, ensuite, l’éditer. Pour ce faire, il suffira de copier / coller le fichier concerné dans votre dossier de thème enfant en vous assurant bien de conserver le même nom et le même emplacement hiérarchique que dans le dossier du thème parent. Par exemple, si nous voulons modifier twentytwelve/page-template/front-page.php alors nous copierons et collerons ce fichier à l’emplacement twentytwelve-child/page-template/front-page.php. WordPress saura utiliser ce nouveau fichier php en lieu et place de l’original car son nom et son emplacement sont identiques. Vous pourrez ensuite ouvrir ce fichier et y apporter vos modifications.
Trouvez d’autres ressources concernant les thèmes enfants
Si, malgré ce tutoriel, vous éprouvez des difficultés pour réaliser un thème enfant il existe des plug-ins qui permettent de créer un thème enfant en 1 clic (ou presque). Vous avez par exemple : One-Click Child Theme Child Themify
Si vous avez besoin de précisions par rapport à cet article, le codex de WordPress est une ressource toujours intéressante.