Alors que je terminais mon thème premium Ă soumettre pour examen sur ThemeForest, je faisais mon test final et j’ai pensĂ© que je pourrais aussi bien Ă©crire un article sur certaines des vĂ©rifications les plus importantes et gĂ©nĂ©rales Ă faire avant de lancer le thème. Bien sĂ»r, il y a beaucoup de choses Ă vĂ©rifier, mais voici 20 d’entre elles que je considère comme les vĂ©rifications les plus importantes avant de lancer votre thème.
Inclure wp_footer et wp_head
C’est quelque chose d’assez basique mais très important. 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 crochets sont très importants pour que les plugins fonctionnent avec votre thème. De plus, si vous incluez des fonctionnalitĂ©s qui sont ajoutĂ©es Ă ces crochets, vous en aurez Ă©videmment besoin.
Prenez votre screenshot.png
J’ai souvent hâte de lancer mon thème et j’ai oubliĂ© d’inclure le fichier screenshot.png de base avec le thème. C’est l’image qui apparaĂ®tra dans votre gestionnaire WP sous votre balise 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 de votre dossier de thème.
Activer la compatibilité avec le thème WordPress principal
Il existe de nombreuses fonctionnalitĂ©s Ă©tonnantes dans WordPress qui ne sont pas activĂ©es par dĂ©faut et doivent ĂŞtre activĂ©es Ă l’aide de la fonction add_theme_support dans votre thème. Certaines de ces fonctionnalitĂ©s incluent les vignettes de publication, la balise meta title, la prise en charge html5, l’en-tĂŞte personnalisĂ©, le logo personnalisĂ©, etc. Vous trouverez ci-dessous un exemple d’activation de ces fonctions (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' );
Noter: Dans l’exemple d’extrait de code, nous ajoutons uniquement la prise en charge de thème de base, mais pour la plupart des fonctions, vous pouvez Ă©galement transmettre une liste d’arguments. Par exemple, pour un logo personnalisĂ©, vous pouvez passer un tableau avec largeur, hauteur, 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 votre page de blog, vos catégories et vos balises, mais également sur les fichiers de type de publication personnalisés et les taxonomies personnalisées. Jetez un œil à notre guide pour ajouter de la pagination dans WordPress si vous ne savez pas comment.
Définir la réservation du menu WordPress
L’une des questions les plus courantes que je reçois des gens, outre la façon de configurer vos images, est de savoir comment configurer votre menu. Lorsque vous utilisez le système de menu glisser-dĂ©poser de WP, il est toujours idĂ©al de dĂ©finir un retour 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 la façon d’ajouter un menu alternatif dans WordPress si vous ne savez pas comment.
Mettre le script en file d’attente pour les commentaires filĂ©s
Lorsque les utilisateurs activent les commentaires filĂ©s dans leur administrateur WordPress, vous autorisez les gens Ă rĂ©pondre Ă leurs commentaires sur votre 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 en fil de discussion puissent fonctionner sans avoir Ă recharger la page. Pour l’activer, ajoutez simplement le code suivant dans votre fichier functions.php :
AsegĂşrese de que Javascript se haya agregado correctamente
Es importante incluir Javascript correctamente en sus temas para que no entre en conflicto con ningún complemento. Hace un tiempo escribà una publicación que mostraba cómo agregar Javascript a través de su archivo functions.php. Si aún está agregando su JS en el archivo header.php, asegúrese de leer nuestra publicación sobre Cómo agregar Javascript a WordPress de la manera correcta.
Pruebe su tema en todos los navegadores "principales"
Desafortunadamente, la gente todavĂa usa navegadores más antiguos como Internet Explorer 10. Si está desarrollando temas de WordPress, es muy importante probarlo en todos los navegadores principales y asegurarse de que se vea bien. Si su sitio se ve mal en Firefox, Safari o IE (no solo verifique en Chrome), es posible que las personas no lo descarguen ni lo compren y, si lo hacen, es posible que obtenga muchos tickets de soporte pidiĂ©ndole que arregle el tema y lo haga funcionar . Echa un vistazo a algunos de los mejores sitios de prueba de navegadores a continuaciĂłn:
Incluir un archivo 404.php
Esto es muy fácil de hacer y tambiĂ©n muy importante. Si no incluye un archivo 404.php en su tema cuando un usuario navega por el sitio y termina en una página de error 404, puede mostrar el contenido de su archivo index.php o mostrar una página 404 generada por el servidor que no lo hace. coincidir con el diseño de su sitio o proporcionar enlaces Ăştiles al visitante. Esto puede ser malo para el SEO, pero tambiĂ©n es muy poco amigable para el usuario. Personalmente me gusta incluir un tĂtulo, una lista de páginas y tal vez incluso mi formulario de bĂşsqueda. Realmente depende de usted lo que incluya, pero asegĂşrese de tener el archivo.
Cree páginas individuales para sus tipos de publicaciones
Si tiene algún tipo de publicación en su tema, debe crear páginas individuales para cada una, de lo contrario, se usará el archivo single.php predeterminado. y todos los tipos de publicaciones se verán como un blog. Por ejemplo, si tiene un tipo de publicación personalizada de cartera, debe tener un archivo single-portfolio.php para mostrar las publicaciones de cartera única.
Si tiene tipos de publicaciones personalizadas para las que no necesariamente desea publicaciones individuales (como un control deslizante o un tipo de publicaciĂłn especĂfica de la página de inicio), debe tener estos tipos de publicaciones definidos con el parámetro pĂşblico establecido en falso y el parámetro show_ui establecido en verdadero ( consulte la funciĂłn register_post_type para obtener más informaciĂłn),
Incluir detalles del tema en la hoja de estilo
¡No olvide incluir los detalles del tema en su tema! No solo necesita un nombre para que el tema aparezca en la pestaña Apariencia, sino que también querrá mostrar a los usuarios qué versión del tema están usando y darse algo de crédito por el tema. A continuación se muestra una muestra de los detalles del tema de mi tema Total de WordPress.
/* Theme Name: Total Version: 4.6 Description: Premium WordPress theme by WPExplorer Author: WPExplorer 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-readyStyle d'alignement/styles d'image par défaut
N'oubliez pas de concevoir les alignements d'images et les styles d'images 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 vraiment. Vous trouverez ci-dessous uniquement le CSS de base pour l'image, les guillemets et les alignements 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}Style de widget par défaut
WordPress comprend de nombreux widgets intégrés. Si vous créez un thème, vous devez le concevoir pour qu'il corresponde à votre site et le rendre meilleur. Vous trouverez ci-dessous une liste de tous les différents widgets que vous voudrez concevoir.
/*--------------------------* /* 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 {}Afficher les liens sortants
Cela ne s'applique pas beaucoup aux thèmes premium, car vous ne devez inclure aucun lien 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 va quelque part. Et veuillez ne pas créer de lien vers des sites contenant du spam ou inclure des liens sponsorisés dans vos sujets. 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 des sujets uniquement dans le but d'obtenir ou de vendre des backlinks.
Assurez-vous que votre formulaire de recherche est configuré
Bien que votre thème n'inclue peut-être pas de barre de recherche intégrée au thème quelque part, les gens peuvent vouloir 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. Voici un exemple de ce à quoi pourrait ressembler le code dans votre fichier searchform.php :
Essayez toutes vos options de thème
Si vous avez crĂ©Ă© un tableau de bord de thème personnalisĂ© pour votre thème ou ajoutĂ© des options personnalisĂ©es via WordPress Customizer, il est très important de vous assurer que toutes vos options fonctionnent correctement. Ce serait très frustrant pour un utilisateur essayant de dĂ©finir une option et ne pouvant pas la faire fonctionner. VĂ©rifiez donc chaque option / paramètre et assurez-vous qu’il fonctionne correctement.
Embellissez les fichiers CSS de votre thème
Une autre chose que j’aime faire avant de terminer mon thème est d’exĂ©cuter mon CSS via un “gĂ©nĂ©rateur CSS” pour m’assurer que tous mes retraits sont parfaits 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 mac appelĂ©e “Procssor” que j’utilise, mais vous pouvez 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 n’ait pas d’erreurs de syntaxe de code. Non seulement pour que vous puissiez ĂŞtre fier de votre travail, mais aussi parce que les gens peuvent ne pas acheter votre thème s’ils trouvent beaucoup d’erreurs. Un sujet valide montre du professionnalisme et de l’expĂ©rience, alors assurez-vous d’effectuer quelques validations simples pour vous assurer qu’il est vert. Rendez-vous sur le validateur en ligne W3 et entrez l’URL de dĂ©monstration de votre thème pour vĂ©rifier les erreurs. Assurez-vous de consulter toutes les pages principales (page d’accueil, archives, recherche, publications uniques, types de publications uniques, 404, etc.).
Essayez le « Thème de test unitaire » de WordPress.org
Bien que ce soit l’une des Ă©tapes les plus importantes, je l’ai ajoutĂ©e en dernier car de nombreux dĂ©veloppeurs utilisent des tests unitaires 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 rendu public et que vous n’avez aucun problème avec les fonctionnalitĂ©s et les styles de base de WordPress.
