Шаблони и дизайн в Joomla 1 5

Зарегистрируйтесь, чтобы просмотреть полный документ!

Шаблони и дизайн в Joomla! 1. 5

Шаблони и дизайн в Joomla! 1. 5 В тази презентация ще разгледаме създаването и модифицирането на шаблони за Joomla! 1. 5. x Ще създадем шаблон, използващ CSS (Cascading Style Sheets). Целта е да се използват <div> елементи вместо таблици <table>. Така кодът на шаблона ще бъде по-лесно валидиран спрямо W 3 C стандартите, ще бъде по-лесно четим и разбираем, страницата ще се зарежда по-бързо и ще се представя по-добре пред търсещите машини като Google например.

Шаблони и дизайн в Joomla! 1. 5 Какво представляват Joomla! шаблоните? Joomla! шаблоните представляват набор от файлове, които контролират представянето на съдържанието в системата за управление на съдържание - Joomla! Шаблонът не представлява целия сайт. Той е просто основният начин, по който би изглеждал вашият Joomla! базиран уеб сайт. За да добие завършен вид сайтът ви шаблонът върви “ръка за ръка” със съдържанието, което сте въвели в сайта. Пример за това може да видите на фигура 1. 1 Фиг. 1. 1 – Шаблон със и без съдържание

Шаблони и дизайн в Joomla! 1. 5 Информация: Модерните уеб сайтове разделят дизайна от съдържанието, използвайки CSS технология. В Joomla! шаблонът контролира представянето на съдържанието. Работа на локален сървър Joomla! работи с динамични страници – РНР и My. SQL база данни. Обикновенните HTML редактори не могат да изобразят динамично генерираното съдържание, затова най-добре би било да се използва локален сървър, на който да бъде инсталирана Joomla! със заредено примерно съдържание за лесна визуализация на промените, които правите по шаблона докато го създавате. Някои WYSIWYG (What You See Is What You Get) редактори като Dreamweaver например разполагат с FTP достъп до файловете на отдалечения сървър, но това при всички положения ще се отрази на бързината на запаметяване на файловете и в тази връзка и на бързината ви на работа.

Шаблони и дизайн в Joomla! 1. 5 Стъпките, които обикновенно се следват при работа на локален сървър са следните: 1. 2. 3. 4. Правите промени по кода на шаблона в WYSIWYG редактора и ги запазвате Локалният сървър е пуснат Виждате промените в уеб браузър Връщате се към стъпка 1. Информация: Най-лесно при разработването на Joomla! шаблон е да имате работещ PHP, My. SQL, Apache сървър. Ние от Джумла! България препоръчваме използването на сървъра, наличен за сваляне от официалния ни сайт. Други варианти са XAMP и WAMP за Windows или LAMP за Linux базирани операционни системи. Съвет: Лесен начин за работа и промени по CSS кода е да видите страницата си в браузър и след това да запазите изходния код на тази страница някъде на компютъра си. След това може лесно да правите промени по CSS кода и да виждате промените по страницата, без да е нужно да имате работещ локален сървър.

Шаблони и дизайн в Joomla! 1. 5 Създаване на базов (празен) шаблон За да разберете структурата на един Joomla! шаблон ще започнем със създаването на празен такъв. Файлова структура Шаблонът се състои от няколко файла. Те се намират в папка /templates/ в главната директория на вашата Joomla! инсталация. Всеки един шаблон е разположен в отделна папка. /templates/joomlabg /templates/beez /templates/ja_purity Имената на папките e препоръчително да бъдат изписани с малки букви. Те не трябва да съдържат интервали и специални символи.

Шаблони и дизайн в Joomla! 1. 5 За да бъде разпозната дадена папка, намираща се в директория /templates/ от Joomla! като шаблон в нея трябва да има минимум два файла: /templates/joomlabg/index. php /templates/joomlabg/template. Details. xml Имената на двата файла трябва да съвпадат точно, защото се използват от ядрто на системата. index. php Този файл е най-важният. В него се съдържа изгледът на сайта и е указано къде в шаблона да се извикват модулите и компонентите. Той се състои от PHP и (x)HTML код. template. Details. xml Това е XML файл, който казва на Joomla! какви други фйлове са нужни на шаблона при неговото инсталиране. Също така съдържа информация за автора на шаблона, датата на създаване, запазените права и др.

Шаблони и дизайн в Joomla! 1. 5 Необходими файлове в едни шаблон: /име на шаблона/папка/име на файла Описание /joomlabg/template_thumbnail. png Мини скрийншот на изгледа на шаблона. Обикновенно е с размери 140 х90 px. След като шаблонът е инсталиран служи като преглед в страницата с управление на шаблоните в администрацията. /joomlabg/css/template. css CSS файлът на шаблона. Възможно е да има няколко такива файла в един шаблон, както и да не се казва по този начин или да се намира в различна папка, но така е прието за стандарт. /joomlabg/images/logo. png Препоръчително е всички снимки на шаблона се намират в отделна папка. Затова създаваме такава папка в главната директория на шаблона.

Шаблони и дизайн в Joomla! 1. 5 Примерен код на template. Details. xml <? xml version="1. 0" encoding="utf-8"? > <install version="1. 5" type="template"> <name>Joomla. BG</name> <creation. Date>August 2009</creation. Date> <author>Joomla! Bulgaria</author> <copyright>GPL</copyright> <author. Email>boev@joomla-bg. com</author. Email> <author. Url>www. joomla-bg. com</author. Url> <version>1. 0</version> <description>Sample template</description> <files> <filename>index. php</filename> <filename>template. Details. xml</filename> <filename>images/logo. gif</filename> <filename>css/template_css. css</filename> </files> <positions> <position>user 1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> <params> <param name="color. Variation" type="list" default="white" label="Color Variation" description="Color variation to use"> <option value="blue">Blue</option> <option value="red">Red</option> </param> </params> </install>

Шаблони и дизайн в Joomla! 1. 5 <install version="1. 5" type="template"> - Съдържанието на XML файла съдържа информация, необходима за джумла инсталатора. Опцията type=“template” казва на инсталатора, че инсталираме шаблон и че този шаблон е за Joomla! 1. 5 <name>Joomla. BG</name> - Това е името на шаблона. Името, което въведете тук се използва и при създаването на папка на шаблона в /templates директорията на джумла <creation. Date>August 2009</creation. Date> - датата на създаване на шаблона <author>Joomla! Bulgaria</author> - създателят на шаблона <copyright>GPL</copyright> - легалната информация, според която може да се разпространява този шаблон <author. Email>boev@joomla-bg. com</author. Email> - E-mail на автора на шаблона <author. Url>www. joomla-bg. com</author. Url> - Сайта на автора на шаблона <version>1. 0</version> - Версия на шаблона <description>Sample template</description> - описание, което се показва след инсталирането на шаблона <files> <filename>index. php</filename> <filename>template. Details. xml</filename> </files> Файловата секция съдържа всъчки файлове, които вървят с шаблона – PHP, CSS, HTML, картинки и др.

Шаблони и дизайн в Joomla! 1. 5 <position>user 1</position> - Модулните позиции, налични в шаблона <params></params> - параметрите на шаблона като цвят, широчина, вид на менюто и др.

Шаблони и дизайн в Joomla! 1. 5 index. php Какво представлява index. php файлът? Той е комбинация от (X)HTML и PHP. В него се задава всичко свързано с изгледа и представянето на сайта. Нека разгледаме един такъв примерен файл: Най-отгоре се намира този код: <? php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> Първият ред се грижи за сигурността на файла. Поставяйки го никой няма право на директен достъп до самия файл. DOCTYPE декларацията служи за това да се указва на браузърите как да интерпретират CSS и страницата на която е поставен.

Шаблони и дизайн в Joomla! 1. 5 Следва XML декларацията – веднага след DOCTYPE. <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="<? php echo $this->language; ? >" > Частта относно IE 6 е много важна. Основно сайтовете се правят да работят за браузъри от IE 6 нагоре и затова тази декларация е много важна, за да намали до минимум хаковете, необходими сайта да работи добре под IE 6. След това следва <head></head> частта на шаблона. <head> <jdoc: include type="head" /> <link rel="stylesheet" href="templates/system/css/system. css" type="text/css" /> <link rel="stylesheet" href="templates/system/css/general. css" type="text/css" /> <link rel="stylesheet" href="templates/<? php echo $this->template ? >/css/template. css" type="text/css" /> </head>

