Les erreurs de développement de thème WordPress les plus courantes (et comment les corriger)

Publié: 2019-05-14

Soumettre un thème au répertoire de thèmes WordPress.org est un excellent moyen de partager votre travail et de contribuer à la communauté WordPress. Actuellement, il y a plus de 7000 thèmes dans le répertoire, dont le plus populaire dépasse les 300 000 installations actives. (Non compris les thèmes Twenty____ qui sont fournis avec WordPress et dont le nombre d'installations se compte en millions.)

Avant de soumettre votre thème à l'annuaire, il est important de comprendre d'abord le processus de révision, car si votre thème ne répond pas à ces exigences, il peut être rejeté sur-le-champ.

Les thèmes qui ont 3 problèmes distincts ou plus peuvent être fermés comme non approuvés. Cependant, les auteurs de thème peuvent resoumettre le thème une fois qu'ils ont corrigé les problèmes.

https://make.wordpress.org/themes/handbook/review/required/

Les examinateurs sont de votre côté et veulent voir votre thème mis en ligne, une fois qu'il répond aux normes requises. Si votre thème ne présente que des problèmes mineurs l'empêchant d'être inclus dans le répertoire, votre réviseur travaillera avec vous pour les résoudre.

Malheureusement, si votre thème présente trop de problèmes, il sera fermé car non approuvé. Si vous décidez de résoudre les problèmes, vous pouvez télécharger à nouveau le thème, mais il rejoindra le fond de la file d'attente.

D'après mon expérience dans l'examen de plus de 100 thèmes, j'ai été en mesure d'identifier les problèmes les plus courants qui empêchent l'approbation des thèmes. En les partageant avec vous dans cet article, j'espère pouvoir vous aider à éviter de rester coincé dans la file d'attente ou d'être rejeté.

Téléchargement de votre thème

Lorsque vous téléchargez un thème, il rejoint la file d'attente pour être examiné. En moyenne, il faudra deux mois pour que votre thème atteigne le devant de la file d'attente et reçoive son premier avis. Tous les réviseurs sont des bénévoles qui disposent d'un temps limité pour effectuer les révisions. Divers facteurs peuvent influer sur le temps d'attente. Lorsque plus de personnes se portent volontaires pour examiner les thèmes, la file d'attente se déplace rapidement. À l'inverse, lorsque des thèmes avec beaucoup de problèmes sont soumis, cela ralentit la file d'attente.

En soumettant un thème qui répond à toutes les exigences, le processus de révision est beaucoup plus fluide et, finalement, votre thème sera mis en ligne plus tôt. Dans ce guide, nous allons explorer les problèmes les plus courants qui maintiendront votre thème dans la file d'attente et l'empêcheront d'être approuvé.

Remarque : les auteurs de thèmes qui ont l'habitude de soumettre des thèmes sans problème peuvent demander à devenir des « auteurs de confiance ».

Problèmes de nommage

Lorsque vous téléchargez un thème, la première vérification effectuée est de voir si le nom est déjà pris. Souvent, on vous dira que le nom que vous avez choisi est déjà pris, même si vous ne voyez pas de thème portant ce nom dans le répertoire.

Comment cela pourrait-il être? La raison en est que le test ne vérifie pas uniquement le répertoire, il vérifie l'ensemble de l'écosystème WordPress. Si un thème a été publié n'importe où (Github, ThemeForest, etc.) et compte plus de 50 installations actives, ce nom ne pourra pas être utilisé.

Remarque : si vous avez publié votre thème ailleurs et accumulé plus de 50 installations, vous pouvez toujours utiliser ce nom dans le répertoire.

Sortie sans échappement

Les réviseurs de thèmes prennent la sécurité très au sérieux, il existe même une ressource dédiée. Un article entier pourrait être écrit sur l'écriture de thèmes sécurisés, mais dans cette section, nous allons explorer un aspect : échapper à la sortie.

La sortie sans échappement met les utilisateurs de votre thème en danger. Voici un exemple de valeur non échappée ($title) :

 $title = get_option( 'my_custom_title' );
echo '<h2>' . $titre . '</h2>' ;

Le problème avec ce qui précède est que bien que nous sachions quel type de valeur $title devrait être, une chaîne, nous n'avons pas vérifié si c'est le cas.

Si un pirate a réussi à modifier la valeur de 'my_custom_title' dans la base de données, votre thème affichera cette valeur. Cela présente un risque énorme car ils pourraient remplacer la sortie prévue par du Javascript en ligne :

 alert('Ceci est dangereux');

La solution consiste à échapper à toutes les sorties pour s'assurer qu'elles n'incluent que le type de données que nous attendons.

Notre exemple pourrait être corrigé comme ceci :

 $title = get_option( 'my_custom_title' );
echo '<h2>' . esc_html( $titre ) . '</h2>' ;

L'inconvénient d'utiliser esc_html est qu'il supprime toutes les balises HTML. Si $title contient du gras ou de l'italique, par exemple :

 $title = 'Cet article est <strong>très</strong> utile';
echo esc_html( $title );

Le mot « très » ne serait pas en gras sur le frontend ; à la place, il afficherait le code <strong>très</strong>.

Cela illustre pourquoi il est important d'utiliser les fonctions d'échappement correctes pour le contexte. Si nous attendions du HTML dans la sortie, nous ferions mieux d'utiliser wp_kses_post() ou wp_kses() et de définir le paramètre $allowed_html.

Les fonctions qui sortent doivent également être échappées :

 <a href="<?php echo esc_url( get_permalink() ); ?>">

L'exception concerne les fonctions principales de WordPress qui incluent 'the_' dans leur nom, celles-ci sont généralement déjà échappées.

 function le_permalien( $post = 0 ) {
    /**
     * Filtre l'affichage du permalien de la publication en cours.
     *
     * @depuis la 1.5.0
     * @depuis la version 4.4.0 Ajout du paramètre `$post`.
     *
     * @param string $permalink Le lien permanent pour le message actuel.
     * @param int|WP_Post $post ID de publication, objet WP_Post ou 0. Par défaut 0.
     */
    echo esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) );
}

Texte intraduisible

Pour être acceptés dans l'annuaire, tous les thèmes doivent être 100 % "prêts à être traduits". Cela signifie que chaque chaîne de texte de vos sorties de thème doit être traduisible.

WordPress a déjà les systèmes et les fonctionnalités pour gérer le processus de traduction, il vous suffit de vous assurer que vos chaînes utilisent les bonnes fonctions.

Bien que simple à mettre en œuvre, cela est souvent négligé car il va à contre-courant de la façon dont les gens écrivent du HTML.

Normalement, vous pourriez faire quelque chose comme ceci :

 <h1>404 - Introuvable</h1>

Pour le rendre traduisible, vous devez ajouter du PHP :

 // Les fonctions __ sont la base de la localisation.
<h1><?php echo __( '404', 'domaine-texte' ); ?>

// Les fonctions _e renvoient la valeur.
<h1><?php _e( '404', 'domaine-texte' ); ?>

// Échappez et faites écho à la chaîne.
<h1><?php esc_html_e( '404', 'domaine-texte' ); ?>

// localisation et variables.
<h1><?php _n( 'Un message', '%s messages', $count, 'text-domain' ); ?>

Les chaînes générées par les fonctions doivent également être prêtes pour la traduction :

 // pas prêt pour la traduction :-(
<?php next_posts_link( 'Anciennes entrées' ); ?>

// prêt pour la traduction :-)
<?php next_posts_link( esc_html__( 'Older Entries', 'text-domain' ) ); ?>

Conseil : de nombreux exemples de code dans codex.wordpress.org n'utilisent pas les fonctions de traduction, soyez donc prudent lorsque vous les copiez et les collez.

Mise en file d'attente incorrecte des ressources

Les fichiers .css et .js que votre thème utilise doivent être mis en file d'attente à l'aide des fonctions appropriées : wp_enqueue_style() pour CSS et wp_enqueue_script() pour Javascript.

Une erreur courante consiste à coder en dur les scripts et les styles directement dans <head> ou avant </body>. Il y a deux problèmes à cette approche :

1. Impossible à supprimer

Si un plugin doit supprimer une ressource que vous avez chargée, ce n'est pas possible. Si vous aviez utilisé les fonctions de mise en file d'attente appropriées, cela pourrait être fait comme suit :

 /**
 * Retirez de la file d'attente le thème javascript.
 *
 * Accroché à l'action wp_enqueue_scripts, avec une priorité tardive (100),
 * afin que ce soit après la mise en file d'attente du script.
 */
function wptavern_dequeue_script() {
   wp_dequeue_script( 'theme-scripts' );
}
add_action( 'wp_enqueue_scripts', 'wptavern_dequeue_script', 100 );

2. Chargement en double

Si vous mettez en file d'attente une ressource, jQuery par exemple, et qu'un plugin la met également en file d'attente, WordPress est assez intelligent pour ne le charger qu'une seule fois.

 /**
 * Mettre en file d'attente jQuery
 *
 * jQuery ne sera chargé qu'une seule fois, malgré les deux files d'attente.
 * jQuery est fourni avec WordPress, nous n'avons donc pas besoin de spécifier un src. 
 */
function wptavern_enqueue_script() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'wptavern_enqueue_script' );

Si à la place vous aviez jQuery codé en dur dans votre <head>, il n'y aurait aucun moyen pour WordPress de le savoir, et il serait chargé deux fois.

Fonctionnalité Plugin-Territoire

La portée d'un thème ne doit gérer que la conception et l'esthétique d'un site Web, toutes les autres fonctionnalités doivent être gérées par WordPress lui-même ou des plugins.

