Internationaliser des projets WordPress un exemple pratique, première partie

Dans cette série, nous examinons comment internationaliser nos projets WordPress. Pour ceux qui viennent de nous rejoindre, je vous recommande vivement de lire le premier message de la série, car nous examinons toutes les fonctions fournies dans WordPress pour nous aider à internationaliser nos chaînes..

Et bien que cela soit utile, cela n'aide toujours pas d'expliquer ce qu'est l'internationalisation. Comme nous l'avons dit dans le premier post:

L'internationalisation est le processus de développement de votre plugin afin qu'il puisse être facilement traduit dans d'autres langues..

Étant donné que WordPress alimente environ 25% du Web et que celui-ci n’est pas local dans votre pays d’origine, il est logique de faire en sorte que le travail que nous produisions puisse être traduit dans d’autres lieux..

Pour être clair, cela ne ne pas Cela signifie que vous, en tant que développeur, êtes responsable de la traduction de toutes les chaînes de votre base de code dans les différentes langues que vos clients peuvent utiliser. Au lieu de cela, cela signifie que vous utilisez les API appropriées pour vous assurer que quelqu'un d'autre peut venir et leur fournir des traductions..

Avant d'aller plus loin, rappelez-vous:

  • L'internationalisation, souvent appelée i18n, est le processus par lequel nous construisons notre logiciel pour qu'il puisse être traduit.
  • La localisation est quand nous prenons des chaînes internationalisées et les traduisons dans la locale appropriée.

Assez facile à comprendre à ce stade, non? Mais il y a beaucoup d'informations disponibles pour savoir comment faire cela, et cela peut être vraiment difficile de séparer le signal du bruit, surtout si vous êtes novice dans ce domaine.

Mais c’est ce que vise cette série de didacticiels: vous assurer que vous disposez de tout ce que vous devez savoir pour internationaliser correctement votre projet WordPress, comprendre ce que vous faites et comprendre comment le tester..

Au cours des deux prochains articles, nous allons créer un simple plugin correctement internationalisé. En outre, nous allons examiner chaque élément du plug-in qui sert à internationaliser la base de code pour nous assurer de bien comprendre tout cela..

Dans le prochain article, nous allons examiner l'un des outils que j'ai trouvé les plus utiles pour localiser votre travail et comment vérifier que la localisation fonctionne correctement..

Cela dit, allons-y et commençons.

Commencer

Pour ce tutoriel, je vais utiliser la dernière version de WordPress disponible via Subversion. Si vous avez une copie locale de WordPress installée et une version récente, c'est génial.

Si, toutefois, vous voulez vivre à la pointe, n'hésitez pas à consulter ce guide pour obtenir la dernière version du code..

En fin de compte, cela n’affectera pas le travail que nous effectuons, mais c’est une occasion de développer un peu vos compétences en développement..

Préparer le plugin

Avec une copie locale de WordPress installée sur votre machine, vous êtes prêt à commencer à travailler sur un plugin. Notez que pour les besoins de ce tutoriel, nous allons construire un plugin incroyablement basique.

Le but n'est pas de comprendre comment construire un plugin, comme nous l'avons couvert dans d'autres cours et dans d'autres tutoriels; Cependant, il s'agit de comprendre les nuances les plus fines qui entrent dans l'internationalisation de la base de code afin de comprendre ce que vous faites au fur et à mesure que vous avancez dans le travail que vous ferez dans les projets actuels ou futurs..

1. Créer le répertoire des plugins et le bootstrap

D'abord, localisez le wp-content / plugins répertoire et créer un répertoire appelé tutsplus-i18n. C'est le répertoire dans lequel nous allons stocker nos fichiers de plugins. Il porte bien son nom Tuts + Internationalisation.

Allez-y et créez un seul fichier dans le répertoire qui sera utilisé pour démarrer le plugin. Appelle le fichier tutsplus-i18n.php.

Avant d'aller plus loin, nous devons décider de ce que ce plugin va faire. Nous savons que nous devons afficher quelque chose à l'utilisateur pour pouvoir pratiquer l'internationalisation (et la localisation). Cela signifie qu'il devrait y avoir un composant d'interface utilisateur dans le plugin.