Шаблони и дизайн в Joomla! 1. 5 <jdoc: include type="head" /> - това е цялата информация, съдържаща се в конфигурационния файл на Джумла. Ако разгледаме изходния код на страницата ще видим следните редове на мястото на този ред, намиращ се в index. php файла: <title>Welcome to the Frontpage</title> <meta name="description" content="Joomla! - the dynamic portal engine and content management system" /> <meta name="generator" content="Joomla! 1. 5 - Open Source Content Management" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" /> <link href="index. php? option=com_content& view=frontpage& format=feed& Itemid=1&a mp; type=rss" rel="alternate" type="application/rss+xml" title="RSS 2. 0" /> <link href="index. php? option=com_content& view=frontpage& format=feed& Itemid=1&a mp; type=atom" rel="alternate" type="application/atom+xml" title="Atom 1. 0" /> <script type="text/javascript" src="http: //localhost/Joomla. BG/media/system/js/mootools. js"></script> <script type="text/javascript" src="http: //localhost/Joomla. BG/media/system/js/caption. js"></script>

Шаблони и дизайн в Joomla! 1. 5 <? php echo $this->template ? > - връща името на папката на шаблона, т. е. Дори ако в по-късен етап смените името на папката или копирате шаблона в друга папка няма да се наложи да променяте и пътя до CSS файла. <? php echo JURI: : base(); ; ? > или <? php echo $this->baseurl ? > - връща URL адреса на сайта Освен да зарежда стандартните за джумла CSS файлове като template. css и системните като system. css и general. css вие може да добавите неограничен брой други файлове. Например файл, който да се зарежда само под IE 6, така че да може да пренапишете класовете, които не се изобразяват добре под този браузър.  За да заредите CSS файл спрямо избран параметър в администрацията на шаблона се използва следния код:

Шаблони и дизайн в Joomla! 1. 5 Празен Joomla! 1. 5 шаблон <body> <? php echo $mainframe->get. Cfg('sitename'); ? ><br /> <jdoc: include type="module" name="breadcrumbs" /> <jdoc: include type="modules" name="top" /> <jdoc: include type="modules" name="left" /> <jdoc: include type="component" /> <jdoc: include type="modules" name="right" /> </body> Подредбата на елементите на шаблона, т. е. местата, на които се зареждат модулите и компонентите в Джумла се поставят в <body></body> тага. <? php echo $mainframe->get. Cfg('sitename'); ? > - извиква заглавието на сайта, както е записан в конфигурационния файл на джумла. <jdoc: include type="module" name="breadcrumbs" /> - извиква модула breadcrumbs, т. е. Модула, който зарежда навигационната пътека в сайта (Начало – Новини напр. ). Параметърът type=“module” означава че на тази модулна позиция не може да се поставят други модули, освен този.

Шаблони и дизайн в Joomla! 1. 5 <jdoc: include type="modules" name="top" /> - зарежда модулната позиция top. Параметърът type=“modules” означава, че на тази позиция може да заредите колкото искате модули, без значение тяхното име. <jdoc: include type="component" /> - зарежда компонентите, наприме com_frontpage, който се грижи за показването на статиите и новините на началната страница, както и всеки друг инсталиран компонент. Информация: Основното съдържание на един шаблон е зареждането на модулните позиции и компонентите. Изгледът и дизайна са част от CSS, а не се контролират от Джумла!

Шаблони и дизайн в Joomla! 1. 5 Joomla специфичен CSS код Въпреки, че Джумла поддържа template overwrites, стандартният изходен код идва с някои предифинирани CSS стилове. Ето и техния списък: article_separator adminform article_separator author bannerfooter bannergroup bannerheader banneritem blog_more blogsection breadcrumbs buttonheading clr componentheading content_email content_rating content_vote contentdescription contentheading contentpagetitlw contentpaneopen contenttoc createdate created-date inputbox intro latestnews loclink mainlevel message metadata modifydate moduletable mosimage_caption mostread newsfeed outline pagenav_next pagenav_prev pagenavbar pagenavcounter pathway pollstableborder read searchintro sections sectiontable_footer sectiontableentry sectiontablefooter sectiontableheader smalldark sublevel title wrapper

Шаблони и дизайн в Joomla! 1. 5 Изглед на модулите и изходен код Чрез добавянето на style="OPTION" в кода, който извиква модулните позиции може да променяте изгледа на самите модули – дали да бъдат изкарвани в табличен вид или с опция за закръглени краища, сенки и т. н. Стиловете са дефинирани в този файл: templates/system/html/modules. php Синтаксисът е този: <jdoc: include type="modules" name="LOCATION" style="OPTION" /> OPTION е променлива, която може да замените със следните стойности: • table • horz • xhtml • rounded • none

