Как изменить шаблон Joomla 1.5 по умолчанию

1. Дальнейшее чтение на SmashingMag:
2. Инструменты, которые вам понадобятся
3. Выберите шаблон по умолчанию
4. Понимание шаблона
5. Выберите, что изменить
6. Шаблон переопределений
7. Позиции модуля
8. Изменить параметры шаблона
9. Изменить логотип
10. Удалить другие элементы
11. Продолжая
12. Добавление позиций модуля
13. Добавление позиции в файл XML
14. Заключение

Joomla - это популярная система управления контентом с открытым исходным кодом, имеющая множество возможностей. Одной из сильных сторон Joomla является огромное количество доступных расширений и шаблонов, как бесплатных, так и коммерческих. Вы можете скачать и установить шаблон за несколько простых шагов, хотя некоторые шаблоны включены в установочный пакет Joomla, и большинство пользователей начинают с одного из них. Эта статья знакомит вас с одним из стандартных шаблонов Joomla 1.5 и показывает, как его изменить для вашего сайта. «Как изменить шаблон Joomla 1.5 по умолчанию»)] ( https://www.smashingmagazine.com/2011/07/05/how-to-modify-a-default-joomla-1-5-template ) Joomla 1.6, выпущенная ранее в этом году, имеет другой способ работы с шаблонами. Например, он представил концепцию шаблонных стилей. Тем не менее, многие пользователи все еще используют Joomla 1.5. Таким образом, информация в этом посте будет действительна для многих пользователей Joomla. Кроме того, методы, используемые в этом посте, могут быть применены к Joomla 1.6 и более поздним версиям, даже если структура шаблона несколько отличается.

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

Эта статья знакомит вас с одним из стандартных шаблонов Joomla 1.5 и показывает, как его изменить для вашего сайта.

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

Дальнейшее чтение на SmashingMag:

Шаблоны, доступные в Joomla 1.5

Joomla 1.5 поставляется с тремя шаблонами интерфейса. Один из них, Beez, представлен просто как пример того, как создать шаблон (это отвратительно).

Два других, JA Purity и Rhuk Milkyway, более удобны в использовании.

Шаблон Rhuk Milkyway включает закругленные углы в своем дизайне. Шаблон часто используется в качестве основы для демонстрации сторонних расширений для Joomla 1.5.

JA Purity содержит несколько цветовых тем и параметров шаблона для настройки ширины шаблона, типа логотипа (текст или изображение) и других параметров.

Инструменты, которые вам понадобятся

Для этого урока вам понадобится Браузер Firefox , Вам также придется скачать и установить Дополнение Firebug для Firefox ( информация о начале ). Firebug интегрируется с Firefox и предоставляет вам множество инструментов для разработки во время просмотра. Вы можете редактировать, отлаживать и отслеживать CSS, HTML и JavaScript в режиме реального времени на любой веб-странице, что будет удобно при последующей реализации рабочего кода в таблице стилей Joomla. Firebug - бесценный инструмент для разработчиков веб-сайтов и дизайнеров, который обязательно должен быть в этом уроке.

Вам также понадобится текстовый редактор HTML, Dreamweaver и т. П., А также FTP-доступ к файлам Joomla.

Другой вариант - установить бесплатный eXtplorer компонент для Joomla. Это файловый менеджер, который позволяет редактировать и сохранять файлы прямо в браузере.

Выберите шаблон по умолчанию

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

Когда вы включите шаблон, он будет выглядеть примерно так:

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

Понимание шаблона

Шаблон Joomla состоит из нескольких файлов. Те, которые мы должны рассмотреть в этом уроке:

• Основной индексный файл _ / templates / ja purity2 / index.php
• Основной файл шаблона _ / templates / ja purity2 / css / template.css
• Файл меню CSS _ / templates / ja purity2 / css / menu.css
• Файл сведений о шаблоне _ / templates / ja purity2 / templateDetails.xml

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

Скопируйте папку с шаблоном и дайте ей новое имя. Для этого урока я назову папку ja_purity2 .

Теперь у вас есть две копии шаблона на вашем сайте Joomla. Если вы перейдете в Расширения → Диспетчер шаблонов, вы увидите, что оба шаблона называются JA Purity . Это не хорошо, потому что мы не сможем легко определить, с кем мы работаем:

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

Откройте файл на /templates/ja_purity2/templateDetails.xml и измените имя. Затем сохраните файл.

Вы увидите, что копия в папке ja_purity2 теперь имеет имя JA_Purity Modified . Теперь выберите переключатель слева от вашего шаблона JA_Purity Modified и нажмите кнопку «По умолчанию». Это активирует вашу копию в качестве шаблона для веб-сайта.

Выберите, что изменить

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

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

Шаблон переопределений

Существует папка / templates / ja_purity2 / html / , в которой хранятся переопределения шаблонов . Подробное рассмотрение переопределений шаблонов выходит за рамки этой статьи. Подробнее об этом, пожалуйста, смотрите мой блог на эту тему ,

Короче говоря, переопределение шаблонов переопределяет вывод основных компонентов и модулей Joomla, не требуя взлома ядра. Это позволяет вам переопределить вывод компонента контента, который показывает контент сайта. Когда ядро ​​Joomla обновляется, ваши переопределения остаются нетронутыми. Если вы измените те же файлы в ядре, они могут быть переопределены в будущем обновлении Joomla. Переопределения шаблонов также можно использовать для установленных компонентов и модулей.

Позиции модуля

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

Мы поговорим больше о позициях модуля в конце этой статьи.

Изменить параметры шаблона

Первое, что я обычно делаю, это проверяю параметры шаблона в администраторе Joomla. Вы можете найти это, войдя в админку Joomla. Затем перейдите в Расширения → Диспетчер шаблонов → JA_Purity.

На правой стороне вы увидите список параметров. Они уникальны для шаблона , потому что они добавлены разработчиком. Выполненные здесь настройки сохраняются в файле params.ini в папке / templates / ja_purity2 / и выбираются файлом index.php при загрузке страницы.

Шаблон JA Purity имеет несколько вариантов. Давайте посмотрим на некоторые из них:

1. Тип логотипа Вы можете использовать здесь либо файл изображения, либо текст. Изображение логотипа должно быть сохранено в папке _ / templates / ja purity2 / и иметь имя logo.png . Логотип по умолчанию имеет размеры 207х80 пикселей.
2. Текст логотипа Если вы выберете «Текст» в качестве типа логотипа, здесь вы должны будете ввести свой текст.
3. Слоган Это строка текста, которая появляется под логотипом.
4. Горизонтальный тип навигации У вас есть два варианта: меню SuckerFish и меню JAMoo. Оставьте это в меню SuckerFish на данный момент.
5. Ширина шаблона По какой-то причине шаблон по умолчанию имеет ширину 97%. Я не думаю, что когда-либо давал веб-сайту плавную ширину, по крайней мере, за последние 10 лет. ;) Измените настройку на «Указано в пикселях».
6. Указанная ширина Здесь введите число пикселей, например 980. Это будет ширина контейнера шаблона.
7. Свертываемая функция для правых модулей. Как это ни странно, я обычно отключаю эту функцию, которая позволяет пользователю свернуть модули в правой колонке. Я не вижу, чтобы это использовалось много.