A cette fin, créons un plugin simple qui introduira un nouvel élément de menu sous le Outils menu. Nous appellerons l'élément de sous-menu Informations sur le serveur, et nous utiliserons des données facilement disponibles en PHP pour afficher un écran de contenu de manière conviviale.

Cela pourrait peut-être être utilisé pour envoyer un journal de débogage à un fournisseur si quelque chose n'allait pas avec un plugin.

2. Définir le plugin

Je suppose que vous savez comment créer un plugin de base. Sinon, nous avons un certain nombre de tutoriels et de cours sur la façon de le faire (comme déjà mentionné). Le Codex a également quelques informations sur la façon de commencer, ainsi que.

Si vous ne savez pas comment faire, je vous recommande de consulter les ressources ci-dessus. Cela dit, allons de l'avant et définissons les bases de notre plugin.

Pour commencer, nous devons définir l'en-tête du plugin. Ouvrir tutsplus-i18n.php et assurez-vous qu'il inclut les informations suivantes:

Une fois terminé, sauvegardez le fichier et naviguez jusqu’au Plugins écran dans WordPress. Là, vous devriez voir une entrée pour le plugin que vous venez de créer. 

Certes, cela ne fera rien pour le moment, mais vous pouvez voir que nous sommes sur la bonne voie. En outre, notez que nous avons ajouté une balise que vous ne voyez pas souvent dans les projets WordPress, et c’est le Domaine de texte étiquette. Voici ce que nous allons utiliser pour aider à internationaliser notre plugin.

Voici des détails spécifiques sur cette balise:

Si vous traduisez un plugin ou un thème, vous devez utiliser un domaine de texte pour désigner tout le texte appartenant à ce plugin. Cela augmente la portabilité et joue mieux avec les outils WordPress déjà existants. Le domaine de texte doit correspondre au "slug" du plugin.

De toute évidence, nous avons défini notre domaine de texte comme tutsplus-i18n. Vous verrez ceci utilisé dans le reste de la base de code dans le reste du tutoriel..

Enfin, n'oubliez pas de mettre à jour le Auteur et Auteur URI balises pour correspondre à votre nom et votre page d'accueil, ainsi.

3. Introduire l'élément de menu

La première chose à faire est d’introduire un élément de sous-menu dans le menu Outils menu. Pour ce faire, nous allons profiter de la add_submenu_page crochet offert par WordPress.

Notez que nous utilisons le __ () fonction que nous avons discutée dans le premier post de ce tutoriel pour nous assurer que le texte de l'élément de menu est correctement internationalisé pour la traduction. Notez également que le second paramètre transmis à la fonction est identique au domaine de texte défini dans l'en-tête du plugin..

Maintenant, cela ne suffit pas. Si vous avez lu la documentation liée ci-dessus, vous savez que nous devons également définir une fonction qui affichera le contenu de la page. Dans le code ci-dessus, nous avons référencé la fonction comme tutsplus_i18n_display_submenu_page, mais on n'a pas réellement défini la fonction.

Allons-y et faisons cela maintenant. Nous allons simplifier les choses pour que le plugin s'exécute. La page n'affichera rien, mais le plugin continuera à fonctionner.

A ce stade, n'hésitez pas à activer votre plugin et à regarder le contenu sous le Outils menu. Rien ne devrait être traduit à ce stade; cependant vous devrait voir un nouvel élément de menu.

Et lorsque vous cliquez sur l'élément, vous devriez voir quelque chose comme l'écran ci-dessus. C'est vide. Mais ce n'est pas grave, car dans la section suivante, nous allons placer certaines informations à l'écran..

4. Ajouter l'écran du plugin

Selon ce que les autres plugins et le code que vous avez étudié lorsque vous travaillez sur des plugins WordPress, vous avez vu le code écrit de deux manières (ou peut-être les deux, vraiment) en ce qui concerne l'affichage de l'écran d'un plugin..

  1. Tout le code HTML est codé en dur dans le fichier PHP du plugin principal.
  2. Le code HTML est inclus dans un fichier externe inclus via le fichier PHP principal..

Je suis un fan de ce dernier parce que je pense que cela aide à rendre le code plus maintenable. Donc, pour les besoins de cet exemple, nous allons suivre cette approche. A ce stade, créez un deuxième fichier dans le répertoire de votre plugin et appelez-le. tutsplus-i18n-ui.php

Ensuite, ajoutez le code suivant au fichier. Nous en discuterons plus en détail juste après que vous ayez eu l'occasion de l'examiner..

 

