Създаване на Joomla шаблони - Урок за начинаещи
Какво е Joomla! Шаблон?
Шаблонът е нещо като Joomla! Разширение или шаблон за промяна на външния вид на вашата страница. Има два типа шаблони, които Joomla! CMS използва: шаблони отпред и отзад шаблони. Предният шаблон контролира начина, по който съдържанието на страницата се представя на крайния потребител, т.е. вашия клиент. Тази статия също ще се занимава с този тип шаблони. Обратният шаблон, от друга страна, контролира административния изглед на вашия уебсайт - само тези, които редактират уебсайта, могат да видят този изглед, а не нормалните посетители.
Създаване на обиковен Joomla! Шаблон
Целта на този урок е да ви запознае със създаването на Joomla! За да дадете шаблони. Той описва всички важни файлове и код, необходими за създаването на основен шаблон. Подготвихме кода по такъв начин, че да може да бъде копиран и поставен с много малки модификации.
Стъпка 1: Създайте персонализирана папка
За да получите Joomla! За да създадете шаблон, първо създайте нова подпапка в папката шаблони във вашето уеб пространство. Назовете тази папка според вашия шаблон, напр. Б. моят нов шаблон.
Създайте файловете index.php и templatedetails.xml с предпочитания от вас текстов редактор и ги запишете в новата ми папка с шаблони.
Вижте още: 5-те най-добри Джумла Фреймуърк
Стъпка 2: Създайте папка за CSS и изображения
За да поддържате общ преглед и да донесете структура, създайте две нови папки с имена images и css в папката mynew template. В папката CSS създайте файл, наречен template.css.
Въпреки че би било добре да поставите целия CSS код директно във файла index.php, препоръчваме ви да поставите CSS кода в отделен файл и да го интегрирате външно, т.е. като използвате следния ред код в заглавката на вашия index.php :
<link rel = "stylesheet" href = "/<? php echo $ this-> baseurl?> templates/meinneuestemplate/css/template.css" type = "text/css"/>
Това може да намали времето за зареждане на вашите страници, тъй като отделният файл може да бъде кеширан.
Вашата папка и файлова структура сега трябва да изглежда така:
* meinneuestemplate /
** css/
*** template.css
** изображения/
** index.php
** templateDetails.xml
Стъпка 3: Създайте XML файл за подробности за шаблона
Този раздел обяснява за какво служи файлът templatedetails.xml и как да го използвате правилно. Файлът templateDetails.xml е от съществено значение. Без този файл вашият шаблон ще се използва от Joomla! Системата не е разпозната, защото съдържа важни метаданни за шаблона.
Синтаксисът на файла обаче е различен за всяка версия на Joomla.
За Joomla 3.x и по -нова версия използвайте следния код, който просто копирате в templatedetails.xml. Променете версия = "2.5" в разширението на версията на вашата Joomla! Инсталация (3.9 и т.н.) или минималната версия, която искате да поддържате.
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>mynewtemplate</name>
<creationDate>2019-05-01</creationDate>
<author>reDim</author>
<authorEmail>
<authorUrl>http://www.izrabotkanasait.eu</authorUrl>
<copyright>izrabotka 2021</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Mein neues Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user</position>
<position>footer</position>
</positions>
</extension>
Както можете да видите, в този файл има много информация. Копирайте кода и променете съответните части (например име и автор). Елементите <position> определят позициите на модула (вижте стъпка 7).
Частта <files> трябва да съдържа всички файлове, които ще използвате. С елемента <folder> може да се дефинира цяла папка наведнъж.
Вижте още: Как да се предпазим Джумла сайт от хакерски атаки
Стъпка 4: Създайте файла index.php
Файлът index.php е сърцето на всеки уебсайт. Всъщност основната структура на index.php за Joomla! На пръв поглед шаблонът не е нищо повече от HTML файл. При по -внимателно разглеждане много правописи на Joomla вече не изглеждат толкова загадъчни.
По същество вие създавате страница (като всяка нормална HTML страница), но поставяте PHP код там, където искате съдържанието на вашия уебсайт да се показва по -късно (вижте стъпка 7 за повече за това). Всички елементи, добавени в index.php, се появяват по -късно на всички страници на уебсайта.
Шаблон на Joomla започва със следните редове:
<?php defined( '_JEXEC') oder die( 'Restricted access');?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml".
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Стъпка 5: създаване на областта <head>
Вместо да дефинира цялата област на заглавието в index.php, Joomla търси PHP кода в базата данни и по този начин определя част от самата област на заглавката.
Кодът на шаблона на Joomla за заглавката изглежда така:
<head>
<jdoc: include type = "head" />
<link rel = "stylesheet" href = "/<? php echo $ this-> baseurl?> templates/meinneuestemplate/css/template.css" type = "text/css"/>
</head>
Стъпка 6: създаване на областта <body>
Сега можете да пуснете пара! Тук идва HTML структурата на вашия уебсайт. Не забравяйте, че трябва само да изградите основната рамка и по -късно да използвате Joomla! Да се вмъкне в бекенда. Така че всичко остава динамично. Така че вместо постоянно да вграждате в менюто, просто поставяте основната структура тук и след това поставяте позицията на модула там, където елементите на менюто в крайна сметка трябва да се появят. На този етап планирайте няколко позиции на модули, които ще ви трябват по -късно на уебсайта.
Стъпка 7: Поставяне на позициите на модула
Това е кодовият фрагмент за модули. Ако вмъкнете този фрагмент в тялото си, зададеният модул ще се появи на този етап по -късно.
<jdoc: include type = "modules" name = "breadcrumbs" style = "custom" />
Допълнителна информация: Можете да използвате елемента стил, за да посочите или създадете таблици със стилове, които да се прилагат еднакво за цялата начална страница на Joomla. Например style = ”table” = Модулът се извежда в таблица.
Името на вашата определена позиция на модул е важно, то трябва да е уникално и може да се използва във вашата Joomla! Шаблонът се появява само веднъж - позицията на модула може да бъде намерена и по -късно в бекенда под това име.
Съдържанието, т.е.съдържанието, също се определя от позиция на модула, а именно от следното:
<jdoc: include type = "component" />
В този момент Joomla! Бекенд определено съдържание. Тази позиция е незаменима.
Уверете се, че сте включили всички позиции на модула, които сте дефинирали във файла templatedetails.xml (стъпка 3).
Стъпка 8: Добавяне на персонализиран CSS
За да добавите свои собствени CSS файлове, просто добавете тази връзка (ако все още не сте) в областта на главата на документа. Уверете се, че пътят е правилен и че името съвпада с това на вашия CSS файл. (Пътят е шаблони> вашият шаблон> css)
<link rel = "stylesheet" href = "/<? php echo $ this-> baseurl?>/templates/<? php echo $ this-> template;?>/css/template.css" type = "text/css " />
Стъпка 9: ZIP файл и инсталация
Ако вашата директория съдържа много Slack файлове, тя не е подходяща за споделяне. Следователно последното нещо, което трябва да направите, е да опаковате правилно вашата директория, така че да може лесно да се разпространява. За да направите това, трябва да компресирате и архивирате структурите на директориите и всички файлове. Вие ципвате пакета с разширение .zip или го оставяте във формат TAR-gzip с помощта на разширение a.tar.gz.
Корекции на „вътрешни“ Joomla шаблони
Преди да започнете да пренаписвате стандартен инсталиран шаблон (например в Joomla 3, Protostar или Beez3) или да искате да направите корекции в тези шаблони, не забравяйте, че всички актуализации на основната версия на Joomla също могат да съдържат актуализации на тези шаблони.
Това означава, че Joomla! Актуализацията може да презапише и нулира вашите промени в стандартен шаблон. Ако не предприемете никакви мерки за защита на работата си, промените в този шаблон може да бъдат загубени по време на актуализация на Joomla.
В мениджъра на шаблони обаче има опции за настройка за дублиране и копиране на съществуващ стил на шаблон или на действителния шаблон и файлове с шаблони. След това можете да редактирате това копие, без да се притеснявате, че нещо ще бъде загубено по време на актуализация.
Актуализирайте шаблона на Joomla
За да актуализирате шаблон до най-новата версия:
Запазете промените в текущата версия на шаблоните
Ако използвате по -стара версия на шаблон и искате да актуализирате до най -новата версия, достъпна за визуализация в демонстрацията, трябва да запазите промените, които сте направили в шаблона преди актуализацията.
Така че първо създайте резервно копие на всички персонализирани промени в кода, които може да сте приложили към един от файловете в шаблона (в идеалния случай всички персонализирани CSS промени трябваше само да бъдат поставени във файла custom.css на шаблона).
Надстройте до последната версия на шаблона
След архивирането не забравяйте да изпълните следните стъпки:
- Изтеглете шаблона отново.
- Инсталирайте последната версия на шаблона, като използвате стандартния Joomla!
- Приложете отново всички промени в персонализирания код (ако сте използвали само файла custom.css на шаблона, това е лесна стъпка, тъй като всичко, което трябва да направите, е да копирате стария си файл върху текущия).
Съвет: Силно препоръчваме първо да направите всички тези промени в тестова среда и, ако всичко върви добре, да мигрирате обратно в живата среда.
Ако се нуждаете от професионалисти в Джумла - ние сме на ваше разположение - създаване на Джумла сайт, СЕО на Джумла и др.