Остальные параметры можно оставить как есть на данный момент.

Параметры выглядят так в файле params.ini :

Все идет нормально. Теперь вы настроили все, что можете изменить, не вдаваясь в код.

Вы заметите несколько кнопок в верхней части страницы. Как видите, у вас есть доступ к HTML и CSS прямо отсюда. Для быстрых изменений, это нормально. Однако я нахожу эти представления менее гибкими, чем использование внешнего редактора или доступа по FTP или использование компонента eXtplorer .

Изменить логотип

Первое, что вы хотите сделать, это добавить свой собственный логотип в шаблон.

Чтобы изменить логотип, загрузите новый файл изображения с именем logo.png в папку / templates / ja_purity2 / .

Если логотип имеет те же размеры, что и оригинал, все готово. Оригинальный логотип размером 207х80 пикселей:

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

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

Чтобы логотип отображался правильно, мне нужно настроить CSS как для самого логотипа, так и для заголовка, содержащего его.

Вы можете использовать Firebug для проверки кода на логотип и заголовок. Щелкните правой кнопкой мыши изображение заголовка, чтобы открыть контекстное меню, и выберите «Проверить элемент»:

В вашем браузере откроется окно Firebug, и вы увидите что-то вроде этого:

Используя Firebug, вы можете легко определить, где находится соответствующий CSS, и начать экспериментировать с изменениями. Вы можете изменить CSS в Firebug и сразу увидеть изменения:

