Développement Article

WPML, le plugin multilingue ultime pour WordPress

WPML, le plugin multilingue ultime pour WordPress

WordPress est bien plus qu’une plateforme de blog, c’est devenu un CMS qui permet de mettre en place des sites web complexes et très divers. Ici au canada, il est très fréquent que les sites soient multilingues, français et anglais. En Europe, s’ils le sont, le français, l’italien, l’allemand, l’anglais et l’espagnol sont les langues couramment utilisées. Côté plugin, lorsqu’on parle de plugin multilingue, vous aurez principalement 2 choix : WPML et qTranslate. J’ai récemment eu beaucoup de problèmes avec qTranslate et je suis passé à WPML, qui est vraiment plus complet et plus stable. Seul petit moins, il vous faudra débourser une petite somme (29$) pour l’utiliser.

wpml-plugin-internationalisation-wordpress

WPML permet de créer des sites multilingues avec WordPress très simplement et offre tout un panel d’outils pratiques pour la traduction. Je vais explorer quelques points importants dans ce plugin et j’essayerais de faire un tutoriel plus complet dans un prochain article.

Installation et configuration de WPML

Pour installer le plugin WPML, rendez-vous sur le site web du plugin et téléchargez la dernière version du plugin. Attention, le plugin est payant et le prix commence à partir de 29$ USD, mais honnêtement, ça en vaut vraiment la peine pour le service rendu. Allez dans le menu Extensions => Ajoutez, puis sélectionnez le plugin que vous venez de télécharger. Activez le plugin lorsque l’installation est finie et vous êtes en business 🙂

Pour la configuration, cela dépend de ce que vous souhaitez mais je vais faire un petit tour des options que le plugin multilingue propose. La première chose à faire est de définir les languages que vous souhaitez utiliser dans la metabox « Langues du site ». Profitez-en pour dire quelle sera la langue par défaut. Ensuite, il faut régler le format d’URL de la langue et pour ceci vous avez 3 choix :

  1. Utiliser le format : http://monsite.com/fr/
  2. Utiliser des sous-domaines : http://fr.monsite.com/
  3. Utiliser un query post : http://monsite.com?lang=fr

Pour ma part je préfère la solution 1 mais selon le cahier des charges, il peut-être intéressant de d’avoir le choix.

Le fonctionnement de WPML 

La philosophie est très différente de qTranslate pour ceux qui feront le switch. WPML fait un dupliquât du post à traduire et l’attache à celui-ci via l’ID du post. L’interface est tout de même bien construite et assez intuitive pour comprendre le fonctionnement.

Plugins complémentaires à WPML

Il existe des plugins complémentaires à WPML que vous trouverez sur leur site ou dans le repository de WordPress. En voici 2 incontournables qui travaillent main dans la main avec WPML :

WPML Media 

Ce plugin permet de gérer les images ou n’importe quel média (audio, video, pdf …) de façon distincte pour chaque langue. Il permet de recopier les médias d’une langue à l’autre très facilement dans le cas ou aucune traduction n’est nécessaire (une photo par exemple). Si vous avez des médias et que vous souhaitez les retrouver sur chaque version de traduction, installez ce plugin et synchronisez les médias entre les traductions.

WPML String Translation

Ce plugin travail main dans la main avec WPML et permet aux développeurs de thèmes et de plugins d’ajouter le multilingue directement dans ceux-ci. Via la syntaxe gettext suivante, vous aller pouvoir traduire le contenu « hardcodé » dans votre plugin ou thème :

« __(‘Mon texte à traduire’,’mon contexte’) »

Le context est en fait un nom que vous donnez à votre plugin ou thème et qui permet de retrouver rapidement les chaînes de caractères à traduire dans le plugin.

Conclusion

Voici donc une courte présentation de WPML, j’ai pour projet de faire une tutoriel plus axé sur la pratique dans un futur rapproché, d’ici là si vous avez des questions, n’hésitez pas à les poser en commentaire, j’essayerais de vous aider au maximum.

http://hebergementsitewebquebec.com/comment-mettre-site-en-ligne/

Tutoriel pour mettre son site en ligne

Flatify – Un thème bootstrap utilisant angular.js

