Створення шаблону для Joomla 3. Частина 3

41

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

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

Область лівій бічній панелі, використовується для відображення інформації модуля під назвою mod_articles_category, який відображає матеріали певної категорії за заданим умовам фільтрації. Відповідно зовнішній вигляд даного модуля, формується безпосередньо в його файловій структурі, а саме (як правило) в стандартному макеті default.php, який розташовується за адресою — \modules\mod_articles_category\tmpl\default.php. Тому створюється шаблон необхідно перевизначити вищевказаний макет, і таким чином змінити дизайн відображається вміст на екран.

Для перевизначення макета модуля, необхідно в каталозі html шаблону, створити папку, ім’я якої збігається з ім’ям модуля, макет якого підлягає переопределению, і в цій папці створити файл default.php. Або ж, якщо сказати більш правильно – створити файл, ім’я якого збігається з ім’ям переопределяемого макета, так як для одного модуля, можна створити скільки завгодно макетів.

Тому, скопіюємо файл default.php, тобто макет відображення даних модуля mod_articles_category, за адресою \modules\mod_articles_category\tmpl\default.php. Потім створимо в каталозі папку html mod_articles_category і в неї додамо скопійований файл. Таким чином, ми переопредели макет і тепер можемо змінити дизайн відображення вмісту модуля.
Відкривши цей файл у текстовому редакторі, Ви побачите що він містить досить великий обсяг коду.

Так як в CMS Joomla практикується загальна універсальність, в даному макеті передбачені різні варіанти відображення даних, в залежності від стану налаштувань. Але нам це не потрібно, а значить, весь код даного макету ми замінимо на наступний.

title?>

title; ?>
get(‘show_introtext’)) : ?>
displayIntrotext; ?>

class=»more»>More…

Як Ви бачите, код досить невеликий, але і швидше за все, не зовсім зрозумілий Вам, а значить, давайте поясню, деякі моменти. В даному макеті доступна змінна $list, яка містить масив об’єктів, з інформацією по вибраних матеріалів, які будуть відображатися на екрані. Його структура така:

Таким чином, використовуючи цикл foreach(), ми можемо обійти даний масив і на кожній ітерації, отримати доступ до об’єкта, значення властивостей якого, можна використовувати для відображення необхідної інформації на екран. Що, власне, і зроблено в макеті. Зверніть увагу, що властивість link, містить шлях на сторінку перегляду вмісту матеріалу, який можна використовувати для створення посилання «Читати далі». Тепер оновивши макет в браузері ми побачимо наступний результат.

Тобто ліва колонка, повністю завершена, а значить йдемо далі.

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

Види компонентів, як правило, розташовуються в каталозі views.

При цьому, компонент – це досить складне розширення, якщо порівнювати з модулями і видів, може бути декілька, як у випадку з компонентом com_content. Відповідно перевизначити Ви можете, як окремий макет, так і все відразу.

Для головної сторінки нас цікавить вид category, так як саме він, відображає список матеріалів певної категорії. Нагадаю, що на головній сторінці ми відображаємо матеріали якоїсь категорії у вигляді блогу.

Якщо перейти в папку ми побачимо наступне.

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

Як Ви бачите макетів багато, але якщо придивитися уважніше, ми побачимо якісь загальні риси в іменах файлів. Дивіться, в даній папці містяться два глобальних макета blog.php і default.php все решта – це дочірні макети згідно з префіксом в імені.

При цьому, так як на головній сторінці відображається список матеріалів категорії у вигляді блогу, то нас цікавить макет blog.php і всі його дочірні макети, в іменах яких присутня приставка blog_. Тому скопіюємо дані макети.

Далі в каталозі html шаблону, створюємо папку com_content, потім у ній – каталог category, тобто, перевизначаємо макет відображення списку матеріалів категорії, а далі додаємо в нього, тільки що скопійований вміст каталогу tmpl. Тепер відкриємо в текстовому редакторі головний макет blog.php і замінимо його вміст на наступний код.

