Développement Article

La voie la plus sûre de trouver son job de rêve est de le créer soi-même !

Inconnu
Tutoriel site web multilingue avec WordPress et WPML – Partie 1 – Installation et configuration

Tutoriel site web multilingue avec WordPress et WPML – Partie 1 – Installation et configuration

Créer un site web multilingue est toujours un beau problème. En France comme au Québec, en tant que freelance, il n’est pas rare d’avoir à faire un site web en plusieurs langues. J’ai donc décidé de faire un tutoriel qui portera sur comment utiliser WordPress et WPML pour créer un site multilingue. Il sera composé de 3 parties distincte. WPML est LE plugin à utiliser pour les sites multilingues. Même si payant (peu cher pour le service rendu à mon avis), ceci assure un suivi du plugin avec une équipe performante.

  1. Installation et configuration
  2. Traduction des articles, pages et custom post WordPress
  3. Traduction des chaînes de caractère (texte en PHP (hardcodé) dans le thème ou les widgets)

Installation de WPML

L’installation de WPML est très simple, et vous pouvez l’ajouter à n’importe quel moment du développement d’un site. Voici les étapes à suivre :

  • Aller sur le site de WPML : http://wpml.org/fr.
  • Décider le plan que vous souhaitez prendre. il existe 3 plans différents. Si vous faites un site web complet en utilisant WordPress comme un CMS, si vous utilisez les « custom posts » et « custom taxonomy » vous devrez prendre le plan CMS multilingue à 79$.
  • Une fois acheté vous allez pouvoir télécharger le plugin.
  • Aller dans l’admin de votre WordPress puis dans le menu « Extensions » puis « Ajouter », cliquez sur Ajouter une extension et sélectionné l’archive que vous venez de récupérer.
  • Une fois installé, vous verrez dans votre menu de gauche, un nouveau menu WPML.

Important : Si vous êtes développeur et que vous souhaitez utiliser le plugin WPML sur le site de vos clients, je vous encourage à prendre le plan CMS multilingue à vie.

Choisissez les langues du projet

Pour la configuration, c’est assez simple, il va vous falloir définir quelles langues vous souhaitez utiliser, quelle langue vous souhaitez par défaut, comment vous souhaitez ajouter visuellement le sélecteur de langue sur votre site et très important, la façon dont les URL vont fonctionner.

Voici une série d’images annotées qui vont vous aider à comprendre comment faire :

Window_et_Langues_‹_Fabline_—_WordPress

Window_et_Langues_‹_Fabline_—_WordPress 2

 

Choisir le format des URL pour les langues

