Julien Appert » Trucs et astuces

Optimiser WordPress, encore, toujours…

Julien Appert — Thu, 11 Mar 2010 11:19:49 +0000

J’ai déjà évoqué la question ici, il existe de nombreux moyens pour optimiser votre installation WordPress et, ainsi, gagner en performances. Aujourd’hui, je vais partager avec vous deux astuces, la première concernant votre base de données, et la seconde, moins essentielle, à propos de la sauvegarde des articles.

Voir et analyser les requêtes effectuées

Pour afficher une page, WordPress doit effectuer un certain nombre de requêtes dans la base de données. Une partie de celles-ci est générée par WordPress lui-même, mais le thème utilisé va jouer un rôle important, c’est pourquoi il est recommandé de remplacer certains appels de fonction par des données en dur. Par exemple, remplacer par http://monsite.com.

L’astuce que je vais vous donner vous permettra de voir précisément les requêtes effectuées pour chacune de vos pages. Ouvrez votre fichier wp-config.php et ajoutez-y le code suivant :

define('SAVEQUERIES', true);

A partir de maintenant, toutes les requêtes seront sauvegardées dans une variable, ce qui aura une influence négative sur les performances. Aussi, activez cette ligne uniquement pour l’analyse, ne la gardez pas en permanence.

Maintenant, ouvrez le footer.php de votre thème et ajoutez les lignes suivantes avant la fermeture du :

";
 print_r($wpdb->queries);
 echo "

"; } ?>

Une fois connecté en tant qu’administrateur, ce code affichera en bas de vos pages un tableau dont chacune des entrées détaillera : la requête exacte, le temps qu’elle a pris et l’arborescence des fonctions ayant provoqué cet appel. Testé ici-même, le code m’indique 28 requêtes pour la page d’accueil, et 42 pour un article¹. Ce qui est probablement perfectible…

Se passer des sauvegardes automatiques

Nous avons vu dans mon précédent article sur l’optimisation qu’il était possible de désactiver les révisions (point 6). Mais WordPress continue à effectuer des sauvegardes automatiques de vos articles en cours de rédaction. C’est très pratique, sauf lorsque vous créez du contenu en masse. Par exemple, dernièrement, il m’a fallu créer une arborescence d’une vingtaine de pages. La mécanique est simple et rapide : ajout du titre, choix de la page parent, et hop, j’enregistre. Sauf que ce dernier point est ralenti à cause de la sauvegarde automatique : je dois attendre la fin de son exécution pour publier. Frustrant, à la longue.

Pour ne plus avoir à affronter ce problème, deux solutions :

1. Modifier l’intervalle de sauvegarde automatique. Toujours dans le wp-config.php, ajoutez le code suivant :

define( 'AUTOSAVE_INTERVAL', 60 );

Avec de la chance, vous aurez le temps de créer votre page et de l’enregistrer avant qu’une sauvegarde auto soit lancée.

2. Désactiver totalement la sauvegarde automatique. Là, il va falloir créer un plugin tout simple. Créez un fichier dans votre dossier plugins, nommez le, par exemple, disable-autosave.php, et insérez le contenu suivant :

Grâce à ce plugin, le fichier javascript qui gère la sauvegarde auto ne sera plus appelé : vous en êtes libéré !

42… La réponse ultime à la grande question sur la vie, l’univers et le reste

Redéfinir les listes HTML générées par WordPress

Julien Appert — Fri, 19 Feb 2010 12:26:21 +0000

WordPress dispose de fonctions très pratiques pour afficher le contenu. Pour afficher la liste des pages disponibles de manière hiérarchique, il suffit d’utiliser la fonction wp_list_pages(), qui va générer toute seule le code HTML nécessaire, avec les listes imbriquées.

Seulement voilà, parfois, on a besoin de personnaliser un peu ce code HTML. Par exemple, moi, j’avais besoin d’ajouter une classe sur les liens, ce qui n’a pas été prévu par WordPress. Qu’à cela ne tienne, me direz-vous, il suffit de réécrire la fonction ! Pas si simple, car celle-ci utilise un système très efficace mais relativement compliqué appelé Walker (que vous trouverez dans le fichier wp-includes/classes.php). Et croyez-moi, vous n’avez pas envie de réécrire tout ça !

Le léger hack suivant va permettre de nous en sortir facilement.

Tout d’abord, il faut repérer la classe qui génère le contenu HTML. Dans le cas de la fonction wp_list_pages(), il s’agit de la classe Walker_Page (qui se trouve aussi dans le fichier précédemment cité). Copiez la dans votre plugin ou dans le fichier functions.php de votre thème, en prenant soin d’en modifier le nom. Par exemple :

class Walker_Page_modified extends Walker { ... }

Profitez en pour adapter le code HTML à vos besoins. Maintenant, voyons comment dire à WordPress d’utiliser votre classe personnalisée. Tout se passe dans les paramètres de la fonction wp_list_pages() :

wp_list_pages(  array( 'walker' => new Walker_Page_modified() )  );

Et voilà, c’est aussi simple que ça ! Vous avez réussi à plier WordPress à vos besoins, et non le contraire.

Créer des éléments HTML avec jQuery 1.4

Julien Appert — Fri, 15 Jan 2010 14:37:49 +0000

Si vous avez déjà essayé d’ajouter des éléments HTML avec javascript, vous le savez : c’est la croix et la bannière ! Pour faciliter cette action, la dernière version de jQuery (1.4) propose une nouvelle syntaxe appelée : Quick Element Construction. C’est d’une simplicité déconcertante :

