Це посібник щодо функцій, необхідних вашій новій темі WordPress, щоб зробити ваш веб-сайт успішним у 2020 році. Контрольний список актуальний для веб-майстрів, окремих осіб, а також розробників, які хочуть покращити свої теми. Якщо ви збираєтеся вибрати нову тему WordPress цього року, читайте далі!

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

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

1 Зручний для мобільних пристроїв

Тема має бути оптимізованою для мобільних пристроїв. Крапка. Більше половини всіх відвідувань веб-сайтів у всьому світі відбувається через мобільний пристрій. У 2018 році відсоток глобальних мобільних відвідувань становив близько 58%, і прогнозується, що він становитиме близько 63% у 2019 році. З роками він лише збільшуватиметься.

Що означає, що тема або веб-сайт зручні для мобільних пристроїв? Це просто означає, що веб-сайт розроблено для роботи та його можна використовувати на невеликих екранах, не потребуючи окремого сайту для мобільних користувачів. Іншими словами; тема повинна бути адаптивною. Адаптивна тема дозволить красиво накладати вміст один на одного, масштабувати або приховувати непотрібний вміст і замінювати головне меню мобільним меню за допомогою кнопки.

Ви можете дуже легко перевірити, чи адаптивний веб-сайт, просто зменшивши вікно браузера на комп’ютері. Просто перетягніть ліву або праву частину браузера всередину. Подивіться, як відреагує сайт. Вміст має почати змінюватися, складатися та масштабуватися пропорційно відповідно до ширини екрана. Гарне емпіричне правило полягає в тому, що ви ніколи не повинні бачити горизонтальну смугу прокрутки у своєму браузері!

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

Більш надійний спосіб перевірити зручність для мобільних пристроїв – це використання безкоштовного інструменту Google: перевірте, чи ваша веб-сторінка оптимізована для мобільних пристроїв. Введіть URL-адресу демо-сайту теми та натисніть «Тестувати». Інструмент має повідомити вам, чи сайт справді оптимізований для мобільних пристроїв.

Зручний для мобільних пристроїв сайт не тільки дозволить відвідувати більше відвідувачів на різних пристроях, але наявність веб-сайту, оптимізованого для мобільних пристроїв, також має вирішальне значення для пошукової оптимізації (пошукова оптимізація – див. наступний пункт)! У результатах пошуку Google надає перевагу сайтам, зручним для мобільних пристроїв. А в березні 2020 року вони оголосили, що у вересні 2020 року Google перейде на мобільне індексування для всіх веб-сайтів.

2 SEO-дружній

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

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

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

Але є кілька речей, які вам потрібно перевірити в межах теми – те, що плагін SEO не може виправити.

Гарна структура HTML

Хороша структура HTML відіграє важливу роль у тому, щоб зробити тему дружньою до SEO. HTML – це структура вмісту веб-сторінки, незалежно від її стилю. Стиль може приховати погану структуру HTML, але майте на увазі, що сканери Google читають веб-сайт без стилів.

Одним з важливих правил хорошої структури HTML є теги заголовків; h1, h2, і так далі до h6. Заголовки повинні використовуватися для інформування про новий розділ і про що він іде, а теги мають бути в порядку (наприклад, ваш вміст не повинен переходити з h2на h4без h3проміжного). h1має бути зарезервовано для найважливішої назви; зазвичай заголовок публікації або назва сайту. І h2має використовуватися для обслуговування найважливіших заголовків у цій посаді. Незважаючи на те, що Google оголосив, що вони дозволяють використовувати кілька h1тегів (відповідно до вказівок для HTML5), усе ще зазвичай гарантують, що h1на кожній сторінці існує лише один.

Тема також має використовувати нові теги HTML5, такі як <header>, <main>, <footer>, <aside>оскільки вони надають Google семантичну інформацію про те, що насправді є конкретним вмістом.

Ще одна функція, яка дуже мало використовується, — це розмітка схеми, яку часто називають мікроданими. Розмітка схеми – це технологія, яка допомагає роботам і сканерам зрозуміти, що таке вміст. Обгортання інформації про продукт розміткою схеми дає змогу Google знати, де саме можна знайти ціну, відгуки, зображення продукту тощо. Це дозволяє Google по-іншому показувати продукти в результатах пошуку. На жаль, це рідко можна знайти в темі WordPress, але якщо ви знайдете тему з розміткою схеми, це хороший натяк на те, що розробник теми мав на увазі SEO.

Нарешті, тема повинна гарантувати генерацію належних тегів у вбудованому вмісті, особливо зображеннях. Зображення повинні мати як мінімум altтеги -. Теги Alt використовуються для опису зовнішнього вигляду та функції зображення на сторінці. Пам’ятайте, що сканери пошукових систем не можуть інтерпретувати зображення так, як це роблять люди.

Pagespeed

Швидкість завантаження веб-сайту дуже важлива для SEO. Завантаження сторінки на вашому веб-сайті не повинно тривати більше 5 секунд. Тема може оптимізувати швидкість сторінки різними способами.

Майте на увазі, що тема може використовувати важкі, а іноді й зовнішні ресурси, щоб вона виглядала шикарно. Наприклад, користувальницькі шрифти, іконки та ціла купа інтерактивних елементів. Запити на таблиці стилів, файли javascript і особливо зовнішні ресурси, такі як GoogleFonts для шрифтів і Fontawesome для піктограм, дійсно знижують швидкість сторінки.

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

Ви можете перевірити швидкість сторінки за допомогою ще одного з безкоштовних інструментів Google: PageSpeed Insights. Введіть URL-адресу демо-сайту теми та натисніть «Аналізувати». Дозвольте йому працювати, і ви отримаєте оцінку та звіт про те, що ви можете зробити, щоб вирішити будь-які проблеми, які знижують швидкість сторінки. Не забудьте перевірити звіти як для мобільних пристроїв, так і для настільних ПК. Швидкість завантаження сторінок на мобільних пристроях сьогодні важливіша; як тому, що мобільні пристрої часто використовують мобільні дані (що коштує грошей), так і тому, що зручність використання мобільних пристроїв є важливою. Ви не пропустили попередній пункт контрольного списку, чи не так?

3 Доступність

Доступність робить ваш веб-сайт доступним для всіх типів відвідувачів, у тому числі для людей з обмеженими можливостями, незалежно від того, чи є вони з вадами слуху, зору тощо. Існує міжнародний набір інструкцій під назвою Web Content Accessibility Guidelines (WCAG), які описують, як веб-сайти мають запроваджувати доступність. Не дотримуючись вимог WCAG, ви фактично порушуєте низку законів і правил міжнародного масштабу (оскільки відвідувачі вашого сайту можуть приходити з будь-якої точки світу).

Інструкції окреслюють великий набір специфікацій і технічних вимог до веб-сайту. Відповідність WCAG оцінюється за трьома рівнями; А, АА та ААА. Рівень AAA є найнижчим прийнятним рівнем доступності, тоді як рівень A вважається доступним першокласним, але рівень A накладає серйозні обмеження на дизайн, функції та багатий вміст. Більшість веб-сайтів, якщо вони не орієнтовані на людей з обмеженими можливостями, не прагнуть досягти рівня A у доступності.

Ваша тема має досягти рівня AAA як мінімум. Ви можете перевірити рівні доступності на сайті за допомогою безкоштовного інструменту WAVE, доступного як розширення для Chrome і Firefox. Після встановлення у вашому браузері ви можете відвідати демо-сайт теми, запустити перевірку та переглянути звіт.

WAVE звіт мого сайту. Мабуть, мені є над чим працювати!

4 меню

WordPress має вбудований редактор меню для створення меню та розміщення їх навколо вашої теми. Вибрана вами тема має не лише підтримувати цей редактор меню, але й надавати вам місця для розміщення меню.

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