Une fois les langues ajoutées au projet, vous devez spécifier la façon dont vous souhaiter que le système de langue fonctionne. Vous avez alors 3 choix :

  1. Langues différentes dans les répertoires (http://domaine.com/en/)
  2. Un sous-domaine différent pour chaque langue (http://en.domaine.com/)
  3. Langue ajoutée dans un paramètre GET (http://domaine.com?lang=en)

Pour ma part, je conseille souvent le choix 1 qui est à mon avis le plus jolie à l’oeil mais aussi qui semble être le meilleur choix pour votre SEO.

Sélecteur de langue

La rubrique suivante vous propose de régler la façon dont le sélecteur de langue va s’afficher. Je ne suis vraiment pas fan de cette façon de faire, je ne me sers donc juste pas de ce composant. Voici ce que je fais à la place et qui me donne beaucoup plus de liberté au niveau du placement et de la forme. Vous pouvez copier ce bout de code dans votre fichier functions.php :

function icl_post_languages(){
  $langs = "";
  $languages = icl_get_languages('skip_missing=1');
  
  $i = 0;
  
  if(1 < count($languages)){
    foreach($languages as $l){
      if(!$l['active'])
        $langs .= '<li><a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a></li>';
      else {
        $langs .= '<li class="current"><a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a></li>';
      }
      
      if($i == 0) {
        $langs .= " | ";
      }
      
      $i++;
    }
    echo $langs;
  }
}

Vous pouvez bien entendu modifier ce code pour afficher le sélecteur de langue de la façon que vous souhaitez. Une fois prêt, vous pouvez appeler cette fonction dans votre thème, là où vous souhaitez voir apparaître le sélecteur. Vous pouvez aussi ajouter du CSS pour habiller ce code HTML selon vos besoins.

Conclusion

Si vous avez besoin d’aide à cette étape (installation et configuration), laissez un message dans les commentaires et j’essayerais de vous aider au maximum de mes connaissances. La suite de ce tutoriel suivra sous peu et nous verrons le moyen de traduire les articles, pages er custom post. À bientôt !

Un serveur dédié gratuit pendant 2 mois, ça vous dit ?

Un serveur dédié gratuit pendant 2 mois, ça vous dit ?

Vous avez toujours rêvé d’avoir votre propre serveur dédié ? Vous n’êtes  plus qu’à quelques cliques de votre rêve ! Digital Ocean offre un service de machine virtuel ultra facile à mettre en place et à gérer.

Sur Digital Ocean, une machine virtuel (appelée Droplet) se paramètre en 1 minute avec les 3 étapes suivantes :

Choisissez la taille de votre machine virtuelle

La taille de la machine virtuelle se définie par la RAM, le CPU et l’espace disque (SSD). Voici la grille de prix établie :

Capture d’écran 2015-02-24 à 00.34.24

Sélectionner l’endroit où votre serveur sera installé

Digital Ocean possède 9 centres de données dans lesquelles vous pouvez placer votre machine virtuelle. Choisissez en fonction de vos besoins.

Capture d’écran 2015-02-24 à 00.34.36

Sélectionner l’OS que vous souhaitez installer

Retrouvez les plus grandes distributions comme Ubuntu, Cent OS, Debian, Free BSD

Capture d’écran 2015-02-24 à 00.34.47

Laisser à Digital Ocean, 5 minutes et votre machine virtuelle est prête à l’emplois. Une fois votre droplet créé, vous recevez le mot de passe root par courriel et vous voilà avec votre propre serveur dédié.

J’ai une machine virtuelle à 5$/mois depuis presqu’un an maintenant. Cette machine avec 512 Mo de RAM, un CPU et 20 Go de SSD me permet de faire tourner un serveur de test sous Ubuntu. C’est vraiment pratique et idéal pour le prix.

Bénéficiez d’un crédit de 10$ en passant par ce lien 

Define success on your own terms !

Define success on your own terms, achieve it by your own rules, and build a life you’re proud to live.

Anne Sweeney
bug wordpress – certains metapost ou custom fields n’apparaissent pas en mode « aperçu »

bug wordpress – certains metapost ou custom fields n’apparaissent pas en mode « aperçu »

Je suis tombé sur un méchant bug de WordPress qui m’a fait perdre beaucoup de temps alors j’aimerais partager la solution à ce problème ici à des fins d’archive et pour d’autres qui pourrait retrouver ce problème.

Explication du bug

Dans l’admin de WordPress il est possible de visualiser un article en mode aperçu pour tester et voir le rendu avant de mettre en ligne cet article. Dans mon cas et dans certains articles, j’avais des problèmes d’affichage liés au fait que certain metapost (Custom Fields) n’apparaissaient juste pas dans l’article.

Solution et méthode pour déboguer le problème

Après beaucoup de test de code et autre, j’ai vérifié que ce problème apparaissait uniquement dans l’admin et en mode preview. J’ai alors commencé par désactiver les plugins reliés uniquement à l’admin un par un …

Pour rappel, il y a 2 solutions efficaces pour déboguer Wordpress : 

  1. Désactiver tous les plugins et les remettre un par un en vérifiant que le problème n’est plus là à chaque fois afin d’isoler le plugin responsable du bug. (et oui, c’est souvent un plugin, rarement WordPress lui-même qui pose problème).
  2. Si vous êtes sur un site en production, des fois il est un peu barbare de désactiver tous les plugin puisque votre site pourrait ne plus ressembler à rien. L’autre méthode est alors de désactiver un plugin à la fois et le réactiver si le problème persiste. Lorsque le problème n’est plus là, vous devez avoir trouvé le plugin responsable !

Pour ma part, j’ai utilisé la 2e solution et j’ai rapidement isolé le plugin « Custom Fields Template ». Ce fidèle plugin presque installé depuis 4 ans, m’a fait perdre une demi-journée … après m’avoir fait gagner beaucoup de temps (je dois l’avouer).

Bref, si vous avez ce problème d’aperçu (preview) dans WordPress, c’est donc le plugin dont vous devrez vous séparer !

J’espère que ça aidera quelqu’un !