Статті Створення тем - Частина 1
Як і обіцяв, відкриваю серію статей створення тем, тобто. як це я (jikaka).
Під словом «тема» я розумітиму шаблон для PHP-Fusion, тобто. готовий дизайн, інтегрований у CMS, який встановлюється у кілька кліків через адмінку. Природно, розмова йтиме про актуальну версію – 7.02.05, відповідно і про її файли.
Вступ
До сьогодні я пробував різні варіанти побудови чи створення тем для різних версій PHP-Fusion. Перепробувавши різні шляхи підходу, на даний момент у мене вже є більш-менш налагоджений механізм і приблизний порядок дій, який може змінюватися в залежності від складності теми, що створюється. Якщо вдаватися в цифри, виходить, що я приблизно зробив трохи більше 30 тем для різних версій PHP-Fusion. При цьому на створення теми у мене тепер йде значно менше часу, ніж раніше, це приблизно 3-5 днів за сприятливих умов. Однією з цих умов є позитивне твердження намальованого дизайну. Природно, що з внесенні правок в дизайн терміни збільшуються залежно кількості і якості зазначених зауважень.
Один із варіантів створення теми був стандартний метод: малювання дизайну – верстка дизайну – інтеграція верстки. Тобто. зверстану сторінку, а точніше її код я тупо вставляв у файл theme.php і використовував функції CMS для виведення контенту. Але такої версії роботи швидко відмовився, т.к. це вимагало більше часу та зусиль на правильну та валідну верстку. У результаті зараз схема роботи у мене приблизно така: малювання дизайну – інтеграція дизайну, таким чином, я пропускаю нещасливий пункт верстки, а на виході отримую валідний код і відповідно, тему, побудовану за всіма правилами PHP-Fusion.
Можливо, хтось скаже, щоце нерозумно і не варто пропускати такий важливий пункт, як верстку дизайну, але я дію тепер саме так, на чому дуже заощаджую час і нерви.
Тепер плавно переходжу до процесу розробки, при цьому перший крок малювання дизайну пропускається зі зрозумілих причин.
Структура
Для тих, хто не в курсі, не знав або просто забув, нагадую, що всі теми CMS розташовуються в кореневій папці «themes» (не важко здогадатися, чому пішла і назва – тема). Папка «themes» містить не тільки теки, але й має ще папку «templates» і файл index.php. у результаті структура для папки «themes» виглядає так:
де Theme_01, … , Theme_N – назви різних тем.
Назва теми може бути будь-яка, може бути з кількох слів, з пробілом або без, загалом, не має значення, тут обмежень немає. Як називати тему – це ваша особиста справа, особисто я дотримуюся простих правил для цього пункту – оригінальність, коротко, зрозумілість, тобто. коротка оригінальна назва для теми, яка дає зовнішню оцінку. Приклад – RedCar Theme – червона машина, тема у червоному виконанні на автомобільну тематику. Звичайно, будь-яку тему можна переробити під будь-яку тематику. Назва теми, зазвичай, я даю в міру готовності дизайну, тобто. перед інтеграцією в двигун.
Тепер розглянемо структуру папки з темою, яка виглядає так:
При цьому структура папки може складатися з додаткових папок та файлів, залежно від складності теми. Наприклад, логічно створити папку "js" для розміщення в ній файлів-скриптів, які будуть використовуватися в темі, або створити файл "menu.php" - якщо раптом вирішили замінити стандартну горизонтальну навігацію на щось, що гарно випадає, і т.д.
З чого починається робота
Вся моя робота зі створення теми, власне, будується на модифікації (зміні) файлів обраної теми приблизно 70-90%. Відсотки, що залишилися, відносяться до адміністративної частини, яку, на мій погляд, немає сенсу сильно модифікувати.
У зв'язку з тим, що зараз актуально мати блокову верстку дизайну, я вибрав для себе стандартну тему «Stylo», яка задовольняє всім вимогам, у тому числі і валідності. Автор провів велику роботу з розробки цієї теми, за що йому велике спасибі. Якщо тема потрібна для шостої версії движка, то вибирається тема з табличним каркасом, т.к. дана версія CMS блокову верстку не підтримує.
Тему «Stylo» собі перейменував на «For New Theme» і провів із нею ряд початкових процесів для більшої продуктивності й у не повторення тих самих процесів для новостворюваних тем, т.к. по суті, доводиться робити одне й теж раз на раз.
Насамперед я змінив файл styles.css. Т.к. даний файл великий за своїм наповненням через що перехід від редагування одного класу до іншого виходить стомлюючим, вирішено було рідко редаговані класи вивести в один рядок, тим самим значно скоротити файл за кількістю рядків. Наприклад, є клас «admin-message», який у файлі за промовчанням прописаний у 9 рядків:
Робимо виведення його в один рядок:
За рахунок чого скорочуємо файл на 8 рядків одним класом. Те саме робиться і для інших класів, які не потребують змін під час створення теми.
Крім скорочення рядків для більшої зручності переміщення по файлу, я спочатку додаю деякі класи для комфорту у всіх браузерах, наприклад, обов'язково додаю такий рядок:
Для чого цей рядок потрібний, пояснювати не буду.
Додатково на початку файлу прописую клас"wrapper", який обмежує ширину теми у певних рамках. За замовчуванням код виглядає так:
Розміри зроблені спеціально під монітор з роздільною здатністю 1024px по горизонталі, щоб не з'являлася горизонтальна смуга прокручування внизу екрана браузера. За потреби клас можна вдосконалити, використовуючи такі стилі, як "max-width" та "min-width".
Другою справою змінюю файл theme.php. Додаю рядки з класом «wrapper» на початку та наприкінці виведення функції «render_page(…)».
Для заголовків новин та статей додатково прописую стиль «style=’font-size:14px;’» для рядків функцій:
Робиться це тому, що при редагуванні файлу styles.css саме зміни розміру шрифту не домогтися, тобто. не змінити шрифт заголовка новини або статті. Як варіант можна вчинити і по-іншому, більш універсально, прописати не стиль, а додатковий клас і новий клас вказати у файлі styles.css.
За аналогічною проблемі робимо те саме й у заголовків панелей, тобто. для функції «openside(…)», правимо рядок:
додаючи до неї той самий стиль «style=’font-size:14px;’».
Після таких маніпуляцій я завжди знаю, де необхідно поправити розмір шрифту для заголовків новин, статей та панелей.
Третьою справою створюється папка "includes", а в ній порожній файл "index.php" і файл "counter.php", який виводить картинку розміром 88х31 при підключенні цього файлу в "theme.php" там, де це потрібно. Картинку необхідно заздалегідь підготувати.
Мені завжди доводилося прописувати лічильники на веб-сайт і робити це безпосередньо у файлі «theme.php» було трохи незручно, т.к. лічильники мають часом великий код, який заважає редагування файлу "theme.php". У результаті виходить, що всі лічильники в одному файлі, що дужезручно, і за потреби швидко редагуються.
Код файлу «counter.php» за промовчанням містить такі рядки:
Пояснювальний рядок зроблено спеціально для тих, кому доводиться віддавати файли створеної теми, що дозволяє не витрачати час на пояснення, що куди і як.
На виході
У результаті я підготував собі трохи змінені файли теми «Stylo», які постійно використовую для створення нових тем. При цьому якщо щось у процесі створення нової теми мене напружує, то я вношу ці зміни до початкового дистрибутиву файлів «For New Theme».
Можливо, я щось прогав, але принцип підготовки файлів саме такий, як я його описав.
Таким чином, створивши один раз під себе всі зміни, наступні рази пропускаю етап підготовки теми, що дуже суттєво економить мій час.
Тепер можна приступати безпосередньо до розробки нової теми, етапи якої опишу в наступній частині. З цієї ж частини із задоволенням вислухаю питання, зауваження чи пропозиції.