Принципы создания мультиязычных сайтов

Принципы создания мультиязычных сайтов

От автора: в данном уроке мы с Вами рассмотрим принципы создания многоязычных сайтов, так как сайт, у которого есть возможность отображения контента на различных языках, может заинтересовать большее количество посетителей.

скачать исходникискачать урок

1. Постановка задачи

Для сегодняшнего урока я подготовил вот такой сайт (исходный в данной статье я приводить не буду, Вы его сможете посмотреть в исходниках к данному уроку):

Задача данного урока – это реализация многоязычности данного сайта, в частности поддержка русского и английского. И перед тем как перейти к решению данной задачи, давайте рассмотрим составляющие данного сайта.

Итак, смотрите, данный сайт состоит из контента, который содержится в базе данных. Это статьи, а также вертикальное и горизонтальное меню. И дополнительных специальных элементов, которые либо информируют пользователя о назначении блоков, или являются различными заголовками. К примеру, это заголовок сайта (TITLE), девиз (THE BEST CAR FOR YOU), строка MENU и т.д.

С контентом все просто, так как он содержится в базе данных, к примеру, в моем случае статьи содержатся в таблице statti, то для каждой статьи Вашего сайта или заголовка меню категории и т.д., необходимо сохранять копию, но уже на другом языке. И, конечно же, копий должно быть столько, сколько языков у Вас будет на сайте. Но возникает вопрос, как определить язык, который выбирает пользователь? Ответ на данный вопрос мы с Вами разберем дальше по ходу урока.

Но что, же делать с дополнительными элементами, так как они не хранятся в базе данных, а выводятся либо из файла конфигурации, либо просто выводятся из шаблона, обычным HTML. Этим мы с Вами далее и займемся.

2. Выбор языка

Если посмотреть на наш тестовый сайт, то мы с Вами увидим, что в шапке сайта есть две ссылки English и Русский, которые будут переключать язык сайта. Используя данные ссылки, мы будем передавать через адресную строку параметр lang. Значение en будет соответствовать английскому языку, значение ru – русскому.

Поэтому для определения языка мы должны проверять ячейку lang суперглобального массива GET. Итак давайте добавим следующий код в файл index.php (Вы конечно же будете создавать свой сайт, и данный код необходимо добавить в то место где Вы обрабатываете параметры из адресной строки):

if($_GET['lang']) {
	$_SESSION['lang'] = trim(strip_tags($_GET['lang']));
	$date = time() + 30*24*60*60;
	setcookie('lang',trim(strip_tags($_GET['lang'])),$date);
}
else if ($_COOKIE['lang']) {
	$_SESSION['lang'] = $_COOKIE['lang'];
}
else {
	$_SESSION['lang'] = 'en';
}

Первым делом проверяем есть ли в суперглобальном массиве GET, ячейка lang. Если же есть данная ячейка, значит пользователь выбрал язык, поэтому значение данной ячейки мы сохраняем в сессию, что бы в любом месте нашего скрипта мы могли узнать какой язык выбрал пользователь. Также очень удобно хранить выбранный язык в куках. Так как при последующих посещениях Вашего сайта, пользователю не придется заново выбирать язык. Поэтому после того как мы сохранили выбранный язык в сессии – создаем куку и записываем в нее выбранный язык.

Если же в суперглобальном массиве GET нет ячейки lang, то выполняем проверку наличия куки с именем lang, если же данная кука есть то в сессию записываем ее значение.

Если же в суперглобальном массиве GET нет ячейки lang и нет куки с именем lang, значит, пользователь не выбрал язык и в сессию записываем язык по умолчанию. Давайте условимся — что это английский язык.

3. Где и как хранить словарь для вывода элементов сайта

Теперь необходимо определиться, как же выводить специальные элементы сайта, используя различные языки. Реализовать данный функционал можно различными способами, мы же в данном уроке рассмотрим два варианта. Вообще, идея создания многоязычного сайта заключается в том, что в шаблонах мы проставляем специальные метки (метками могут служить переменные, константы, вызов функции с различными параметрами и т.д), которые в последствии, будут заменены на строки (словосочетания, предложения, слова и т.д) уже того языка, который выбрал пользователь.

Оба этих варианта предусматривают хранение словарей в обычных текстовых файлах. Словарь — это текстовый файл определенного формата, в котором связаны строки определенного языка с метками, которые мы будем использовать на сайте. Итак, словари для первого варианта. Файл en.php:

<?php
return array (
	'STITLE' => 'Title',
	'SLOGO' => 'The best car for you',
	'SLANG' => 'Language',
	'SMENU' => 'Menu'
);
?>

Файл ru.php:

<?php
return array (
	'STITLE' => 'Заголовок сайта',
	'SLOGO' => 'Лучшие автомобили для Вас',
	'SLANG' => 'Язык',
	'SMENU' => 'Меню'
);
?>

