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

358

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

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

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

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

Відповідно давайте правильно пропишемо шляхи для підключаються елементів сторінки. При цьому вміст тегів head формується безпосередньо в ядрі CMS, тобто спільні елементи сторінки, разом з тегом title. А значить, використовуючи спеціальні методи, необхідно вказати, які елементи повинні бути підключені.

У нашому випадку підключається тільки один єдиний файл CSS, тому, на початку index.php додамо наступний код.

addStyleSheet(JUri::base().’templates/’.$doc->template.’/css/style.css’);
?>

Зверніть увагу, що використовуючи клас конструктор JFactory і його статичний метод getDocument(), ми отримуємо об’єкт глобального класу jDocumentSite, який представляє документ – тобто формується сторінку.
Далі викликаємо на виконання у даного об’єкта метод addStyleSheet(), який реєструє файл стилів до підключення, шлях до якого передається в якості першого аргументу.

Статичний метод base(), класу JUri повертає базовий шлях до сайту, до якого ми додаємо ім’я папки з шаблонами (templates), потім ім’я активного шаблона, яке зберігається у властивості template об’єкта jDocumentSite, і звичайно ж, вказуємо каталог та ім’я підключається файлу.

Таким чином, ми зареєстрували файл стилів для подальшого підключення, а значить, весь вміст тегу head можна сміливо видалити і замінити наступною конструкцією:

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

Аналогічно давайте правильно пропишемо шляху до інструкції зображень:

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

Тепер можна перейти на сайт і подивитися, що змінилося.

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

Як ви бачите, тепер дизайн відображається вірно, але так як ми створюємо шаблон для joomla 3 з нуля, зараз поки що весь контент статичний, тобто не формується движком Joomla, бо прописаний вручну у файлі index.php шаблону, за винятком тега < head, звичайно. А значить давайте це виправимо.

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

addStyleSheet(JUri::base().’templates/’.$doc->template.’/css/style.css’);
?>

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

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

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

Для формування позиції відображення контенту модуля, в шаблоні, атрибуту type, конструкції , необхідно присвоїти значення modules. При цьому так само необхідно використовувати атрибут name, в якому буде вказано ім’я створюваної позиції. Нагадаю, що імена позицій ми з Вами вказували на минулому уроці під час створення інсталяційного файлу.

Для формування блоку відображення основного контенту, необхідно атрибута type, вказати значення component.
Таким чином, користувацька частина, тепер виглядає наступним чином:

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

Зверніть увагу, що в шаблоні тепер відображаються матеріали і модулі, правда позиції модулів ще необхідно правити. Після налаштування модулів і вибору правильних позицій, дизайн сайт трохи покращився.

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

Тепер необхідно перекрити макети елементів формують контент, тобто модулів і компонентів. Почнемо з модуля головного меню. А значить, в папці html створюємо папку mod_menu, далі у даний каталог скопіюємо файл default.php, який розташовується за адресою modules/mod_menu/tmpl. Ось його код:

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

getMenu();
?>

    &$item)
    {
    $current = FALSE;
    if ($item->id == $menu->getActive()->id)
    {
    $current = TRUE;
    }
    echo ‘

  • ‘;
    if($current) {
    echo “flink.”‘>”.$item->title.””;
    }
    else {
    echo “flink.”‘>”.$item->title.””;
    }
    echo ‘
  • ‘;
    }
    ?>

При цьому, використовуючи foreach(), ми проходимся по масиву $list і на кожній ітерації циклу, формуємо окремий пункт меню. Для визначення активного пункту, використовуємо метод getActive(), об’єкта jMenu, доступ до якого отримуємо з виразу $menu = JFactory::getApplication()->getMenu(). Тепер давайте подивимося, як виглядає головне меню користувача частини.

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

Як Ви бачите дизайн меню, повністю відповідає шаблону.

Хотів би підкреслити, що каталог html використовується для перевизначення макетів Joomla, тобто як правило, CMC при відображенні інформації на екран, намагається відшукати альтернативний макет безпосередньо в даному каталозі, і якщо його немає, то використовує стандартний макет компонента або модуля. При цьому в папці html, необхідно розташовувати каталоги, імена яких відповідають іменам переопределяемых елементів.

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

Всього Вам дорого і вдалого кодування!!!