20 Fév 2011

10 trucs et astuces pour optimiser votre thème WordPress

1 / Créer un dossier inc

Si vous avez l’habitude d’ajouter quelques hacks dans votre fichiers functions.php, celui-ci deviendra très vite illisible et désorganisé puisque ça sera votre fichier « fourre-tout ». Pour parer à cela, je vous suggère de créer dans votre thème un dossier « inc » puis de créer autant de fichiers que vous écrierez de fonctions. Le morceau de code suivant est à placer dans votre fichier functions.php et va aller chercher tous les fichiers se trouvant dans le dossier inc et dont l’extension est php.

<?php
if( is_dir( TEMPLATEPATH.'/inc' ) ) {
	if( $dh = opendir( TEMPLATEPATH.'/inc' ) ) {
		while( ( $inc_file = readdir( $dh ) ) !== false ) {
			if( substr( $inc_file, -4 ) == '.php' ) {
				include_once( TEMPLATEPATH.'/inc/' . $inc_file );
			}
		}
	}
}
?>

2 / Réspecter les coding standards

Les coding standards sont un ensemble de règles fixées entre les développeurs qui consistent à harmoniser la façon dont le code source est présenté. L’indentation du code est naturellement très important mais vous noterez de nombreuses petites subtilités qui une fois respectées rendront la relecture de votre code beaucoup plus simple.

Voyons quelques exemples :

La gestion des espaces

FAUX

foreach($foo as $bar){ ...

BON (pensez à ajouter des espaces)

foreach ( $foo as $bar ) { ...

Les conditions


Si vous n’avez qu’une seule action à exécuter après votre condition, nul besoin d’utiliser des accolades :

if ( condition )
    action1();
elseif ( condition2 )
    action2();
else
    action3();

Les short tags php

BON

<?php $var; ?>

FAUX Attention au short tags de php. Si vous utilisez ce raccourcis, certains serveurs interpréteront cela comme du contenu XML et afficheront donc votre code source… Danger !

<? $var; ?>

> Lien vers le Codex – Coding Standards

3 / Ajouter des tailles de vignettes pour les images à la une

Il est important de recenser les différents formats d’image dans un même fichier. Vous pouvez les insérer directement dans votre fichier functions.php car vous aurez très souvent besoin d’en ajouter ou de vérifier leurs dimension/slugs.

> En savoir plus sur les tailles des thumbnails dans WordPress

4 / Définir des constantes

Si vous utilisez dans votre thème des ID, des slugs de pages, de taxonomies de custom post types ou autres, il faut utiliser des constantes. Ce sont des variables que vous allez définir dans votre fichier functions.php qui seront utilisables dans tout votre thème.

Exemple avec un numéro de page :

1 ) On déclare la constante une seule fois dans le fichier functions.php

<?php define ( 'IDPAGECONTACT', 34 );  ?>

2 ) On utilise non pas l’ID de la page directement mais le slug que nous auront défini

<?php echo get_permalink( IDPAGECONTACT ) ; ?>

Si l’ID de la page de contact vient à changer, plutôt que de scanner tout le thème pour savoir où nous avions utilisé cet ID, il suffira de modifier la valeur de la constante une seule fois.

5 / Créer un fichier 404.php

Une thème complet contient une page d’erreur 404 personnalisée (404.php). En la présence de ce fichier, les liens qui ne fonctionnent pas renverront automatiquement vers cette page qui peut au passage être personnalisés comme le montre cet article sur les plus belles pages 404. Vous pouvez également décider d’afficher en plus du message d’erreur les articles les plus populaires de votre blog pour vous éviter de perdre vos visiteurs.

6 / Modifier le fichier style.css et ajouter un fichier screenshot.png

Pour modifier les informations de base de votre thème, c’est le fichier style.css qu’il vous faudra modifier. Prenez comme modèle le thème par défaut de WordPress (Twenty Ten) et modifier ces informations à votre guise. Faites aussi une capture d’écran de votre thème puis renommez-là screenshot.png. Elle apparaîtra dans la page qui liste les thèmes.

