Alors que je terminais mon thème premium à soumettre pour examen à ThemeForest, je faisais mes derniers tests et je me suis dit que je pourrais aussi bien rédiger un article sur certaines des vérifications les plus importantes et générales que l’on devrait faire avant de publier son thème. Bien sûr, il y a beaucoup de choses à vérifier, mais voici 20 de ce que je considère être certaines des vérifications les plus importantes avant de publier votre thème.

Inclure wp_footer et wp_head

Ce sont des choses assez basiques mais très importantes. Assurez-vous d’avoir inclus le hook wp_head dans le fichier header.php et votre hook wp_footer dans le fichier footer.php. Ces hooks sont très importants pour que les plugins fonctionnent avec votre thème. De plus, si vous incluez des fonctions qui s’ajoutent à ces hooks, vous en aurez évidemment besoin.

Prenez votre capture d’écran.png

Souvent, je suis impatient de publier mon thème que j’ai oublié d’inclure le fichier screenshot.png de base avec le thème. C’est l’image qui apparaîtra dans votre administrateur WP sous votre balise d’apparence.

En gros, prenez une capture d’écran de votre thème, coupez-la à environ 300 pixels sur 225 pixels, enregistrez-la au format png et nommez-la «capture d’écran». Ensuite, déposez ce bébé directement à la racine du dossier de votre thème.

Activer la prise en charge du thème WordPress principal

Il existe de nombreuses fonctionnalités impressionnantes dans WordPress qui ne sont pas activées par défaut et doivent être activées à l’aide du add_theme_support fonction dans votre thème. Certaines de ces fonctionnalités incluent des vignettes de publication, une balise de titre méta, le support html5, un en-tête personnalisé, un logo personnalisé… etc. Vous trouverez ci-dessous un exemple d’activation de ces fonctionnalités (notez que vous devez vous connecter au hook d’action after_setup_theme).

