Меню
Автор:
Фильтры
Что нового
Реклама

Создание мультиязычного сайта на DLE без платных плагинов (2 просмотра)

леший

леший

Модератор
SkripTers TEAM
OLD SkripTers
Регистрация
18 Дек 2019
Сообщения
5,655
Реакции
981
Приветствую всех. По запросам трудящихся и после того как увидел, что за подобное решение просят 50$, решил написать инструкцию, как сделать сайт на нескольких языках, не используя платные плагины вроде Multi-Language 4.9 для DLE. Представленный мной метод базируется на смене шаблона сайта.
Из плюсов:
  • Сайт полностью переводится на нужный язык (новости, системные сообщения, оформление шаблона)
  • Новости на каждом языке имеют свой title и description в meta-тегах соответствующие выбранному языку
  • Использование минимального количества (одного если быть точным) плагинов от сторонних разработчиков, что снижает риск "поломки" сайта после очередного обновления DLE.
Из минусов:
  • Нет возможности перевести название категорий (если выводить их стандартным тегом DLE). Лично я прописывал везде категории в ручную, поэтому у меня они везде кроме админки и speedbar'а переведены на нужный язык, что правда лишило меня возможности использовать некоторые теги (например для подсчёта количества новостей в категории).
  • Сайт будет индексироваться только на основном языке. (Для меня вполне приемлемо)
Все примеры кода буду приводить на шаблоне Default от DLE.

Всё что нам понадобится для создания мультиязычного сайта это:
  1. Несколько копий шаблона (для каждого языка своя копия шаблона переведённая на данный язык).
  2. Дополнительные поля новостей.
  3. Плагин Fullstory-Metatags by Sander
И так приступим:
Первым делом заливаем шаблоны на сайт. Чтобы различать какой шаблон для какого языка предназначен, советую к названию папки с шаблоном добавить аббревиатуру языка. Например: Default-ru, Default-en, Default-ua. Затем (хотя можно сделать и до этого) в каждом из шаблонов открываем файл "info.json" и в параметре "name" прописываем вместо названия шаблона нужный лингвоним (название языка), что бы в админке было понятно какой язык выбран.
Теперь заходим в админпанель и в общих настройках выбираем один из шаблонов в качестве основного, например Default-ru
1

и после сохранения настроек перейдите в раздел "Управление шаблонами сайта" /admin.php?mod=templates И назначьте для шаблона нужный язык по умолчанию
2
Эти два шага (выбор шаблона по умолчанию и назначение используемого языка) нужно проделать со всеми шаблонами.

Так же в настройках системы /admin.php?mod=options&action=syscon во вкладке "новости" отключите краткое и полное описание
3

Когда всё это проделаете, скачайте и установите плагин Fullstory-Metatags by Sander. После чего можно будет перейти к созданию дополнительных полей для новостей. В примере я создам 9 дополнительных полей для трёх полей: Заголовок новости, краткое описание новости и полное описание новости. Для каждого языка своё поле, в примере три языка, что в сумме и даёт 9 дополнительных полей:
4
Для заголовков тип поля просто одна строка, а для краткого и полного описания тип поля несколько строк с подключением редактора, причём для полного описание можно сделать заполнение не обязательным:
5

Ну и переходим к завершающей части, редактированию шаблона:
Открываем файл addnews.tpl нужного вам шаблона/языка (в данном случае я возьму русский шаблон/язык) и находим там
HTML: 
                <li class="form-group">
                    <label for="title" class="imp">Заголовок</label>
                    <input type="text" name="title" id="title" value="{title}" class="wide" required>
                </li>
так как input с id="title" тут является обязательным, то просто скрываем его и добавляем наше доп.поле для заголовка, получается примерно так
HTML: 
                <li class="form-group">
                    <label for="title" class="imp">Заголовок</label>
                    <input type="hidden" name="title" id="title" value="{title}" class="wide">
                    [xfinput_title_ru]
                </li>
Если хотите чтобы список категорий новостей при добавлении новости через сайт отображался на разных языках, то ниже находим
HTML: 
<li class="form-group">
                    <label for="category" class="imp">Категория</label>
                    {category}
                </li>
и меняем на
HTML: 
                <li class="form-group">
                    <label for="category" class="imp">Категория</label>
                    <select data-placeholder="Выберите категорию ..." name="catlist[]" id="category" onchange="onCategoryChange(this)" style="width:350px;height:140px;" multiple="multiple">
                    <option value="0"></option>
                    <option value="1" >О скрипте</option>
                    <option value="2" >В мире</option>
                    <option value="3" >Экономика</option>
                    <option value="4" >Религия</option>
                    <option value="5" >Криминал</option>
                    <option value="6" >Спорт</option>
                    <option value="7" >Культура</option>
                    </select>
                </li>
для краткого и полного описания найти
HTML: 
                [allow-shortstory]
                <li class="form-group">
                    <label for="short_story" class="imp">Краткое описание</label>
                    [not-wysywyg]
                    <div class="bb-editor">
                        {bbcode}
                        <textarea name="short_story" id="short_story" onfocus="setFieldName(this.name)" rows="10" class="wide" required>{short-story}</textarea>
                    </div>
                    [/not-wysywyg]
                    {shortarea}
                </li>
                [/allow-shortstory]
                [allow-fullstory]
                <li class="form-group">
                    <label for="full_story">Полное описание</label>
                    [not-wysywyg]
                    <div class="bb-editor">
                        {bbcode}
                        <textarea name="full_story" id="full_story" onfocus="setFieldName(this.name)" rows="12" class="wide" >{full-story}</textarea>
                    </div>
                    [/not-wysywyg]
                    {fullarea}
                </li>
                [/allow-fullstory]
заменить на
HTML: 
<li class="form-group">
                    <label for="short_story" class="imp">Краткое описание</label>
                    [xfinput_shortstory_ru]
                </li>
                <li class="form-group">
                    <label for="full_story">Полное описание</label>
                    [xfinput_fullstory_ru]
                </li>
ещё удаляем вывод доп.полей кучкой, чтобы они не дублировались
HTML: 
                <li class="form-group">
                    <table style="width:100%">
                        {xfields}
                    </table>
                </li>
ну и чтобы DLE не ругался, что не заполнено стандартное поле заголовка, в самом низу файла вставляем небольшой скрипт
Код: 
<script>
    $(function() {
            $('#entryform').submit(function() {
                    var xfval1 = $('#xf_title_ru').val();
                    $('#title').val(xfval1);
            });
    });
</script>
Сохраняем и закрываем данный файл.
Открываем файл categorymenu.tpl (если нужен перевод названия категорий) и прописываем там нужные категории в ручную
было
HTML: 
[root]<ul>[/root]
[item]
    <li>[active]<b>[/active]<a href="{url}">{name} <span style="float: right;">{news-count}</span></a>[active]</b>[/active]
    [sub-prefix]<ul>[/sub-prefix]{sub-item}[sub-suffix]</ul>[/sub-suffix]
    </li>
[/item]
[root]</ul>[/root]
стало
HTML: 
<ul>
    <li><a href="/about-dle/">О скрипте</a></li>
    <li><a href="/worldwide/">В мире</a></li>
    <li><a href="/economy/">Экономика</a></li>
    <li><a href="/religion/">Религия</a></li>
    <li><a href="/criminal/">Криминал</a></li>
    <li><a href="/sport/">Спорт</a></li>
    <li><a href="/culture/">Культура</a></li>
