Чем занимается веб-разработчик и что нужно для того, чтобы им стать

Разработка #Карьера #JavaScript #HTML/CSS #PHP #Python Сегодня программирование востребовано как никогда. Информационные технологии развиваются с колоссальной скоростью, и...

Обзор VestaCP

VestaCP – одна из самых популярных, простых и удобных панелей для управления сайтами. К тому же она абсолютно...

16 лучших игровых шаблонов для WordPress

Разработка #Веб-дизайн #Шаблоны #Подборка #WordPress Создание своего сайта на игровую тематику – мечта многих геймеров. Ранее она была...

Open source редактор Publii, первый взгляд

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

Лучшие антивирусы для Windows 10 – бесплатные и платные программы для защиты от вирусов

Мнение рынка #Антивирус #Подборка #Windows Реклама. ООО «ТаймВэб». erid: LjN8K4eSW Несмотря на наличие предустановленного Windows Defender, пользователи справедливо...

Чем занимается Data Scientist

Разработка #Аналитика #Боты #Программы #Технологии #Базы данных С развитием IT-индустрии появились новые профессии и значительно преобразовались традиционные. Например,...

CMS, фреймворк или собственная разработка: что выбрать?

CMS CMS – система управления контентом. Распространяется на бесплатной или платной основе. Подойдет для проектов: с небольшой нагрузкой;...

Краткая история «Параграфа»: советские ученые, которые подарили миру S Pen

Разработка #Технологии #Тренды #Apple #Железо В 1988 году уроженец Азербайджанской СCP Степан Пачиков основал софтверный кооператив «Микроконтур», в результате...

В Windows 11 добавится поддержка USB 4 2.0 со скоростью передачи данных до 80 Гбит/с

Новости #Обновления #Windows Реклама. ООО «ТаймВэб». erid: LjN8K8PQJ Корпорация Microsoft начала распространять пакет функциональных обновлений KB5034848 для Windows 11...

Обзор HostCMS

Введение HostCMS – это система управления сайтом, которая входит в пятерку самых популярных платных платформ по версии CMSmagazine....

«Чистая» ОС, или Неведома зверушка. Ставим ClearOS

Разработка #FTP #Ubuntu #VPN #Firewall #Apache #Routing #Базы данных #Панель управления Как-то раз нужно было быстро запустить веб-сервер с...

Размещаем бота для Telegram: от выбора хостинга до запуска

Разработка #VDS #Telegram #Боты #JavaScript #Python Чат-боты для Telegram — простой, изящный и легковесный способ вывести общение с клиентами...

Лучшие редакторы кода

Atom Выпущенный в 2015 году редактор уже полюбился многим разработчикам. Это open-source проект для Linux, Windows и macOS....

Как работать с фоновыми рисунками в CSS

Разработка #Веб-дизайн #HTML/CSS Ни для кого не секрет, что картинки – это неотъемлемая часть любого сайта, будь то...

Как настроить коллтрекинг, чтобы получить максимум конверсий: интервью с Павлом Мрыкиным

Мнение рынка #Реклама #Аналитика #Сервисы В гостях у Комьюнити побывал эксперт по сквозной аналитике в Calltouch и преподаватель на курсах в РЭУ...

Google представил нейросеть Gemini 1.5 – за раз она может обработать 11-часовое аудио

Новости #Google #Боты #Нейросети #Обновления Реклама. ООО «ТаймВэб». erid: LjN8KZYK5 Два месяца назад компания Google анонсировала новую языковую модель Gemini,...

Обзор и установка QEMU

Разработка #Программы #Ubuntu #Windows QEMU – это приложение виртуализации, бесплатный инструмент с открытым исходным кодом, который используется для...

Pagekit – open source CMS от Yootheme

Разработка #Шаблоны #JavaScript #HTML/CSS #PHP #Оптимизация Тенденция, однако. Разработчики клубных шаблонов начинают создавать собственные CMS. Примерно год назад...

10 лучших IDE

Разработка #C/C#/C++ #Ubuntu #Java #JavaScript #HTML/CSS #PHP #Python #Windows IDE (Integrated Development Environment) – это интегрированная, единая среда...

Обзор языка PHP: прошлое, настоящее, перспективы

Последовательность появления новых версий: PHP/FI – к середине 1995 года основной модуль был переписан на C. Появились первые...

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

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

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

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

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

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

  1. Вы хотите создавать свои шаблоны для CMS Joomla 3.x и продавать их либо обеспечивать удобство для наполнения контентом и ведения для заказчика.
  2. Если вам надоели клубные «тяжелые» шаблоны с кучей ненужных настроек и скриптов.
  3. Если не хотите использовать шаблоны со сторонними ссылками и вредоносным кодом, что снижает шансы на продвижение ресурса.

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

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

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 и кодировку:

<?xml version="1.0" encoding="utf-8"?>

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

<extension version="3.0" type="template" client="site" method="upgrade">

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

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

Имя шаблона:

<name>universum</name>

Описание шаблона:

<description>TPL_UNIVERSUM_DESCRIPTION</description>

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

Версия приложения:

<version>1.1.0</version>

Дата создания:

<creationDate>01.05.2020</creationDate>

Автор (разработчик):

<author>UPLITE</author>

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

<authorEmail>up-lite@ya.ru</authorEmail>>

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

<authorUrl>https://up-lite.ru</authorUrl>

Копирайт:

<copyright>Copyright (C) 2020. All rights reserved.</copyright>

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

<license>Лицензия</license>

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

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

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


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

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

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

  • ru-RU.tpl_universum.ini – для лицевой части шаблона, отображения на сайте.
  • ru-RU.tpl_universum.sys.ini – для административной части. Описываем позиции модулей, переменные, описание настроек.

Выше мы добавили:

<description>TPL_UNIVERSUM_DESCRIPTION</description>

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

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

TPL_UNIVERSUM_DESCRIPTION="<div style='background:#EDF4FA;border-radius: 5px;padding: 15px;margin: 0 0 15px;'><p>Спасибо за установку шаблона от студии Аплайт</p><p>При возникновении вопросов - пишите на почту up-lite@ya.ru, или группу вконтакте <a href='https://vk.com/uplite_msk'>Аплайт ВК</a></p></div>"

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

Важно: каждая языковая переменная описывается с новой строчки.

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

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

Идем дальше.

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

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

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

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

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

Название поля:

name="sitetitle" 

Ти поля:

type="text" 

Метка:

label="TPL_BODY_FONT_FAMILY_LABEL" 

Описание:

description="TPL_BODY_FONT_FAMILY_DESC" 

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

default="" 

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

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

TPL_BODY_FONT_FAMILY_LABEL и TPL_BODY_FONT_FAMILY_DESC 

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

Файл index.php

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

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

<?php defined("_JEXEC") or die();

​;?>

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

$app = JFactory::getApplication();

​$params = $app->getTemplate(true)->params;

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

if ($this->params->get('logoFile'))

{

$logo = '<img src="' .  htmlspecialchars(JUri::root() . $this->params->get('logoFile'), ENT_QUOTES) . '" alt="' . $sitetitle . '" />';

}

if ($this->params->get('sitetitle'))

{

$sitetitle =  htmlspecialchars($this->params->get('sitetitle'), ENT_COMPAT);

}

if ($this->params->get('sitedescription'))

{

$sitedescription =  htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT);

}

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

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

<!doctype html>

<html lang="ru">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

<jdoc:include type="head"/>

<meta charset="UTF-8">

<link rel="shortcut icon" href="<?php echo $favicon; ?>" type="image/x-icon">

<!--style-->

<link rel="stylesheet" href="/templates/<?php echo $this->template; ?>/css/tpl-style.css" />

<script src="/templates/<?php echo $this->template; ?>/js/main.js" type="text/javascript"></script>

</head>
  • <jdoc:include type=”head”/> – используется для загрузки скриптов модулей и компонентов, а также скриптов самой Joomla.
  • <link rel=”stylesheet” href=”/templates/<?php echo $this->template; ?>/css/tpl-style.css” /> – загрузка файлов стилей шаблона.
  • <script src=”/templates/<?php echo $this->template; ?>/js/main.js” type=”text/javascript”></script> – загрузка файлов скриптов шаблона, можно загрузить в футере для увеличения скорости загрузки сайта.

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

<body>

Здесь наша верстка

<?php echo $logo; ?> - выводит логотип, заданный в параметрах шаблона

<?php echo $sitetitle; ?> - выводит title, заданный в параметрах шаблона

Таким образом выводим все параметры, заданные в настройках.

<jdoc:include type="modules" name="slider" /> - выводит модуль в позицию slider

<jdoc:include type="message" /> - для вывода системных сообщений Joomla

<jdoc:include type="component" /> - для вывода компонентов (материалы блога и так далее)

</body>

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

Файл error.php

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

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

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

Делаем архив:

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


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

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

Шаблон Joomla 3.x >

Межтекстовые Отзывы
Посмотреть все комментарии
guest