Шаблони и дизайн в Joomla! 1. 5 table връща в изходния код на страницата следното съдържание: <table cellpadding="0" cellspacing="0" class="moduletable<? php echo $params>get('moduleclass_sfx'); ? >"> <? php if ($module->showtitle != 0) : ? > <tr> <th valign="top"> <? php echo $module->title; ? > </th> </tr> <? php endif; ? > <tr> <td> <? php echo $module->content; ? > </td> </tr> </table> По този начин модулите ще са подредени в колона и всеки следващ модул ще се позиционира под предишния.

Шаблони и дизайн в Joomla! 1. 5 horz връща в изходния код на страницата следното съдържание: <table cellspacing="1" cellpadding="0" border="0" width="100%"> <tr> <td valign="top"> <? php mod. Chrome_table($module, $params, $attribs); ? > </td> </tr> </table> По този начин модулите ще са подредени в хоризонтален ред и всеки следващ модул ще се позиционира след предишния като клетка от таблица.

Шаблони и дизайн в Joomla! 1. 5 xhtml връща в изходния код на страницата следното съдържание: <div class="moduletable<? php echo $params->get('moduleclass_sfx'); ? >"> <? php if ($module->showtitle != 0) : ? > <h 3><? php echo $module->title; ? ></h 3> <? php endif; ? > <? php echo $module->content; ? > </div> По този начин модулите ще са оградени в обикновен <div></div> елемент.

Шаблони и дизайн в Joomla! 1. 5 rounded връща в изходния код на страницата следното съдържание: <div class="module<? php echo $params->get('moduleclass_sfx'); ? >"> <div> <? php if ($module->showtitle != 0) : ? > <h 3><? php echo $module->title; ? ></h 3> <? php endif; ? > <? php echo $module->content; ? > </div> По този начин модулите са оградени в 4 <div></div> елемента, което позволява например променливи заоблени ръбове. Ако се използва тази променлива класът на модула се променя от moduletable при другите опции на module.

Шаблони и дизайн в Joomla! 1. 5 none връща в изходния код на страницата следното съдържание: echo $module->content; По този начин модулите ще се показват без никаква опция за форматиране в чист вид.

Шаблони и дизайн в Joomla! 1. 5 Изглед на менютата и изходен код Изгледът на менютата се определя от параметрите на модула, а не от шаблона. В параметъра Стил на менюто може да изберете няколко опции: • Списък • Поддръжка – Вертикално • Поддръжка – Хоризонтално • Поддръжка – Списък Структурата, извеждана от “Списък” и “Поддръжка - Списък” опцията представлява най-общо казано: <div> <h 3>Име на менюто</h 3> <ul> <li><a>Меню 1</a></li> <li><a>Меню 2</a></li> </ul> </div>

Шаблони и дизайн в Joomla! 1. 5 Другите два избора – “Поддръжка – Хоризонтално” и “Поддръжка – Вертикално” извеждат изходния код в табличен вид и по този начин няма нужда да използвате CSS, за да позициниорате менюто хоризонтално или вертикално. За препоръчване е обаче да се използва опцията Списък, в която се използва препоръчваната от SEO експертите <ul><li> структура. Чрез нея и малко CSS код може да направите менюто да изглежда както поискате с изключително малко познания по CSS.

Шаблони и дизайн в Joomla! 1. 5 Скриване на колони в шаблона Да примем, че създавате шаблон с три колони. На началната страница показвате модули в двете колони отляво и отдясно например и компонента, който сте избрали за начална страница. Обаче на някоя от вътрешните страници, например изгледа на новините не искате да показвате модули отляво или отдясно или въобще не искате да има колони отляво или отдясно на съдържанието. В 1. 5 версията на Джумла е добавена $this->count. Modules функцията. Тя ни позволява да преброим дали в дадена колона се показват модули и техният брой. Например $this->count. Modules('user 1 + user 2'); ще върне общият брой модули, намиращи се на позиции user 1 и user 2. Най-общо кодът, който трябва да сложите в шаблона си би изглеждал така: <? php if($this->count. Modules('condition')) : ? > do something <? php else : ? > do something else <? php endif; ? >

