Localizing the Website of Chengdu Research Center of Panda Breeding by WordPress WPML & Memsource Continuous Localization
Traditionally, front-end developers build their websites by writing HTML and CSS with the assistance of JavaScript. Thanks to the development of CMS(content management system), creating a website nowadays can be a process of clicking buttons and arranging blocks. Additionally, localizing a website into multi-languages is also easy on a CMS.
The website that we are going to create and localize is the Chengdu Research Base of Giant Panda Breeding. Let’s get started.
Assessing the Doner Website
According to our assessment, we found multiple problems on the doner website.
- The logo has a white background, which is unprofessional.
- Some pages are based on images, and it will hinder the future scale-up and localization.
- The color scheme and website format are not well designed.
- Mistranslation. Wrong contents may confuse the website visitors.
Recreate the Website
Among various CMSs, we agreed that WordPress is the most suitable one in terms of its fantastic themes. So, we decided to recreate the website by WordPress. Luckily, we found a theme that is similar to the original website.
In the preparation phase, we initially removed the background of the logo by remove.bg and put the logo and favicon into the right place. Then, we collected all the pages that were built upon images, such as the laboratory overview and the research direction, and we extracted all the texts from these pages by onlineocr.org. Next, it was time to migrate all the pages, posts, widgets, and blocks into our new site.
One of the challenges that we met is that the format logic on WordPress is vertical, and we could not just add blocks on from left to right. We tried to arrange the columns by table; however, WordPress doesn’t allow us to transparentize the borders. Therefore, we had to rewrite the HTML as follows:
Make it Multilingual
There are several plugins which can help localize the website on WordPress.
- qTranslateXT
- Polylang
- WPML
- Memsource Integration
Considering the efficiency and convenience, we choose WPML and Memsource continuous localization. After configuring WPML, we chose the languages that we would like to localize into and set a language switcher on the menu and the sidebar.
We chose the pages and posts in translation management and added them to the translation basket. Then, it’s easy to export Xliff and translate the file via Memsource.
Another difficulty that we met is that we need to customize the XML configuration and encode 64 when adding some pages into the translation basket. To make things easier, we choose Memsource integration to localize these pages.
One of the advantages of Memsource continuous localization is that we can send back the translated files via its online repository, which means we did not need to upload the file back on WordPress. It saved us lots of time and would not make pressure on our computer storage.
Finish
We finally localized the website into four different languages, including English(United States), French(France), Simplified Chinese, German(Germany) as well as Arabic. Click here to look around our website.
Conclusion
It’s so exciting to see our final website perform well. We overcame all the challenges encountered during the process, and most importantly we solved the problems of our doner website. In addition, when creating and localizing a website, I felt like I was both a designer and a programmer. I could concretize my sense of aesthetics and realize different functions by editing HTML, CSS, and JavaScript, which is awesome.