</ul>
сохраняем и закрываем.
Далее в файле fullstory.tpl в самом начале вставляем
HTML: 
[metatags]
<title>[xfvalue_title_ru]  -  С любовью для Skripters.Biz</title>
<description>[xfvalue_shortstory_ru limit="180"]</description>
[/metatags]
затем ниже находим
HTML: 
        <h2 class="title">{title}</h2>
        <div class="text share-content">
            {full-story}
            [edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
            [edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
        </div>
и меняем на
HTML: 
        <h2 class="title">[xfvalue_title_ru]</h2>
        <div class="text share-content">
            [xfgiven_fullstory_ru] [xfvalue_fullstory_ru] [/xfgiven_fullstory_ru]
            [xfnotgiven_fullstory_ru] [xfvalue_shortstory_ru] [/xfnotgiven_fullstory_ru]
            [edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
            [edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
        </div>
сохраняем закрываем.
В файле relatednews.tpl
HTML: 
<li>
    <a href="{link}" title="{title}">
        <svg class="icon icon-rel"><use xlink:href="#icon-rel"></use></svg>
        <b>{title}</b>
        <span>{category}</span>
    </a>
</li>
заменяем на
HTML: 
<li>
    <a href="{link}" title="[xfvalue_title_ru]">
        <svg class="icon icon-rel"><use xlink:href="#icon-rel"></use></svg>
        <b>[xfvalue_title_ru]</b>
    </a>
</li>
В файле shortstory.tpl найти
Код: 
        <h2 class="title"><a href="{full-link}">{title}</a></h2>
        <div class="text">
            {short-story}
            [edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
            [edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
        </div>
заменить на
HTML: 
        <h2 class="title"><a href="{full-link}">[xfvalue_title_ru]</a></h2>
        <div class="text">
            [xfvalue_shortstory_ru]
            [edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
            [edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
        </div>
В файле topnews.tpl
HTML: 
<li>
    <a href="{link}" title="{title}">
        <b>{title}</b>
        <span>{category}</span>
    </a>
</li>
меняем на
Код: 
<li>
    <a href="{link}" title="[xfvalue_title_ru]">
        <b>[xfvalue_title_ru]</b>
    </a>
</li>

Ну и наконец в любом нужном месте сайта вставляем выбор языка
Код: 
<div class="block_bg change_skin">
    <h4 class="title">Выбрать язык сайта</h4>
    <div class="styled_select">
        <form method="post">
            <select onchange="submit()" name="skin_name">
                <option value="Default-en">English</option>
                <option value="Default-ru" selected="selected">Русский</option>
                <option value="Default-ua">Українська</option>
            </select>
            <input type="hidden" name="action_skin_change" value="yes">
        </form>
        <svg class="icon icon-down"><use xlink:href="#icon-down"></use></svg>
    </div>
</div>
обратите внимание, что атрибут selected="selected" должен быть прописан там, какой язык привязан к шаблону.

Всё то же самое повторяем с другими шаблонами, заменяя названия доп.поле.

На этом всё, Ваш мультиязычный сайт готов.

6
7
8
9
10
 
При включенной «автоматической поддержке смартфона» скин невозможно изменить в мобильной версии.

Есть ли какое-нибудь решение этой проблемы?
 
KINETOON сказал(а):
При включенной «автоматической поддержке смартфона» скин невозможно изменить в мобильной версии.

Есть ли какое-нибудь решение этой проблемы?
Нажмите, чтобы раскрыть...
Хотя тут особо думать не нужно, просто делаете несколько шаблонов "Smartphone", для основного языка оставляете название директории шаблона без изменений (чтобы при определение мобильного устройства скрипт переключался на мобильную версию), остальные переименовать например в "Smartphone-ua" и "Smartphone-en", так же прописываете в них нужные доп. поля и в нужном месте вставляете (например где-то в шапке)
HTML: 
<div class="block_bg change_skin">
    <h4 class="title">Выбрать язык сайта</h4>
    <div class="styled_select">
        <form method="post">
            <select onchange="submit()" name="skin_name">
                <option value="Smartphone-en">English</option>
                <option value="Smartphone" selected="selected">Русский</option>
                <option value="Smartphone-ua">Українська</option>
            </select>
            <input type="hidden" name="action_skin_change" value="yes">
        </form>
        <svg class="icon icon-down"><use xlink:href="#icon-down"></use></svg>
    </div>
</div>
Так как в мобильном шаблоне работают все те же теги, что и в обычном шаблоне.
 
леший сказал(а):
Хотя тут особо думать не нужно, просто делаете несколько шаблонов "Smartphone", для основного языка оставляете название директории шаблона без изменений (чтобы при определение мобильного устройства скрипт переключался на мобильную версию), остальные переименовать например в "Smartphone-ua" и "Smartphone-en", так же прописываете в них нужные доп. поля и в нужном месте вставляете (например где-то в шапке)
HTML: 
<div class="block_bg change_skin">
    <h4 class="title">Выбрать язык сайта</h4>
    <div class="styled_select">
        <form method="post">
            <select onchange="submit()" name="skin_name">
                <option value="Smartphone-en">English</option>
                <option value="Smartphone" selected="selected">Русский</option>
                <option value="Smartphone-ua">Українська</option>
            </select>
            <input type="hidden" name="action_skin_change" value="yes">
        </form>
        <svg class="icon icon-down"><use xlink:href="#icon-down"></use></svg>
    </div>
</div>
Так как в мобильном шаблоне работают все те же теги, что и в обычном шаблоне.
Нажмите, чтобы раскрыть...


Я только что попробовал еще раз.

Когда эта кнопка включена и пользователь заходит на сайт через телефон, система показывает ему только «/templates/smartphone».

Скин никак не меняется.

Это работает только в настольной версии
 

Вложения

  • Screenshot 2024-11-20 165607.png
    Screenshot 2024-11-20 165607.png
    30.9 КБ · Просмотры: 4
леший сказал(а):
А код для смены прописали?
Нажмите, чтобы раскрыть...
Да. У меня есть два шаблона «smartphone» и «smartphone_ru».
И я использую следующий код для изменения скина:
<div class="block_bg change_skin">
<h4 class="title">Выбрать язык сайта</h4>
<div class="styled_select">
<form method="post">
<select onchange="submit()" name="skin_name">
<option value="smartphone" selected="selected">Armenian</option>
<option value="smartphone_ru">Русский</option>
</select>
<input type="hidden" name="action_skin_change" value="yes">
</form>
<svg class="icon icon-down"><use xlink:href="#icon-down"></use></svg>
</div>
</div>

Когда выключаю "Включить автоматическую поддержку смартфона" он начинает работать, когда включаю - не работает
 
Большое спасибо.
Буду с нетерпением ждать хороших новостей.
 
Отключить поддержку мобильного шаблона? 💁🏻‍♂️
 
MaHarder сказал(а):
Отключить поддержку мобильного шаблона? 💁🏻‍♂️
Нажмите, чтобы раскрыть...
Да, скин сайта, то есть в этом случае для смены языка в мобильной версии нужно отключить поддержку мобильного шаблона.
 
леший сказал(а):
Тогда человеку надо шаблон делать адаптивным и на стандартном шаблоне сайт не поднять:LOL:
Нажмите, чтобы раскрыть...
Да, это решение, но лучше не иметь многоязычный сайт, чем адаптировать основной шаблон под мобильные устройства. :D
 
Для ответа нужно войти/зарегистрироваться

Пользователи, просматривающие данную тему

  • Upload
Всего: 2 (пользователей: 1, гостей: 1)
Верх