15 choses à faire et à ne pas faire pour un thème WordPress efficace

Aujourd'hui, je veux passer en revue certaines des choses à faire et à ne pas faire pour le développement de thèmes WordPress. Que vous construisiez un thème WordPress pour vous-même ou que vous en construisiez un pour le publier afin que d'autres puissent l'utiliser, vous devriez suivre ces choses à faire et à ne pas faire aussi fidèlement que possible.

1. Ne codez pas en dur les 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 à ces moments-là dans votre codage, vous pourriez 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 utilisant votre thème changera le nom de son dossier de thème.

Les codes appropriés à utiliser afin d'extraire dynamiquement les URL complètes sont ci-dessous.

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

2. Utilisez les balises de modèle autant que possible

WordPress fait un travail formidable en présentant toutes les balises de modèle que vous pouvez utiliser. Alors, rendez-vous service (ainsi qu'aux autres personnes qui pourraient utiliser vos thèmes) et apprenez les balises de modèle WordPress – puis utilisez-les autant que possible. En utilisant les balises de modèle, vous vous assurez que vos thèmes ne se cassent pas ou ne provoquent pas d'erreurs lorsque l'utilisateur final les configure et les exécute.

3. N'oubliez pas les codes de menu déroulant de navigation

Lorsque vous créez votre thème WordPress, un élément qui semble être négligé est les codes de menu déroulant pour votre navigation. Bien sûr, certains thèmes peuvent avoir la navigation configurée pour ne pas utiliser les ul's à plusieurs niveaux, en gardant tout sur une seule ligne, mais qu'en est-il de ceux d'entre nous qui ont plusieurs pages enfants pour chaque page parente principale ?

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

• Comment implémenter une barre de navigation multi-niveaux parfaite
• Menus déroulants multi-niveaux : Exemples et tutoriels
• Menus multi-niveaux avec jquery et css

4. Rendez votre thème prêt pour les widgets

À mon avis, en tant qu'utilisateur final, il n'y a rien de pire que de déployer un thème et de se préparer à tout configurer, pour ensuite s'apercevoir que je suis maintenant confronté à la tâche d'essayer de personnaliser des sections de mes thèmes en codant en dur des informations. Vos barres latérales et divers autres endroits de votre thème (avez-vous un pied de page à trois colonnes ? widgetisez-le !) devraient être aussi faciles à modifier que possible. C'est l'une des choses les plus faciles à faire pour vos thèmes, et cela bénéficiera grandement aux utilisateurs de votre thème.

Automattic propose un excellent tutoriel sur la façon de transformer votre thème en widget. Consultez-le ici.

Assurez-vous également de consulter le tutoriel transformer les thèmes en widgets ici sur 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 gratuitement ou créez des thèmes WordPress commerciaux, vous devriez tenir compte des intérêts de vos utilisateurs finaux lorsque vous créez vos thèmes. Encombrer vos thèmes avec 5 à 10 plugins nécessaires ne fera pas seulement frustrer les gens lors du téléchargement et de la configuration de votre thème sur leur site, mais cela dissuadera également beaucoup de personnes de le télécharger, car, avouons-le, les gens n'ont pas une durée d'attention de plus de 2 à 3 secondes.

Par exemple, si vous allez configurer la pagination dans votre thème, pourquoi ne pas utiliser cet article pour apprendre à la configurer automatiquement dans votre thème. Cats Who Code propose un assez bon tutoriel sur comment ajouter la pagination à votre thème sans avoir besoin d'activer un plugin.

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

Pour une raison quelconque, c'est un conseil souvent négligé que vous pouvez (et devriez) implémenter dans vos thèmes. C'est une simple ligne de code qui permet à votre thème de rappeler au visiteur ce qu'il vient de rechercher. Cela peut sembler trivial, mais c'est utile car si les résultats ne renvoient aucun article, le visiteur connaît la phrase exacte qu'il a recherchée et peut alors taper un autre terme de recherche.

Ci-dessous se trouve le code utilisé pour remplacer le titre actuel « Résultats de recherche » de votre thème.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Ne bâclez pas vos pages d'erreur 404

Au lieu de simplement laisser votre page 404 dire « 404 – page non trouvée », pourquoi ne pas offrir plus d'options à vos visiteurs ? L'ajout d'une liste de catégories, des articles récents, des articles populaires, une boîte de recherche et (si vous souhaitez monétiser votre page 404) une publicité peut donner du piquant à votre page 404 par rapport à celles ternes et inutiles que l'on trouve dans la plupart des thèmes WordPress.

Si vous cherchez de l'inspiration pour les pages 404, Smashing Magazine propose une vitrine impressionnante 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 de vous assurer que vous pouvez le personnaliser autant que possible dès le départ. Commencer avec une combinaison de fichiers index.php, header.php, sidebar.php et footer.php peut sembler une bonne idée pour les minimalistes, mais je suggérerais de commencer avec toutes les bases 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
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Pour plus d'informations sur ces fichiers de modèle et ce qu'ils font, consultez la page 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 est la possibilité de s'abonner à votre blog via un lecteur RSS. Donc, au lieu d'exiger que les utilisateurs de votre thème ajoutent eux-mêmes ces informations, pourquoi ne pas prendre les mesures nécessaires pour ajouter une boîte d'abonnement RSS, tout comme vous le faites pour la boîte de recherche. Ajoutez un bouton RSS, une option d'abonnement par e-mail et vous pouvez même ajouter le nombre d'abonnés en texte en ajoutant ce morceau de code à votre thème où vous souhaitez qu'il soit affiché (remplacez « feedburner-id » par votre propre identifiant FeedBurner – si vous publiez ce thème publiquement, jetez un œil au #11 de notre liste et assurez-vous d'avoir cette option).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

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

10. Ajoutez des styles CSS pour les commentaires imbriqués

Si vous créez un thème, vous devez toujours être préparé pour les commentaires imbriqués. C'est une fonctionnalité de WordPress que de nombreux blogs utilisent pour susciter l'interaction dans leur section de commentaires. Par conséquent, préparer votre feuille de style pour les commentaires imbriqués est une excellente idée. Chris a un excellent article sur les codes CSS pour les classes CSS par défaut que WordPress génère dans sa section de commentaires, donnant à votre thème une section de commentaires stylisée sans avoir à toucher au fichier comments.php.

11. Ne publiez pas un thème sans panneau d'options

Certaines personnes pourraient ne pas être d'accord avec cela, mais je crois que cela fait partie de la progression naturelle de la création de thèmes WordPress. Si votre thème ne dispose pas d'un panneau d'options WordPress permettant d'éditer, de personnaliser et de modifier des éléments de votre thème sans avoir à modifier le code, vous faites quelque chose de mal.

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

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

12. Assurez-vous que vos thèmes fonctionnent dès la sortie de la boîte

Cela va de pair avec le point n° 5 de notre liste : vous devez toujours vous assurer que vos thèmes fonctionnent dès la sortie de la boîte. Certains thèmes que j'ai vus nécessitent 5 à 6 étapes avant que le thème ne soit utilisable sur le site, y compris, mais sans s'y limiter, l'activation de plugins et l'édition/l'enregistrement du panneau d'options du thème. Si le thème nécessite certaines choses, assurez-vous qu'un élément par défaut de sauvegarde est utilisé.

Par exemple, dans le panneau d'options de votre thème que vous construisez et/ou utilisez, assurez-vous qu'il y a des informations par défaut dans chaque section, afin 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édent/suivant si le plugin n'est pas actif.

13. N'utilisez pas excessivement les champs personnalisés

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

// Get URL of first image in a post
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];

// no image found display default image instead
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à où vous souhaitez que l'image s'affiche.

Merci aux bons vieux forums de support WordPress pour cette astuce pratique.

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

Un excellent moyen de garantir que votre thème est aussi prêt pour le référencement que possible est de supprimer la balise <title> par défaut trouvée dans le fichier header.php de vos thèmes et de la remplacer par les codes ci-dessous. Cela donnera un peu plus de poids aux titres de votre thème et aidera aux efforts de référencement que vos utilisateurs de thèmes voudront mettre en pratique – le tout sans qu'ils aient à toucher à quoi que ce soit.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?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 fil d'Ariane

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 également aux visiteurs 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 à nos thèmes WordPress.

Tout d'abord, ajoutez les codes ci-dessous dans le fichier functions.php de vos thèmes (légèrement personnalisé par rapport à 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 for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; 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>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

Ensuite, placez ce morceau de code où vous voulez 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 - moi, en tout cas, j'ai appris. Si vous avez aimé l'article ou si vous avez quelque chose à ajouter, faites-le nous savoir dans les commentaires.