// Add theme support
function themename_add_theme_support() {
    add_theme_support( 'post-formats', array( 'aside', 'video', 'image', 'gallery', 'quote' ) );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-header' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'themename_add_theme_support' );

Remarque: Dans l’extrait d’exemple, nous ajoutons simplement la prise en charge de thème de base, mais pour la plupart des fonctionnalités, vous pouvez également transmettre une liste d’arguments. Par exemple, pour le logo personnalisé, vous pouvez passer un tableau avec la largeur, la hauteur, le texte d’en-tête, etc. Assurez-vous donc de rechercher chaque fonctionnalité et de voir si vous souhaitez transmettre des arguments personnalisés.

Assurez-vous que la pagination fonctionne

Surtout si vous utilisez des types de publication personnalisés, il est important de vous assurer que la pagination fonctionne non seulement sur la page de votre blog, les catégories et les balises, mais également sur vos archives de type de publication personnalisées et toutes les taxonomies personnalisées. Jetez un œil à notre guide pour ajouter une pagination dans WordPress si vous ne savez pas comment.

Définir le remplacement du menu WordPress

Une des questions les plus courantes que les gens me posent, outre comment définir leurs images, est de savoir comment configurer leur menu. Lorsque vous utilisez le système de menu par glisser-déposer WP, il est toujours idéal de définir une solution de secours pour votre menu avec un lien vers le panneau d’administration afin que les utilisateurs puissent voir comment configurer leur menu. Ne laissez pas vos utilisateurs deviner!

Jetez un œil à notre guide sur l’ajout d’un menu de secours dans WordPress si vous ne savez pas comment.

Script de mise en file d’attente pour les commentaires liés

Lorsque les utilisateurs activent les commentaires filetés dans leur administrateur WordPress, cela permet aux gens de répondre à leurs commentaires sur leur blog. Vous avez probablement remarqué comment certains thèmes rechargent la page lorsqu’un utilisateur clique sur le bouton “Répondre”, ce qui n’est pas très convivial ou professionnel. Heureusement, WordPress est livré avec un script intégré afin que les commentaires filetés puissent fonctionner sans recharger la page. Pour l’activer, ajoutez simplement le code suivant à votre fichier functions.php:

<?php
function themename_comment_reply_js() {
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'themename_comment_reply_js' );

Assurez-vous que Javascript a été ajouté correctement

Il est important d’inclure correctement Javascript dans vos thèmes afin qu’il n’entre pas en conflit avec les plugins. J’ai écrit un article il y a quelque temps montrant comment ajouter du Javascript via votre fichier functions.php. Si vous ajoutez toujours votre JS dans le fichier header.php, assurez-vous de lire notre article sur Ajouter Javascript à WordPress de la bonne manière.

Testez votre thème sur tous les navigateurs «principaux»

Malheureusement, les gens utilisent encore des navigateurs plus anciens comme Internet Explorer 10. Si vous développez des thèmes WordPress, il est très important de le tester sur tous les principaux navigateurs et de vous assurer qu’il a l’air bien. Si votre site semble mauvais sur Firefox, Safari ou IE (ne vous contentez pas de vérifier dans Chrome), les gens peuvent ne pas le télécharger ou l’acheter et s’ils le font, vous pourriez obtenir de nombreux tickets d’assistance vous demandant de corriger le thème et de le faire fonctionner . Découvrez quelques excellents sites de test de navigateur ci-dessous:

Inclure un fichier 404.php

C’est très facile à faire et aussi très important. Si vous n’incluez pas de fichier 404.php dans votre thème lorsqu’un utilisateur navigue sur le site et aboutit à une page d’erreur 404, il peut afficher le contenu de votre fichier index.php ou afficher une page 404 générée par le serveur qui ne le fait pas. correspondre à la conception de votre site ou fournir des liens utiles au visiteur. Cela peut être mauvais pour le référencement, mais c’est aussi très peu convivial. Personnellement, j’aime inclure un titre, une liste de pages et peut-être même mon formulaire de recherche. C’est vraiment à vous de décider ce que vous incluez, mais assurez-vous d’avoir le fichier.

Créez des pages uniques pour vos types de publication

Si vous avez des types de publication utilisés dans votre thème, vous devez créer des pages uniques pour chacun, sinon le fichier single.php par défaut sera utilisé. et tous vos types de messages ressembleront à un blog. Par exemple, si vous avez un type de publication de portfolio personnalisé, vous devriez avoir un fichier single-portfolio.php pour afficher les publications de portfolio uniques.

Si vous avez des types de publication personnalisés pour lesquels vous ne voulez pas nécessairement de messages uniques (comme un curseur ou un type de publication spécifique à la page d’accueil), vous devez définir ces types de publication avec le paramètre public défini sur false et le paramètre show_ui défini sur true ( voir le register_post_type fonction pour plus d’infos),

Inclure les détails du thème dans la feuille de style

N’oubliez pas d’inclure les détails du thème dans votre thème! Non seulement vous avez besoin d’un nom pour que le thème apparaisse dans votre onglet Apparence, mais vous souhaiterez également montrer aux utilisateurs la version du thème qu’ils utilisent et vous attribuer un crédit pour le thème. Vous trouverez ci-dessous un exemple des détails du thème pour mon thème WordPress Total.

/*
 Theme Name: Total
 Version: 4.6
 Description: Premium WordPress theme by Themelocal
 Author: Themelocal
 Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019
 Author URI: https://themeforest.net/user/wpexplorer
 License: Custom license
 License URI: http://themeforest.net/licenses/terms/regular
 Text Domain: total
 Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready

Alignements / styles d’image par défaut du style

N’oubliez pas de styliser les alignements d’image et les styles d’image par défaut dans WordPress. Comme vous le savez, vous pouvez aligner les images à gauche, à droite ou au centre dans votre éditeur de publication, mais vous devez inclure les styles correspondants dans votre thème pour que cela fonctionne réellement. Vous trouverez ci-dessous juste le CSS de base pour les alignements d’image, de citation de bloc et de texte, les légendes et quelques réinitialisations pour les visages souriants. Vous pouvez le copier et le coller directement dans votre thème et le modifier en conséquence.

/*--------------------------*
/*  WordPress Alignments
/*--------------------------*/
.aligncenter{ display:block;  margin:0 auto}
.alignright{ float:right;  margin:10px 0 10px 10px}
.alignleft{ float:left;  margin:10px 10px 10px 0}
.floatleft{ float:left}
.floatright{ float:right}
.textcenter{ text-align:center}
.textright{ text-align:right}
.textleft{ text-align:left}

Widgets de style par défaut

WordPress comprend de nombreux widgets intégrés. Si vous créez un thème, vous devez le styliser pour correspondre à votre site et lui donner une meilleure apparence. Vous trouverez ci-dessous une liste de tous les différents widgets que vous voudrez styliser.

/*--------------------------*
/*  WordPress Widget Styles
/*--------------------------*/
.widget {}

/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* text widget */
.textwidget {}
.widget_text {}

Vérifier les liens sortants

Cela ne concerne pas beaucoup les thèmes premium car vous ne devriez pas inclure de liens dans votre thème (sauf peut-être un lien vers la documentation ou le journal des modifications), mais pour ceux qui créent des thèmes gratuits, assurez-vous que les liens que vous fournissez dans la zone d’administration et plus important encore, le pied de page du site, aller quelque part. Et veuillez ne pas créer de lien vers des sites contenant du spam ou inclure des liens sponsorisés dans vos thèmes. Si vous voulez vraiment créer un thème gratuit, faites-le pour redonner à la communauté ou augmenter votre visibilité. Vous ne devriez pas créer de thèmes uniquement dans le but d’obtenir ou de vendre des backlinks.

Assurez-vous que votre formulaire de recherche est configuré

Même si votre thème n’inclut pas de barre de recherche intégrée au thème, les utilisateurs voudront peut-être en ajouter une à leur barre latérale ou à toute autre zone widgetisée via le widget de la barre de recherche, alors assurez-vous d’avoir inclus votre fichier searchform.php dans votre thème. Vous trouverez ci-dessous un exemple de ce à quoi le code de votre fichier searchform.php peut ressembler:

<?php
/**
 * The template for displaying search forms.
 *
 * @package   Total WordPress Theme
 * @author    Alexander Clarke
 * @copyright Copyright (c) 2017, Themelocal.com
 * @link      http://www.wpexplorer.com
 * @since     1.0
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
} ?>

<form method="get" class="myprefix-site-searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" name="s" placeholder="<?php esc_html_e( 'Search...', 'text_domain' ); ?>" />
    <button type="submit"><?php esc_html_e( 'Search', 'text_domain' ); ?></button>
</form>

Testez toutes vos options de thème

Si vous avez créé un panneau de thème personnalisé pour votre thème ou ajouté des options personnalisées via le personnalisateur WordPress, il est très important de vous assurer que toutes vos options fonctionnent correctement. Ce serait très frustrant pour un utilisateur qui essaie de définir une option et ne peut pas la faire fonctionner. Passez donc en revue chaque option / paramètre et assurez-vous qu’il fonctionne correctement.

Prettify les fichiers CSS de votre thème

Une autre chose que j’aime faire avant d’avoir fini avec mon thème est d’exécuter mon CSS via un «générateur CSS» pour m’assurer que toutes mes indentations sont parfaites et qu’il n’y a pas d’erreurs. Parfois, j’aime aussi compresser mon CSS, en fonction de l’orientation du thème. J’ai personnellement acheté une application pour le mac nommée «Procssor» que j’utilise mais vous pouvez simplement rechercher sur Google «pretty css» ou «css beautifier» et il existe de nombreux outils en ligne pour cela.

Vérifier la validation sur w3.org

Évidemment, vous voulez que votre thème ne contienne aucune erreur de syntaxe de code. Non seulement pour que vous puissiez être fier de votre travail, mais aussi parce que les gens risquent de ne pas acheter votre thème s’ils trouvent beaucoup d’erreurs. Un thème valide montre le professionnalisme et l’expertise, alors assurez-vous d’exécuter quelques validations simples pour vous assurer qu’il est vert. Dirigez-vous vers le Validateur en ligne W3 et entrez l’URL de votre démo de thème pour vérifier les erreurs. Assurez-vous de vérifier toutes les pages principales (page d’accueil, archives, recherche, articles uniques, types d’articles uniques, 404, etc.).

Test à l’aide du «Test unitaire de thème» de WordPress.org

Bien que ce soit l’une des étapes les plus importantes, je l’ai ajoutée à la fin car de nombreux développeurs utilisent le test unitaire pendant le processus de développement. Fondamentalement, WordPress a un fichier xml que vous pouvez importer sur votre site avec divers «tests» pour vérifier le formatage, les widgets, les alignements, les images, les formats de publication, la pagination, etc. Il est toujours important de vérifier votre thème avec le Test unitaire de thème pour vous assurer qu’il est prêt à être publié au public et que vous n’avez aucun problème avec les fonctions et les styles de base de WordPress.

Share: