Как создать свой собственный шаблон Joomla: пошаговая инструкция?

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

Содержание

Создание шаблона Joomla: предварительные условия
Создайте шаблон Joomla самостоятельно шаг за шагом
Шаг 1: Создайте структуру папок
templateDetails.xml
index.php
css folder и template.css
Шаг 2: Установите шаблон
Шаг 3: Активируйте шаблон
Шаг 4: Подключите шаблон к Joomla
Шаг 5: Загрузите информацию заголовка
Шаг 6: Подключите модули

Создание шаблона Joomla: предварительные условия

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

Установка Joomla, минимальная версия 3.9: Вам нужна актуальная версия CMS. Все версии Joomla 3.9.x 2018 года подходят для создания собственных шаблонов.
Базовые знания HTML и PHP: Чтобы следовать инструкциям, вам необходимы базовые знания HTML и PHP.
Навыки CSS: CSS необходим для дизайна сайта.

Создайте шаблон Joomla самостоятельно шаг за шагом

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

Шаг 1: Создайте структуру папок

На первом этапе вы должны создать структуру папок, необходимую для вашего шаблона. Это делается всего в несколько кликов. Для этого сначала перейдите в папку «templates», которую вы можете найти в файловой структуре вашей установки Joomla. Здесь перечислены все ваши шаблоны. Создайте новую папку и назовите ее. Создаем папку под названием «тест», в которой шаблон впоследствии найдет свое место.

Вам нужно создать новую папку в каталоге файлов для вашего шаблона Joomla.

Для завершения структуры папок необходимо создать все файлы, необходимые для шаблона. Код основан на примере шаблона :

templateDetails.xml

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

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

:Имя Шаблона
: дата создания шаблона.
:Автор шаблона, т.е. ваше имя
: адрес электронной почты автора, т. е. ваш адрес электронной почты.
: URL-адрес вашего веб-сайта.
:Правообладатель шаблона
:Информация о лицензии
: Текущая версия шаблона
:Описание шаблона
:Все файлы для установки с шаблоном
:Позиции модулей, которые находятся в шаблоне

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

`	`<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">

`	`<extension version="3.1" type="template" client="site">

`		`<name>test</name>

`		`<version>1.0</version>

`		`<creationDate>19.10.2022</creationDate>

`		`<author>Musteruser</author>

`		`<description>IONOS Joomla Test Template</description>

`		`<files>

`			`<filename>index.php</filename>

`			`<filename>templateDetails.xml</filename>

`			`<filename>template\_preview.png</filename>

`			`<filename>template\_thumbnail.png</filename>

`			`<filename>favicon.ico</filename>

`			`<folder>css</folder>

`		`</files>

`		`<positions>

`			`<position>menu</position>

`			`<position>aside</position>

`			`<position>footer</position>

`		`</positions>

`	`</extension>

index.php

В файле index.php задается основной макет всего вашего веб-сайта. Во-первых, достаточно использовать простой базовый HTML-фреймворк :

<!DOCTYPE html>

`	`<html lang="de" dir="ltr">

`		`<head>

`			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />

`			`<!—Headerangaben-->

`		`</head>

`		`<body>

`			`<div id="navbar">

`              `<nav>

`					`<ul>

`						`<li><a href="#">Kategorie 1</a></li>

`						`<li><a href="#">Kategorie 2</a></li>

`						`<li><a href="#">Kategorie 3</a></li>

`						`<li><a href="#">Kategorie 4</a></li>

`					`</ul>

`              `</nav>

`          `</div>

`          `<div id="content">

`					`<h1 id="heading">Test-Template</h1>

`					`<img class="iamge" src="https://picsum.photos/900/500" alt="Image"/>

`					`<p>Ein Joomla-Template können Sie in nur wenigen Schritten erstellen. Folgen Sie einfach der Schritt-für-Schritt-Anleitung von IONOS.

`					`</p>

`          `</div>





`        `<footer id="copyright">

`          `<div id="footercontent">

`					`<p>Copyright by IONOS</p>

`          `</div>

`		`</footer>

`		`</body>

`	`</html>

css folder и template.css

Затем создайте папку с именем «css», которая будет содержать все файлы, влияющие на дизайн вашего шаблона. В этой папке вы создаете непосредственно файл template.css, в котором вы можете указать желаемый макет с помощью кода.

body {

`	`font-family: "Arial", serif;

`	`color: black;

`	`line-height: 150%;

}

#navbar ul {

`  `list-style-type: none;

`  `margin: 0;

`  `padding: 0;

`  `overflow: hidden;

`  `background-color: #003399;

}

#navbar li {

`  `float: left;

}

#navbar li a {

`  `display: block;

`  `font-size: 26px;

`  `color: white;

`  `text-align: center;

`  `padding: 16px 18px;

`  `text-decoration: none;

}

#navbar li a:hover {

`  `background-color: white;

`  `color: #003399;

}

#heading {

`  `font-size: 48px;

`  `color:  #003399;

`  `text-shadow: 0 0 5px #000099;

}

#footercontent {

`  `float: right;

`  `padding-right: 10%;

}

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

Шаг 2: Установите шаблон

На втором этапе установите только что созданный шаблон. Для этого перейдите в «Система» > «Установить» > «Проверить» в бэкенде Joomla. В обзоре вы должны найти свой шаблон под выбранным вами именем. Вы можете установить шаблон Joomla, нажав на поле слева от имени вашего шаблона.

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

Шаг 3: Активируйте шаблон

После завершения установки шаблона все, что вам нужно сделать, это активировать его. Это также возможно всего за несколько кликов в бэкенде Joomla. Перейдите в Система > Шаблоны > Стили шаблонов сайта. Нажав на кнопку со звездочкой справа от названия вашего шаблона, вы установите его по умолчанию.

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

Шаг 4: Подключите шаблон к Joomla

Важно, чтобы вы подключили свой шаблон к Joomla, чтобы ваш веб-сайт правильно функционировал с новым внешним видом. Для этого вам нужно отредактировать файл index.php. Чтобы включить таблицу стилей CSS, используйте следующую строку кода, которую вы включаете в начало файла index.php :

<?php defined('\_JEXEC') or die;

JHtml::\_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

?>

Шаг 5: Загрузите информацию заголовка

Делая это, вы просите CMS загрузить соответствующую информацию заголовка в ваш файл index.php.

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

Готовый тестовый шаблон IONOS Joomla

Шаг 6: Подключите модули

Последний шаг связан с выводом содержимого Joomla в шаблон. Чтобы увидеть это на практике, вы можете сначала создать несколько новых пунктов меню в бэкенде вашего веб-сайта, нажав «Меню» > «Создать».

В бэкенде Joomla вы можете легко создавать пункты меню всего за несколько кликов.

Теперь перейдите в «Система» > «Расширения» > «Боковые модули» и выберите только что созданное меню. В дополнительных настройках вы можете установить тег модуля. Выберите опцию «навигация».

Выберите тег «nav», чтобы отобразить меню.

Теперь замените тег «nav» в вашем index.php следующей строкой кода, чтобы соответствующим образом адаптировать ваш шаблон:

<jdoc:include type="modules" name="menu" style="xhtml" />