15 choses à faire et à ne pas faire pour un design WordPress efficace

Aujourd’hui, j’aimerais passer en revue les choses à faire et à ne pas faire dans le domaine de la création de thèmes WordPress. Que vous construisiez un thème WordPress pour vous-même ou que vous le diffusiez pour que d’autres puissent l’utiliser, vous devez suivre ces choses à faire et à ne pas faire le plus fidèlement possible.

1. Ne pas coder en dur des URL complètes dans vos thèmes

Lorsque vous créez vos thèmes, il peut arriver que des images soient utilisées, pour des icônes de médias sociaux ou des icônes de flux RSS, et à ce stade de votre codage, vous pouvez vouloir coder l’URL complète (par exemple : /wp-content/themes/votre-nom-de-thème/images/image.jpg), mais cela provoquera des erreurs sur le site web chaque fois que la personne qui utilise votre thème changera le nom du dossier de son thème.

Les codes à utiliser pour extraire l’URL complète de manière dynamique sont les suivants.

<?php bloginfo('stylesheet_directory') ; ?>/images/image.jpg

2. Utiliser autant que possible les balises du modèle.

WordPress fait un excellent travail en présentant toutes les balises de modèle que vous pouvez utiliser, alors faites-vous une faveur (ainsi qu’au reste des personnes qui peuvent utiliser vos thèmes) et apprenez les balises de modèle de WordPress – puis utilisez-les autant que possible. En utilisant les balises de modèle, vous êtes en mesure de vous assurer que vos thèmes ne se cassent pas ou ne provoquent pas d’erreurs lorsque l’utilisateur final les configure et les fait fonctionner.

3. N’oubliez pas les codes de navigation déroulants

Lorsque vous construisez votre thème WordPress, un élément qui semble être négligé est le code des menus déroulants pour votre navigation. Bien sûr, certains thèmes peuvent avoir la navigation configurée pour ne pas utiliser les ul à plusieurs niveaux, gardant tout dans une seule ligne, mais qu’en est-il pour ceux d’entre nous qui ont plusieurs pages enfants pour chaque page parent principale ?

Il existe une solution pour cela. Vous pouvez consulter certains des tutoriels ci-dessous sur la manière de coder des menus déroulants à plusieurs niveaux.

• Comment mettre en place une barre de navigation multi-niveaux parfaite
• Menus déroulants de navigation à plusieurs niveaux : Exemples et tutoriels
• Menus multi-niveaux avec jquery et css

4. Faites en sorte que votre thème soit compatible avec les widgets

Selon moi, en tant qu’utilisateur final, il n’y a rien de pire que de déployer un thème et de s’apprêter à tout mettre en place, pour finalement se rendre compte que je suis maintenant confronté à la tâche d’essayer de personnaliser des sections de mes thèmes en y codant des informations en dur. Vos barres latérales et divers autres endroits de votre thème (vous avez un pied de page à trois colonnes ? faites-en un widget !) doivent être aussi faciles à éditer que possible. C’est l’une des choses les plus faciles à faire pour vos thèmes, et cela profitera grandement aux utilisateurs de votre thème.

Automattic a un excellent tutoriel sur la façon de widgetiser votre thème. Consultez-le ici.

N’oubliez pas non plus de consulter le tutoriel sur les thèmes widgetisés ici à Theme Lab.

5. Ne faites pas dépendre les utilisateurs de nombreux plugins pour que votre thème fonctionne

Si vous publiez des thèmes gratuits ou créez des thèmes WordPress commerciaux, vous devez prendre en compte l’intérêt de vos utilisateurs finaux lorsque vous construisez vos thèmes. En encombrant vos thèmes de 5 à 10 plugins nécessaires, non seulement les utilisateurs seront frustrés lors du téléchargement et de l’installation de votre thème sur leur site, mais beaucoup d’entre eux ne le téléchargeront pas du tout car, soyons réalistes, les gens n’ont pas une capacité d’attention de plus de 2 à 3 secondes.