Dans le but d'ajouter plus de valeur à leurs thèmes, les auteurs de thèmes essaient souvent d'incorporer des fonctionnalités supplémentaires, par exemple des contrôles SEO ou des types de publication personnalisés.

Le problème avec le regroupement des fonctionnalités dans un thème est que les données ne sont pas portables. Prenons l'exemple des contrôles SEO, si l'utilisateur change de thème, il perd tout le travail qu'il a fait pour optimiser ses pages. En revanche en utilisant un plugin SEO, les données et fonctionnalités sont indépendantes du thème et seront conservées lors du changement de thème.

Quelques exemples de fonctionnalité plugin-territory :

  • Analytique/Suivi
  • Contrôles de référencement
  • Formulaires de contact
  • Codes abrégés
  • Blocs Gutenberg

Conseil : si votre code écrit dans la base de données, il est fort probable qu'il s'agisse d'un territoire de plug-in. L'exception serait les paramètres liés à la conception (position de la barre latérale, couleurs, etc.).

Ne pas préfixer

Le préfixage est un moyen de s'assurer que votre code n'entre pas en conflit avec le code des plugins. L'espacement de noms en PHP est un meilleur moyen d'obtenir le même effet. Cependant, certains utilisateurs utilisent encore d'anciennes versions de PHP (5.2) qui ne prennent pas en charge cette fonctionnalité.

Justin Tadlock a partagé une liste de choses courantes qui devraient être préfixées :

  • Noms de fonctions PHP.
  • Noms de classe PHP.
  • Variables globales PHP.
  • Crochets Action/Filtre.
  • Poignées de script.
  • Poignées stylées.
  • Noms de taille d'image.

Source : https://themereview.co/prefix-all-the-things/

 // exemple de fonction.
mon_prefix_exemple();

// exemple de classe.
class My_Prefix_Example { … }

// exemple d'action et de filtre.
do_action( 'my_prefix_action' );
apply_filters( 'my_prefix_filter', $values ​​);

// exemples de mise en file d'attente.
wp_enqueue_script( 'my_prefix_script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_style( 'my_prefix_style', get_template_directory_uri() . '/css/styles.css' );

// exemple de taille d'image.
add_image_size( 'my_prefix_image_size', 220, 180 ); // 220 pixels de large sur 180 pixels de haut.

Exception : lors de la mise en file d'attente de ressources tierces, n'ajoutez pas de préfixe :

 // mise en file d'attente d'un script tiers (chosen.js).
 wp_enqueue_script( 'choisi', get_template_directory_uri() . '/js/chosen.js' );

Problèmes de licence

Votre thème et tous ses fichiers doivent être 100% compatibles GPL. Cela inclut les images, les bibliothèques, les scripts et les polices.

Toutes les ressources tierces doivent répertorier leurs informations de source et de licence.

Cette exigence peut être particulièrement délicate car toutes les licences ne sont pas compatibles GPL. La licence Unsplash n'a qu'une seule restriction :

"Cette licence n'inclut pas le droit de compiler des photos d'Unsplash pour reproduire un service similaire ou concurrent."

Cette seule restriction, cependant, est suffisante pour le rendre non compatible avec la GPL, et en tant que tel, vous ne verrez pas les images Unsplash incluses dans les thèmes wordpress.org.

Une liste des licences compatibles GPL est disponible ici - https://www.gnu.org/licenses/license-list.html#GPLCompatibleLicenses

Récemment, stocksnap.io a été la source d'images la plus courante dans le répertoire, car toutes les images répertoriées sont sous licence CC0 (compatible GPL).

Erreurs de capture d'écran

Les exigences stipulent que votre capture d'écran doit être une représentation non modifiée de votre thème qui ne ressemble pas à une publicité. Cela signifie pas de travail Photoshop, de superpositions, de bordures ou d'effets fantaisistes.

Les images doivent également respecter les mêmes exigences de licence que nous avons explorées ci-dessus.

thème illustré : Blocksy

Bonus : utilisez une norme de codage

Un code qui semble facile à lire et à comprendre pour vous peut être tout le contraire pour un réviseur qui n'a que 10 à 15 minutes pour vérifier votre code.

Bien qu'il n'y ait aucune exigence sur les normes de codage, en suivre une rend votre code plus facile à lire, à comprendre et à entretenir. Personnellement, j'utilise et recommande les "WordPress Coding Standards", bien qu'il y en ait d'autres.

L'utilisation de PHP_CodeSniffer et de l'ensemble de règles WordPress dans votre éditeur de code peut faciliter le respect d'une norme - https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

Conclusion

Les exigences du thème sont créées en pensant à l'utilisateur final. Évitez de commettre les erreurs courantes que j'ai énumérées ci-dessus et votre thème sera approuvé en un rien de temps. Si vous souhaitez découvrir le processus de révision de l'autre côté, vous pouvez même devenir un réviseur.