PS: Ви пам’ятаєте пункт 1 контрольного списку «зручність для мобільних пристроїв», де згадується мобільне меню? Ще раз переконайтеся, що розташування головного меню добре перетворюється на мобільне меню. Якщо тема дозволяє меню підтримки, їх також слід включити в мобільне меню, а не просто зникнути.

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

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

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

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

6 Спеціальний логотип

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

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

7 Пошук

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

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

Зазвичай на вашому веб-сайті пропонують пошуковий ввід, який зазвичай розташований у верхній частині заголовка. Функція пошуку доступна в багатьох формах; пошуковий ввід у верхньому (або нижньому) колонтитулі або піктограма пошуку, яка певним чином відображає введені дані. Якщо тема не пропонує пошуковий ввід автоматично, ви завжди можете додати пошуковий віджет – за умови, що тема підтримує віджети (пункт 5 контрольного списку).

8 шаблонів за замовчуванням

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

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

Якщо ви бажаєте ввімкнути коментарі, у тему також повинні бути реалізовані та належним чином розроблені ці шаблони.

9 індивідуальних кольорів

Швидше за все, у вас є певний набір кольорів, які ви хочете використовувати на своєму веб-сайті – зазвичай ті самі кольори, які є у вашому логотипі. Фірмування вашого сайту вашим логотипом є мінімумом (пункт 6 контрольного списку), але тема також повинна дозволяти вам вибрати деякі кольори теми. Таким чином, ви досягаєте більш узгодженого дизайну, коли посилання, кнопки та інші елементи дизайну мають кольори вашого бренду.

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

Це досить складна функція для впровадження, і її можна вирішити кількома способами – від хороших до поганих. Поганим рішенням було б генерувати велику частину накладних витрат на стилі, просто перевизначаючи та дублюючи стилі за допомогою власних кольорів. Великий файл таблиці стилів або кілька таблиць стилів впливають на швидкість сторінки (див. пункт контрольного списку 2). Хорошим рішенням було б включити певний спосіб замінити змінні кольору та відновити чисту таблицю стилів після вибору різних нестандартних кольорів.

10 варіантів компонування

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

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

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

Моя власноруч розроблена тема для A White Pixel містить параметри макета для публікацій

11 Підтримка Гутенберга

Коли WordPress випустив версію 5.0 у грудні 2018 року, він отримав абсолютно новий редактор дописів під назвою Gutenberg. Редактор Gutenberg революціонізував спосіб створення вмісту, дозволяючи легко створювати розділи з фоновим зображенням або кольорами, багатий вміст, стовпці тощо. Раніше такі речі були неможливі.

Однак через те, що для Gutenberg потрібна інша мова програмування (Javascript, React), ніж мова, на якій спочатку створювався WordPress (PHP), підтримка в спільноті розробників була повільною. Однак зараз 2020 рік, і тема повинна підтримувати Гутенберга.

Існує велика кількість тем WordPress, які покладаються на такі інструменти створення сторінок, як Visual Composer, Elementor і Divi. Gutenberg практично робить ці плагіни зайвими. Зробіть собі послугу і не вибирайте тему, для якої потрібен плагін конструктора сторінок, оскільки ви можете досягти тих же результатів за допомогою нової стандартної функції WordPress.

12 Готовий до перекладу

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

Існують різні способи перекладу теми. Якщо ви розробник, це питання використання функцій текстового домену у вашій темі та додавання .potабо .po-файлу. Якщо ви користуєтеся темою і мало або зовсім не знаєте коду, є альтернативні шляхи. Ви можете, наприклад, використовувати плагін Loco Translate для прямого доступу до файлів перекладу теми. Або ви можете використовувати WPML або інші плагіни для створення багатомовного сайту.

Але все це вимагає, щоб тема була написана з підтримкою перекладу її рядків.

Висновок

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

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

Джерело запису: awhitepixel.com