Створення шаблону Joomla. Частина 6 - футер для сайту

У самій першій статті присвяченій створення власного шаблону для Joomla 3 я говорив, що даний процес нехай не дуже складний, але все ж трудомісткий і займає відносно багато часу. На підтвердження того дана, вже шоста за рахунком стаття.

Раніше ми розібрали основні моменти створення шаблонів для CMS Joomla 3, розібралися з макетом , верстали і оформили шапку сайту , Головне меню, область контенту і багато іншого. Таким чином, ми плавно підібралися до заключної частини будь-якого шаблону - футер (або якщо хочете підвалу сайту).

Що таке футер, для чого він потрібен і яка інформація в ньому міститься, ми говорили в статті присвяченій редагування стандартного шаблону і щоб не повторюватися, ми відразу почнемо верстати і оформляти футер для нашого саморобного шаблону.

Для початку давайте подивимося, що у нас повинно вийти:

Як бачите футер у нас двоколірний, значить, буде розбитий на два окремі блоки - верхній і нижній. У верхньому блоці за аналогією з шапкою сайту ми розташуємо логотип і напис, а так само зробимо дві позиції для модулів, для виведення додаткової навігації.

Після того як подумки поділили макет футера на окремі блоки можна приступати до верстці. Перший блок у нас буде спільний для всього футера, йому дамо відповідний ідентифікатор:

<Div id = "footer"> </ div>

Усередині даного контейнера розмістимо ще два, які будуть відповідати за верх і низ шапки, вони будуть різної висоти і кольору:

<Div id = "footer"> <div class = "ft-top"> </ div> <div class = "ft-bottom"> </ div> </ div>

Для початку займемося нижньою частиною футера, її реалізувати найпростіше. Додамо кілька блоків і напишемо звичайний текст:

<Div class = "ft-bottom"> <div class = "ft-bottom-cont"> <p> Все права захищені & # 169 <? Php echo date ( 'Y')?> </ P> </ div > </ div>

Як бачите, всередині нижнього блоку футера розташований ще один блок, який буде фіксованою ширини (в моєму випадку 1140 пікселів). Якщо Ви вже читали попередні частини статей на тему «Як створити власний шаблон», то напевно вже знаєте, для чого використовується даний контейнер.

Для написи був використаний звичайний тег <p>. Значок копірайту утворюється за допомогою спеціальних символів - & # 169. На закінчення за допомогою PHP виводимо в футер сайту поточну дату (а точніше поточний рік) - <? Php echo date ( 'Y')?>.

Для нижньої частини футера застосуємо наступні стилі:

