the first thing you need to do to create a multi-language website is to install the plugin.
in this tutorial, we are using polylang. we chose this plugin because if you use the auto-transfer plugin, you will see some incorrect tessellation. so the best solution is using polylang and does the transfer with google translate, then you edit it by yourself.
after install polylang, you need to add language from the dashboard.
then from the post or page tab, you will see the option to add different languages.
the plus sign (+) means this page does not have a different language link to it. you can click it to add multi-language page for it.
when you move your mouse to the pencil icon, you can see this page link to which multi-language page.
to add the language switch to your website, you need to go to menu, then select language to your menu.
If you want to hide the current language, you need to adjust it by clicking the language switch dropdown menu, then check the “hides the current language” check box.
if you can not see the language switch link or flag after you swatch language. that means you need add another menu only for this language.
to resize the polylang plugin flag size, you need add the code to additional CSS. watch the video at the end of this article to see full details.
.lang-item img {
width: auto;
height: 1.2em;
vertical-align: middle;
}
if you do not want the polylang show on the menu, and want to add polylang shortcode to the WordPress header, then you need to use theme editor and go to your header.php file. find the location of the WordPress logo, then add the following code to there. ( watch the video at the end of this article to see full details.
<?php
pll_the_languages(array(//不顯示當前語言的旗子 show flag, not show name, hide current
'show_flags' => 1,
'show_names' => 0,
'hide_current' => 1,
));
?>
here 0 means not active, 1 means active.
after you add polylang switch to the header of WordPress, you need remove (delete) bullets (dot) before the polylang language flag. to do that, you need add the code to additional CSS.
.lang-item {
list-style: none;
}