Preliminary
As your website improves, in both content and quality, it should be of consideration to add a translator to your website so you can be understood by the widest of audiences. Plus, even if it isn’t necessarily needed, it’s still a fun exercise and a cool thing for any website to add.
Setting up a Translator
Setting up a translator isn’t difficult. All the hard work of translation has already been done for you; aka Google Translate! All that you have to do for your website is add the code for google translate to function. The following code is all you need:
<!-- Google Translate -->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Adding the Code
The code you see here is all the code necessary for adding Google Translate to your own website. Instead of adding this code individually to each page in your website, you can add this code to each of your templates of your website, which in turn connects to all of your pages.
The following files is where you have to add the code. All these files are found within the _layouts folder.
blogs.htmldefault.htmlpost.htmlschedule.htmlany-other-layout-you-added.html
This code should be added at the end of each of these files, separate from the rest of the code.
If you correctly followed the steps above, you’ll see at the bottom of each page in your website that you can “select” a language. The list is quite large. English, Spanish, Chinese, Zulu, Latin, etc. Obviously the less well-known the language is, the less accurate the translation will be, but besides such a barrier, it serves a a great step for multilingual communication in a website.
English to Spanish
How could this be better?
Most people on your website will only see this translator by accident. This is a problem. Those who speak other languages will be immediately turned off by the fact that the website is in another language without realizing it can be changed. So how can such a translation method be improved? Well, to combat such an issue, you can automatically change the language of the website based on the geolocation of someone ‘s device which can be found based off their IP address.
How could this be done? I don’t know, it’s merely a thought to keep in mind as you progress in your coding abilities.