Сложность урока: Средний
Редактирование шапки сайта и добавление

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

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

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

Для начала давайте посмотрим на стандартный вид шапки в шаблоне Protostar:

Стандартное оформление шапки сайта в шаблоне Protostar которое мы будем изменять

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

Меняем логотип сайта

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

В панели управления переходим на страницу «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и открываем шаблон Protostar для изменения. На вкладке «Дополнительные параметры» ищем пункт «Логотип» и выбираем то изображение, которое Вы хотите видеть в качестве логотипа на своем сайте.

Я набросал некое подобие логотипа в фотошопе и вот что у меня получилось:

Поменяли логотип на сайте теперь он выглядит следующим образом

Создаем форму для поиска в шапке сайта

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

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

Осталось определиться с позицией, в которой будет выведен наш модуль поиска. Как посмотреть доступные позиции модулей в шаблоне Joomla был посвящен отдельный урок, поэтому повторяться не буду. Я выбрал позицию с именем «position-0», после чего сохранил изменения.

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

Шапка сайта с логотипом и строкой поиска

Теперь осталось изменить позицию и оформление главного меню.

Оформление главного меню на сайте Joomla

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

Я поменял позицию вывода модуля с позиции «position-7» на «position-1». Теперь модуль главного меню располагается под шапкой, но не в ней! Для того чтобы переместить данную позицию именно в шапку придется несколько подкорректировать код индексного файла шаблона.

Открываем файл index.php нашего шаблона и пролистываем его до строки 146, там мы видим код, который отвечает за вывод шапки и он заканчивается на строке 158:

<header class="header" role="banner">
…
</header>

Сразу за ним строки 159 – 173 отвечают за вывод позиции «position-1»:

<?php if ($this->countModules('position-1')) : ?>
…
<?php endif; ?>

Код файла index.php - позиция Position-1 находится под шапкой

Для того чтобы переместить нужную нам позицию в шапку просто вырезаем весь код со строк 159-173 и вставляем его перед закрывающимся тегом </header> строка 158. Получится примерно следующее:

Мы изменили код индексного файла теперь позиция модуля position-1 находится внутри шапки сайта

Теперь посмотрим, что у нас получилось:

Шапка сайта с логотипом, строкой поиска и вертикальным меню

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

Несколько способов как сделать горизонтальное меню в Joomla

Существует несколько вариантов, как можно сделать главное меню сайта на Joomla горизонтальным. Можно дописать суффикс класса меню в настройках модуля, либо оформить меню по своему усмотрению при помощи CSS. Рассмотрим оба варианта подробнее

Горизонтальное меню при помощи суффикса класса

Это самый простой из существующих способов сделать меню горизонтальным. Но подходит он не для всех шаблонов, а только для тех в которых используется Bootstrap. Благо с нашим шаблоном Protostar все в порядке и он поддерживает суффиксы классов меню.

Все что потребуется сделать это перейти в настройки модуля меню и на вкладке «Дополнительные параметры» в текстовое поле «Суффикс класса меню» написать «nav-pills» либо «nav-tabs». Обратите внимание, что перед суффиксом класса обязательно должен стоять пробел, иначе работать ничего не будет. Поставив пробел, мы добавляем к меню уже не суффикс класса, а сам класс, к которому в Bootstrap уже применены определенные стили.

Чтобы стало понятнее, смотрите на скриншот ниже:

Добавляем суффикс класса меню чтобы сделать меню горизонтальным

Повторюсь еще раз, чтобы все работало, в строке суффикс класса ОБЯЗАТЕЛЬНО в самом начале ставим пробел, а следом пишем класс «nav-pills» либо «nav-tabs».

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

Варианты оформления горизонтального меню при помощи суффиксов класса

Горизонтальное меню при помощи CSS

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

Для начала давайте удалим ранее написанные суффиксы класса (если были добавлены). Теперь откроем код страницы и посмотрим, как у нас оформлено главное меню (как работать с кодом страницы мы рассматривали в данном уроке).

Как видим, меню у нас состоит из обычного ненумерованного списка ul => li. К тегу <ul> применены два класса – «nav» и «menu». С ними и будем работать для того чтобы сделать наше меню горизонтальным.

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