Flatify – Un thème bootstrap utilisant angular.js

Flatify est un thème intéressant si vous souhaitez faire une app avec Angular.js. Il regroupe un thème utilisant le framework Bootstrap qui permet un design responsive vraiment réussi. Testez par vous même ce thème en cliquant ici pour en voir les qualités.

Angular.js qui est une librairie développée par Google permet de faire des applications dites « one page ». La navigation se fait donc sans recharger les pages.

L’utilisation de ces 2 librairies (Bootstrap et Angular.js) en fait un thème moderne à la pointe des technologies actuelles. Au-delà de ça, pour 15$ vous avez un thème incroyablement design et qui surf sur la mouvance du flat design.

slurp

 

 (si vous achetez ce thème en passant par mon lien sachez que je toucherais une petite commission). 

 

Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire

Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire

Je vous ai préparé un tutoriel sur Highchart qui explique comment recharger un graphique avec de nouvelles données saisies dans un formulaire HTML. Dans mon cas, je vais prendre l’exemple de quelqu’un qui saisit des données dans des champs texte et recharger le graphique à l’aide de ces données.

Structure de ce tutoriel Highcharts

Pour ce tutoriel, nous allons utiliser la structure de fichier suivante :

  • fichier index.html
  • fichier main.js (contient le code pour le graphique)
  • On appelle Highcharts & jQuery via un CDN

Fichier index.html qui va accueillir le graph Highcharts

Ici, rien de bien compliqué, on fait juste créer un fichier HTML5 en appelant le fichier main.js et les 2 librairies Highcharts et jQuery. Puis on construit un formulaire.

Fichier main.js

Le fichier main.js va accueillir le code qui va nous servir à créer le graph mais aussi le code qui va permettre de recharger le graph avec de nouvelles données saisies par l’utilisateur dans un formulaire.

Découpons un peu le code! Premièrement, nous allons mettre en place la fonction qui va générer le graphique au chargement de la page (la première fois). Notez que l’on assigne ce graphique à la variable document.chart, ceci dans le but de pouvoir accéder facilement plus tard à notre variable. (voir la portée des variables en Javascript).

Fonction qui affiche le graphique

Ensuite, nous allons créer la fonction qui va prendre en charge la lecture du formulaire et le rechargement du graphique en fonction des nouvelles données.

Fonction qui va recharger le graphique

Quelques explications :

Ici on va aller lire à l’aide de jQuery les valeurs entrées dans le formulaire. On sélectionne, #data .value (la série qui contient les chiffres) et #data .titre (la série qui contient les titres). On insère ces nouvelles données dans des array Javascript à l’aide de la méthode push. On utilise la fonction parseInt pour s’assurer que les valeurs seront bien des integers. Il faudrait pousser plus loin la vérification des données du formulaire dans un cas réel mais pour ce tutoriel, ça suffira amplement.

 

Finalement : Document ready de jQuery pour binder les actions

Ce bout de code permet donc dans l’ordre de :

    • Récupérer les données du formulaire via la fonction getDataFromUser
    • Initialiser le graphique au chargement de la page en appelant la fonction displayPieChart.
    • Binder (lier) le click sur le bouton(#button) le rechargement du graphique avec les nouvelles données

Conclusion

Voici donc le résultat de ce tutoriel sur Highchart, j’espère que ça vous sera utile. N’hésitez pas si vous des questions / remarques en commentaires.

Jquery – évenement redimension du navigateur

J’ai récemment eu un problème à gérer en Jquery. Je voulais pouvoir redimensionner une fenêtre et récupérer la largeur de la fenêtre (après redimension). Pour éviter le lag du calcul à chaque « mini » redimension, la solution est d’agir une fois que l’on a fini de redimensionner la fenêtre. Voici comment faire : 

Créer un nouvel évènement jQuery (à utiliser comme une fonction) : 

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger(‘resizeEnd’);
    }, 500);
});

Mettre ce code dans le document ready : 

$(window).bind(‘resizeEnd’, function() {
    var wdt = $(window).width();
    alert(wdt);
});

Voilà c’est assez simple mais ça peut servir dans certain cas un peu fucké comme je viens d’avoir ! J’espère que ça vous servira 🙂