Par exemple, si vous avez l’intention de mettre en place une pagination dans votre thème, pourquoi ne pas utiliser cet article pour apprendre à la mettre en place automatiquement dans votre thème. Cats Who Code a un très bon tutoriel sur la façon d’ajouter la pagination dans votre thème sans avoir besoin d’activer un plugin.

6. Afficher le terme recherché sur la page des résultats de la recherche

Pour une raison quelconque, il s’agit d’une astuce souvent négligée que vous pouvez (et devez) mettre en œuvre dans vos thèmes. Il s’agit d’un code simple, d’une ligne, qui permet à votre thème de rappeler au visiteur ce qu’il vient de rechercher. Cela peut sembler trivial, mais c’est utile pour que, si les résultats ne donnent aucun article, le visiteur connaisse l’expression exacte qu’il a recherchée et puisse ensuite taper un autre terme de recherche.

Vous trouverez ci-dessous le code utilisé pour remplacer votre titre actuel “Résultats de la recherche” dans votre thème.

<h2>Résultats de la recherche pour <em><?php the_search_query() ?></em> </h2>.

7. Ne faites pas les choses à moitié avec vos pages d’erreur 404

Au lieu de laisser votre page 404 dire “404 – page non trouvée”, pourquoi ne pas donner à vos visiteurs quelques options supplémentaires ? L’ajout d’une liste de catégories, d’articles récents, d’articles populaires, d’un champ de recherche et (si vous souhaitez monétiser votre page 404) d’une publicité peut donner du piquant à votre page 404 par rapport aux pages ennuyeuses et inutiles que l’on trouve dans la plupart des thèmes WordPress.

Si vous êtes à la recherche d’inspiration pour votre page 404, Smashing Magazine propose une vitrine de pages 404 du web qui vaut la peine d’être consultée.

8. Assurez-vous d’avoir tous les fichiers de base dans le dossier de votre thème

Lorsque vous créez un thème WordPress, il est essentiel que vous puissiez le personnaliser autant que possible dès le départ. Commencer par une combinaison de fichiers index.php, header.php, sidebar.php et footer.php peut sembler être une bonne idée pour les minimalistes, mais je suggérerais de commencer par tous les fichiers de base ci-dessous afin de vous donner un peu plus de contrôle sur ce qui est affiché – quand, où et comment.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• commentaires.php
• 404.php
• fonctions.php
• archive.php
• searchform.php
• search.php

Pour plus d’informations sur ces fichiers modèles et leur fonction, consultez la page sur la hiérarchie des modèles sur WordPress.org.

9. N’oubliez pas l’intégration RSS

Lorsque vous créez votre blog, l’un des éléments qui attire le plus l’attention des gens est la possibilité de s’abonner à votre blog via un lecteur RSS. Ainsi, au lieu de demander aux utilisateurs de votre thème d’ajouter eux-mêmes cette information, pourquoi ne pas prendre les mesures nécessaires pour ajouter une boîte d’abonnement au RSS, tout comme vous le faites pour la boîte de recherche. Ajoutez un bouton RSS, une option d’abonnement par email et vous pouvez même ajouter le nombre d’abonnés en texte en ajoutant ce bout de code à votre thème à l’endroit où vous souhaitez qu’il soit affiché (remplacez “feedburner-id” par votre propre ID FeedBurner – si vous publiez ce thème dans la nature, jetez un coup d’œil au n°11 de notre liste et assurez-vous que vous avez cela comme option).

<?php
    //obtenir le nombre d'abonnés à FeedBurner
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id" ;

    //Initialiser la session Curl
    $ch = curl_init() ;

    //Configurer curl pour qu'il renvoie les données au lieu de les imprimer dans le navigateur.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1) ;

    //Changement de l'URL
    curl_setopt($ch, CURLOPT_URL, $whaturl) ;

    //Exécuter la recherche
    $data = curl_exec($ch) ;

    //Fermer la connexion
    curl_close($ch) ;
    $xml = new SimpleXMLElement($data) ;
    $fb = $xml->feed->entry['circulation'] ;
    echo $fb ;
    //end get cool feedburner count
    ?>

10. Ajouter des styles CSS pour les fils de commentaires

Si vous créez un thème, vous devez toujours être prêt à gérer les fils de commentaires. Il s’agit d’une fonctionnalité de WordPress que de nombreux blogs utilisent pour créer une interaction dans leur section de commentaires. Préparer votre feuille de style pour les commentaires filetés est donc une excellente idée. Chris a publié un excellent article sur les codes CSS pour les classes CSS par défaut que WordPress génère dans la section des commentaires, donnant à votre thème une section de commentaires stylisée sans avoir besoin de toucher au fichier comments.php.

11. Ne pas sortir un thème sans panneau d’options

Certaines personnes peuvent ne pas être d’accord avec cela, mais je pense que cela fait partie de la progression naturelle des thèmes WordPress. Si votre thème ne dispose pas d’une sorte de panneau d’options WordPress permettant d’éditer, de personnaliser et de changer des éléments de votre thème sans avoir à éditer des codes, vous faites quelque chose de mal.

Si vous n’êtes pas sûr de savoir comment créer votre propre panneau d’options de thème, les liens ci-dessous vous montreront comment le faire.

• Créer des panneaux d’options personnalisés avec WordPress 2.9
• Comment créer un meilleur panneau d’options WordPress

12. S’assurer que vos thèmes fonctionnent dès leur sortie de la boîte

Cela va de pair avec le point 5 de notre liste – vous devez toujours vous assurer que vos thèmes fonctionnent dès leur sortie de l’emballage. Certains thèmes que j’ai vus nécessitent 5 à 6 étapes avant d’être utilisables sur le site, y compris, mais sans s’y limiter, l’activation des plugins et l’édition/sauvegarde du panneau d’options du thème. Si le thème exige certaines choses, assurez-vous qu’un élément de sauvegarde par défaut est utilisé.

Par exemple, dans le panneau d’options du thème que vous construisez et/ou utilisez, assurez-vous qu’il y a des informations par défaut dans chaque section, de sorte que les choses s’affichent, que l’utilisateur final les ait mises à jour ou non. Il en va de même pour les plugins, si vous utilisez un plugin de pagination WordPress dans votre thème, pourquoi ne pas le coder de manière à ce que le thème revienne aux liens précédents/suivants si le plugin n’est pas actif.

13. Ne pas faire un usage excessif des champs personnalisés

Oui, la plupart des thèmes WordPress de type magazine d’il y a quelques années étaient construits en utilisant des champs personnalisés à tout bout de champ, mais la plupart des gens ne voudront pas remplir 3, 4 ou 5 champs personnalisés pour chaque article. Il faut donc leur faciliter la tâche. Si vous voulez afficher une image de l’article sur la page d’accueil de votre thème, prenez ce morceau de code pratique et ajoutez-le dans le fichier functions.php de votre thème et il affichera automatiquement la première image de l’article, sans avoir besoin d’un champ personnalisé.

// Obtenir l'URL de la première image d'un article
function catch_that_image() {
global $post, $posts ;
$first_img = '' ;
ob_start() ;
ob_end_clean() ;
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches) ;
$first_img = $matches [1] [0] ;

// aucune image trouvée affiche l'image par défaut à la place
if(empty($first_img)){
$first_img = "/images/default.jpg" ;
}
return $first_img ;
}

Une fois que vous avez ajouté ce code, ajoutez simplement <?php echo catch_that_image() ; ?> dans les fichiers de votre thème à l'endroit où vous souhaitez que l'image apparaisse.

Merci aux bons vieux forums d’assistance de WordPress pour cette astuce pratique.

14. Optimisez le référencement de votre balise <title>

Une bonne façon de s’assurer que votre thème est aussi prêt que possible pour le référencement est de supprimer la balise <title> par défaut qui se trouve dans le fichier header.php de votre thème et de la remplacer par les codes ci-dessous. Cela donnera aux titres de votre thème un peu plus de jus et aidera les efforts de référencement que les utilisateurs de votre thème voudront mettre en pratique – tout cela sans qu’ils aient besoin de toucher quoi que ce soit.