Здесь мы отключили фоновое изображение для .ja-headermask , щелкнув по значку ( сделав его красным), и отрегулировали высоту до 120 пикселей. CSS автоматически заполняется для вас, что делает его очень быстрым для работы.

Когда вы закончите экспериментировать с Firebug, вы можете навсегда применить изменения к CSS-файлу шаблона. Это экономит много времени при переходе назад и вперед.

Чтобы настроить CSS, мы открываем файл /templates/ja_purity2/css/template.css .

В строке 921 мы находим следующий код:

# ja-headerwrap {background: # 333333; цвет: #CCCCCC; высота строки: нормальная; высота: 80 пикселей; } # ja-header {position: родственник; высота: 80 пикселей; }

В этом случае мы устанавливаем высоту как # ja-headerwrap, так и # ja-header до 140 пикселей. Я хочу оставить больше места над и под логотипом, поэтому я добавляю верхний отступ к заголовку # ja :

# ja-headerwrap {background: # 333333; цвет: #CCCCCC; высота строки: нормальная; высота: 140 пикселей; } # ja-header {position: родственник; высота: 140 пикселей; обивка-топ: 10px; }

Заголовок теперь выглядит так:

Вы можете видеть, что заголовок выше, но логотип обрезан. Причина в том, что логотип находится внутри тега ссылки h1 и устанавливается в качестве фона. Итак, нам нужно настроить размер поля, в котором он находится.

Далее в файле CSS мы находим этот код:

h1.logo a {width: 208px; дисплей: блок; background: url (../https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0d87fcef-3d73-43a6-9733-4e8681084c36/logo.png) без повтора; высота: 80 пикселей; положение: относительное; z-индекс: 100; }

Я изменю ширину до 270 пикселей и высоту до 120 пикселей. Теперь логотип выглядит правильно:

Как вы могли заметить, это место в файле CSS, где хранится путь к логотипу. Таким образом, если ваш логотип находится в сети, здесь вы должны добавить URL. Изображение по умолчанию находится в папке / templates / ja_purity2 / . Вы можете видеть, что путь к файлу является относительным; разработчик использовал формат … / для определения URL. Чтобы определить папку в корне сайта, запишите / https://www.smashingmagazine.com/wp-content/uploads/2010/08/ сопровождаемый именем файла изображения.