Как Вы видите по первому варианту в словарях, содержится массив. Ключи данного массива – это метки, которые будут проставлены в шаблонах, а значение ячеек – это собственно те строки, которые будут выведены в браузер вместо меток. Конечно, для каждого словаря ключи массива должны быть одинаковыми, так как они будут прописаны в шаблоне.

Словари для второго варианта. Файл en.ini:

STITLE = Title
SLOGO = The best car for you
SLANG = Language
SMENU = Menu

Файл ru.ini:

STITLE = Заголовок сайта
SLOGO = Лучшие автомобили для Вас
SLANG = Язык
SMENU = Меню

По второму варианту мы уже используем ini файлы в качестве словарей – так как их очень легко прочитать стандартными средствами языка PHP и при этом получить массив, который в дальнейшем можно использовать.

4. Первый вариант создания многоязычного сайта

Первый вариант предусматривает словари в виде файлов php. Поэтому давайте в файле index.php подключим данный файл сразу же после проверки наличия в суперглобальном массиве GET ячейки lang:

$dict = include $_SESSION['lang'].'.php';

Теперь у нас в переменной $dict – содержится массив словаря. Хочу заметить, что имена словарей совпадают со значением сессионной переменной $_SESSION['lang'] – это я выбрал для удобства.

Далее давайте создадим новый файл (dict.php), в котором будет содержаться вспомогательный класс Dict. В этом классе будет содержаться метод возвращающий значения ячеек массива $dict:

<?php
class Dict {
	static function _($key) {
		$dict = $GLOBALS['dict'];
		
		if($dict[$key]) {
			return $dict[$key];
		}
		else {
			return $key;
		}
	}
}
?>

Как Вы видите это очень простой класс, с единственным статическим методом _(), данный метод принимает параметром ключ массива dict и если данный ключ действительно существует в массиве, то метод возвращает его значение. Если же данного ключа нет, то будет возвращено имя ключа. Если же Вы создаете сайт при помощи процедурного подхода, то класс Dict замените обычной функцией, тело которой точно такое же как и метода _(). Теперь данный файл необходимо подключить к нашему сайту.

require_once("classes/dict.php");

Теперь в нашем шаблоне, в тех местах, где Вам нужно вывести слово из словаря, нужно вызвать метод _(). В моем случае, для шапки сайта это будет выглядеть вот так:

<div id="logo">
					<div class="name"><?=Dict::_('STITLE')?></div>
					<div class="tag">"><?=Dict::_('SLOGO')?></div>
					<div class="tag">"><?=Dict::_('SLANG')?>: <a href="?lang=en">English</a>|<a href="?lang=ru">Русский</a></div>
				</div>

Если Вы используете процедурный подход, то вместо класса и метода, просто укажите свою функцию. Теперь давайте проверим что у нас получилось. Язык по умолчанию:

Русский язык:

5. Второй вариант

Итак по второму варианту мы с Вами используем ini файлы в качестве словарей. Значит, дополнительный класс на не нужен и поэтому, удаляем подключение файла dict.php, а также удаляем подключение файла словарей, сразу после определения языка.

Теперь для того что бы прочитать ini файл мы воспользуемся функцией (данную строчку я прописываю в фале ACore.php в методе get_body()):

$dict = parse_ini_file($_SESSION['lang'].'.ini');

При выполнении данного метода, в переменную $dict будет сохранен массив с словарем. Теперь в шаблоне где Вам необходимо вывести текст вместо меток, пропишите вывод на экран значений соответствующих ячеек массива $dict. Опять же для данного примера, для шапки сайта, необходимо сделать следующее:

<div id="logo">
					<div class="name"><?=$dict['STITLE']?></div>
					<div class="tag"><?=$dict['SLOGO']?></div>
					<div class="tag"><?=$dict['SLANG']?>: <a href="?lang=en">English</a>|<a href="?lang=ru">Русский</a></div>
				</div>

Далее можно проверить результат нашей работы. Вот мы с Вами и рассмотрели два принципа создания многоязычных сайтов, надеюсь, данный урок будет Вам полезен.

Всего Вам доброго, удачного кодирования и увидимся в следующих уроках.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Max

    Спасибо за урок!!!
    Нужный материал!… как раз интересовался этим вопросом.

  2. jack

    здравствуйте,а как можно пристыковка «.$_SESSION['lang']» в этом случае $query = «SELECT * FROM catg_ ORDER BY……..»; я пытался сделать рядом catg_ но дает ошибку.

  3. Дмитрий

    А если у меня сайт — html страницы, как тогда заменять текст? Какую переменную вписывать в html файле?

    • Андрей Кудлай

      Сайт должен быть динамичным, т.е. здесь априори подразумевается использование языка программирования, например PHP. HTML только для верстки, для решения таких задач HTML будет мало.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree