• Главная
  • Блог
  • Как создать свою less тему в yootheme pro на основе существуюшей?

Как создать свою less тему в yootheme pro на основе существуюшей?

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Оглавление

В чем преимущество использования less файла, вместо custom.css?

1. Вместо двух файлов при переходе на ваш сайт будет грузиться только один.

2. Файл будет минимизирован.

3. Доступ к внутренним переменным темы yootheme (их можно будет использовать в своих CSS правилах).

4. Не все параметры темы доступны для изменения через веб интерфейс. Некоторые доступны только через переменные less.

5. Можно использовать комментарии и удобное деление на несколько файлов по смыслу. После компиляции все равно все будет собрано в один, а вот работа сильно облегчается.

6. Можно полностью избавиться от обращения к CDN гугл и Google fonts.

Как же создать свой less файл на основе выбранной темы yootheme?

Переопределение файлов yootheme pro

Как переопределять различные файлы в темах yootheme pro подробно описано в их документации и обычно не вызывает никаких проблем.

Все что требуется - это создать новую папку в каталоге templates с именем yootheme_child . Можно придумать свое название, которое вам будет по душе - например yootheme_my или yootheme_mysite. Главное условие - название папки должно начинаться со слова yooteheme, а затем идет символ подчеркивания и ваше слово.

Честно говоря, особого смысла придумывать свое название я не вижу, так как чаще всего папка оказывается всего одна и как-то особо ее называть смысла нет. Поэтому с некоторого времени все папки у меня называются одинаково - yootheme_child (так же как в примерах кода yootheme).

Обратите внимание - папка создается не внутри папки yootheme (!), а на одном уровне с ней.

После того как вы создали нужную папку - не забудьте проследовать в настройки -> дополнительно -> child theme и выбрать свою папку.

Затем в этой папке вы создаете те же самые папки, которые существуют в основной теме и в них размещаете те файлы, которые вам требуется переопределить.

Для меня практически обязательным является создание папки CSS и создание в ней файла custom.css. Это позволяет добавлять свои кастомные правила css на свой сайт по своему вкусу. Чаще всего этого вполне хватает, для того чтобы вносить любые правки и изменения в оформление сайта.

Можно также переопределять файлы index.php, header.php и все другие, которые вам могут понадобиться.

Переопределение файла ошибки 404

Можно так же переопределить файл error.php и создать свою кастомную страницу для 404 ошибки.

При копировании этого файла учтите что его понадобится немного изменить - следующие строки понадобится удалить:

// prefer child theme's error.php
if (isset($params['child_theme']) && file_exists($file = $directory . '_' . $params['child_theme'] . '/error.php')) {
    return include $file;
}

Если этого не сделать - ничего работать не будет.

Что делать если шрифты Google нужно перенести на свой сервер?

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

Шаблон yootheme pro умеет компилировать less файлы и затем минимизировать полученный файл, уменьшая таким образом его размер. Поэтому логично хранить все свои кастомные изменения не в отдельном файле custom.css, а добавлять их в файл выбранной темы yootheme pro чтобы все в итоге попадало в один файл и уменьшало время загрузки сайта.

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

Единственный недостаток - перекомпилирование файла занимает определенное время, которое начинает немного раздражать, если вы работаете над оформлением сайта и вносите множество мелких изменений, которые лучше видеть сразу. В таком случае оптимальный режим работы - вначале все мелкие правки вносить в файл custom.css, а после окончания работы перенести все в основной less файл выбранной темы.

Теперь перейдем к основному вопросу статьи:

Как создать переопределение для less файла основной темы yootheme pro?

Следует отметить, что документация yootheme в данном вопросе вводит в заблуждение. Может быть они ее поправят в новой версии сайта, но пока она не соответствует современной действительности.

Дело в том, что с некоторой поры, помимо основной темы у yootheme появились и цветовые вариации. Вопрос переопределения цветовой вариации в документации никак не освещается. Мало того - существующие рекомендации далеки от тех, которых следует придерживаться. Так как же подключить выбранную цветовую вариацию темы и притом сделать так, чтобы при обновлении темы ничего не стерлось и не поломалось?

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

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

Вначале, в папке yootheme_child мы создаем папку less.

Идем в папку less папки yootheme и выбираем файл нашей темы.

Предположим вы выбрали тему Joline и цветовую вариацию этой темы White Green. Что нам надо сделать?

1. Копируем файл /templates/yootheme/less/theme.joline.less в файл /templates/yootheme_child/less/theme.joline.less

2. Теперь надо переименовать файл /templates/yootheme_child/less/theme.joline.less во что-то другое по своему усмотрению. Замените слово joline на что-то свое. Можно заменить на child. Получаем -> /templates/yootheme_child/less/theme.child.less

3. Теперь в самом файле /templates/yootheme_child/less/theme.child.less нужно в третьей строке в комментарии поменять название темы на наш вариант. В данном случае - Child.

4. Так как из-за переноса файла изменятся пути импорта, их тоже надо изменить.
Вместо @import "platform.less"; пишем   @import "../../yootheme/less/platform.less";
Вместо @import "theme.less"; пишем  @import "../../yootheme/less/theme.less";

Вместо

// UIkit Core
@import "../vendor/assets/uikit/src/less/uikit.less";

// UIkit Theme
@import "../vendor/assets/uikit-themes/master/_import.less";
@import "../vendor/assets/uikit-themes/master-joline/_import.less";

Пишем

// UIkit Core
@import "../../yootheme/vendor/assets/uikit/src/less/uikit.less";

// UIkit Theme
@import "../../yootheme/vendor/assets/uikit-themes/master/_import.less";
@import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less";

Не надо тупо копировать эти строки - обратите внимание - там присутствует имя выбранной темы!

Просто замените ../ на ../../yootheme/ перед именем файла.

5. Не забудьте изменить путь файлу стилей - вместо

@import (optional) "../vendor/assets/uikit-themes/master-joline/styles/@{internal-style}.less";

ставим:

@import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@{internal-style}.less";

6. Если вам нужно избавить от google fonts то добавьте в конце файла еще вот такую строку:
@internal-fonts: ;

Итак, в результате мы получили вот такой вот файл theme.child.less :

    /*

Name: Child
Background: White
Color: Beige
Type: Flat

Style: white-salmon
Name: White Salmon
Background: White
Color: Red
Type: Flat

Style: white-green
Name: White Green
Background: White
Color: Green
Type: Flat

Style: light-green
Name: Light Green
Background: Light
Color: Green
Type: Flat

Style: light-pink
Name: Light Pink
Background: Light
Color: Pink
Type: Flat

Style: black-pink
Name: Black Pink
Background: Black
Color: Pink
Type: Flat

*/

// Platform
@import "../../yootheme/less/platform.less";

// UIkit Core
@import "../../yootheme/vendor/assets/uikit/src/less/uikit.less";

// UIkit Theme
@import "../../yootheme/vendor/assets/uikit-themes/master/_import.less";
@import "../../yootheme/vendor/assets/uikit-themes/master-joline/_import.less";

// Theme
@import "../../yootheme/less/theme.less";

//
// Variables
//

@theme-headerbar-top-border-width:              @global-border-width;
@theme-headerbar-top-border:                    @global-border;

.tm-headerbar-top + .uk-navbar-container:not(.uk-navbar-sticky) .uk-navbar-nav > li > a::before
when (@navbar-nav-item-line-mode) and (@navbar-nav-item-line-position-mode = top)
{ top: -@theme-headerbar-top-border-width; } // Style @import (optional) "../../yootheme/vendor/assets/uikit-themes/master-joline/styles/@{internal-style}.less"; @internal-style: ; @internal-fonts: ;

Комментарии удалять из него не нужно! Они используются yootheme pro для выбора цветовой вариации темы.

Теперь осталось зайти в yootheme pro и выбрать созданную нами тему с нужной цветовой вариацией:

Если вы хотите избавиться от шрифтов гугл и любого обращения к их CDN - обратите внимание на один нюанс - не забудьте удалить cyrillic (если вы его ставили) в поле "языки". Иначе вы долго будете искать причину, по которой не удаляется обращение к CDN Google.

Затем вам понадобится заменить все имена гугл шрифтов на свои. Например я просто добавляю слово local. И вместо Roboto у меня получается имя шрифта Roboto local.

На всякий случай объясню как добавлять свое кастомное имя шрифта - в поиске при выборе шрифта нужно просто набрать свое имя и затем нажать Enter (это имеется в подсказке, но кто же ее читает...). Немножко путает первоначальное название поля - "поиск". Кто бы мог подумать, что туда можно вбить свое название шрифта и затем его использовать!

Естественно, вам понадобится скачать шрифты гугл самостоятельно и добавить правила CSS для их загрузки с вашего сервера.

Лучше всего размещать шрифты в папке fonts в родительской папке yootheme_child.

Благо, есть сервисы, которые сильно упрощают процесс скачивания и получения нужных правил CSS. (например вот этот - https://google-webfonts-helper.herokuapp.com/fonts/)

Этот сервис как раз по умолчанию предполагает размещение шрифтов в папке fonts. Поэтому единственное, что потребуется подправить - наименование самого шрифта (вместо Roboto поставить Roboto local).

после смены получается

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto local';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v18-latin-regular.woff') format('woff');
}

Я надеюсь, что вы не забыли поставить галочку при выборе языка для шрифта?

Перекомпиляция less темы

На этом создание своей less темы можно считать оконченным. Нужно добиться перекомпиляции файла путем выбора другой темы и затем повторного выбора своей и последующего сохранения. К сожалению, на данный момент кнопки "компилировать" в теме пока нет и приходится немного извращаться.

Свои дополнения в созданный less файл можно добавлять в нужное вам место. Можно в конце или в начале (но после комментариев).

Туда же можно добавить определения своих локальных шрифтов.

Полезный ресурс для скачивания на свой компьютер выбранного вами шрифта из сервиса гугл - https://google-webfonts-helper.herokuapp.com/fonts/

P.S. Возможные трудности и пути их решения

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

1. Слишком короткая сессия в Joomla

В джумла по умолчанию предусмотрено, что если вы бездействуете более 15 минут - вас разлогинет. Причем, находясь в yootheme pro вы этого даже не заметите. Просто перестанет нажиматься кнопка "Сохранить" (или исчезнет).

Путь решения - я устанавливаю продолжительность сессии 55 минут.

2. Несовместимость с режимом вебвизора от Яндекс метрики

Если включен вебвизор в яндекс метрике, то yootheme pro может начать вести себя очень странно. Иногда выкидывает или делает еще какие-то странные вещи. Может быть это как-то починят, но пока было так.

Пути решения - я добавляют метрику на сайт в виду HTML модуля и публикую его в позиции debug. На время внесения изменений в yootheme pro модуль можно снять с публикации одной кнопкой.

Главное - не забыть потом включить назад :)

3. Плагин JL No Doubles ( https://joomline.ru/rasshirenija/plugin/jlnodubles.html ) не совместим с Yootheme Pro

Пути решения - опять же на время редактирования приходится отключать.

Автор вроде обещал что-то поправить, но пока что без движений.

Теги: yootheme

Авторизоваться