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

леший · 11 Ноя 2024

Приветствую всех. По запросам трудящихся и после того как увидел, что за подобное решение просят 50$, решил написать инструкцию, как сделать сайт на нескольких языках, не используя платные плагины вроде Multi-Language 4.9 для DLE. Представленный мной метод базируется на смене шаблона сайта.
Из плюсов:

Сайт полностью переводится на нужный язык (новости, системные сообщения, оформление шаблона)
Новости на каждом языке имеют свой title и description в meta-тегах соответствующие выбранному языку
Использование минимального количества (одного если быть точным) плагинов от сторонних разработчиков, что снижает риск "поломки" сайта после очередного обновления DLE.

Из минусов:

Нет возможности перевести название категорий (если выводить их стандартным тегом DLE). Лично я прописывал везде категории в ручную, поэтому у меня они везде кроме админки и speedbar'а переведены на нужный язык, что правда лишило меня возможности использовать некоторые теги (например для подсчёта количества новостей в категории).
Сайт будет индексироваться только на основном языке. (Для меня вполне приемлемо)

Все примеры кода буду приводить на шаблоне Default от DLE.

Всё что нам понадобится для создания мультиязычного сайта это:

Несколько копий шаблона (для каждого языка своя копия шаблона переведённая на данный язык).
Дополнительные поля новостей.
Плагин Fullstory-Metatags by Sander

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

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

Эти два шага (выбор шаблона по умолчанию и назначение используемого языка) нужно проделать со всеми шаблонами.

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

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

Для заголовков тип поля просто одна строка, а для краткого и полного описания тип поля несколько строк с подключением редактора, причём для полного описание можно сделать заполнение не обязательным:

Ну и переходим к завершающей части, редактированию шаблона:
Открываем файл 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" должен быть прописан там, какой язык привязан к шаблону.

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

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

KINETOON · 20 Ноя 2024

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

Есть ли какое-нибудь решение этой проблемы?

леший · 20 Ноя 2024

KINETOON сказал(а):
Есть ли какое-нибудь решение этой проблемы?

Ночью на работе гляну. Хоть будет чем заняться

леший · 20 Ноя 2024

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>

Так как в мобильном шаблоне работают все те же теги, что и в обычном шаблоне.

KINETOON · 20 Ноя 2024

леший сказал(а):
Хотя тут особо думать не нужно, просто делаете несколько шаблонов "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».

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

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

леший · 20 Ноя 2024

KINETOON сказал(а):
Скин никак не меняется

А код для смены прописали?

KINETOON · 20 Ноя 2024

леший сказал(а):
А код для смены прописали?

Да. У меня есть два шаблона «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>

Когда выключаю "Включить автоматическую поддержку смартфона" он начинает работать, когда включаю - не работает

леший · 20 Ноя 2024

KINETOON сказал(а):
Когда выключаю "Включить автоматическую поддержку смартфона" он начинает работать, когда включаю - не работает

Ну значит ночью поковыряюсь.

KINETOON · 20 Ноя 2024

Большое спасибо.
Буду с нетерпением ждать хороших новостей.

MaHarder · 20 Ноя 2024

Отключить поддержку мобильного шаблона?

леший · 20 Ноя 2024

MaHarder сказал(а):
Отключить поддержку мобильного шаблона?

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

KINETOON · 20 Ноя 2024

MaHarder сказал(а):
Отключить поддержку мобильного шаблона?

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

KINETOON · 20 Ноя 2024

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

Да, это решение, но лучше не иметь многоязычный сайт, чем адаптировать основной шаблон под мобильные устройства.

леший · 22 Ноя 2024

KINETOON сказал(а):
Есть ли какое-нибудь решение этой проблемы?

Единственное, что пришло в голову, чтобы не писать дополнительных плагинов, сделать это через CSS, то есть отключаете настройку "Включить автоматическую поддержку смартфонов" и с помощью CSS определяете что человек зашёл с мобильного устройства, показываете ему всплывающее окно с предложением перейти на мобильную версию сайта. При этом используете так же несколько шаблонов "smartphone", для каждого языка свой.
Пример кода окна с кнопкой перехода на мобильную версию:

HTML:

<div id="showmobile_popup" class="showmobile">
  <div id="popup" class="showmobile">
    <div style="cursor: pointer;" onclick="document.getElementById('showmobile_popup').style.display='none';">Закрыть</div>
    <div>
      <p>Вы зашли на сайт с мобильного устройства, хотите переключится на мобильную версию сайта?</p>
      <p><a href="/index.php?action_skin_change=yes&skin_name=smartphone_ru">Да</a> <a href="#" onclick="document.getElementById('showmobile_popup').style.display='none';">Нет</a></p>
    </div>
  </div>
</div>

Ну и через CSS скрываем окно и показываем его только на устройствах до определённой ширены экрана:

CSS:

.showmobile {display: none;}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .showmobile { display: block; }}

P.S.: В разных шаблонах для ссылки <a href="/index.php?action_skin_change=yes&skin_name=smartphone_ru">Да</a> не забываем менять название шаблона /index.php?action_skin_change=yes&skin_name=НАЗВАНИЕ_ШАБЛОНА

KINETOON · 22 Ноя 2024

леший сказал(а):
Единственное, что пришло в голову, чтобы не писать дополнительных плагинов, сделать это через CSS, то есть отключаете настройку "Включить автоматическую поддержку смартфонов" и с помощью CSS определяете что человек зашёл с мобильного устройства, показываете ему всплывающее окно с предложением перейти на мобильную версию сайта. При этом используете так же несколько шаблонов "smartphone", для каждого языка свой.
Пример кода окна с кнопкой перехода на мобильную версию:

HTML:

<div id="showmobile_popup" class="showmobile"> <div id="popup" class="showmobile"> <div style="cursor: pointer;" onclick="document.getElementById('showmobile_popup').style.display='none';">Закрыть</div> <div> <p>Вы зашли на сайт с мобильного устройства, хотите переключится на мобильную версию сайта?</p> <p><a href="/index.php?action_skin_change=yes&skin_name=smartphone_ru">Да</a> <a href="#" onclick="document.getElementById('showmobile_popup').style.display='none';">Нет</a></p> </div> </div> </div>

Ну и через CSS скрываем окно и показываем его только на устройствах до определённой ширены экрана:

CSS:

.showmobile {display: none;} @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .showmobile { display: block; }}

P.S.: В разных шаблонах для ссылки <a href="/index.php?action_skin_change=yes&skin_name=smartphone_ru">Да</a> не забываем менять название шаблона /index.php?action_skin_change=yes&skin_name=НАЗВАНИЕ_ШАБЛОНА

или так

HTML:

<script type="text/javascript">

    <!--

    if (screen. width <= 800) {

        window.location = "/index.php?action_skin_change=yes&skin_name=smartphone";

    }

    //-->

</script>

Поиск

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

леший

Модератор

KINETOON

Посетитель

леший

Модератор

леший

Модератор

KINETOON

Посетитель

Вложения

леший

Модератор

KINETOON

Посетитель

леший

Модератор

KINETOON

Посетитель

MaHarder

Модератор

леший

Модератор

KINETOON

Посетитель

KINETOON

Посетитель

леший

Модератор

KINETOON

Посетитель

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