Шаблон своїми руками
1. Все, що я буду писати нижче не покрокова інструкція. Всі зміни в файлах движка, а так само зайва складність, як власне каркаса шаблону, так і окремих його елементів будуть зроблені з однією єдиною метою - розглянути якомога більше питань, які можуть виникнути в процесі створення власного продукту.
2. Не плутайте поняття «дизайн» і «шаблон». У даній темі мова йде виключно про верстку і єдина причина, по якій тут представлений хоч якийсь натяк на дизайн це те, що верстати кольорові квадратики не так цікаво.
3. Якщо раптом виникне питання «А за допомогою чого це зробити?» - Я використовую Total Commander, Notepad ++, Photoshop, а так же плагін Firebug. Чим будете користуватися ви, не має ніякого значення. Аби зручно було.
Отже, для початку ви повинні чітко розуміти, що шаблон це не набір картинок, як думають деякі, а перш за все логічна структура. Картинки ми вставимо, було б куди. Тому перед тим, як починати щось кодувати у вас як мінімум повинна бути готова блок-схема майбутнього шаблону. Саме за цією схемою, а не по .psd макету і буде створюватися основа під назвою template.php
Зображення зменшено. Клацніть, щоб побачити оригінал.
Думаю не потрібно пояснювати, що написи це не що інше, як назви майбутніх позицій. Причому позиції помічені хрестиком будуть динамічними, тобто виводитися вони будуть тільки при необхідності. Сподіваюся це зрозуміло, поїхали далі.
Всі шаблони InstantCMS зберігає в папці templates і на свіжовстановленому системі там знаходиться тільки один, з назвою _default_, який ми і використовуємо в якості донора. Просто скопіюйте його в ту ж папку під новим ім'ям. В даному випадку під ім'ям stencil. Після чого сміливо видаляйте весь вміст з папок css, images та js. Особливо переживати на даному етапі не потрібно, необхідні файли ми потім повернемо. Більш того, для зручності я перейменують папку images на img. Так мені звичніше, та й писати коротше.
Тепер, щоб більше не повертатися до цього питання, давайте відразу створимо в папці css два поки що порожніх файлу - style.css і ie.css (в них будуть прописані стилі), а в папці js - include.js (сюди будемо складати всі наші скрипти).
Крім того, оскільки ми перейменували 2 папки, потрібно пройтися по вмісту всіх файлів шаблону і скорегувати шляху. Спочатку шукаємо по слову _default_, відкриваємо всі 9 знайдених файлів (вірніше 8, так як template.php можна проігнорувати, ми його все одно перепишемо з нуля) і замінюємо _default_ на stencil. Далі, як підказує логіка, пошук і заміну потрібно зробити по слову images, але щоб запобігти помилкам та прискорити процес відразу скажу, що поки, по входженню images потрібно зробити тільки одну заміну. У файлі content.php, на рядку 138. Все інше лежить в .tpl і ми залишимо це на потім.
Після цього переходимо до файлу positions.txt. Потрібно змінити його так, щоб прописані в ньому позиції відповідали нашому шаблоном. Схема позицій у нас вже є і ніби як все просто, але давайте все-таки спочатку визначимося з деякими моментами:
Ось тепер, прийнявши до уваги все вищевикладене, можна дивитися на схему і заносити дані в файл. Має вийти приблизно наступне:
Зображення зменшено. Клацніть, щоб побачити оригінал.
На цьому з positions.txt закінчили. Саме час відкрити файл template.php і подивитися, що ж в ньому живе. Так ось, оскільки з самого початку заявлено, що ми робимо свій шаблон, а не клон шаблону за замовчуванням, то тут живе якраз той випадок, коли простіше написати все з нуля, ніж переробляти те, що є. До того ж це помітно спростить розуміння суті того, що відбувається.
Прихований текст видно тільки зареєстрованим користувачам
Зображення зменшено. Клацніть, щоб побачити оригінал.
Ну і нарешті, переходимо в налаштування сайту, на вкладці «Дизайн» вибираємо свій шаблон, чистимо системний кеш і переходимо на сайт. Якщо ви зробили все правильно, то повинні побачити ось таке самотнє меню на білому тлі:
Зображення зменшено. Клацніть, щоб побачити оригінал.
На шаблон це звичайно ж ще не схоже, але для початку цього вистачить. А створення заготовки на цьому можна вважати закінченим і в наступний раз ми почнемо її потихеньку заповнювати.
Сподобалася запис? Поділіться нею в соцмережах!