<?php if ( is_home() ) {?>< ? bloginfo('name') ; ?> | <?php bloginfo('description') ; ?><?php } ?>
<?php if ( is_search() ) { ?>Résultats de la recherche pour <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1") ; $key = wp_specialchars($s, 1) ; $count = $allsearch->post_count ; _e('') ; echo $key ; _e(' â€" ') ; echo $count . ' ' ; _e('articles') ; wp_reset_query() ; ?><?php } ?>
<?php if ( is_404() ) {?>< ? bloginfo('name') ; ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) {?>< ? bloginfo('name') ; ?> | Author Archives<?php } ?>
<?php if ( is_single() ) {?><?php wp_title('') ; ?> | <?php $category = get_the_category() ; echo $category[0]->cat_name ; | <?php bloginfo('name') ; ?><?php } ?>
<?php if ( is_page() ) {?>< ? bloginfo('name') ; ?> | <?php $category = get_the_category() ; echo $category[0]->cat_name ; ?>|<?php wp_title('') ; ?><?php } ?>
<?php if ( is_category() ) {?><?php single_cat_title() ; ?> | <?php $category = get_the_category() ; echo $category[0]->category_description ; ?> | < ? bloginfo('name') ; ?><?php } ?>
<?php if ( is_month() ) {?>< ? bloginfo('name') ; ?> | Archive | <?php the_time('F, Y') ; ?><?php } ?>
<?php if ( is_day() ) {?>< ? bloginfo('name') ; ?> | Archive | <?php the_time('F j, Y') ; ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) {?><?php single_tag_title("", true) ; } } ?> | < ? bloginfo('name') ; ?>

15. N'oubliez pas les miettes de pain

En tant qu'élément de navigation supplémentaire dans vos thèmes, les fils d'Ariane (à mon avis) devraient être utilisés autant que possible. Ce n'est pas seulement bon pour le référencement, mais cela permet aussi au visiteur de naviguer sur votre site beaucoup plus rapidement. Il existe des plugins WordPress pour les fils d'Ariane, mais grâce à Cats Who Code, nous savons maintenant comment ajouter une fonction de fil d'Ariane dans nos thèmes WordPress.

Tout d'abord, ajoutez les codes ci-dessous dans le fichier functions.php de votre thème (adapté un peu à partir de l'article original de Cats Who Code, lié ci-dessus).

function the_breadcrumb() {
		echo '<ul id="crumbs">' ;
	if (!is_home()) {
		echo '<li><a href="' ;
		echo get_option('home') ;
		echo '">" ;
		echo 'Home' ;
		echo "</a></li>" ;
		if (is_category() || is_single()) {
			echo '<li>' ;
			the_category(' </li><li> ') ;
			if (is_single()) {
				echo "</li><li>" ;
				the_title() ;
				echo '</li>' ;
			}
		} elseif (is_page()) {
			echo '<li>' ;
			echo the_title() ;
			echo '</li>' ;
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo "<li>Archive pour " ; the_time('F jS, Y') ; echo '</li>';}
	elseif (is_month()) {echo"<li>Archive pour " ; the_time('F, Y') ; echo'</li>';}
	elseif (is_year()) {echo "<li>Archive pour " ; the_time('Y') ; echo'</li>';}
	elseif (is_author()) {echo "<li>Author Archive" ; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives" ; echo '</li>';}
	elseif (is_search()) {echo "<li>Résultats de la recherche" ; echo '</li>';}
	
	echo '</ul>' ;
}

Ensuite, placez ce morceau de code à l'endroit où vous souhaitez que vos fils d'Ariane s'affichent.

<?php the_breadcrumb() ; ?>

Merci d'avoir lu l'article

Merci d'avoir pris le temps de lire cet article. J'espère que vous l'avez apprécié et que vous avez appris une ou deux choses en cours de route - je sais que c'est le cas pour moi. Si vous avez aimé l'article ou si vous avez quelque chose à ajouter, faites-le nous savoir dans les commentaires.