Getting Started
Starting with the Weglot WordPress plugin
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
hreflangtags in the<head>section of your page for SEO.
In the settings page, configure the 3 mandatory settings :
- 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.
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 : [^/]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 -->
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 classTo 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.Last modified 4mo ago