За тези, които тепърва започват CMS JoomlaВинаги искате да промените външния вид на сайта по ваш вкус. Стандартният шаблон престава да отговаря и искам нещо ново.
Мнозина започват да търсят безплатни шаблонии да ги инсталирате на вашия сайт, но с течение на времето те започват да разбират, че новите шаблони имат своите недостатъци, които нямат умения за коригиране. Ето защо преди да инсталирате нови шаблониаз силно Препоръчвам да научите как да ги променяте., защото в бъдеще определено ще ви бъде от полза.
В този урок ще ви покажа как да редактирате заглавката за нашия сайт, като използвате стандартния шаблон Protostar като пример. Какво ни трябва за това:
- FTP клиент, например FileZilla за лесен достъп до файлове на сървъра на доставчика на хостинг (за тези, които имат хостван уебсайт)
- Текстов редактор (бележник++, възвишен тексти др.)
- Графичен редактор (като Photoshop)
- уеб браузър (Google Chrome, Firefox и др.)
Разбира се, можете да направите и без тях (с изключение на интернет браузъра), но тези програми значително ще опростят работата.
Научете се да работите със стилови файлове в Joomla
Първата стъпка е да се научите как „правилно“ да използвате интернет браузъра, с други думи, да научите как да видите кода на страницата и да изберете редовете, необходими за работа в нея.
За да видите кода на страницатав различни браузъриЯжте специални екипи, но в повечето случаи ключът се използва за тези цели. F12. В браузъри като Google chrome, за да видите кода на определена част от страницата, можете да тикнете Кликнете с десния бутонщракнете върху този елемент и в падащия прозорец изберете елемента "Преглед на кода":
След тези действия в долната (или дясната) част на страницата на браузъра ще видим кода на страницата и стиловете на дизайн на всички елементи, а желаният елемент ще бъде маркиран:
Няма да навлизам в същността на този код, за тези, които вече са запознати HTML езикНяма да е трудно да разберете какво е отговорно за какво. Вижда се, че маркираното заглавие е затворено в таг
, която съдържа връзката с текст "Допълнителни полета в Joomla".На този етап се интересуваме от стиловете на дизайн на определени елементи от страницата, независимо дали става дума за заглавие, меню, изображение или обикновен текст.
Как да дефинирате css файл, съдържащ стилове на шаблони
Стиловете, приложени към всеки елемент, могат да се видят от дясната страна на браузъра, а малко вдясно е показан css файлът, който съдържа този код и реда код, в който тези стилове могат да бъдат намерени:
След като разберем местоположението на файла със стил, можем да започнем да го редактираме по наша преценка, като по този начин можем да променим дизайна на нашия шаблон по наша преценка. В бъдеще за тези, които не са запознати с основите на CSS, ще бъде създадена специална секция, но засега просто помнете какво и къде да търсите за по-нататъшно редактиране.
Искам да отбележа, че е много по-удобно предварително да приложите стилове директно в браузъра и ако резултатът отговаря, след това ги прехвърлете във файл. Като пример ще променя цвета на връзките на страницата и размера на заглавието направо в браузъра, ето какво получих:
Разбрахме стиловете, сега остава да разберем кой файл е отговорен за структурата на сайта и как да работим с него.
Файл със структурата на сайта - index.php
Във всеки шаблон на Joomla конкретен файл е отговорен за неговата структура, в повечето случаи това е файлът index.php, който се намира в корена на папката на шаблона. В шаблона Protostar индексният файл се намира в папката templates/protostar/index.php; именно той е отговорен за местоположението на определени елементи на страниците на сайта.
Този файл се състои от 220 реда код, написан в PHP езиции HTML (в някои и JavaScript), които изглеждат така:
В началото файлът идвакода, който е отговорен за връзката допълнителни файлове(стилове, скриптове), проверка предварително зададени настройкишаблони и др. Самото оформление на страницата започва с редовете
(126 ред код):
Чрез промяна на кода на този файл можете радикално да промените шаблона на сайта, да промените местоположението на модулните позиции и техния брой, да промените заглавката, долния колонтитул и т.н.
Няма да правим никакви промени в кода, следващите уроци ще бъдат посветени на това, засега просто ще добавим няколко реда код, които ще ни позволят да включим собствен файл със стил в нашия шаблон на Joomla.
Свързване на вашите собствени файлове със стил към шаблона на Joomla
Преди да започнем да включваме нашите собствени CSS файлове в нашия шаблон, нека дефинираме за какво може да е това. Може да има няколко причини за това:
Предотвратяване на загуба на данни - използвате стандартен модели направете промени в съществуващи файловестилове, след актуализиране на CMS тези файлове се заменят с нови и губите всички направени преди това промени.
Разделяне на задълженията - за всеки отделен елемент можете да създавате отделни файлове, който ще отговаря само за неговия дизайн. Но тук е важно да не прекалявате, да не създавате твърде много файлове.
Различни устройства – сега за достъп до интернет се използват не само компютри, но и телефони, таблети и дори часовници. Така за всяко отделно устройство можете да създадете и заредите само стиловия файл, който е предназначен за него.
Както и да е, научете се да създавате и да се свързвате собствени файловестилове в готови шаблони винаги е полезно.
Създайте свой собствен css файл
За да започнем, трябва да създадем нов файлстилове в определената им папка, обикновено папка с име "css". Файлът е създаден по стандартен начин, името му няма значение, основното е, че има разширение „.css“, нарекох новия си файл „mycss.css“.
Добавете редове код към файла index.php
Сега трябва да свържем отново даден файл, с други думи, да кажем на шаблона, че имаме нов файл и ще го използваме. За да направите това, отворете индексния файл на шаблона (index.php), в реда с код под номер 15 намираме следния код:
$user = JFactory::getUser();
Веднага след него добавяме нова линия:
$doc = JFactory::getDocument();
Трябва да изглежда нещо подобно:
На този етаптоку-що декларирахме променлива, с която ще включим нашия нов стилов файл. Сега трябва да напишем още един ред код, който ще отговаря пряко за включването на самия CSS файл.
// Добавяне на таблици със стилове
След него добавяме нашия код за css връзкифайл:
$doc->addStyleSheetVersion($this->baseurl . "/templates/" . $this->template . "/css/mycss.css");
получих го така:
Как да проверим дали нашата таблица със стилове е включена
За да сме сигурни, че нашата таблица със стилове наистина е включена, ще трябва да отворим кода на страницата отново, но този път по малко по-различен начин. В прозореца на браузъра щракнете с десния бутон навсякъде на страницата и изберете „Преглед на кода на страницата“ от падащия списък или натиснете клавишната комбинация Ctrl + U.
В прозореца, който се отваря, намерете редовете код, започващи с
Ако не е в списъка, може да се наложи да презаредите страницата с изчистване на кеша (комбинация от клавиши Ctrl + F5)
На този урок смятам, че е завършен, ние подредихме общи въпроси относно редактирането на шаблони на Joomla, научихме как да работим с кода на страницата, както и да създадем и включим наши собствени файлове със стил.
В следващия урок ще разгледаме по-отблизо процеса на редактиране на шаблон и
Последният представител на разширенията, които ни остава да разгледаме, са шаблоните. Това е шаблонътв CMS Joomla 3 и във всяка друга версия определя облика и усещането на сайта.Благодарение на шаблоните можете радикално да промените дизайна на вашия сайт, като отделите минимум време за него, всичко, което трябва да направите, е да изтеглите и инсталирате готов шаблон и да решите къде да се показват модулите.
Но преди да започнете да инсталирате нов шаблон, трябва да разберете от какво или по-скоро от какви файлове се състоят шаблоните на Joomla 3.
Какво е шаблон на Joomla 3
За шаблоните в Joomla се разпределя специална папка "templates", в корена на която всеки шаблон има своя папка със същото име. Без изключение всички шаблони се състоят от файлове и броят на тези файлове за различните шаблони може да се различава. Но има и стандартни файлове, без които нито един шаблон няма да работи:
- index.php- индекс файл, той определя структурата на сайта
- templateDetails.xml– този файл съдържа цялата информация за шаблона и се използва за инсталиране на шаблона през контролния панел
- Файлове със стилове (.css)- с тяхна помощ се определя дизайна на страниците
В допълнение, шаблоните могат да съдържат скриптови файлове (.js), изображения, езиции още много. Екранната снимка по-долу показва набор от файлове, които съставляват стандартния шаблон на Protostar:
Какви са моделите
Има доста разновидности на шаблони, те могат да бъдат класифицирани според рамките, на които са написани или други параметри, но всички разновидности на шаблони могат да бъдат разделени на две големи категории:
- Шаблони за уебсайтове- промяна на външния вид и дизайна на сайта
- Шаблони на контролния панел– този тип шаблони са предназначени специално за контролния панел, те не засягат сайта по никакъв начин.
Работа с шаблони на Joomla 3
Разбрахме разновидностите, местоположението за съхранение и файловете с шаблони, сега нека да поговорим как да работим с шаблони с помощта на контролния панел. За да започнете, нека отидем в секцията „Шаблони: Стилове (сайт)“ („Разширения“ -> „Шаблони“) и да видим какви шаблони вече присъстват в основния сборник на Joomla CMS:
На страницата "Шаблони: Стилове (Сайт)" можете да видите, с които разполагаме два шаблона Beez3 и Protostar, последното е зададено по подразбиране за всички страници на сайта, обърнете внимание на това, защото в Joomla един и същи сайт може да се състои от няколко шаблона. И за различни раздели на сайта можете да зададете свои собствени собствен шаблонкато по този начин сайта става по-привлекателен.
Нека отворим един от шаблоните за редактиране и да видим какво може да се редактира и как:
В първия раздел с името "Подробности" виждаме малко информация относно този шаблон, разработчиците веднага ни пишат, че шаблонът използва рамката на Bootstrap.
Следващ раздел " Допълнителни опции" съдържа основни настройкишаблон, тук можем да променим цвета на текста и фона на сайта, логото, шрифтовете на заглавките и други настройки:
И последният раздел - "Обвързване към менюто", именно с негова помощ можете да зададете шаблон за целия сайт или за определени секции. Ние просто маркираме онези елементи от менюто, за които ще бъде дефиниран този шаблон:
Позиции на модули в шаблон на Joomla 3
В урока за модулите на Joomla казахме, че те се показват в сайта в строго определени позиции, така наречените модулни позиции. За всеки конкретен шаблонброят и местоположението на тези позиции са различни.
Как да разберете или къде да видите позициите на модулите в Joomla 3? За това Joomla предоставя специален предварителен преглед, но по подразбиране не е наличен (деактивиран) и трябва да бъде активиран в настройките.
За да активирате показването на позициите на модулите в Joomla 3, трябва да кликнете върху бутона "Настройки" на страницата "Шаблони: Стилове (сайт)". След това ще стигнем до страницата „Настройки на мениджъра на шаблони“, на която настроихме превключвателя „Преглед на позициите на модула“ на позиция „Активирано“:
След това се върнете на страницата на мениджъра на шаблони - „Шаблони: Стилове (сайт)“ и щракнете върху иконата на окото, разположена точно вляво от името на шаблона:
На страницата, която се отваря, можете да видите всички налични модулни позиции в шаблона и тяхното местоположение. В бъдеще тази информация ще помогне за показването на определени модули в тях.
Създаване на собствени модулни позиции
Вече се научихме как да преглеждаме съществуващите позиции на модула, но какво ще стане, ако шаблонът не съдържа точно позицията, от която се нуждаем? В този случай можете да създадете своя собствена позиция за модули в готов шаблон Joomla. Процесът не е труден, но изисква редактиране определени файловешаблон - index.phpИ templateDetails.xml.
В първия файл указваме къде ще се намира новата позиция за модулите, във втория ще кажем на двигателя, че тази позиция присъства в шаблона и може да се работи с нея.
Преминаваме от думи към дела, първо отваряме файла templateDetails.xml, който се намира в основна директорияшаблон. Няма смисъл да задълбаваме в същността му сега, ние се интересуваме само от позиции за модули, те са декларирани между редовете<позиция>име-позиция-модулпозиция> (редове 28-47 от шаблона на Protostar). Има 18 от тях по подразбиране:
За да декларирате вашата позиция на модулите, добавете допълнителна линия(или няколко реда) като това:
моя-модул-позиция
Записваме файла, той може да бъде затворен, основното е да запомните името на позицията, под която сте го декларирали.
Сега отворете файла index.php и добавете към него нов блок DIV, който ще бъде контейнерът за новата позиция на модула. Например реших да създам нова позицияза модули в долния колонтитул на сайта. Пишем следния код в долния колонтитул:
Div>
Предотвратяване на загуба на данни - използвате стандартен модели направете промени в съществуващи файловестилове, след актуализиране на CMS тези файлове се заменят с нови и губите всички направени преди това промени.
Разделяне на задълженията - за всеки отделен елемент можете да създавате отделни файлове, който ще отговаря само за неговия дизайн. Но тук е важно да не прекалявате, да не създавате твърде много файлове.
В следващия урок ще разгледаме по-отблизо процеса на редактиране на шаблон и
