Un site multilingue avec wordpress

par / dimanche, 17 novembre 2013 / Publié dansDerniers articles, Les CMS, Localisation des sites internet

multilingualContrairement à Joomla, la configuration initiale de Wordpress ne supporte pas le multilinguisme pour le contenu. Il faut donc faire recours au plugins et quelques approches pour créer un site web multilingue avec WordPress. Voici donc quelques plugin et astuces intéressants:

L’extension WordPress Multilingual

WPML est une extension payante qui traduit l’intégralité des contenus de votre site : Les articles, catégories, les pages, types personnalisés, etc.  Elle  traduit également les menus et textes des templates. L’avantage de cette extension est qu’il se charge elle-me de lier les éléments avec leurs traduction. Elle sélectionne le menu de choix de la langue et fait sa liaison avec le contenu adéquat.

L’extension qTranslate

jean-rémy.qtransIl s’agit d’une extension gratuite qui gère les différentes traductions pour chaque article ou page. Contrairement à WPML, il faut créer les traduction de chaque langue avec qtranslate. L’inconvénient majeur pour ce plugin est que les urls des différentes traductions de chaque article sont identiques. Comme pour WPML, vous pouvez créer une infinité de langue. Qtranslate supporte 3 modes d’url SEO-friendly.

Bien que qtranslate soit une extension gratuite, son installation & réglage n’est pas facile:

a. Installation de qtranslate

1. Sauvegarde de votre base de données: Ceci est un geste habituel. vous devriez toujours faire une sauvegarde de la base de données avant d’installer les plugins. Vous pouvez utiliser WordPress backups.

2. Télécharger et installer qTranslate:    

  • Télécharger qTranslate ici.
  • Extraire tous les fichiers.
  • Téléchargez tout (en gardant la structure) dans le répertoire./modules/. Maintenant il doit y avoir un répertoire qtranslate /modules/qtranslate qui contient un fichier qtranslate.php.

3. Activer qTranslate

  • Connectez-vous dans / wp-admin / et activer qTranslate. 
  • Aller à la page de configuration qTranslate et ajoutez, supprimez ou désactivez les langues dont vous avez besoin.
  • Ajouter le Widget qTranslate à votre barre latérale et vous pouvez l’ajuster en CSS.

 

4. Affichage des drapeau

Sortir le sélecteur de langue WP (plugin qtranslate) du widget 

-Placer dans le header (apparence / éditeur) le code suivant :

<div id= »qtranslate »>

<?php echo qtrans_generateLanguageSelectCode(‘image’); ?>

</div>

(‘image’ affiche les drapeaux, remplacer par ‘text’ pour le texte ou ‘both’ pour les deux)

-éditer le css :

#qtranslate{

position: absolute;

top: 10px;

right: 10px;

}

– Pour que la liste s’affiche horizontalement, ajouter :

.qtrans_language_chooser li{

float:left;

margin-right:5px;

list-style-type:none;

}

– On décale les boutons « réseaux sociaux » :

#fb{

position: absolute;

top:10px;

right: 75px;

}

– Pour modifier la taille des drapeaux,

  Attention : on travaille sur un serveur local dans un premier temps ET on fait une sauvegarde du dossier qtranslate

-Editer les fichiers drapeaux PNG dans wp-content/uploads/qtranslate/flags

/!\ Garder les fichiers originaux /!\

On peut ajouter l’extension *.bak (bonne habitude à prendre)

Il est aussi préférable d’ajouter un préfixe, car nous aurons besoin de ces fichiers plus tard.  Ajouter par exemple wp_ ==> wp_fr.jpg

-Dans qtranslate_hooks.php (menu d’édition de l’extension qtranslate) éditer la ligne :

$css .= ».qtrans_flag { height:16px; width:24px; display:inline-block }\n »;

N’oubliez pas d’enlever le widget pour chaque langue (apparence / widgets) …

– Il faut également remettre la taille d’origine dans l’administration de WordPress :

Éditer la ligne 42 et ajouter la partie bleue (adapter selon le préfixe que vous avez choisi)

add_menu_page(__($q_config[‘language_name’][$language], ‘qtranslate’), __($q_config[‘language_name’][$language], ‘qtranslate’), ‘read’, $link, NULL, trailingslashit(WP_CONTENT_URL).$q_config[‘flag_location’].wp_’.$q_config[‘flag’][$language]);

 

 Il ne me reste qu’à vous souhaiter bon travail. N’hésitez pas à me contacter si vous avez quelques questions concernant cet article.  

HAUT