Як зверстати шаблони

1

Від автора: в мережі ви можете знайти тисячі готових шаблонів для сайтів, які можна практично миттєво встановити собі. А як такий шаблон зробити самому?

У цій статті я хотів би відразу конкретно відповісти на поставлене питання. Щоб зверстати шаблон, потрібно володіти певними знаннями, а саме:

HTML/CSS – дві мови, з допомогою яких, власне, будується структура і зовнішній вигляд майбутнього шаблону. Ази веб-розробки. Те, без чого неможливо рухатися далі.

JavaScript/Jquery – популярний мову, на якому розробляють веб-сценарії і найпопулярніша його бібліотека, яка використовується на чверті всіх сайтів в мережі і взагалі працює за принципом «все в одному». З допомогою цих технологій реалізуються різні речі: підставляються сценарії на кліки мишкою та інші події, розробляються інтерактивні тести і навіть ігри. Наприклад, HTML і CSS не можуть зробити так, щоб при клацанні мишкою по якомусь елементу збоку виліз додатковий блок. А JavaScript може.

PHP і написані на ньому механізми сайту (CMS). PHP – мова, яка дозволяє зробити HTML динамічним. Сьогодні мало кого цікавить, як створити шаблон html, потрібно ще й посадити його на движок, тобто зробити так, щоб на сайті можна було інтуїтивно зрозуміло додавати статті, сторінки та інший контент, та й взагалі – з зручністю управляти їм без необхідності кожну хвилину відкривати код.

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

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

Потім все це ставиться на якийсь движок, тому що мало хто готовий керувати статичним сайтом, для додавання статті на який потрібно створювати новий html-файл з потрібним текстом, на який потім посилатися. В залежності від потреб, вибирається один з популярних движків (Joomla, WordPress, Bitrix), або пишеться свій власний.

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

Третій етап – до шаблону додається потрібний функціонал. Тут вже може використовуватися в повну та jquery і php. Наприклад, в темах для WordPress часто є можливість візуальної настройки шаблону. Щоб реалізувати це, не обійтися без цих двох технологій.

Як створити шаблон для WordPress?

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

Крім знань HTML і CSS, які необхідні для верстки будь-якого шаблону, для верстки під wordpress потрібно знати (увага!), як працює сам движок. Ну і, звичайно ж, PHP, тому що WordPress, написаний на цій мові.

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

Як зверстати шаблони

Рис. 1. Російська документація wordpress на сайті wp-docs.ru. Тут ви можете прочитати опис сотень функцій для движка, але навряд чи розберетеся у всьому самостійно.

Верстка з psd

Але ми якось пропустили перший етап, зробивши вигляд, що ви вже знаєте HTML і CSS і можете без проблем зверстати шаблон з psd (тобто з фотошоповского макету сайту). Хоча ці мови освоїти значно простіше, ніж PHP, їх теж потрібно вивчати. І для цього не потрібно нікуди звертатися – на нашому сайті все вже є. По-перше, уроки з основ HTML і CSS. По-друге, напрацювання практичних навичок завдяки тому, що ви самостійно сверстаете шаблон.

Суть сказаного така. Якось так я хотів би сьогодні відповісти на питання про те, як створити шаблон. Для цього вам всього лише потрібні уроки від webformyself і власний час. На першому етапі ви зробите готовий шаблон на HTML, який вже буде непогано виглядати.

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

Ну а багато уроків з javascript&jquery&ajax дозволяє вам додати на сайт що завгодно: розумне меню, слайдер, таймер зворотного відліку і просто все, на що може вистачити людської фантазії.

Ну а якщо вам треба створити шаблон для joomla? Це ще одна популярна CMS (тобто движок сайту). На webformyself є покрокова інструкція та на цю тему. Абсолютно така ж докладна, як і у випадку з wordpress.

Як зверстати шаблони

Рис. 2. Створити тему для CMS – далеко не проста справа. Швидше за все ви зможете освоїти будь движок якщо подивитеся покроковий відеокурс.

Як ви розумієте, на нашому порталі вже давно є все, що потрібно для верстки свого власного, унікального шаблону.

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

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