jQuery("", {
 id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

Je suis déjà fan. La liste des fonctionnalités ajoutées à jQuery 1.4 est disponible sur le site jquery14.com.

Lunascape, le navigateur qui inclut Firefox, Chrome et Windows Explorer

Julien Appert — Mon, 04 Jan 2010 15:52:52 +0000

Mon titre n’est pas tout à fait exact : le navigateur Lunascape, développé par des japonais, inclut Gecko, Webkit et Trident, qui sont les moteurs de rendu respectifs des navigateurs sus-cités. Le principe est intéressant pour les intégrateurs. Grâce à Lunascape, on peut facilement (via une unique interface) vérifier le rendu final de notre travail sur les plus importants navigateurs du marché. Le logiciel intègre d’ailleurs des outils de deboguage assez utiles. Il est également possible de l’étendre avec des modules complémentaires… enfin, si vous comprenez le Japonais, car malheureusement, le site hébergeant les plugins est accessible uniquement dans cette langue.

Bref, Lunascape pourrait devenir l’outil ultime pour les intégrateurs de tous pays… s’il gérait les versions. Car le gros problème des intégrateurs, ce n’est pas vraiment d’afficher correctement leur travail sur les différents navigateurs. Globalement, les dernières versions respectent suffisamment les standards pour que leur rendu soit similaire. Non, le gros problème, c’est que leur travail s’affiche correctement Y COMPRIS dans les versions précédentes ! C’est-à dire au moins Firefox 2, Firefox 3, IE 6 et IE7. Et là, Lunascape n’est d’aucune utilité puisqu’il n’inclut que les dernières versions des moteurs de rendu.

Dans l’état actuel des choses, Lunascape n’est qu’une curieuse nouveauté prometteuse. Pour la production, je reste donc fidèle à IETester et à mes différentes instances de Firefox.

WordPress : comment personnaliser l’aperçu des articles

Julien Appert — Thu, 03 Dec 2009 08:00:06 +0000

Quand vous écrivez un nouvel article ou une nouvelle page, l’éditeur de WordPress vous laisse le choix entre deux interfaces : visuelle et HTML. Si vous maîtrisez le HTML et si vous tapotez du clavier à la vitesse de la lumière, ce dernier choix est un bon choix. Néanmoins, si vous préférez avoir un aperçu plus visuel de l’article en cours de rédaction, l’intérêt de l’interface du même nom est évident.

Grâce à cette interface visuelle, vous pouvez modifier le contenu de votre article en voyant immédiatement le rendu final. Malheureusement, ce rendu n’est pas parfait, car il ne correspond pas vraiment au style de votre site web. Sachez cependant que ce rendu est personnalisable, et si cette personnalisation n’est pas proposée de base dans WordPress, nous pouvons la réaliser simplement avec quelques lignes de code.

TinyMCE, l’éditeur riche universel

L’interface visuelle utilise un éditeur riche très puissant nommé TinyMCE. Il est très personnalisable et permet la création de plugins : c’est grâce à cette extensibilité que l’on peut ajouter des boutons dans la barre d’outils aussi facilement, comme c’est le cas pour le plugin Link To Post. Cette grande malléabilité en a fait le candidat idéal pour être introduit dans bien des projets web, comme WordPress ou Joomla.

Appliquer une feuille de style

Entre autres fonctionnalités proposées par TinyMCE, celle qui nous intéresse est l’application d’une feuille de style. En effet grâce à un paramètre renseigné à l’initialisation de l’éditeur, il est possible de le forcer à utiliser une feuille de style externe de notre choix.

1. Créer la feuille de styles

Vous pouvez toujours demander à TinyMCE d’importer directement la feuille de styles de votre site, mais le résultat risque d’être… intéressant. Ou en tout cas, probablement pas celui que vous escomptez. Non le mieux est de réaliser une feuille de styles indépendante qui contiendra uniquement les styles élémentaires, à savoir couleur de fond, choix de la police, taille et couleur de chaque élément HTML. Appelez ce fichier, disons, mce.css, et chargez le dans le dossier de votre thème.

2. Expliquer à l’éditeur où la trouver

Votre thème possède très probablement un fichier nommé functions.php. Si ce n’est pas le cas, créez-en un. Editez le, et ajoutez les lignes de code suivantes :

function tinymce_perso_css($wp) {

 return $wp .= ',' . get_bloginfo('template_url') . '/mce.css';
}
add_filter( 'mce_css', 'tinymce_perso_css' );

Voilà, c’est aussi simple que ça. Votre interface visuelle d’édition utilisera les styles présents dans mce.css et le rendu sera désormais plus proche de vrai rendu final.

Sélectionner manuellement les styles à appliquer

Il est possible d’aller un peu plus loin. Imaginons que vous désiriez appliquer différents styles css à vos paragraphes : par exemple, encadrer une ligne de texte. Par défaut, le TinyMCE personnalisé par WordPress affiche une liste déroulante vous permettant de sélectionner un format : paragraphe, adresse, titre 1, titre 2, etc. Mais vous pouvez également lui demander d’afficher une liste similaire qui vous proposera différents styles à appliquer. Cette manipulation est très simple :

1. Demander l’affichage de la liste déroulante des styles

Editez à nouveau votre fichier functions.php et ajoutez le code suivant :

function tinymce_buttons($buttons){
 $style = array('styleselect');
 $buttons = array_merge($style,$buttons);
 return $buttons;
}
add_filter('mce_buttons_2', 'tinymce_buttons');

La liste s’affichera au tout début de la seconde ligne de la barre d’outils de l’éditeur. Curieusement, la liste n’apparaitra pas si vous choisissez ‘mce_buttons_1′.

2. Créer les styles personnalisés

La liste déroulante possède déjà quelques styles par défaut. Mais vous pouvez en ajouter en éditant le fichier mce.css précédemment créé et en ajoutant des classes css. Par exemple :

.cadre{ border:1px dashed #000; }

Il ne vous reste plus qu’à sélectionner le texte et à choisir le style « cadre » dans la liste déroulante.

Grâce à ces quelques modifications très simples, vous avez à présent un rendu visuel proche de votre rendu final et pourrez facilement appliquer des styles css à votre prose.

Si vous êtes sages, je parlerais à nouveau des possibilités offertes par TinyMCE dans de prochains articles. C’est une zone stratégique de WordPress qui mérite d’être éclaircie !

11 astuces pour optimiser votre WordPress

Julien Appert — Tue, 24 Nov 2009 10:43:18 +0000

Tripwire Magazine publie un article très complet sur l’optimisation de WordPress (découvert grâce à AW), qui liste 11 astuces dans l’ordre décroissant de leur impact sur la performance. Comme l’article est long et en anglais, je me permets d’en faire ici un résumé en français (et non pas une traduction). Pour plus de détails, rendez-vous directement sur l’article en question.

1. Mettre en place un cache performant

Utiliser un cache consiste à créer des pages HTML sur votre serveur à partir des pages générées par WordPress. Ensuite le serveur n’a plus qu’à présenter ces pages, sans effectuer les multiples requêtes normalement nécessaires à leur affichage. Il existe plusieurs plugins de cache pour WordPress, mais le meilleur semble être WP Super Cache Plugin. Il permet un réglage précis du système de cache et permet notamment de préciser si une partie spécifique de la page doit rester dynamique (par exemple la liste des derniers commentaires).

Cette astuce est celle qui a le plus d’impact sur l’optimisation wordpress : si vous devez en choisir une, prenez celle-ci !

2. Optimiser votre thème en réduisant le nombre de requêtes au serveur, à la base de données et en diminuant son poids global

supprimer les requêtes PHP inutiles. Les thèmes téléchargeables sont faits de telle manière que vous n’ayez pas besoin de les modifier pour les appliquer à votre site. Par exemple, le lien vers la page d’accueil est généré grâce à l’appel de la fonction get_option(‘url’), qui va donc faire une requête dans la base de données. Vous savez que votre page d’accueil ne changera jamais d’URL ? Alors modifiez le thème en remplaçant la fonction PHP par votre URL en dur, et vous ferez du bien à votre serveur ! L’astuce est bien sûr applicable toutes les fois où vous trouverez la fonction get_option() dans votre thème.

Réduire le nombre de requêtes au serveur. Une page qui s’affiche dans le navigateur signifie souvent un nombre impressionnant d’appel de fichiers : les images, bien sûr, mais aussi les feuilles de styles et les fichiers javascript. Cela réduit d’autant les performances d’affichage de votre site. Il y a deux moyens d’améliorer les choses. Tout d’abord, combiner ces fichiers, c’est à dire, pour les images, utiliser les sprites CSS, copier le contenu de tous vos fichiers css dans un seul et unique fichier et faire de même pour les fichiers js. Ensuite, compressez ces fichiers en supprimant les blancs pour réduire leur poids. Evidemment, il existe des plugins wordpress pour ça : WP CSS et WP JS. Le seul problème, c’est que vous n’avez pas facilement la main sur les fichiers css et js ajoutés par les différents plugins installés…

Placer les appels javascript en bas de page. Le principal, c’est d’afficher votre contenu, n’est-ce pas ? Le javascript peut attendre. Placez, par exemple, vos codes pour la gestion des statistiques dans le footer.

Prévoyez un cache d’expiration pour ces fichiers. Tous les fichiers que le navigateur appelle pour afficher une page sont téléchargés sur le disque dur. S’il n’est pas désactivé, les navigateurs ont un système de cache interne qui fait qu’ils ne téléchargeront pas une seconde fois un fichier qu’ils ont déjà pendant un certain temps. Vous pouvez maitriser cette durée pour chacun de vos fichiers en précisant des dates d’expiration pour votre fichier .htaccess.

3. Nettoyer votre base de données

Les bases de données ont besoin d’être optimisées, nettoyées régulièrement, sans quoi leurs performances s’en font ressentir. Pour cela il suffit de lancer la procédure d’optimisation prévue dans phpmyadmin. Si vous n’y avez pas accès, vous pouvez installer le plugin WP DBManager, qui vous permettra de le faire.

4. Héberger vos images ailleurs

Un moyen simple d’économiser les ressources de votre serveur est de faire héberger vos images ou autres fichiers statiques sur des services externes, comme Amazon S3 Storage service. Evidemment, choisissez bien le site externe sur lequel vous hébergerez ces fichiers, car il ne faudrait qu’il ralentisse l’affichage de votre site (Amazon Storage semble une bonne solution de ce point de vue). Il reste également la possibilité d’appeler directement des images hébergées par le site de vos voisins, mais ce n’est vraiment, vraiment pas gentil (on appelle cette pratique du hotlinking).

5. Activer le cache WP Built-in

WordPress inclut de base un système de cache pour les objets PHP. Il est désactivé par défaut car il provoque une augmentation significative de l’utilisation de la mémoire du serveur, ce que votre hébergeur n’appréciera pas si vous êtes sur un serveur mutualisé. A manier avec précaution donc. Pour l’activer, rendez-vous dans la page wp-config.php :
define(ENABLE_CACHE, true);

6. Désactiver/limiter/nettoyer les révisions de billets

WordPress garde en mémoire les différentes versions de chaque billet : les révisions. Très pratique dans le cadre d’un travail collaboratif, mais cette accumulation de versions finit par prendre une place conséquente dans la base de données. Si les révisions ne vous sont pas d’une utilité renversante, autant vous en débarrasser. Pour désactiver leur création, voici une ligne à ajouter dans le wp-config.php :
define(’WP_POST_REVISIONS’, false);

Un compromis consiste à garder les révisions mais à en limiter le nombre :
define(’WP_POST_REVISIONS’, no_of_revision);

Mais bien sûr, cela ne supprimera pas les révisions déjà présentes dans votre base de données. Si vous n’avez pas accès facilement à phpmyadmin, vous pouvez utiliser le plugin delete-revision, qui fait ça très bien.

7. Toujours mettre à jour WordPress et ses plugins

En plus des nouvelles fonctionnalités offertes par ces mises à jour, elles offrent bien souvent des améliorations en terme de sécurité et de performance. Attention néanmoins à l’installation des plugins : ils ne sont pas toujours codés dans les règles de l’art et peuvent représenter des problèmes de sécurité et de performance.

8. Supprimer les thèmes non utilisés

Il n’y a aucune raison de garder un tas de fichiers inutiles sur le serveur, n’est-ce pas ?

9. Désactiver et supprimer les plugins non désirés

Si vous décidez de ne plus utiliser un plugin, désactivez et supprimez le.

10. Supprimer les commentaires indésirables (spam)

Les commentaires indésirables, même s’ils ne sont pas affichés sur le site, sont présents dans la base de données. Autant les supprimer régulièrement pour libérer de la place. Un plugin vous aidera à le faire facilement : WP-Optimize (il peut également vous être utile pour supprimer les révisions évoquées plus haut).

11. Vérifier les liens morts

Cette dernière astuce n’a pas vraiment d’impact sur l’optimisation des performances de votre site, mais il n’est pas négligeable sur l’expérience utilisateur. Il n’est pas rare que vos anciens billets pointent vers des liens morts, que ce soit vers des sites externes ou vers d’anciennes partie de votre propre site. Vous pouvez effectuer la vérification facilement grâce au plugin Broken Link Checker.

API Google Analytics : comment manipuler facilement les données de statistiques

Julien Appert — Tue, 17 Nov 2009 13:52:20 +0000

Suivre quotidiennement ses statistiques de fréquentation, quand on a plusieurs sites en ligne, ce n’est pas une sinécure ! Google Analytics est un service très pertinent, mais le nombre de clics nécessaire pour avoir une vision globale est plutôt rébarbatif. Heureusement, l’API permet de se concocter un rapport personnalisé assez facilement, notamment avec le projet GAPI, interface de connexion pour PHP.

Le principe est très simple. Voici un exemple de code pour récupérer le nombre de pages vues et de visiteurs pour les 30 derniers jours, sur chacun de vos blogs :

requestAccountData();

//la requête doit se faire sur une fourchette de dates au format yyyy-mm-dd
$today  = date('Y-m-d');
$monthago= date('Y-m-d',time() - 60*60*24*30);

//pour chaque profil de site enregistré sur le compte :
foreach($ga->getResults() as $account){

 // on récupère un tableau indexé sur la "date" contenant les informations "pageviews" et "visits". Le résultat est trié sur la "-date" (du plus gros chiffre au plus petit, donc du plus récent au plus ancien).
 $ga->requestReportData($account->getProfileId(), array('date'), array('pageviews','visits'), '-date', null, $monthago,$today); ?>

 
 Pages vues : getPageviews() ?>
 Visites : getVisits() ?>

Pour avoir le détail par jour, il suffit de développer un peu :

$ga->requestReportData($account->getProfileId(), array('date'), array('pageviews','visits'), '-date', null, $monthago, $today);

foreach($ga->getResults() as $result){ ?>


Pages vues : getPageviews(); ?>
Visites : getVisits(); ?>

Mais on peut aller beaucoup plus loin, en récupérant les sites référents, les mots-clés ou les navigateurs utilisés. Par exemple, pour afficher les sites référents et le nombre de visites pour chacun, la requête est :

$ga->requestReportData($ga_profile_id, array('source','referralPath'), array('visits'), '-visits', 'medium == referral',  $monthago, $today);

Notez ici la présence du filtre 'medium == referral', qui permet de garder uniquement les vrais sites référents dans la liste des résultats (donc exclure les moteurs de recherche). A contrario, pour afficher les mots-clés utilisés en provenance des moteurs de recherche :

$ga->requestReportData($ga_profile_id, array('source','keyword'), array('visits'), '-visits', 'medium == organic', $monthago, $today);

Bref, il y a énormément de combinaisons possibles. La liste des données exploitables est visible sur la page Dimensions & Metrics Reference de la documentation Google.

Grâce à ce système, nous pouvons complètement nous passer du site Google Analytics et développer notre propre interface d’étude des statistiques en fonction de nos besoins réels.

Dans un prochain billet, nous verrons comment utiliser l’API Google Chart pour réaliser des graphiques avec ces données.

Ouvrir plusieurs instances de Firefox

Julien Appert — Mon, 09 Nov 2009 22:58:09 +0000

Une autre plaie de l’intégrateur, c’est assurer la compatibilité avec les différents navigateurs. Pire, avec leurs différentes versions ! Pour Internet Explorer, il existe plusieurs outils, notamment le très pratique IETester, qui permet de regrouper dans un seul navigateur le rendu d’IE5.5, d’IE 6, 7 et 8. Mais se pose également le problème des versions de Firefox (2.0, 3.0 et 3.5). A priori, il n’existe pas encore de logiciel permettant de regrouper ces différentes versions de Gecko (le moteur de rendu Mozilla) dans une seule fenêtre.

Bien sûr, il est possible d’installer chacune de ces versions… malheureusement, Firefox est ainsi fait qu’on ne peut ouvrir plusieurs versions du navigateur en même temps. Il faut donc fermer une instance pour en ouvrir une autre : le calvaire !

Sauf qu’en cherchant un peu, j’ai fini par trouver un moyen :

commencez par installer les différentes versions de Firefox. Pour les trouver, il suffit d’aller sur le ftp de Mozilla.
via le gestionnaire de profils de Firefox, créez un profil pour chacune des versions installées. Pour gérer ces profils, le plus simple est d’installer le plugin ProfileSwitcher sur votre Firefox de travail.
créez sur votre bureau un raccourci pour chacune des versions de Firefox et modifiez leur cible pour ajouter le profil à ouvrir ainsi que la commande permettant d’ouvrir plusieurs instances. Exemple : "C:\Program Files\Mozilla Firefox2.0\firefox.exe" -p "Firefox2.0" -no-remote

Et voilà le travail ! Ah la la, la vie était quand même plus simple avant l’arrivée de Firefox, il suffisait de tester sous IE6…

…

Nan je déconne.

1 des 7 plaies de l’intégrateur : valider un blog plein de plugins

Julien Appert — Thu, 05 Nov 2009 23:37:16 +0000

Je suis en train de passer mon blog perso au validateur HTML et malheureusement, il y a des erreurs. Cela fait un bout de temps que je ne m’étais pas penché sur lui et j’ai une sacré palanquée de plugins installés… C’est là tout le problème.

Car les développeurs ne sont pas forcément des intégrateurs. Ce sont deux métiers différents, et pourtant le développeur est presque en permanence amené à générer du code HTML. Alors, s’il est consciencieux, il fait de son mieux et tente d’être le plus propre possible. Seulement, ce n’est pas toujours suffisant. Un exemple ? Le plugin « sociable ». Très pratique, ce plugin qui ajoute des liens pour partager l’article sur twitter, facebook, etc. Sur chacun de ces liens, le développeur a ajouté un identifiant. Très bien, c’est plus facile à styler. Voilà ce que ça donne : id="facebook", id="twitter", id="email"…

Vous levez le lièvre ? Si ces identifiants sont bien uniques au sein du plugin, c’est une toute autre affaire une fois ce dernier intégré dans l’écosystème du blog. En l’occurence, « email » est un identifiant que l’on retrouve dans le formulaire de commentaire. Résultat, le validateur m’envoie des noms d’oiseaux à la figure.

C’est pourtant très simple d’éviter ces petits désagréments. En tant que développeur ET intégrateur, je fais attention à précéder tous les identifiants générés par mes plugins par le nom de ce dernier. Dans le cas du plugin sus-nommé, cela donnerait id="sociable-email". Et voilà, aucun risque d’accrochage !