$ val) // Entrée var ok. ?>

Notez ici que nous créons un table élément qui affichera toutes les clés et valeurs trouvées dans PHP $ _SERVER collection. 

Peut-être que les choses les plus importantes à noter sont que nous utilisons esc_html_e () pour nos fonctions d'internationalisation, et nous utilisons l'opérateur de module pour nous aider à fournir un certain style pour l'écran.

5. Styliser le plugin

Techniquement, le plugin fonctionnera à ce stade. Faisons un pas de plus pour nous assurer que l'écran est un peu plus joli.

Tout d'abord, créez le tutsplus-i18n.css fichier à la racine de votre répertoire plugin et ajoutez le code suivant:

# tutsplus-i18n-table margin-top: 20px; bordure: 1px solide #ccc; rembourrage: 10px;  # tutsplus-i18n-table thead th taille de police: 15px; hauteur: 40px;  # tutsplus-i18n-table thead, # tutsplus-i18n-table tbody font-family: 'Monaco', 'Menlo', 'Courier New', Monospace;  # tutsplus-i18n-table tbody td hauteur: 30px; rembourrage: 5px;  # tutsplus-i18n-table tbody tr.odd background: #fff;  

Ensuite, ajoutez une fonction au fichier du plugin qui mettra correctement ce fichier en file d'attente mais seulement sur le Informations sur le serveur écran:

id) return;  wp_enqueue_style ('tutsplus-i18n-css', plugin_dir_url (__FILE__). '/tutsplus-i18n.css', array (), '1.0.0', 'all');  

À ce stade, le plugin devrait avoir un affichage légèrement plus agréable:

Non, ce n'est pas nécessaire, mais cela aide à rendre le plugin un peu plus lisible dans le contexte de ce que nous faisons..

Qu'en est-il de la programmation orientée objet?

Pour ceux qui ont suivi mes cours et mes tutoriels, vous savez que je préfère écrire mon code en programmation orientée objet plutôt qu'en programmation procédurale.

Quand il s’agit d’enseigner un nouveau concept, j’essaie de rendre le cours aussi clair que possible. À cette fin, je trouve souvent que l’utilisation de la programmation procédurale pour enseigner quelque chose comme cela crée moins de confusion que lors de l’utilisation de la programmation orientée objet..

En d’autres termes, la programmation orientée objet suppose que vous compreniez clairement certains concepts que vous n’aurez peut-être pas en parcourant cette base de code. Et si tel est le cas, vous ne pourrez pas vous concentrer sur le matériel de base de ce tutoriel..

Ainsi, les principaux sujets que nous souhaitons examiner n'ont rien à voir avec la programmation orientée objet, mais avec la compréhension de l'internationalisation et de la localisation d'un projet WordPress..

Conclusion

À ce stade, nous avons un plugin fonctionnel qui peut être téléchargé, installé et exécuté dans une installation WordPress. Bien que ce soit internationalisé, nous n’avons aucun fichier de localisation à montrer Comment le processus fonctionne. Vous pouvez télécharger une copie du plugin à partir de la barre latérale de cette page..

Dans le tutoriel de suivi, nous allons examiner comment créer des fichiers de localisation et simuler un autre environnement local pour tester nos traductions. Nous examinerons également les outils disponibles pour notre utilisation..

En attendant le prochain versement, n'oubliez pas de consulter les ressources disponibles dans Envato Market pour vous aider à développer votre ensemble croissant d'outils pour WordPress ou, par exemple, du code pour étudier et mieux maîtriser WordPress..

Si vous souhaitez en savoir plus sur WordPress du point de vue du développement, sachez que je travaille exclusivement avec WordPress et que j'écris souvent à ce sujet. Vous pouvez voir tous mes cours et tutoriels sur ma page de profil, et vous pouvez me suivre sur mon blog et / ou Twitter à @tommcfarlin où je parle de développement logiciel dans le contexte de WordPress..

Comme d'habitude, n'hésitez pas à laisser des commentaires ou des questions dans le flux de commentaires ci-dessous.

Références

  • En-tête de plugin
  • Domaine de texte
  • admin_menu
  • add_submenu_page
  • __ ()
  • esc_html_e ()
  • admin_enqueue_scripts
  • wp_enqueue_style