h1.logo a {width: 270px; дисплей: блок; background: url ( /https://www.smashingmagazine.com/wp-content/uploads/2010/08/adifferentlogo.png ) no-repeat; высота: 120 пикселей; положение: относительное; z-индекс: 100; }

JA Purity поставляется со встроенным ротатором изображения заголовка . Вы можете использовать его со своими изображениями или полностью удалить его. Чтобы использовать его, создайте изображения размером 600x80 пикселей. Загрузите изображения в папку / templates / ja_purity2 / header / . Скрипт будет считывать изображения из папки и вращать их, затухая каждое изображение с обеих сторон.

Как бы хорошо это ни было, вы можете удалить ротатор изображения из заголовка, если хотите. Откройте файл index.php в выбранном вами редакторе и найдите следующий раздел:

<! - BEGIN: HEADER -> <div id = "ja-headerwrap"> <div id = "ja-header" class = "clearfix" style = "background: url (&lt;? Php echo $ tmpTools-> templateurl ();?> /https://www.smashingmagazine.com/wp-content/uploads/2010/08/header/ &lt;? php echo $ tmpTools-> getRandomImage (dirname (__FILE__) .DS.'https: // www.smashingmagazine.com/wp-content/uploads/2010/08/header ');?&gt;) no-repeat top &lt;? php if ($ this-> direction ==' rtl ') echo' left '; еще echo 'right';?>; "> <div class =" ja-headermask "> & nbsp; </ div>

Изображения заголовков размещаются с использованием стиля фона для # ja-header. Кроме того, # ja-headermask действует как маска для затухания изображения с обеих сторон. Чтобы удалить заголовок изображения и маску, измените код на этот:

<! - НАЧАЛО: HEADER -> <div id = "ja-headerwrap"> <div id = "ja-header" class = "clearfix">

По сути, мы удаляем фоновый стиль из # ja-header и полностью удаляем # ja-headermask.

Удалить другие элементы

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

Прокомментируйте это или удалите, если вам это не нужно:

<! - &lt;? php $ tmpTools-> genToolMenu (JA_TOOL_FONT, 'png'); ?> ->

Также в нижнем колонтитуле находятся две кнопки валидатора CSS и XHTML:

Возможно, вы захотите это закомментировать или удалить весь раздел:

<div class = "ja-cert"> <jdoc: include type = "modules" name = "syndicate" /> <a href = "http://jigsaw.w3.org/css-validator/check/referer" title = "&lt;? php echo JText :: _ (" CSS Validity ");?>" style = "text-decor: none;"> <img src = "&lt;? php echo $ tmpTools-> templateurl ();?> /https://www.smashingmagazine.com/wp-content/uploads/2010/08/but-css.gif "border =" none "alt =" &lt;? php echo JText :: _ ("CSS Validity"); ?> "/> </a> <a href="http://validator.w3.org/check/referer" title="&lt;?php echo JText::_("XHTML Validity");?>" стиль = "text-ornament: none;"> <img src = "&lt;? php echo $ tmpTools-> templateurl ();?> /https://www.smashingmagazine.com/wp-content/uploads/2010/08/ but-xhtml10.gif "border =" none "alt =" &lt;? php echo JText :: _ ("XHTML Validity");?> "/> </a> </ div>

Чтобы изменить цвет фона заголовка, нам просто нужно изменить шестнадцатеричный код для цвета фона. Для этого примера я выбрал синий цвет с кодом # 3E5E93 (хорошо, не совсем утверждение о дизайне, но оно показывает смысл).

# ja-headerwrap { background: # 3E5E93; цвет: #CCCCCC; высота строки: нормальная; высота: 140 пикселей; }

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

Теперь ваш шаблон выглядит примерно так:

Как таковой, цвет фона распространяется по всей верхней части сайта. Если навести курсор на # ja-header в Firebug, вы увидите, что div выделен на странице. Здесь мы можем поэкспериментировать с цветом, отличным от цвета # ja-headerwrap.

Для этого мы изменим цвет фона # ja-headerwrap на прозрачный. Мы также изменим цвет фона ja-header на синий.

Теперь заголовок выглядит так:

Выглядит немного странно, верно? Придется удалить тень, которая находится ниже # ja-headerwrap. Это должно быть сделано на всех четырех div, которые имеют теневое фоновое изображение. Вы можете увидеть, как это выглядит в Firebug:

Вы увидите, что эти фоны вводятся в два разных файла CSS: template.css и файл по адресу /templates/ja_purity2/styles/elements/black/style.css (если черный - то, что вам нужно).

Чтобы сделать это проще, добавьте следующий код в конец файла style.css (поскольку он загружается после template.css , он переопределяет эти стили):

# ja-containerwrap-fr, # ja-containerwrap, # ja-containerwrap2 {background-image: none! важный; }

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

# ja-container2 {border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; отступы: 20px 10px! важно; }

Что дает нам этот результат:

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

Продолжая

К настоящему времени у вас должно быть хорошее представление о том, как настроить шаблон CSS и другие параметры в соответствии с вашими потребностями.

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

• Шаблон переопределяет . Код, который переопределяет вывод по умолчанию модуля или компонента.
• Позиции модуля . Фрагменты PHP, которые помещают модули в шаблон.
• Модуль хром . Код, управляющий выводом модуля в HTML или XHTML. (Подробнее читайте на сайте Joomla.)

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

Добавление позиций модуля

Как уже упоминалось, каждый шаблон Joomla имеет несколько позиций модуля. Вы можете отобразить позиции модуля в своем шаблоне , добавив параметр? Tp = 1 после URL.

Например, ввод http://www.joomla.org/?tp=1 показывает позиции модуля на Joomla.org.

Обратите внимание, что эту функцию можно заблокировать, добавив код в файл .htaccess (поэтому не запутайтесь, если вы попробуете его на веб-сайте Joomla, и он не будет работать).

Позиции модуля в Joomla находятся в файле index.php шаблона.

Есть в основном два вида позиций модуля: обычная позиция модуля и выход компонента.

Вывод компонента (например, статьи Joomla, вывод стороннего компонента и т. Д.) Выглядит следующим образом:

<jdoc: include type = "component" />

Обычные позиции модуля выглядят примерно так:

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

Имя - это «Позиция», которую вы выбираете при назначении ваших модулей на эту позицию.

Стиль - это хром модуля, или вывод стиля, применяемый к позиции модуля.

HTML-вывод меню будет пунктами меню, обернутыми модулем chrome:

<div class = "moduletable_menu"> <ul class = "menu"> <li id ​​= "current" class = "active item1"> <a href="#"> <span> Главная страница </ span> </a> </ li> <li class = "item2"> <a href="#"> <span> Контакт </ span> </a> </ li> </ ul> </ div>

Однако мы не хотим показывать модуль chrome, если ему не назначены модули. Вот почему мы добавляем оператор if вокруг позиции модуля. Это простой PHP-фрагмент, который проверяет, назначен ли модуль левой позиции или нет:

&lt;? php if ($ this-> countModules ('left')):?> <jdoc: include type = "modules" name = "left" style = "xhtml" /> &lt;? php endif; ?>

Конечно, вы можете добавить больше кода, который будет отображаться, когда позиции модуля назначены модули. Разработчик JA Purity добавил еще немного кода для позиционирования модуля в своем дизайне, а также несколько комментариев:

&lt;? php if ($ this-> countModules ('left')):?> <! - НАЧАЛО: ЛЕВАЯ КОЛОННА -> <div id = "ja-col1"> <jdoc: include type = "modules" name = "left" style = "xhtml" /> </ div> <br /> <! - END: LEFT COLUMN -> &lt;? php endif; ?>

Это аккуратно оборачивает модуль в div с именем # ja-col1, что позволяет стилизовать элемент с помощью CSS. И div отображается только в том случае, если модуль назначен на левую позицию.

Окончательный вывод выглядит так:

<! - НАЧАЛО: ЛЕВАЯ КОЛОННА -> <div id = "ja-col1"> <div class = "moduletable_menu"> <ul class = "menu"> <li id ​​= "current" class = "active item1" > <a href="#"> <span> Главная страница </ span> </a> </ li> <li class = "item2"> <a href="#"> <span> Контакт </ span> < / a> </ li> </ ul> </ div> </ div> <br /> <! - КОНЕЦ: ЛЕВАЯ КОЛОННА ->

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

Вы также можете добавить позиции, содержащие сценарии, которые вы не хотите отображать в интерфейсе вашего сайта. Например, я добавил позиции модуля в конце тега head, а также в начале и конце тега body, чтобы можно было назначать различные типы сценариев (Google Analytics, CrazyEgg и т. Д.).

Добавление позиции в файл XML

Чтобы новая позиция шаблона появилась в раскрывающемся меню модуля, добавьте его в файл XML шаблона. Снова откройте файл в /templates/ja_purity2/templateDetails.xml и найдите раздел под названием <позиции>:

Добавьте еще одну строку между <Position> и </ Position>. Например, если вы добавите позицию leftbottom, то добавьте <position> leftbottom </ position> в файл. Теперь позиция модуля появится в представлении параметров модулей:

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

Заключение

Конечно, это всего лишь царапина на поверхности того, что можно сделать с помощью шаблонов Joomla.

Подводя итог , вот как бы вы поступили:

• С Firebug, проверьте элемент, который вы хотите изменить,
• Сделайте экспериментальные изменения с Firebug, чтобы проверить ваши настройки,
• Применить CSS к таблице стилей шаблона,
• Проверьте настройки во всех основных браузерах.

Как всегда, внесите эти изменения в копию оригинального шаблона.

Удачи!