créer un site multilingue avec Wordpress

Voici les principales étapes que j’ai suivies pour créer un site multilingue avec Wordpress.

Fonction multisite

Wordpress permet de créer un réseau de sites distincts mais partageant la même base de données. Comme le multisite est une fonction core de Wordpress, on ne tempère pas avec la base de données comme le font les plugins pour sites multilingues comme WPML, Polylang ou TranslatePress.

On crée un site par langue. le site principal sera en anglais et le deuxième site sera en français. J’ai choisi le français de France plutôt que le français canadien [fr_CA]. Vous verrez plus bas pourquoi quand vient le temps d’afficher les drapeaux.

Définir langue du site: English Canada, Français

permalink structure

Pour que chaque site se trouve dans un sous-dossier (par exemple domaine.ca/en et domaine.ca/fr) il faut changer le paramètre permalink structure pour chacun des sites:

Site anglo: /en/%year%/%postname%/
Site franco: /fr/%year%/%postname%/

Thème multilingue

Une fois le site créé, il faut trouver un thème rapide et minimaliste qui supporte déjà plusieurs langues. Sinon, il faudra installer un autre plugin comme LocoTranslate et traduire manuellement les divers messages à afficher.

Bento est un thème gratuit qui répond à ces critères. J’utilise un mode “grid” pour l’affichage des articles sur la page d’accueil. Comme toutes les pages, il faut créer une page d’accueil en français et en anglais.

Retirer l’image en haut des articles

Le thème Bento affiche par défaut les “featured images” en haut de l’article. Pour désactiver cette fonction, ajouter dans functions.php:

function wordpress_hide_feature_image( $html, $post_id, $post_image_id ) {
  return is_single() ? '' : $html;
}
// add the filter
add_filter( 'post_thumbnail_html', 'wordpress_hide_feature_image', 10, 3);

Source: https://helloacm.com/how-to-hide-feature-image-of-posts-in-wordpress

Multisite Language Switcher plugin

On installe ensuite le plugin Multisite Language Switcher qui permettra de créer des liens entre les traductions (ou pages correspondantes) sur les sites de chacune des langues.

Il faut maintenant ajouter des boutons dans l’en-tête pour passer d’une langue à l’autre. Dans functions.php ajouter:

// Adds a widget area.
function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Dans header.php ajouter:

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
     
<?php endif; ?>

Aligner le widget au centre dans le css du thème:

#header-widget-area{
    padding: 30px 0;
}

Ajouter un drapeau du Québec

L’extension Multisite Language Switcher conserve les drapeaux sous forme de fichiers .png dans le dossier suivant:

/wp-content/plugins/multisite-language-switcher/flags

Le Québec n’étant pas un pays, MSLS affiche la langue fr_CA en utilisant le drapeau canadien. Les deux langues s’afficheraient alors avec le même drapeau dans le widget de sélection de langue.

J’ai donc créé un nouveau dossier contenant les images de drapeaux plus haut dans la hiérarchie afin qu’il ne soit pas écrasé lors d’une mise à jour des extensions. J’ai remplacé le drapeau de la France par celui du Québec dans le fichier fr.png.

/wp-content/plugins/flags

Modifier le paramètre Custom URL for flag images.

https://msls.co/user-docs/plugin-configuration.html#advanced-settings

comptes utilisateurs

Ajouter un compte avec les droits d’éditeur dans chacun des sites.

commentaires avec Jetpack

Activer le module “comments” dans les paramètres de Jetpack.

Une fois tous les plugins activés, chaque site du multisite aura sa propre liste d’abonnés et vos lecteurs pourrons choisir dans quelle langue il souhaitent recevoir des mises à jour.

Conclusion

Voilà les principales étapes que j’ai suivies afin d’avoir un site multilingue opérationnel avec Wordpress. Ce n’était pas aussi facile que je l’imaginais au départ et cela pose la question crûment: Ai-je réellement besoin de Wordpress pour réaliser un site multilingue?

Par Philippe St-Jacques