Я в качестве примера решил добавить суффикс «_horizontal», обратите внимание пробелы ставить уже не нужно, в итоге у нас для меню будет применены следующие два класса «nav» и «menu_horizontal».

Далее я создал новый файл стилей, для того чтобы при обновлении Joomla не потерять все изменения внесенные в стандартный шаблон и подключил его к нашему шаблону Protostar (как это сделать мы говорили в данном уроке)

 Теперь можно начинать писать стили для нашего меню, для того чтобы средствами CSS сделать наше меню горизонтальным надо добавить всего одно свойство к пунктам меню заключенным в теге <li> на выбор. Это может быть либо свойство «float: left» либо «display: inline-block». Как только данное свойство будет добавлено, то меню сразу же станет горизонтальным. Но выглядеть оно будет не самым привлекательным образом.

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

/*Главное меню*/
ul.nav.menu_horizontal li {display: inline-block;} /*Делаем меню горизонтальным*/
ul.nav.menu_horizontal {margin: 0; background: #005e8d;}/*Убираем отступы у всего меню и добавляем заливку*/
ul.nav.menu_horizontal li:hover {background: #4CAF50;transition: all 0.2s;} /*Заливка пункта меню при наведение*/
ul.nav.menu_horizontal li.active {background: #4CAF50;} /*Заливка активного пункта меню*/
ul.nav.menu_horizontal li a {color: #fff;padding: 10px;} /*Цвет пункта меню и отступы*/
ul.nav.menu_horizontal li a:hover {background: none;} /*Убираем заливку текста при наведение*/
ul.nav.menu_horizontal li ul {background: #005e8d;}/*Вложенное меню (вставить при необходимости)*/
ul.nav.menu_horizontal li ul li {width: 100%;} /*Ширина вложенных пунктов меню 100%*/

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

Горизонтальное главное меню с выпадающим списком при помощи CSS

Для удобства я решил выложить уже готовые файлы index.php и mycss.css, которые Вы можете скачать и в готовом виде в заключительном уроке.

Как видим, ничего сложного нет, затратив немного времени, мы оформили шапку для сайта, создали логотип, форму поиска и горизонтальное меню. Кстати если переместить модуль хлебные крошки, он же навигатор сайта (Breadcrumbs) в позицию «position-3» мы переместим его с нижней в верхнюю часть страницы.

 
 
 

Добавить комментарий


Комментарии   

Светлана
0 #1 Светлана 27.02.2018 15:38
Спасибо за материал, очень полезный. Столкнулась с бедой, что меню у меня раскрывается из одной кнопки, поэтому даже после переноса меню в горизонтальное - кнопка никуда не исчезла (т.е. список раскрывается после нажатия кнопки). Так как я новичок в этом деле, то понятия не имею, как убрать эту кнопку и оставить только список.
Joomla 3x, шаблон Protostar
Цитировать
Joom4all
0 #2 Joom4all 27.02.2018 15:43
Если я правильно понял то меню у вас формируется при помощи модуля. В этом модуле в качестве источника данных выбрано меню с некой иерархией, в котором есть 1 пункт меню верхнего уровня и несколько вложенных в него.

В этом случае в настройках модуля меню вам необходимо указать начальный уровень меню, например второй, после этого "та самая кнопка" исчезнет и останется только "список".
Цитировать
Ксения
0 #3 Ксения 14.08.2018 12:08
Здравствуйте. У меня в файле index.php вот так



И никаких списков (( Как изменить меню?
Цитировать
Ксения
0 #4 Ксения 14.08.2018 12:13
Почему-то не отобразилось ((

jdoc:include type="modules" name="position-1" style="none"
Цитировать
Алина
0 #5 Алина 22.08.2019 15:00
В этой статье https://ifish2.ru/kak-sdelat-shapku-sajta/ есть примеры кодов CSS и html, чтобы сделать шапку для сайта. Причем даже 2 способа, как можно их применить. Вроде ничего сложного) И там еще рассказывают, как поменять шапку «по умолчанию» в Wordpress.
Цитировать

Импульс-Техно изготавливает, продает и предлагает в аренду БМК

www.impulstechno.ru