Creating a multi-language website can be a game-changer for businesses looking to reach a global audience. Wagtail CMS offers powerful tools to make this process smooth and efficient. With Wagtail, we can set up multiple page trees, create site records, and modify templates to support different languages and locales.

We'll explore how to use Wagtail's features to build a fully functional multilingual site. From setting up the project to implementing localization, we'll cover the key steps to make your content accessible to users around the world.

Understanding Wagtail CMS

Wagtail CMS offers powerful features for building websites. It provides tools for content management and supports multiple languages.

Core Features

Wagtail CMS is built on Django, giving it a solid foundation. It has a user-friendly interface that makes content creation easy. The CMS uses a tree-like structure for organizing pages.

Key features include:

• Customizable admin interface
• Flexible page editing
• Page publish/unpublish scheduling
• Powerful search functionality
• Streamfield for flexible content blocks

We can easily create different page types in Wagtail. This allows us to have varied content structures across our site. The CMS also offers version control, letting us track changes and revert if needed.

Multilingual Support

Wagtail CMS offers robust tools for creating multilingual websites. We can use wagtail-localize to manage translations efficiently. This add-on lets us create and publish content in multiple languages.

The CMS allows independent growth of translated sites. We can edit page structures for each language as needed. Wagtail also supports translating slugs, metadata, and reusable content.

Designing the Multilingual Architecture

Creating a solid multilingual structure in Wagtail CMS is key for managing content across languages. We'll look at two main approaches: the language tree and defining translatable models.

Language Tree Approach

The language tree approach organizes content by language at the page level. We create a home page for each language as a child of the main homepage. This setup allows for easy navigation between language versions.

For example:

• Home
  • English Home
  • Spanish Home
  • French Home

This structure keeps content neat and makes it simple to add new languages. We can use Wagtail's built-in page hierarchy to manage translations. Each language version is a separate page, linked to its counterparts.

We can add a language switcher to let users change between versions. This method works well for sites with distinct content for each language.

Defining Translatable Models

For more flexible translations, we define translatable models in Wagtail. This approach lets us translate specific fields rather than entire pages.

We use Wagtail's TranslatableMixin to make models translatable. Here's a basic example:

from wagtail.models import TranslatableMixin
from django.db import models

class BlogPage(TranslatableMixin, Page):
    title = models.CharField(max_length=255)
    content = models.TextField()

This setup allows us to create translations of each field. We can then display the right language based on the user's preference.

We need to run migrations after defining translatable models. This step sets up the database to handle multiple language versions of our content.

Implementing Localization

Wagtail CMS offers powerful tools for creating multi-language websites. We'll explore how to integrate localization with Django and set up an efficient content translation workflow.

Integration with Django Locale

To start localizing our Wagtail site, we need to enable internationalization in Django and Wagtail. We do this by setting two key options in our project's settings file:

USE_I18N = True
WAGTAIL_I18N_ENABLED = True

These settings activate internationalization support in both Django and Wagtail.

Next, we define the languages our site will support. We add this to our settings:

LANGUAGES = [
    ('en', 'English'),
    ('es', 'Spanish'),
    ('fr', 'French'),
]

This tells Django which languages to make available for translation.

Content Translation Workflow

With localization enabled, we can now set up a workflow for translating content. Wagtail Localize is a powerful tool for managing translations in Wagtail CMS.

To use Wagtail Localize, we first install it:

pip install wagtail-localize

Then we add it to our INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'wagtail_localize',
    'wagtail_localize.locales',
]

Wagtail Localize provides a user-friendly interface for translating content. We can create a page in one language and then easily create translated versions in other languages.

The tool also supports machine translation, which can speed up the translation process. However, we always review machine translations for accuracy before publishing.

Language Selection Interface

A clear language selection menu is vital for multi-language sites. We recommend placing this menu in the header or footer for easy access. Here are some options:

• Dropdown menu with language names
• Flag icons (use with caution, as flags don't always represent languages)
• Two-letter language codes (e.g. EN, ES, FR)

For mobile devices, a collapsible menu works well. We can use JavaScript to detect the user's browser language and offer automatic redirection. This improves user experience but should always allow manual override.

It's important to make language options visible on every page. This helps users switch languages easily, no matter where they are on the site.

SEO and Multilingual URLs

Proper URL structure is crucial for SEO in multi-language sites. We suggest using language codes in the URL path. For example:

• example.com/en/about-us
• example.com/es/sobre-nosotros
• example.com/fr/a-propos

This approach helps search engines understand the language of each page. It's also clear for users.

We must use hreflang tags to indicate language versions of a page. These tags tell search engines about alternate language versions. We can add them in the section of our HTML:

<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />

Consistent URL structure across languages helps with site organization and user navigation.