lead_items as &$item) : ?>
item = & $item;
echo $this->loadTemplate(‘item’);
?>
params->def(‘show_pagination’, 1) == 1 || ($this->params->get(‘show_pagination’) == 2)) && ($this->pagination->get(‘pages.total’) > 1)) : ?>

params->def(‘show_pagination_results’, 1)) : ?>

pagination->getPagesCounter(); ?>

pagination->getPagesLinks(); ?>

Тепер хотів би зазначити, що в даному макеті Ви отримуєте доступ до об’єкта $this (ContentViewCategory Object), в якому міститься інформація про матеріали, які відображаються на головній сторінці. Структура даного об’єкта приблизно наступна.

Властивості lead_items, міститься масив об’єктів з матеріалами, які повинні відображатися у всю ширину сторінки, а у властивості intro_items – масив об’єктів матеріалів, які можуть відображатися в колонках, у відповідності з налаштуваннями. Тому, як Ви бачите, я використовуючи перше властивість, і знаючи що в ньому міститься масив, використовуємо цикл foreach() для обходу. Таким чином, на кожній ітерації циклу в змінну $item, об’єкт потрапить у властивостях якого, містяться дані по одному певному матеріалу. При цьому для його відображення на екран, ми задіємо дочірній макет blog_item.php, який підвантажується за допомогою виклику методу loadTemplate(‘item’) (в якості першого аргументу необхідно передати ім’я цікавить макета, без префікса, що вказує батька). Але так як в дочірньому макеті, так само відкрито доступ до об’єкта $this, об’єкт матеріалу ми попередньо зберігаємо у властивість item.

$this->item = & $item;

Код дочірнього макета blog_item.php виглядає наступним чином.

item->title;?>

item->introtext; ?>

item->slug, $this->item->catid, $this->item->language));?>

Read More

Як Ви бачите, звертаючись до властивостей об’єкта, що зберігається в $this->item ми відображаємо необхідну інформацію на екран (title — заголовок, introtext — вступний текст).

Для створення посилання «Читати далі», необхідно сформувати шлях до сторінки детального перегляду інформації по конкретному матеріалу. Для цього ми звертаємося до класу JRoute і викликаємо на виконання статичний метод _(), який як раз і поверне зацікавив шлях, у вигляді ЧПУ. В якості першого параметра при виклику цього методу, необхідно передати URL, який буде перетворений в ЧПУ. Для формування цього URL, ми скористаємося класом–хелпером ContentHelperRoute і викличемо його статичний метод getArticleRoute(), який поверне шлях до матеріалу певної категорії. І для його роботи передаємо наступні змінні:

$this->item->slug – так званий слуг, тобто рядок, що складається з ідентифікатора матеріалу і його псевдоніма;

$this->item->catid – ідентифікатор категорії матеріалу;

$this->item->language – поточна локалізація.

Таким чином, створивши шлях, ми формуємо посилання читати далі. У глобальному макеті blog.php у самому низу розташований блок коду, який необхідний для формування елементів управління посторінкової навігації. Даний фрагмент коду:

params->def(‘show_pagination’, 1) == 1 || ($this->params->get(‘show_pagination’) == 2)) && ($this->pagination->get(‘pages.total’) > 1)) : ?>

params->def(‘show_pagination_results’, 1)) : ?>

pagination->getPagesCounter(); ?>

pagination->getPagesLinks(); ?>

Тепер якщо оновити інформацію в браузері ми побачимо наступне.

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

Таким чином, тепер Ви знаєте, як створити шаблон joomla. У даній статті ми з Вами практично завершили роботу над головною сторінкою даного сайту, звичайно, ще є над чим працювати, але сподіваюся, далі Ви вже впораєтеся самостійно.

На цьому дана стаття завершена. Всього Вам доброго і вдалого кодування!!!