6 / Supprimer tous les fichiers/dossiers inutiles

Il est plus qu’important au moment où l’on travaille sur un thème et qu’on commence à en maîtriser tous les fichiers de supprimer ceux qui ne servent à rien dans le contexte actuel. Vous ne souhaitez pas afficher les commentaires sur votre site ? Très bien mais pensez à supprimer tous les fichiers relatifs aux commentaires. Vous ne comptez pas utiliser le super slider en flash de votre thème gratuit ? Très bien mais supprimez tous les fichiers qui le compose. Cela vous servira lorsque vous vous replongerez dans un thème que vous avez utilisé plusieurs mois auparavant car il vous semblera bien plus léger.

7 / Utiliser un SVN

Un SVN (pour Subversion) est un système de gestion de versions. Un outil de développement collaboratif qui vous évitera la mauvaise surprise du « oups, je crois que j’ai supprimé un truc qui fallait pas ». Le principe est simple. Vous allez sauvgarder votre dossier de travail (votre thème dans notre cas) sur un dépot quelque part sur Internet. A chaque modification de votre part ou de l’un de vos collaborateurs, une version est sauvegardée et vous pourrez revenir dans le temps en cas de problème. Quand un fichier est modifié, vous pouvez le comparer avec ses précédentes versions et constater quelles lignes ont été modifiées. Vous pourrez aussi confier votre code à de nouveaux collaborateurs qui récupéreront votre thème dans l’état actuel, feront leurs modifications, et les ajouteront au thème.

8 / Don’t repeat yourself

Ce concept s’adapte à tous les langages de développement et l’idée est de ne jamais écrire deux fois les mêmes lignes de code s’il y a possibilité de les regrouper dans une fonction. Vous avez développé 10 lignes de code qui vous permettent d’aller récupérer le dernier article de la catégorie « Fruits et Légumes » et d’en afficher le titre et le permaliens ? Bien mais l’idéal aurait été d’en créer une fonction et de l’appeler ensuite là où vous en avez besoin. De manière générale, vous devez séparer le code « fonctionnel » (le développement) du code réservé à l’affichage de votre template (l’intégration).

9 / Commenter son code

Cela peut sembler inutile lorsque l’on est en train de travailler sur un projet puisque ayant la tête dedans jours et nuits, l’on en connaît les moindre recoins. Et bien c’est à ce moment qu’il faut faire une passe générale sur son thème et commenter les fonctions qui pourront par la suite être difficilement compréhensibles. De même, il convient d’utiliser des noms de variable et de fonctions qui ont une signification. ( $swf_url est plus compréhensible que $mavariable1 )

10 / Proposer son thème à la communauté WordPress

Si vous avez créé un thème from scratch et qu’il est suffisamment générique pour convenir à d’autres personnes, n’hésitez-pas à en faire profiter la communauté. Celle-ci vous en sera redevable et votre notoriété augmentera. J’écrierais prochainement un article sur les choses à faire pour ajouter son thème à la librairie officielle de WordPress.

4 Commentaires

  • bonjour,
    je me permets de vous poser une question concernant la visibilité de mon blog. Il s’affiche avec des pages d’erreurs. Je l’ai désinstallé et c’est toujours la même chose. Pourriez-vous m’aider?
    merci d’avance.
    emma

  • bonjour,

    nouveau thème??? Quel message d’erreur, Emma?

  • bjr,

    Normal qu’elle ne vous réponde pas 10 mois après !! vous validez les coms, donc vous les lisez. quel irrespect pour les lecteurs. je pars et ne reviens plus.

    bye

  • J’ai un client qui va refaire son site suite à mes préconisations, par quelqu’un qui manipule wordpress mais sans réelles compétences de développement. J’avoue que je m’inquiète un peu en lisant les blogs de pro à droite et à gauche d’autant plus que je n’ai jamais travaillé sur wordpress moi-même. Merci donc pour ces posts. Et il y a tout l’aspect responsive design / html5 …

Laisser un commentaire

Rechercher