Как сделать динамический шаблон

Создаем свой шаблон для Joomla. Пошаговое руководство

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

Зачем это нужно? Наверняка вы слышали о том, что CMS Joomla «тяжелая», в ней постоянно выскакивают ошибки, «едет» верстка, «отваливаются» скрипты. В основном это связано с шаблоном, который вы используете, а именно – с подключением множества плагинов и скриптов, фреймворков (как css/js, так и php), которые в процессе работы сайта и для его продуктивности практически не нужны. Поэтому мы сталкиваемся с долгой загрузкой в Google Page Speed и многочисленными ошибками, которые влияют на продвижение сайта в поисковиках.

Для решения этой проблемы мы сделаем свой шаблон (template), в котором можно будет настраивать внешний вид, менять цвета, добавлять информацию. Настройками можно легко управлять с помощью административной панели самой Joomla.

Чтобы справиться с задачей, достаточно навыков верстальщика и немного времени, чтобы разобраться со структурой и логикой работы. Вы сможете интегрировать любой тип сайта – от визитки до интернет-магазина.

Итак, статья для вас, если:

Структура шаблона

Для начала нам необходимо создать папку со следующим содержимым. Попутно поясняю, что и зачем нужно, простым языком, чтобы разобраться мог каждый (начнем с конца):

1. templateDetails.xml – файл, в котором мы описываем информацию о разработчике, версии, вносим информацию о содержимом, позиции модулей, языковые файлы, настройки.

2. template_preview.png, template_thumbnail.png – изображения шаблона, можно в Adobe Photoshop сделать в виде иконок. У меня они такие:

3. index.php – главный файл, в котором будет подключение скриптов, параметров, модули. И самое главное – верстка.

4. index.html – пустой файл html, который должен содержаться в каждой папке, чтобы мошенники не смогли просмотреть содержимое.

5. error.php – страница 404, можно настраивать как угодно, тем самым уйти от стандартной страницы 404 Joomla, которая выглядит не очень презентабельно 🙂

6. language – языковые файлы, если собираетесь делать шаблон мультиязычным.

7. js – папка со скриптами, со временем можно подключить все самое необходимое для работы сайта.

8. images – говорит само за себя, здесь хранятся картинки шаблона. Рекомендую здесь хранить картинки, относящиеся только к оформлению, так как будет неудобно грузить картинки для статей именно в папку шаблона.

9. html – папка для переопределения модулей и компонентов Joomla. Об этом поговорим позже, но, забегая вперед, скажу, что в этой папке храним все то, что не должно перезаписаться при обновлении модуля или компонента.

10. fonts – в эту папку можно подключить шрифты для сайта, если таковых нет на Google Fonts. Гугл шрифты лучше подключать через основной шаблон. Так вы получите более высокую оценку в Google Page Speed.

11. css – папка со стилями для шаблона, которые мы подключим к нашему шаблону.

Файл templateDetails.xml

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

1. Первая строчка обязательная, содержит версию xml и кодировку:

2. Далее открываем тег extension и начинаем описывать наше приложение:

Указываем версию Joomla, тип расширения, клиент установки и метод установки.

3. Рассмотрим следующие строчки.

В данном виде содержится языковая переменная (как пример), ниже рассмотрим, как это используется на практике.

Здесь и так все понятно 🙂

Тоже не нуждается в пояснении:

Информация о лицензии:

Всю информацию в этом блоке описываете на свое усмотрение.

4. Следующим шагом нужно описать файловое содержание, то есть перечисляем в теге files все файлы и папки, которые необходимо установить.

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

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

Самое главное – верно указать теги и названия файлов. Все аналогично для любой локализации, сейчас рассматриваем на примере русской локализации.

TPL_UNIVERSUM_DESCRIPTION – это и есть переменная, которую мы запишем в языковой файл, и Joomla будет «подтягивать» значение из него.

Открываем файл ru-RU.tpl_universum.ini и записываем значение переменной:

Можно записать любое значение, главное – без перехода на новую строку, иначе работать не будет. Также можно использовать html для красивого оформления сообщений.

Результат добавления description можно увидеть при установке шаблона:

Чтобы увидеть эту же информацию в настройках, необходимо эту же переменную добавить в файл ru-RU.tpl_universum.sys.ini:

Идем дальше.

6. Описываем позиции шаблона (что и где у нас будет выводится), для этого потребуется раздел positions:

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

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

Задать настройки шаблона нам поможет раздел config. Вот так выглядят параметры в админ-панели Joomla:

Тегом можно задать вкладки, внутри fieldset располагаем поля настроек. Рассмотрим, из чего состоят поля.

Значение по умолчанию (может отличаться в зависимости от типа поля):

Все типы полей можно посмотреть на официальном сайте Joomla.

Языковые переменные, о которых мы говорили выше, их необходимо прописать в файле ru-RU.tpl_universum.sys.ini для отображения в админке:

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

