Швидше за все ви думаєте що я зараз почну писати про те, які файли потрібні і що в них писати. Це дійсно важливий момент, але перед цим трохи відійду в сторону, я розповім про безкоштовні темах, які можна скачати величезна кількість з різних джерел, про їх переваги та недоліки.
Недоліки шаблонів з каталогу wordpress.org
Теми з безкоштовного каталогу дійсно добре оформлені, в більшості випадків досить не погано написані і по функціональності на високому рівні, але є одна велика проблема, вони надто роздуті. Чим більше функціонал шаблону тим він «важче», більше напханий функціями, фільтрами і т.д. У чому ж полягає проблема? Справа в тому, що якщо добре не попрацювати над такою темою, в плані оптимізації коду, то швидкість завантаження сайту буде на порядок нижче.
Ні в якому разі не потрібно звинувачувати в цьому розробників, вони роблять все правильно, їх шаблони повинні підходити для великої кількості користувачів. Для сайтів з невеликою відвідуваністю це прийнятно, якщо ж ви бажаєте вийти на високий рівень вам в будь-якому випадку потрібно оптимізувати шаблон.
Для прикладу розповім вам свою історію. Раніше на моєму блозі стояв так само безкоштовний шаблон. Кількість запитів до бази даних становило 85 для головної сторінки, після того як я попрацював з кодом це число зменшилося до 25! Більше ніж в 3 рази, ви собі можете це уявити? Сайт став завантажуватися в 2 рази швидше, і це зайняло у мене всього один вечір. Я думаю це варто того щоб зробити необхідні коректування.
Що б сильно не затягувати давайте підведемо невеликий підсумок:
- Безкоштовні, що не оптимізовані теми багато важать.
- Велика кількість непотрібних функцій і фільтрів.
- Функціонал великий, швидкість обробки даних і завантаження сайту низька.
- Надмірна кількість запитів до бази даних.
Перед тим як переходити до створення власної теми розберіться ніж вас не влаштовує ваша, можливо буде легше виправити її ніж писати все з нуля (досвід показує що колупання в чужих файлах нервове і виснажлива справа).
Ще один важливий момент я упустив. Раніше коли всі сайти були написані на чистому HTML і CSS, проблеми були зовсім іншого характеру, не можна було швидко правити загальну структуру, завдяки чому завдяки веб-програмування ера HTML сайтів канула в буття, настала епоха динамічних сайтів, які генерують контент сайту на льоту. Все б добре, якби не той факт що багато програмісти почали перегравати і нарізати сторінку в такі дрібні шматочки що просто далі нікуди. Сам же принцип створення динамічних сайтів говорить про те, що потрібно виділяти в окремі файли і функції лише необхідні, часто повторювані фрагменти, а не все підряд. На жаль ця тенденція проглядається часто-густо. Так так простіше, так це підходить всім, але це абсолютно не прийнятно в будь-якому окремому випадку. Це не правильно і з цим потрібно боротися.
Всі ці елементи можна легко виводити за допомогою звичайного HTML, що власне і правильно. Погодьтеся ви не часто додаєте нові рубрики або елементи навігації, та й назва сайту в шапці змінюється вкрай рідко. Багато хто зі мною не погодяться, це їх право, але суть така - якщо ви пишете шаблон для себе, для свого сайту позбавляйтеся від таких функцій. У цій серії уроків про створення теми для WordPress я буду проводити дві лінії навчання, одна спрямована на оптимізований шаблон, спеціально під конкретний сайт, друга з використанням всіх функцій WordPress, а який варіант виберете ви, вирішуйте самі.
На цьому, здавалося б, невеликий відступ закінчено і перше що вам потрібно - це мати чітке уявлення, яких результатів ви хочете добитися і для яких цілей ви створюєте власний шаблон.
Міф про унікальність шаблонів сайту
Все навколо кричать що потрібно для кожного сайту мати свій унікальний шаблон. Я це розглядаю трохи інакше. Потрібно мати дизайн який підходить саме вам, а говорити про унікальність ... Гаразд давайте трохи конкретики.
Структура переважної більшості сайтів така:
При будь-верстці, табличній або шарами, все одно буде саме така структура. Різниця буде лише в тому, як і де ви розташуєте елементи. Деякі можна прибрати зовсім, наприклад сайдбар є не скрізь, хоча це зручно, і в навігації відмінний інструмент. Сайдбар може бути один, два, та хоч десять, колонок контенту так само може бути кілька. Виходить що вся унікальність лише в ширині блоків і їх розмальовці. Зовнішній вигляд можна поміняти до невпізнання, структура ж завжди одна і та ж.
Скажу вам навіть більше, ширина блоків не сильно то і відрізняється, з огляду на що екрани моніторів варіюються в одних і тих же діапазонах (про мобільні пристрої зараз не говоримо).
Мало того, класи призначаються для блоків мають однакові назви, а при використанні вбудованих в WordPress, то взагалі ідентичні.
Якщо враховувати кількість сайтів в інтернеті, то унікальних шаблонів немає і навряд з'являться найближчим часом, можливо коли сайти будуть в 3D, тоді з'явиться можливість уникализировать, до того моменту всі сайти це квадратики (і не інакше) різних розмірів розкидані по сторінці сайту, причому все в схожому порядку.
Давайте розглянемо найпопулярніші сайти:
- Google сповідує мінімалізм. Мінімум верстки, тут взагалі нічого немає крім тексту і картинок.
- Яндекс - простенький дизайн в якому можна поміняти тільки задній фон. Ніяких проблем і витребеньок.
- Вконтакте - тут взагалі все до жаху нагадує картинку вище. Шапка, лівий сайдбар, контент і підвал.
Всі найпопулярніші сайти в світі нічим не відрізняються зовні, тільки забарвлення і ширина блоків. Це практично і правильно.
Коли ж можна говорити про унікальність? Переходячи на сайти з величезним фоновим малюнком, барвистою анімацією і безліччю випадають вікон і картинок, тоді ми можемо сказати що таких сайтів більше ніде немає. Це від частини правда, є такі сайти структура яких дуже відрізняється, але їх дуже мало. Зайдіть на будь-який знайомий вам сайт, відкрийте вихідний код і подивіться що все так як у всіх.
Справа не в тому, що неможливо зробити класний фон і впровадити багато анімації, справа в практичності і зрозумілості, структура представлена на зображенні це ідеальна структура для гарного «хитання» відвідувачів по сайту (поведінковий фактор), все під рукою, не потрібно нічого шукати, всі посилання на увазі і тому стандартний підхід краще.
Після такого великого відступу (я чомусь думав, що втіснусь в менший обсяг) перейдемо до перших кроків побудови теми.
І тут ми доходимо до того що ви, напевно шукали з перших рядків статті, створюємо файли і папки. Тут я не буду довго тягнути гуму. Викачуємо, у кого немає, Nodepad ++, він доступний і безкоштовний.
Наступний крок це установка Денвера на локальний комп'ютер. Так саме на локальному компі. Якщо ви збираєтеся писати з нуля тему і відчувати її відразу в мережі, то забудьте про це всі напрацювання, коригування, доповнення до верстки спочатку потрібно перевіряти на локальній машині, потім вже заливати. Після установки Денвера встановлюємо WordPress.
Після того як ви виконали всі установки і налаштування переходимо в наступну директорію:
C: \ WebServers \ home \ localhost \ www \ ваше назва папки \ wp-content \ themes.
Тут створюємо папку, назвіть її як хочете, в англійському регістрі наприклад MyFirstThemes.
Після того як папка була створена заходимо в неї і створюємо стандартний блокнот і перейменовуємо його в index.php, таким же макаром створюємо такі файли:
Поки досить, у міру необхідності будемо додавати файли. Так само можна відразу створити папку images де будемо зберігати картинки для оформлення шаблону.
Таким чином у вас в папці MyFirstThemes має бути 12 файлів у форматі PHP, один CSS і папка де будуть зберігатися картинки.