Шаблон 1 з бітрікс. Готові рішення. Де два, там і три

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

Зазвичай всім сторінок використовується одна схема, але 1С Битрикс дозволяє одночасно користуватися кількома варіантами оформлення .

За допомогою вбудованих інструментів можна встановити власні шаблони для всіх розділів і навіть сторінок. Також можна задавати різні умови для виведення тієї чи іншої схеми. Установки виконуються через панель адміністратора.

Шаблони сторінок зберігаються в однойменній папці tempplates. У візуальний редактордостатньо вибрати зі списку необхідний варіант та доповнити його потрібними даними. Особливість шаблонізації - Відокремлення логіки від уявлення.

Кому та навіщо потрібні шаблони?

Система Бітрікс дозволяє створювати та використовувати попередньо заготовлені шаблони, застосовуючи їх до робочих областей.

Це практичне та ефективне рішення при роботі з багатокомпонентними сторінками зі складною структурою, наприклад при роботі з інтернет-магазином або порталом новин.

Переваги правильно підібраного шаблону:

• Перше враження. Дизайн сайту дає зрозуміти, на чому спеціалізується компанія та формувати сприятливе враження.
• Запам'ятовуваність. Сайт асоціюється з конкретною компанією та залишається впізнаваним.
• Цілісність. Шаблон повинен бути прописаний до дрібниць, являючи собою гармонійну картину.
• Функціональність. Привабливість поєднується з юзабіліті та практичністю.

Самостійне створення шаблону для 1С Bitrix

Структура шаблону 1С Бітрікс є сукупністю файлів і папок. В основній директорії зберігається опис та Загальна інформаціядля адміністративного розподілу. Іноді там приписуються деякі додаткові функції.

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

Основні розділи сайту представлені у вигляді відповідних директорій. Основа шаблону 1С Бітрікс - файли header та footer. Вони прописується код, підключається виклик розширень, CSS та інші функції.

Динамічний вміст включається до шаблону з директивами Бітрікс Фреймворк. Тут задаються PHP-вставки, що викликають спеціальні компоненти Бітрікс.

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

Нумерований список із меню замінюється викликом компонента Бітрікс для створення та редагування пунктів. У вигляді компонентів створено більшість інших стандартних елементів.

Для розміщення необхідного розширення на попередньо вибране місце сторінки вставляється код виклику. Спочатку він знаходиться в документації користувача або вкладці візуального редактора.

Ще один важливий аспект – файли CSS шаблону. Спочатку їх три: основний та два допоміжні для оформлення вмісту. Але це розмежування є дуже умовним, адже всі елементи тісно взаємопов'язані між собою.

Як встановити шаблон?

Установка готового шаблону здійснюється за такою схемою:

У розділі шаблонів панелі адміністратора необхідно вибрати кнопку «додати»;

Форма створення стандартна: у ній задається ID, назва та опис;

При роботі з html важливо чітко розділяти елементи, що належать до оформлення та контенту;

У полі редагування вставляється директива work_area, куди копіюється шаблон;

За наявності CSS необхідно перейти у вкладку стилів, куди вставляється код;

Можна зберегти результат та оцінити отриману роботу.

Заключна частина – вказівка ​​всіх змінних Бітріксів, які прописуються у файлі header. Важливо не забувати редагувати шляхи CSS і зберігати проміжні результати. Після цього можна застосувати шаблон до сайту, вибравши його у відповідному списку налаштувань продукту.

Висновки

Шаблони 1С Бітрікс досить практичні та функціональні. Їх використання значно спростить та прискорить розробку проекту. Можна придбати шаблони на сайті компанії.

У цій статті ми з вами розглянемо всі особливості створення шаблону для Бітрікса з нуля. Не важливо, чи є у вас готова верстка, чи ви просто перфекціоніст, якому тільки дай щось написати самому без посередників 🙂

Які файли потрібні для створення шаблону

Зовнішній вигляд вашого сайту (або представлення сайту) завжди зберігається в якійсь окремій папці. У 1С-Бітрікс шлях до шаблону лежить через папку bitrix, в якій є папка templates і вже в ній перелік всіх наших шаблонів.

Шлях до шаблонів: /bitrix/templates/

Створити шаблон можна 3 способами:

можна скопіювати готовий шаблоні на його основі змінювати під себе

можна створити через адмінку порожній шаблон

можна створити порожню папку та поступово заповнювати її файлами та папками

Як ви зрозуміли третій варіант найхардкорніший 🙂. Зайдемо в адмінку, Адміністрація > Установки > Установки продукту > Сайти > Шаблони сайтів > Додати шаблон .
посилання щодо сайту: /bitrix/admin/template_admin.php?lang=ua

ID шаблон це по суті ім'я папки в якій він буде лежати, я назву development . Інші поля заповніть як зручніше, вони зараз не дуже важливі. У код шаблону додайте наступний код:

#WORK_AREA#

- пишемо цей рядок, щоб файл не можна було викликати безпосередньо з браузера і він не почав виконуватись;
- показуємо поточний title для сторінки;
- показуємо keywords, description та всі скрипти;
- Показуємо панель для адмінів.

Після збереження шаблону мій файл description.php виглядає так:

Відмінно, у нас в корені повинні залишитися 5 файлів, решта Наразіми не будемо використовувати:

• description.php,
• header.php,
• footer.php,
• styles.css,
• template_styles.css

Та частина коду, яка знаходиться до #WORK_AREA#, в результаті записується в header.php. Вгадайте, яка частина записується в footer.php 🙂 (та, що після неї). Сама ворк-арея являє собою динамічний контент (не завжди він такий і динамічний), який знаходиться, наприклад, в папці /contacts/ або /about/ у файлі index.php. Сам файл зазвичай починається підключенням хедера і закінчується підключенням футера:

Text хір

Поки що все виглядає логічно.

1С-Бітрікс папки та структура нового шаблону

У документації є кілька рекомендацій, які особисто мені не дуже подобаються. По-перше, вони люблять називати папку із зображеннями images замість скороченого img . І, я, звичайно, все розумію, але коли ви пишите стилі, вам у будь-якому випадку потрібно посилатися на зображення, навіщо писати в 2 рази більше? 🙂 . По-друге, була така рекомендація, зберігати області в папці include_areas — чому б не створити inc ? По-третє, навіщо нам 2 файли зі стилями? Якщо мені захочеться винести все в окремий файл і підключати потім за потребою, то ці стилі будуть зберігатися або у шаблоні компонента, або у папці css шаблону.

Якщо підсумувати, наша правильна структура шаблону:

Include_areas images components js

Якщо бути трохи бунтарем, то:

Inc img components js

Вас у принципі ніхто не обмежує, це лише рекомендації.

І ось ми плавно підійшли до першої проблеми – хардкод. Хардкод це коли ви замість динамічних значень, наприклад доменне ім'я, використовуєте текстовий запис. Більшість розробників-початківців не знають про константу SITE_ TEMPLATE_ PATH, яка в якості значення зберігає шлях до поточного шаблону - в нашому випадку це /bitrix/templates/development (без зліку в кінці, зверніть увагу). І тому, коли ви будете підключати свої скрипти або області, що включаються, для папки потрібно писати: