WebsiteGithubSlack

Getting Started

Starting with the Weglot WordPress plugin

Introduction

Weglot has built a powerful WordPress plugin that integrates in your WordPress website and make it multilingual in a few minutes.

What does Weglot plugin do exactly ?

  1. It creates URL for each languages, like /fr/about/ or /es/about/ for instance (but doesn't create actual pages in WordPress backend)

  2. On these URL, it returns the translated content

  3. It adds a language button on the page and the hreflang tags in the <head> section of your page for SEO.

Getting started

To start, install Weglot Translate plugin directly from the directory.

In the settings page, configure the 3 mandatory settings :

  • API Key : You get an API key in your account. If you don't have one, you can create your account.

  • Original Language : The original language of your WordPress website.

  • Destination Languages : The languages you want your website to be translated into.

Save the settings and you are done. You will see the language button appear on your website.

Plugin settings

Exclude URL

By default, all pages are translated. You can use this field to enter URL that you don't want to translate. This field is flexible, you can exclude exact URL, or URL that contains some words or matches some regex

Another example, if you want to only translate your homepage, meaning you want to exclude every URL except / , you would use the "Match regex" and enter the following : [^/]

Exclude blocks

By default, everything is translated inside a page. But sometimes, you don't want to translate part of your page. For example all product descriptions or a customer review area.

You can add any CSS selector in the field "Exclude blocks" and it will add an attribute data-wg-notranslate on this HTML element. Everything inside this element won't be translated.

For example, if you enter this : .product-description , then your translated page will be :

<h1 class="product-title">Mon super article</h1> <!--The title is being translated-->
<p class="product-description" data-wg-notranslate>My awesome article</p><!--The description is not being translated because you excluded class product-description -->

Whitelist blocks

As mentioned before, by default everything is translated inside a page. However, you can use the exclude blocks feature to prevent translating certain parts of a page. But sometimes you may have more than just blocks on a page that you want to leave untranslated and in this instance you're unable to manipulate the dom (by adding some class for example). In this case, it's easier to only translate some part of your page. 

<h1 class="product-title">Mon super article</h1> <!--The title is being translated-->
<p class="product-description" data-wg-notranslate>My awesome article</p><!--The description is not being translated because it's not on our whitelist -->
<p class="product-description-1" data-wg-notranslate>My awesome article</p><!--The description is not being translated because it's not on our whitelist -->
<p class="product-description-2" data-wg-notranslate>My awesome article</p><!--The description is not being translated because it's not on our whitelist -->
<p class="product-description-3" data-wg-notranslate>My awesome article</p><!--The description is not being translated because it's not on our whitelist -->

In this example we want to only translate the element with the class .product-title.

To do that you can exclude product-description, .product-description-1, .product-description-2, .product-description-3 class but in this case, it's easier to say to Weglot to only translate the .product-title class

To do that you can use this filter: 

add_filter('weglot_parser_whitelist', 'custom_whitelist', 10, 1);
function custom_whitelist($whitelist){
	$whitelist[] = '.product-title';
	return $whitelist;
}

You can add more than one of the blocks on the whitelist array. For example if I decide to translate the block .product-description the filter will be

add_filter('weglot_parser_whitelist', 'custom_whitelist', 10, 1);
function custom_whitelist($whitelist){
	$whitelist[] = '.product-title';
	$whitelist[] = '.product-description';
	return $whitelist;
}

When the whitelist is active on a page the wg-mode-whitelist attribute is added to the body tag.

PreviousDeveloper DocumentationNextHelpers Functions

Last updated