Чому ми переробили наш веб-сайт із нуля
Погляд зсередини на нашу необхідну еволюцію та уроки, отримані під час процесу редизайну.
Немає даних картки
1) Чому ми створили новий веб-сайт і не змогли просто «змінити тему»
Коли ми вперше визначили потребу в змінах, завдання здавалося простим: «Змініть верхній блок і зробіть заклик до дії ефективнішим». На перший погляд це може здатися швидким рішенням, але незабаром ми зрозуміли, що це невелике завдання виявило набагато серйозніші основні проблеми зі структурою та дизайном сайту. Проблема була не лише в одному блоці; капітального ремонту потребувала вся архітектура сайту.
Наш веб-сайт створювався протягом тривалого часу, до нього додавалися різні сторінки з використанням різних дизайнів і макетів, без жодної об’єднуючої теми чи шаблону. Кожна сторінка була унікальною за своїм дизайном, що може здатися креативним, але призвело до серйозної проблеми: невідповідності. Якби ми пішли вперед і створили новий дизайн лише для верхнього блоку, зберігши решту сайту, як було, це означало б вручну оновити цей блок на понад 700 сторінках і публікаціях. Навіть гірше, цей ручний процес потрібно буде повторювати щоразу, коли ми хочемо внести майбутні зміни. Уявіть собі неефективність перегляду сотень сторінок, щоб на кожній з них були останні оновлення. Швидко стало зрозуміло, що продовжувати роботу зі старим сайтом не можна.
Окрім логістики оновлення кожної сторінки, ми мали враховувати загальний досвід користувачів. Сучасні користувачі очікують безперебійного, цілісного досвіду, коли вони відвідують веб-сайт. Якщо вони прокручують сторінку вниз і бачать, що дизайн непослідовний – у кожному блоці використовуються різні стилі – це створює роз’єднане та непрофесійне враження. Ще гірше, коли користувач переходить від однієї сторінки до іншої та помічає, що макет і дизайн зовсім інші, це посилює відчуття безладу.
Невідповідність вийшла за межі макета. Багато зображень на сайті були застарілими, погано оформленими або навіть неналежним чином згенерованими нейронними мережами. Ці зображення не відповідали сучасним стандартам дизайну, і їх заміна була ще одним складним завданням. Використання поганих зображень погано вплинуло на загальну якість сайту, залишаючи у користувачів негативне враження про продукт або послугу, які ми пропонуємо.
Не було простого способу всебічного оновлення сайту за допомогою такого інструменту, як Elementor. Кожна сторінка та блок містили власні вбудовані стилі, тобто зміни не можна було внести глобально. Якби ми хотіли оновити стиль сайту, нам довелося б переглядати кожну окрему сторінку та вручну оновлювати кожен блок, що було б трудомістким і неефективним. З огляду на це, стало очевидним, що нашим єдиним рішенням було створити новий веб-сайт з нуля. Це дозволить нам передавати весь вміст, зберігаючи ті самі URL-адреси, але з новим, узгодженим дизайном, який легко оновлюється.
2) Чому ми вирішили не використовувати Elementor
Elementor є одним із найпопулярніших конструкторів сторінок для WordPress. На перший погляд це здається чудовим інструментом, який дозволяє швидко та легко створювати сторінки. Однак після тривалої роботи з ним ми зіткнулися з кількома обмеженнями, які змусили нас вирішити відійти від Elementor і замість цього вибрати спеціально створений веб-сайт.
Elementor’s Обмеження та виклики:
- Помилки та збої: Хоча Elementor пропонує багато корисних функцій, він не позбавлений технічних проблем. Наприклад, коли ми копіювали сторінку та намагалися її відредагувати, нова сторінка часто виглядала інакше, ніж оригінал, навіть до внесення будь-яких змін. Були часті помилки щодо того, як відображалися елементи, наприклад властивість “maximum image width”, яка не працювала належним чином. Ці збої ускладнювали забезпечення узгодженого стилю на сторінках.
- Занадто багато творчої свободи, що призводить до непослідовності: Однією з ключових точок продажу Elementor’s є можливість налаштувати все. Однак ця гнучкість може бути палицею з двома кінцями, особливо коли на сайті працює кілька редакторів. Непрофесіоналам легко ненавмисно створювати сторінки з непослідовним дизайном. Наприклад, ми бачили випадки, коли редактори використовували рожевий текст на рожевих кнопках або додавали помаранчеві трикутники на задньому плані, що призводило до захаращеного та заплутаного дизайну. Без суворої системи дизайну стало неможливо підтримувати цілісну візуальну ідентичність.
- Обмежена настройка для розширеної функціональності: Хоча Elementor чудово працює в базовій побудові сторінок із текстом і зображеннями, це стає складнішим, коли вам потрібно додати спеціальну функціональність. Ми часто виявляли, що обмежуємося вбудованими блоками, які було важко налаштувати для більш складних функцій. Оскільки наші потреби виходили за межі базових макетів, обмеження Elementor’s ставали все більш очевидними.
- Роздутий код і проблеми з продуктивністю: Elementor’s метод побудови сторінок вводить надмірне вкладення елементів. Наприклад, Elementor автоматично генерує множинне
контейнери в іншомуелементи, кожен зі своїм набором стилів. Це призводить до роздутої структури, яка негативно впливає на швидкість завантаження, продуктивність сторінки та, зрештою, на рейтинг SEO веб-сайту. Коли ми проводили тести на швидкість, результати були незмінно поганими, і в основному винен важкий код, створений Elementor. - Немає можливостей тестування A/B: У сучасному цифровому ландшафті A/B-тестування має важливе значення для оптимізації взаємодії з користувачем. Однак Elementor не пропонує можливості показувати різні версії сайту різним користувачам. Кожен бачить один і той же сайт, що обмежує нашу можливість тестувати і точно налаштовувати елементи дизайну, такі як кольори, форми кнопок і фонові зображення. Без цієї функціональності ми не змогли б оптимізувати сайт на основі реальної поведінки користувачів.
- База даних Bloat: Можливо, одним із найбільш суттєвих недоліків Elementor є те, як він обробляє стилі та вмі Elementor зберігає стилі, вкладені структури та інші непотрібні теги, змішані з вмістом у базі даних. Це призводить до роздутої бази даних, яка не очищається, навіть якщо Elementor вимкнено або видалено. Як наслідок, перехід на нову тему чи структуру не вирішує проблему – ці стилі залишаються вбудованими на сторінках, продовжуючи викликати проблеми.
З огляду на всі ці виклики, стало зрозуміло, що нам потрібне більш надійне рішення. Ми прийняли рішення створити новий незалежний веб-сайт без Elementor, обравши більш стійкий і гнучкий підхід.
3) Як створити сторінку на новому сайті
Створення нового сайту з нуля дало нам можливість налагодити чистий, спрощений процес створення сторінок. У новій системі створити сторінку просто:
- Увійдіть до панелі адміністратора WordPress і натисніть Сторінки -> Додати нову сторінку .
- Ви побачите стандартний редактор WordPress, де ви можете писати або вставляти текст, додавати посилання та завантажувати зображення.
Цей процес простий, але гнучкий. Замість того, щоб покладатися на Elementor’s складну блокову систему, редактор вмісту в WordPress набагато чистіший, що дозволяє швидко оновлюватись і легко налаштовуватись. Під редактором є налаштування для Розширені користувацькі поля (ACF), які вже налаштовані на підтримку узгодженості на всьому сайті.
ACF дозволяє нам створювати гнучкі розділи вмісту з такими блоками, як Content 1…Content 15 , де ви можете легко встановити заголовок, текст, зображення та мітки кнопок для кожного розділу сторінки. Ці блоки автоматично чергують розташування зображень і тексту, гарантуючи, що макет залишається візуально привабливим без необхідності ручного налаштування.
Для зображень ми впровадили систему підбору кольорів, яка автоматично застосовує градієнт до основних кольорів сайту. Це гарантує, що всі зображення відповідають загальній естетиці. Для логотипів або скріншотів, де кольори повинні залишатися недоторканими, існує опція «зберегти кольори», яка замінює градієнт.
Ця система спрощує керування вмістом, зберігаючи узгодженість дизайну на всіх сторінках.
4) Як створити нову публікацію
Створення дописів на новому сайті відбувається за тим самим спрощеним процесом, що й створення сторінок, з кількома ключовими відмінностями:
- Публікації мають URL-адреси, які включають ../blog/.. , що відрізняє їх від сторінок.
- На правій бічній панелі блок автоматично відображає три останні статті, допомагаючи підтримувати блог динамічним і привабливим.
Шаблон для всіх публікацій міститься у файлі template-parts/content/content-single.php , який керує структурою та макетом кожної публікації блогу. Цей узгоджений шаблон дозволяє легко оновлювати та гарантує, що всі публікації дотримуються однакових інструкцій щодо дизайну.
5) Розширені спеціальні поля (ACF)
ACF був важливою частиною розробки нашого нового веб-сайту. Це дозволяє нам створювати власні поля, якими можна легко керувати через панель адміністратора WordPress. На такі поля, як content_1, є посилання в коді PHP, що дозволяє нам динамічно завантажувати правильний вміст для кожної сторінки та публікації.
Ця гнучкість має вирішальне значення для того, щоб ми могли ефективно керувати сайтом і оновлювати його, залишаючи при цьому простір для налаштування за потреби.
6) A/B тестування
Одним із найважливіших покращень, які ми внесли на новому сайті, було впровадження A/B-тестування. A/B-тестування дозволяє нам порівняти дві версії сайту, щоб побачити, яка з них ефективніша для користувачів. Це може включати тестування різних кольорів, форм кнопок, фонів або навіть макетів.
Ми реалізували цю функцію за допомогою параметрів GET в URL-адресі. Наприклад, можна створити дві ідентичні рекламні кампанії, але з різними URL-адресами:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
Коли користувач натискає ці посилання, параметр зберігається у файлі cookie. Залежно від значення параметра сайт відображатиме різні версії сторінки, наприклад різні кольори кнопок або фонові зображення. Це дозволяє нам збирати цінні дані про вподобання та поведінку користувачів.
Усі події реєструються в a .csv файлі, а також у базі даних MySQL, що дозволяє нам аналізувати дані та приймати обґрунтовані рішення щодо покращення сайту.
7) Файл functions.php
- Спеціальні типи публікацій і класифікація
Одним з ключових використань functions.php файлу було створення індивідуальних типів та таксономій пошти, які дозволили нам більш ефективно організувати контент. Замість того, щоб покладатися тільки на стандартну структуру WordPress (сторінки та повідомлення), ми представили індивідуальні типи для конкретного контенту, таких як тематичні дослідження, свідчення або функції продукту. Це не тільки підтримує наш контент краще організований, але також покращив досвід користувача шляхом полегшення навантаження та пошуку відповідної інформації.
Наприклад, щоб створити спеціальний тип публікації для тематичних досліджень, ми додали такий код у functions.php :
функція create_case_study_post_type() {
register_post_type( 'case_studies',
масив(
'мітки' =>масив(
'name' => __( 'Приклади'),
'singular_name' => __( 'Приклад')
),'public' => правда,
'has_archive' => правда,
'rewrite' => array('slug' => 'case-studies'),
)
);
}
add_action( 'init', 'create_case_study_post_type');
Це створило новий тип дописів під назвою «Приклади», які вели себе подібно до звичайних дописів, але з власним архівом і таксономічною структурою.
- Завантаження зовнішніх сценаріїв і стилів
Іншим важливим використанням functions.php було завантаження зовнішніх сценаріїв і стилів, гарантуючи, що на нашому веб-сайті є всі необхідні бібліотеки та фреймворки. Наприклад, ми інтегрували такі бібліотеки, як Slick.js для слайдерів і AOS (Animate on Scroll) для плавної анімації. Вибірково завантажуючи ці ресурси лише тоді, коли вони потрібні (наприклад, на певних сторінках або шаблонах), ми зменшили непотрібне роздування та покращили швидкість завантаження сторінок.
Ось як ми впоралися із завантаженням стилів і сценаріїв:
функція load_custom_scripts() {
// Завантажити слайдер Slick для певних шаблонів
if( is_page_template('template-slider.php') ) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
} // Завантаження анімації AOS на весь сайт
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri(). '/js/aos.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
За допомогою умовних перевірок (наприклад, is_page_template()), ми подбали про те, щоб непотрібні сценарії не завантажувалися на весь сайт, таким чином оптимізуючи продуктивність.
- Спеціальні шорткоди
Щоб покращити гнучкість для нетехнічних користувачів, які керують вмістом сайту, ми додали спеціальні короткі коди через functions.php . Ці короткі коди дозволяли користувачам легко вставляти складні функції або стилізовані елементи, не торкаючись коду. Наприклад, ми створили короткий код для додавання спеціальних кнопок будь-де на сайті:
[ВИДАЛЕНО]
Цей короткий код полегшив редакторам додавання кнопок із спеціальним текстом і URL-адресами, дозволяючи швидко коригувати, не порушуючи дизайн.
8) Керування SEO та швидкістю сайту
Основна увага під час капітального ремонту веб-сайту була спрямована на покращення SEO та загальної продуктивності сайту. Оригінальний сайт, створений за допомогою Elementor, мав проблеми з повільним часом завантаження та неоптимальною практикою SEO через роздутий код і неоптимізовані зображення.
Поліпшення SEO
Щоб переконатися, що наш новий сайт був зручним для пошукових систем, ми з самого початку запровадили кілька передових методів:
-
Семантичний HTML : ми ретельно структурували HTML сайту з належним використанням тегів заголовків (
,тощо), щоб пошукові системи могли легко проаналізувати та зрозуміти ієрархію вмісту. Це особливо важливо як для рейтингу SEO, так і для доступності. - Мета-теги та дані Open Graph : ми використали плагін Yoast SEO для обробки мета-заголовків, описів і даних Open Graph для спільного використання в соціальних мережах. Використовуючи Yoast, ми переконалися, що кожна сторінка та публікація мають оптимізовані метадані, що має вирішальне значення для видимості в пошуковій системі та рейтингу переходів із платформ соціальних мереж.
- Розмітка схеми : за допомогою файлу functions.php ми додали спеціальну розмітку схеми для структурованих даних, покращуючи те, як пошукові системи відображають наші сторінки в результатах пошуку. Наприклад, ми включили схеми для статей, тематичних досліджень і продуктів, допомагаючи пошуковим системам краще класифікувати наш вміст.
функція add_schema_markup() {
луна '
{
"@context": "http://schema.org",
"@type": "Організація",
"ім'я": "ConveyThis",
"УРЛ": «https://www.conveythis.com»,
"логотип": «https://www.conveythis.com/logo.png»,
"самеАс": [
"https://www.facebook.com/conveythis",
«https://twitter.com/conveythis»
]
}
";
}
add_action( 'вп-голова', ‘додавання схеми розмітки’);
Оптимізація швидкості сайту
Ефективність є критичним фактором не лише для взаємодії з користувачем, але й для рейтингу SEO. Ми зробили кілька кроків, щоб покращити швидкість сайту:
- Оптимізація зображень : ми використали сучасні формати зображень, такі як WebP , які пропонують кращі рівні стиснення, ніж традиційні формати, такі як PNG і JPEG. Усі зображення надавалися у відповідному розмірі відповідно до роздільної здатності екрана користувача, що забезпечувало швидке завантаження навіть на мобільних пристроях.
- Відкладене завантаження : реалізувавши відкладене завантаження для зображень, ми гарантували, що спочатку завантажуються лише зображення, видимі на екрані користувача. Додаткові зображення завантажувалися б під час прокручування користувачем, скорочуючи початковий час завантаження сторінки.
- Кешування та мініфікація: Ми використовували WP Rocket для кешування, мініфікації та стиснення файлів HTML, CSS та JavaScript . WP Rocket допоміг нам швидше завантажуватися, зменшивши загальний розмір файлу та надаючи статичні кешовані версії сторінок постійним відвідувачам.
9) Оптимізація та очищення бази даних
Старий веб-сайт накопичив значну кількість даних “junk” через роздутість Elementor’s і неефективну структуру бази даних. Щоб забезпечити безперебійну роботу нового сайту, ми провели ретельне очищення та оптимізацію бази даних.
- Видалення старих Elementor даних
Як згадувалося раніше, навіть після деактивації Elementor його стилі та налаштування все ще були вбудовані в базу даних. Ми використовували спеціальні запити, щоб видалити ці надлишкові дані та очистити базу даних. Крім того, ми видалили будь-які невикористані медіафайли, опублікували версії та прострочені перехідні процеси, які накопичилися з часом.
- Індексація бази даних
Ми також оптимізували базу даних, додавши індекси до часто запитуваних стовпців, забезпечивши швидшу та ефективнішу роботу запитів до бази даних. Наприклад, додавання індексу до post_date стовпець прискорив запити, пов’язані з останніми публікаціями, покращивши продуктивність сторінок нашого блогу.
Висновок
Рішення створити новий веб-сайт з нуля було зумовлене обмеженнями та неефективністю старого сайту. Просте перемикання теми не було життєздатним варіантом через невідповідності дизайну, роздуті стилі та проблеми з продуктивністю, спричинені Elementor. Створивши новий сайт із індивідуальною розробкою та розширеними спеціальними полями, ми створили більш ефективний, цілісний і професійний веб-сайт, який покращує взаємодію з користувачем, одночасно забезпечуючи спрощені оновлення та функції тестування A/B. Цей новий сайт забезпечує міцну основу для майбутнього зростання та вдосконалення.
Підсумуйте цей пост за допомогою:
Готові почати?
Переклад, набагато більше, ніж просто знання мов, це складний процес.
Дотримуючись наших порад і використовуючи ConveyThis, ваші перекладені сторінки будуть резонувати з вашою аудиторією, відчуваючи себе рідною для цільової мови.
Хоча це вимагає зусиль, результат є корисним. Якщо ви перекладаєте веб-сайт, ConveyThis може заощадити ваші години за допомогою автоматизованого машинного перекладу.
Спробуйте ConveyThis безкоштовно протягом 3 днів!
CONVEYTHIS