Файл index.php

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

Первой обязательной строчкой php файла является следующее выражение:

Далее нужно передать параметры в шаблон следующим образом:

Затем передаем сами параметры и записываем в переменные – на примере title, description и лого:

Начало файла шаблона index.php:

Продолжаем наполнение шаблона, дальше следуют стандартные блоки html. Код приведен ниже:

Далее в теге body вы вставляете свою верстку, а в места для контента – специальные переменные для вывода контента из админки по позициям, которые мы описывали выше в файле xml.

В остальных папках и файлах содержится наша верстка, и у каждого она своя.

Файл error.php

Имеет смысл рассмотреть еще файл error.php – в нем мы показываем, как должна выглядеть страница 404, у меня он такой (также можно «подхватить» все параметры из настроек шаблона – все зависит от фантазии и верстки страницы):

Вот и все, минимальный набор для установки шаблона готов!

Установка шаблона

Заходим в административную панель Joomla и устанавливаем наш шаблон:

Выбираем наш шаблон по умолчанию и переходим на сайт, чтобы убедиться, что все работает:

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

Источник

Динамические шаблоны страниц в WordPress, часть 1

Шаблоны страниц WordPress — отличный способ полностью изменить отображение определенных веб-страниц. Вы можете использовать их, чтобы добавить широкий спектр функций на ваш сайт.

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

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

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

Хотите подписаться?

Чтобы следовать этой серии руководств, вам понадобится сайт WordPress с правами администратора. Безусловно, самый простой способ сделать это — использовать локальную среду разработки. Выделенный текстовый редактор также полезен, но не обязателен.

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

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

Шаблоны страниц WordPress

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

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

Вот несколько типичных примеров часто используемых шаблонов страниц WordPress:

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

Если вы использовали WordPress какое-то время, то, скорее всего, вы уже сталкивались с одним или несколькими примерами выше. Большинство тем включают шаблоны страниц для дополнения функциональности темы, и вы можете легко добавить свою собственную через дочернюю тему. Я расскажу, как это сделать в ближайшее время.

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

Добавление шаблонов страниц через дочернюю тему

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

Весь процесс будет рассмотрен шаг за шагом, поэтому не беспокойтесь, если вы не знакомы с дочерними темами и / или шаблонами страниц. Вы будете к концу урока!

Основная идея дочерних тем заключается в том, что они позволяют настраивать внешний вид вашей текущей темы (называемой родительской темой) таким образом, чтобы это не повлияло при обновлении родительской темы.

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

Давайте начнем!

Хорошо, хватит теории — давайте создадим наш начальный шаблон страницы! Он будет расположен в пользовательской дочерней теме Twenty Seventeen, которая будет действовать как контейнер шаблона нашей страницы, поэтому сначала нам нужно создать дочернюю тему.

Источник

Как создать шаблон для Joomla самостоятельно

CMS Joomla занимает второе место по распространенности в интернете. Поэтому многих интересует вопрос, как создать шаблон для Joomla. Попытаемся этому научиться.

О Joomla

Название CMS больше напоминает имя чернокожей красотки. И это не удивительно, ведь оно имеет африканские корни.

К особенностям данной CMS можно отнести:

Работа с шаблонами в Joomla

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

В админке вся работа с шаблонами происходит через « Менеджер шаблонов ». Начальная версия движка содержит несколько предустановленных тем ( шаблонов ). Новые шаблоны, доступные для скачивания, можно легко найти в интернете.

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

Еще одной уникальной возможностью данного движка является использование для оформления сразу нескольких шаблонов. То есть для пунктов одного меню можно использовать несколько тем:

Установка нового шаблона

Для установки нового шаблона в административной части Joomla используется « Менеджер расширений ». Он доступен через одноименный пункт в панели управления. В его разделе видны несколько вкладок. Имеющих опыт работы с админками CMS поле « Поиск » может ввести в некоторое заблуждение.

В случае удачной установки вверху появится соответствующее системное сообщение:

Создание шаблона

Перед тем, как изменить шаблон Joomla или создать новый, нужно определиться с его составом. Обязательными файлами являются:

Для примера возьмем уже сверстанную страницу html со следующим кодом:

Теперь создаем xml описание шаблона. В нем задаются значения тех параметров, которые будут отображаться в « Менеджере шаблонов ». Содержимое файла templateDetails.xml :

Разберемся с кодом:

Теперь добавим по пустому файлу index.html в каждую папку. Они нужны для запрета листинга межу директориями. Осталось лишь создать архив со всеми файлами шаблона и установить его через « Менеджер расширений ». После инсталляции его имя будет отображено в списке « Менеджер расширений »:

Альтернатива

Создать шаблон для Joomla самостоятельно достаточно сложно. Поэтому в качестве альтернативы следует рассмотреть другие решения.

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

Источник