Стварэнне шаблону 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 пікселяў). Калi вы ўжо чыталі папярэднія часткі артыкулаў на тэму «Як стварыць уласны шаблон», то напэўна ўжо ведаеце, для чаго выкарыстоўваецца дадзены кантэйнер.

Для надпісу быў выкарыстаны звычайны тэг <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/05 = 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 можна лёгка і проста вырашыць практычна любыя задачы ў самыя кароткія тэрміны.