.ft-bottom {height: 70px; background-color: # 222222;} .ft-bottom-cont p {color: #fff; text-align: center; height: 70px; line-height: 70px;}

Результат повинен вийти ось таким:

Як бачите, я не став заморочуватися з іконками соціальних мереж, їх при необхідності завжди можна буде додати будь-коли.

Тепер переходимо до верхньої частини, її можна розбити на три основні блоки - логотип з текстом, меню в центрі і якась контактна інформація в правій частині футера. Відповідно нам треба створити в блоці з класом ft-top три вкладених блоку:

<Div class = "ft-top"> <div class = "ft-top-cont"> <div class = "ft-menu-1"> </ div> <div class = "ft-menu-2"> </ div> <div class = "ft-logo"> </ div> </ div> </ div>

Що це за контейнери і для чого вони потрібні? Перші два блоки з класами ft-menu-1 і ft-menu-2 ми використовуємо під меню, третій ft-logo буде містити логотип і текст. Всі ці три контейнера вкладені в блок з класом ft-top-cont (контейнер обмеженою ширини) і всі вони разом знаходяться в батьківському контейнері з класом ft-top (з шириною на весь екран).

Хочу звернути увагу на те, що блок, який буде контейнером для логотипу розташований в самому низу, хоча в макеті логотип виводиться в першу чергу. Тут немає ніякої помилки, все зроблено саме так для того щоб на мобільних пристроях логотип виводився під меню в самому низу сторінки. А на пристроях з великими екранами ми змінимо порядок виведення блоків за допомогою певних класів Bootstrap-а.

З фреймворком Bootstrap розберемося пізніше, а зараз давайте наповнимо вмістом наші блоки. У блоки з класами ft-menu-1 і ft-menu-2 ми будемо виводити модулі:

<Div class = "ft-menu-1"> <jdoc: include type = "modules" name = "position-4" style = "xhtml" /> </ div> <div class = "ft-menu-2" > <jdoc: include type = "modules" name = "position-5" style = "xhtml" /> </ div>

А блок, призначений для логотипу, заповнимо звичайною картинкою і текстом:

<Div class = "ft-logo"> <img alt = "Joom4all.ru - створи свій сайт з нуля!" src = "<? php echo $ this-> baseurl. 'templates /'. $ this-> template. '/images/ft-logo-min.png'?>"> <p id = "ft-text"> <span> JOOM4ALL - СТВОРИ СВІЙ САЙТ З НУЛЯ </ span> </ p> </ div>

Тепер давайте створимо кілька модулів (як мінімум 2) і встановимо для них позиції з іменами position-4 і position-5 відповідно. Я як модулі використовував звичайне меню, точніше відразу два меню, яким присвоїв заголовок «Меню в футер» і «Меню в футер 2» (ось така перестав багата фантазія). В результаті футер у мене вийшов ось таким:

Ось тепер прийшов час поговорити про класи фреймворка Bootstrap, за допомогою яких ми зможемо легко оформити футер і змінити черговість виведення блоків в залежності від дозволу екрану. Тим самим ми отримаємо гарний і адаптивний футер для нашого шаблону (і сайту відповідно).

Давайте додамо до наших блокам кілька додаткових класів зумовлених бутстрапа:

<Div class = "ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5 </ div> <div class =" ft- menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5 "> </ div> <div class =" ft-logo col-xs- 12 col-sm-6 col-md-5 col-sm-pull-6 col-md-pull-7 "> </ div>

Класів вийшло цілих п'ять штук, тим, хто знайомий з фреймворком Bootstrap напевно зрозуміло з якою метою вони потрібні. Але я все ж коротко напишу, за що відповідає кожен з них.

Уявіть собі, що вся ширина області певного контейнера складається з 12 рівних вертикальних частин - в цьому суть блокової системи бутстрапа. Для того щоб зробити блоки плаваючими і розташувати їх горизонтально досить просто вказати скільки таких частин буде займати кожен блок, причому сума частин не повинна перевищувати 12 штук, тобто їх загальної кількості. В іншому випадку останній блок буде з'їжджати.

З теорією розібралися, тепер перейдемо безпосередньо до використовуваних класів:

• col-xs- * - даний клас використовується для пристроїв з шириною екрану менше 768 пікселів (телефони). Замість зірочки вказується кількість частин, який буде займати цей блок. У нашому випадку все три блоку будуть займати по 12 частин, іншими словами будуть розтягнуті по всій ширині сторінки (це як раз те, що потрібно для мобільних пристроїв).
• col-sm - * - задає розмір блоку на пристроях з шириною екрану від 768 до 991 пікселя (планшети). У нашому випадку блоки з меню будуть займати по 3 частини (разом 6), а блок з логотипом займе залишилися 6 частин.
• col-md - * - як і попередні класи, але діє при ширині екрану від 992 до 1199 пікселів (настільні комп'ютери з низьким дозволом). Кількість колонок займаних кожним блоком дивіться вище.
• col - * - push - * і col - * - pull - * - дані класи задають зміщення блоків вліво (pull) і вправо (push) щодо їх поточної позиції на вказану кількість частин. Так само необхідно вказати на яких екранах буде відбуватися зсув.

У нашому випадку ми зміщуємо блоки, призначені для меню вправо на 6 частин при ширині екрану від 768 до 991 пікселя (col-sm-push-6), а блок з логотипом так само на 6 частин, але вліво (col-sm-pull -6). Таким чином, ми змінюємо пріоритет виведення блоків на екран, не зачіпаючи при цьому код розмітки.

Можливо, Вам стало цікаво, чому зміщення відбувається саме на 6 блоків вліво (у випадку з логотипом) на планшетах і на 7 блоків для комп'ютерів. Тут все просто, ми хочемо відвести наш логотип в самий лівий край, для цього необхідно його зрушити на різницю загальної ширини контейнера і самого блоку. У нашому випадку для планшетів це 12-6 = 6, а для комп'ютерів 12-5 = 7.

Ситуація з блоками меню дещо інша, так як ми в даному випадку зміщується вправо, то необхідно враховувати ширину лівих блоків, а якщо ширина лівого блоку на планшетах у нас складається з 5 частин (блок з логотипом), отже перший блок з меню треба посунути на 5 частин вправо. Сподіваюся, пояснив доступно.

Загальний код для футера у нас має вийти ось таким:

<Div id = "footer"> <div class = "ft-top"> <div class = "ft-top-cont"> <div class = "ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5 "> <jdoc: include type =" modules "name =" position-4 "style =" xhtml "/> </ div> <div class = "ft-menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5"> <jdoc: include type = "modules" name = "position-5" style = "xhtml" /> </ div> <div class = "ft-logo col-xs-12 col-sm-6 col-md-5 col-sm-pull-6 col-md- pull-7 "> <img alt =" Joom4all.ru - створи свій сайт з нуля! " src = "<? php echo $ this-> baseurl. 'templates /'. $ this-> template. '/images/ft-logo-min.png'?>"> <p id = "ft-text"> <span> JOOM4ALL - СТВОРИ СВІЙ САЙТ З НУЛЯ </ span> </ p> </ div> </ div> </ div> <div class = "ft-bottom"> <div class = "ft-bottom-cont "> <p> Все права захищені & # 169 <? php echo date ( 'Y')?> </ p> </ div> </ div> </ div>

Залишилося застосувати мінімальні стилі оформлення:

.ft-logo, .ft-menu-1, .ft-menu-2 {padding-top: 21px;} .ft-logo img {display: block;} p # ft-text {margin: 15px 0 27px 0; font-weight: 700; font-size: 20px;} .ft-top {overflow: hidden; background-color: # f3ece8;} .ft-bottom {height: 70px; background-color: # 222222;} .ft-bottom-cont p {color: #fff; text-align: center; height: 70px; line-height: 70px;}

В результаті на пристроях з великим екраном наш футер виглядає наступним чином:

А на мобільних пристроях з шириною екрану менше 768 пікселів футер виглядає вже інакше:

Залишається внести заключні штрихи і оформити все це справа за допомогою CSS. Як бачите, немає нічого складного, завдяки Bootstrap можна легко і просто вирішити практично будь-які завдання в найкоротші терміни.