Розробка вашим першим теми на WordPress: День перший

Теми - це величезна частина того, що робить WordPress таким популярним, яким він є зараз, і в першому уроці ми вивчимо покроковий процес, який призведе нас до створення теми WordPress. Ніяких попередніх знань вам не потрібно, це ідеальне місце для початку шляху, якщо ви новачок в WordPress!

Теми WordPress

Ласкаво просимо в перший урок, по створенню теми для WordPress. Теми - одна з кращих речей в WordPress і простота пошуку, установки і модифікації є одним з тих факторів, які допомогли WordPress стати гігантом серед CMS, яким він є сьогодні - тільки більше 20 мільйонів блогів розміщені на WordPress.com.

Мільйони людей, які використовують WordPress, ймовірно не знають, як створювати шаблон сайту, не кажучи вже про створення теми WordPress. Також цілком імовірно, що багато користувачів WordPress не знайомі з такими термінами, як «FTP» або «Uploading». Завдяки вбудованій програмі пошуку тим, користувачам не потрібно знати технічні деталі або аспекти того, як вони працюють, або як завантажити їх на обліковий запис хостингу.

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

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

Що робить тему хорошою?

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

Цей урок орієнтований на створення з існуючого HTML / CSS-дизайну і перетворення його в живу, «дихаючу» тему WordPress. Швидше за все, вам потрібен буде дизайн, який ви зможете перетворити, якщо у вас його немає, ми надамо простий зразок, над яким будемо працювати у другій частині.

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

Загальний дизайн

Цей момент трохи складно описати, але тема повинна мати гарний вигляд розробленої і відповідати сучасним стандартам дизайну. Я маю на увазі, що важливо знати тенденції та вимоги сучасного веб-дизайну. Сьогодні заміна шрифтів, градієнти CSS3, прозорі блоки і «кричущі фони» - це онлайн-мода, але 10 років тому звичайним явищем було мати ефект курсора мишки, анімовані gifs і палаючий текст ...

Багато з вас зараз здригнулися? Звичайно, всі ці трюки і тенденції виходять за рамки нашого уроку, і вам вирішувати, який дизайн більш привабливішим. Завжди буде хорошою ідеєю отримати відгуки спільноти з таких сайтів, як Dribbble або Forrst, оскільки вони є батьківщиною багатьох авторитетних дизайнерів і розробників.

Підтримка віджета

Загальна для всіх найбільш популярних тем - це підтримка віджетів. Для тих, хто жив «за грубкою» всі ці роки; віджети - це невеликі настроюються плагіни, які часто відображаються на бічній панелі або нижньому колонтитулі теми. Віджети - ще один відмінний варіант поліпшення на WordPress, яке допомагає зробити його настільки популярним.

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

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

Коментарі та підтримка зворотного зв'язку

Одна з найпоширеніших помилок, які я бачу у багатьох новачків розробників тем для WordPress, полягає в тому, що вони забувають про зворотний зв'язок і систему коментарів. Хоча не кожен блог використовує зворотний зв'язок, важливо розуміти, що це може бути перешкодою для багатьох блогів, які відображають посилання зворотного зв'язку.

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

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

З тих пір, як з'явилася WordPress 2.7, вкладені коментарі стали основною функцією. Вони дозволяють користувачам не тільки залишати коментарі на повідомлення або сторінки, але також відповідати на коментар інших користувачів, як на сайтах Tuts + (як показано вище). Вкладені коментарі трохи складні для реалізації, ніж більшість інших функцій, але це відмінна функція, особливо, якщо вони працюють правильно і можуть значно збільшити цінність теми, вони сприяють активності коментарів - що дуже подобатися блогерам.

Gravatars

Використання граватар - відмінна можливість, щоб додати її в будь-яку тему, я впевнений, що ви, ймовірно, знайомі з ними, але для тих, хто не знайомий, я поясню; a gravatar - аватар, пов'язаний з вашою електронною поштою, - тому всякий раз, коли ви коментуєте блог, він показує аватар, який у вас встановлений.

Граватар дуже прості в реалізації, якщо вони відразу правильно розміщені в вашому дизайні (а не в останній момент). Незважаючи на те, що деякі теми працюють краще без підтримки граватар, незважаючи на це користувачам має більш тісний зв'язок з блогом, оскільки він додає трохи індивідуальності до коментарів.