Шаблони и дизайн в Joomla! 1. 5 Общо взето има 4 възможни състояния: left=<? php echo $this->count. Modules('left'); ? > left and right=<? php echo $this->count. Modules('left and right'); ? > left or right=<? php echo $this->count. Modules('left or right'); ? > left + right=<? php echo $this->count. Modules('left + right'); ? > • count. Modules('left') – ще върне броят на модулите вляво, например 5 • count. Modules('left and right') – ще върне 1 ако има модули вляво И вдясно или 0 ако няма модули • count. Modules('left or right') – ще върне 1 ако има модули вляво ИЛИ вдясно или 0 ако няма модули на двете позиции • count. Modules('left + right') – ще върне общия брой модули, намиращи се на двете позиции – например 7 ако вляво има 3 модула, а вдясно 4 В този случай трябва да използваме функция, чийто резултат да добавим към CSS стила на контейнера. По този начин чрез 3 различни CSS стила, дефинирани в CSS файла ще може да контролираме широчината на страницата.

Шаблони и дизайн в Joomla! 1. 5 <? php if($this->count. Modules('left and right') == 0) $contentwidth = "100"; if($this->count. Modules('left or right') == 1) $contentwidth = "80"; if($this->count. Modules('left and right') == 1) $contentwidth = "60"; ? > По този начин броим така: • Ако няма модули вляво или вдясно широчината на контейнера, съдържащ компонентите е 100% • Ако има модули вляво ИЛИ вдясно широчината на контейнера е 80% • Ако има модули вляво И вдясно широчината на контейнера е 60% След това променяме името на CSS стила в index. php файла по следния начин: <div id="content<? php echo $contentwidth; ? >"> След това добавяме в CSS файла следното: #content 60 { float: left; width: 60%; overflow: hidden; } #content 80 { float: left; width: 80%; overflow: hidden; } #content 100 { float: left; width: 100%; overflow: hidden; }

Шаблони и дизайн в Joomla! 1. 5 Скриване на модули в шаблона Когато създавате динамични колони е добре да направите така, че модулните позиции да не се зареждат, ако няма съдържание в тях. Ако не го направите в изходния код ще се появят празни <div></div>, които биха нарушили вида на страницата при различните браузъри. За да скриете празните модули използвайте следния код: <? php if($this->count. Modules('left')) : ? > <div id="sidebar"> <div class="inside"> <jdoc: include type="modules" name="left" style="xhtml" /> </div> <? php endif; ? > По този начин казвате: “Ако имате модул, който да се показва на позиция left покажи колоната, а ако няма такъв – не я показвай въобще”

Шаблони и дизайн в Joomla! 1. 5 Параметри на шаблона Параметрите на шаблона се зарежда, както беше показано по-рано в template. Details. xml файла. Те изглеждат по този начин: <param name="template_width" type="radio" default="0" label="Template Width" description="Change width setting of template"> <option value="0">800 x 600</option> <option value="1">1024 x 756</option> <option value="2">fluid</option> </param> Ако използвате такива параметри трябва да създадете и празен params. ini файл в главната директория на шаблона. Той трябва да бъде с права за четене и писане. Джумла попълва данните в него, в зависимост от избраните параметри. Например ако изберете опция 1024 х756 във файла ще бъде записано: template_width=1

Шаблони и дизайн в Joomla! 1. 5 За да се възползваме от тези параметри е необходимо да променим <body> тага в index. php файла по следния начин: <body class="width_<? php echo $this->params->get('template_width'); ? >"> Така в зависимост от избрания параметър в администрацията на джумла шаблона класът ще се смени по един от следните начини: • class=“width_0” • class=“width_1” • class=“width_2” След това в CSS файла задаваме следните стойности: body. width_0 { width: 760 px; } body. width_1 { width: 960 px; } body. width_2 { min-width: 760 px; max-width: 960 px; width: auto !important; }

Шаблони и дизайн в Joomla! 1. 5 Съставил: ) Юрий Боев ( http: //www. wecreato. com; http: //www. joomla-bg. com Източник: tutorial. html http: //www. compassdesigns. net/tutorials/208 -joomla-15 -template-

Скачать презентацию Шаблони и дизайн в Joomla 1 5

1f32f671b48d51d6cac9cf8ff59628b1.ppt

Количество слайдов: 33