Вибрані повідомлення і аватари

Якщо ви виходите на популярний ринок, такий як ThemeForest, і переглядаєте найпопулярніші теми тижня, ви помітите, що майже у всіх з них є якась форма для розміщення аватара. Давайте подивимося на одну з найпопулярніших тем, доступних на ThemeForest - Striking:

Кожне повідомлення має зображення зі встановленої шириною і висотою, яке діє як аватар. Включаючи аватар для повідомлення, зображення допомагають розбити текст і стати сторінці більш читабельною. Звичайно, аватари не обов'язково повинні бути такими, тут представлений і інший стиль відображення аватарів для повідомлення, що використовуються на нашому сайті-партнера Nettuts+:

Ще один відмінний спосіб відображення повідомлень - використовувати розділ з обраними повідомленнями. Як правило, вони частіше зустрічаються в темах журнального стилю (ми не будемо використовувати їх у своїй темі), але вони надають темі додаткову функціональність. Ось приклад однієї з таких популярних тем:

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

Додаткові типи постів

Звичайно, не всі, що публікується в блозі, це просто повідомлення. Блогери можуть також розміщувати мультимедійні файли, такі як відео і аудіо з Vimeo, YouTube. Чудовим прикладом такого роду інтеграції є одна з останніх тим під назвою Gridlocked:

Gridlocked використовує персоналізований тип повідомлень (в цьому випадку пост-тип - це повідомлення Vimeo), який красиво вбудовує відео з vimeo в тему. Деякі інші параметри підтримують відео з YouTube, аудіоплеєр та пост-аватари. Всі вони (з використанням відповідного користувальницького типу повідомлень) відмінно виглядають по всій ширині без полів або доповнень у верхній частині макету.

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

Компоненти теми

Я впевнений, що ви, ймовірно, знаєте, що теми складаються з безлічі різних файлів, кожен з яких відіграє свою роль у відображенні або функціональності теми. Давайте розглянемо деякі з найбільш поширених файлів, які WordPress розпізнає за замовчуванням і з якими ми будемо мати справу. Більшість файлів зрозумілі самі по собі:

header.php

Зазвичай цей файл містить нашу тему до, він також грає головну роль з функцією wp_head(), яка є одним з найбільш важливих прийомів в WordPress.

sidebar.php

Необов'язковий файл, що викликається за допомогою get_sidebar(), ви можете використовувати цей файл для створення бічній панелі, навігації або чогось ще.  Це також означає, що ви зазвичай вставляєте код, що дозволяє запускати віджети, якщо ваша тема це дозволяє.

footer.php

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

page.php

Використовується для відображення однієї сторінки - не плутати з повідомленням.

single.php

Поштовий файл, який використовується для відображення одного повідомлення в блозі, але дуже схоже на сторінку page.php за кодом.

index.php

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

functions.php

Файл functions може бути новим для вас. Тут зберігаються спеціальні функції теми - найчастіше це функції реєстрації областей для віджетів.

comments.php

Відображає цикл, подібний index.php, який виконує ітерацію коментарів. Це також відноситься і до трекбекам, вкладеним коментарям і іншим пов'язаним функцій.

Тема може використовувати більше або менше файлів, перераховані нами файли є найбільш поширеними майже для кожної теми. Які файли використовувати - це, по суті, рішення розробника - наприклад, можуть бути vimeo.php, youtube.php і audio.php, які відображають відповідні типи повідомлень, а не весь код, пов'язаний тільки з page.php або single.php.

Налаштування теми на сторінці параметрів

Панель управління сторінкою, яка дозволяє легко налаштовувати тему, може бути відмінним інструментом продажів. У переважної більшості популярних тем є панель параметрів, яка реалізує будь-яку потребу блогера в необхідності модифікувати будь-які файли коду або графіки. Це відмінний момент для продажу, оскільки не кожен блогер, який використовує нову тему, буде знати, що #000000 означає чорний.

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

• Схема кольорів
• Логотип (текст або зображення)
• Іконка
• Детальна інформація про новини в соціальних мережах (наприклад, ім'я користувача Twitter)
• Різні варіанти стилю
• Багато іншого

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

Наступного тижня

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

Наступного тижня ми розглянемо основи HTML, основи PHP і, в ідеалі, основи CSS. Вам не потрібно нічого знати про темах для WordPress, оскільки ми будемо починати з нуля!