Чому ми створили новий веб-сайт з нуля: необхідна еволюція
Зробіть свій сайт багатомовним за 5 хвилин
1) Чому ми створили новий веб-сайт і не змогли просто «змінити тему»
Коли ми вперше визначили потребу в змінах, завдання здавалося простим: «Змініть верхній блок і зробіть заклик до дії ефективнішим». На перший погляд це може здатися швидким рішенням, але незабаром ми зрозуміли, що це невелике завдання виявило набагато серйозніші основні проблеми зі структурою та дизайном сайту. Проблема була не лише в одному блоці; капітального ремонту потребувала вся архітектура сайту.
Наш веб-сайт створювався протягом тривалого часу, до нього додавалися різні сторінки з використанням різних дизайнів і макетів, без жодної об’єднуючої теми чи шаблону. Кожна сторінка була унікальною за своїм дизайном, що може здатися креативним, але призвело до серйозної проблеми: невідповідності. Якби ми пішли вперед і створили новий дизайн лише для верхнього блоку, зберігши решту сайту, як було, це означало б вручну оновити цей блок на понад 700 сторінках і публікаціях. Навіть гірше, цей ручний процес потрібно буде повторювати щоразу, коли ми хочемо внести майбутні зміни. Уявіть собі неефективність перегляду сотень сторінок, щоб на кожній з них були останні оновлення. Швидко стало зрозуміло, що продовжувати роботу зі старим сайтом не можна.
Окрім логістики оновлення кожної сторінки, ми мали враховувати загальний досвід користувачів. Сучасні користувачі очікують безперебійного, цілісного досвіду, коли вони відвідують веб-сайт. Якщо вони прокручують сторінку вниз і бачать, що дизайн непослідовний – у кожному блоці використовуються різні стилі – це створює роз’єднане та непрофесійне враження. Ще гірше, коли користувач переходить від однієї сторінки до іншої та помічає, що макет і дизайн зовсім інші, це посилює відчуття безладу.
Невідповідність вийшла за межі макета. Багато зображень на сайті були застарілими, погано оформленими або навіть неналежним чином згенерованими нейронними мережами. Ці зображення не відповідали сучасним стандартам дизайну, і їх заміна була ще одним складним завданням. Використання поганих зображень погано вплинуло на загальну якість сайту, залишаючи у користувачів негативне враження про продукт або послугу, які ми пропонуємо.
Не було простого способу всебічно оновити сайт за допомогою такого інструменту, як Elementor. Кожна сторінка та блок містили власні вбудовані стилі, тобто зміни не можна було вносити глобально. Якби ми хотіли оновити стиль сайту, нам довелося б переглядати кожну окрему сторінку та вручну оновлювати кожен блок, що зайняло б багато часу та було б неефективним. Маючи це на увазі, стало очевидним, що нашим єдиним рішенням було створити новий веб-сайт з нуля. Це дозволить нам перенести весь вміст, зберігаючи ті самі URL-адреси, але з новим узгодженим дизайном, який легко оновлювати.
2) Чому ми вирішили не використовувати Elementor
Elementor — один із найпопулярніших конструкторів сторінок для WordPress. На перший погляд, це чудовий інструмент, який дозволяє швидко та легко створювати сторінки. Однак після тривалої роботи з ним ми зіткнулися з кількома обмеженнями, які змусили нас відмовитися від Elementor і вибрати натомість веб-сайт, створений на замовлення.
Обмеження та виклики Elementor:
- Помилки та збої : Хоча Elementor пропонує багато корисних функцій, він не позбавлений технічних проблем. Наприклад, коли ми копіювали сторінку та намагалися її відредагувати, нова сторінка часто виглядала інакше, ніж оригінальна, навіть до внесення будь-яких змін. Часто виникали помилки з відображенням елементів, наприклад властивість «максимальна ширина зображення» не працювала належним чином. Ці збої ускладнювали забезпечення узгодженого стилю на сторінках.
- Забагато творчої свободи, що призводить до неузгодженості : однією з ключових переваг Elementor є можливість налаштовувати все. Однак ця гнучкість може бути палкою з двома кінцями, особливо коли над сайтом працює кілька редакторів. Непрофесіоналам легко ненавмисно створювати сторінки з непослідовним дизайном. Наприклад, ми бачили випадки, коли редактори використовували рожевий текст на рожевих кнопках або додавали літаючі помаранчеві трикутники на фоні, що призводило до безладного та заплутаного дизайну. Без чіткої системи дизайну стало неможливо підтримувати цілісну візуальну ідентичність.
- Обмежене налаштування для розширених функціональних можливостей : Хоча Elementor чудово справляється зі створенням базових сторінок із текстом і зображеннями, це стає складнішим, коли вам потрібно додати спеціальні функції. Ми часто були обмежені вбудованими блоками, які було важко налаштувати для більш складних функцій. Оскільки наші потреби виходили за межі базових макетів, обмеження Elementor ставали все більш очевидними.
- Роздутий код і проблеми з продуктивністю : метод створення сторінок Elementor передбачає надмірне вкладення елементів. Наприклад, Elementor автоматично генерує кількаконтейнери всередині іншихелементи, кожен зі своїм набором стилів. Це призводить до роздутої структури, яка негативно впливає на швидкість завантаження, продуктивність сторінки та, зрештою, рейтинг веб-сайту в SEO. Коли ми проводили тести швидкості, результати були стабільно поганими, і великою мірою в цьому був важкий код, створений Elementor.
- Відсутність можливостей тестування A/B : у сучасному цифровому середовищі тестування A/B є важливим для оптимізації взаємодії з користувачем. Однак Elementor не пропонує можливості показувати різні версії сайту різним користувачам. Усі бачать один і той самий сайт, що обмежує нашу можливість тестувати та точно налаштовувати елементи дизайну, як-от кольори, форми кнопок і фонові зображення. Без цієї функції ми не змогли б оптимізувати сайт на основі поведінки реальних користувачів.
- Роздуття бази даних : мабуть, одним із найсуттєвіших недоліків Elementor є те, як він обробляє стилі та вміст. Elementor зберігає стилі, вкладені структури та інші непотрібні теги, змішані з вмістом бази даних. Це призводить до роздутої бази даних, яка не очищається, навіть якщо Elementor вимкнено або видалено. Як наслідок, перехід на нову тему чи фреймворк не вирішує проблему – ці стилі залишаються вбудованими у сторінки, продовжуючи спричиняти проблеми.
Враховуючи всі ці проблеми, стало зрозуміло, що нам потрібне більш надійне рішення. Ми прийняли рішення створити новий незалежний веб-сайт без Elementor, вибравши більш стійкий і гнучкий підхід.
3) Як створити сторінку на новому сайті
Створення нового сайту з нуля дало нам можливість налагодити чистий, спрощений процес створення сторінок. У новій системі створити сторінку просто:
- Увійдіть до панелі адміністратора WordPress і натисніть Сторінки -> Додати нову сторінку .
- Ви побачите стандартний редактор WordPress, де ви можете писати або вставляти текст, додавати посилання та завантажувати зображення.
Цей процес простий, але гнучкий. Замість того, щоб покладатися на складну систему блоків Elementor, редактор вмісту в WordPress набагато чистіший, що дозволяє швидко оновлювати та легко налаштовувати. Під редактором є параметри для Advanced Custom Fields (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 . Ці короткі коди дозволяли користувачам легко вставляти складні функції або стилізовані елементи, не торкаючись коду. Наприклад, ми створили короткий код для додавання спеціальних кнопок будь-де на сайті:
функція custom_button_shortcode($atts) {
$atts = shortcode_atts(
масив(
'label' => 'Натисніть тут',
'url' => '#',
$atts,
'custom_button'
повернення ' ' . esc_html( $atts['label']) . ' ';
}
add_shortcode('custom_button', 'custom_button_shortcode');
Цей короткий код полегшив редакторам додавання кнопок із спеціальним текстом і 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",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head' , 'add_schema_markup' );
Оптимізація швидкості сайту
Ефективність є критичним фактором не лише для взаємодії з користувачем, але й для рейтингу SEO. Ми зробили кілька кроків, щоб покращити швидкість сайту:
- Оптимізація зображень : ми використали сучасні формати зображень, такі як WebP , які пропонують кращі рівні стиснення, ніж традиційні формати, такі як PNG і JPEG. Усі зображення надавалися у відповідному розмірі відповідно до роздільної здатності екрана користувача, що забезпечувало швидке завантаження навіть на мобільних пристроях.
- Відкладене завантаження : реалізувавши відкладене завантаження для зображень, ми гарантували, що спочатку завантажуються лише зображення, видимі на екрані користувача. Додаткові зображення завантажувалися б під час прокручування користувачем, скорочуючи початковий час завантаження сторінки.
- Кешування та мініфікація : ми використовували WP Rocket для кешування, мініфікації та стиснення файлів HTML, CSS і JavaScript. WP Rocket допоміг нам досягти швидшого часу завантаження, зменшивши загальний розмір файлу та обслуговуючи статичні кешовані версії сторінок для постійних відвідувачів.
9) Оптимізація та очищення бази даних
Старий веб-сайт накопичив значну кількість «сміттєвих» даних через роздутість Elementor і неефективну структуру бази даних. Щоб забезпечити безперебійну роботу нового сайту, ми провели ретельне очищення та оптимізацію бази даних.
- Видалення старих даних Elementor
Як згадувалося раніше, навіть після дезактивації Elementor його стилі та налаштування все ще були вбудовані в базу даних. Ми використовували спеціальні запити, щоб видалити ці зайві дані та очистити базу даних. Крім того, ми видалили всі невикористані мультимедійні файли, опубліковані редакції та прострочені перехідні процеси, які накопичилися з часом.
- Індексація бази даних
Ми також оптимізували базу даних, додавши індекси до часто запитуваних стовпців, забезпечивши швидшу та ефективнішу роботу запитів до бази даних. Наприклад, додавання індексу до post_date стовпець прискорив запити, пов’язані з останніми публікаціями, покращивши продуктивність сторінок нашого блогу.
Висновок
Рішення створити новий веб-сайт з нуля було зумовлене обмеженнями та неефективністю старого сайту. Просте перемикання теми було неможливим через невідповідності дизайну, роздуті стилі та проблеми з продуктивністю, спричинені Elementor. Створивши новий сайт із індивідуальною розробкою та розширеними користувацькими полями, ми створили більш ефективний, згуртований і професійний веб-сайт, який покращує взаємодію з користувачами, забезпечуючи оптимізовані оновлення та функції A/B-тестування. Цей новий сайт забезпечує міцну основу для майбутнього зростання та вдосконалення.
Готові почати?
Переклад, набагато більше, ніж просто знання мов, це складний процес.
Дотримуючись наших порад і використовуючи ConveyThis, ваші перекладені сторінки резонуватимуть у вашої аудиторії, відчуваючи себе рідною для цільової мови.
Хоча це вимагає зусиль, результат приносить задоволення. Якщо ви перекладаєте веб-сайт, ConveyThis може заощадити ваші години за допомогою автоматичного машинного перекладу.
Спробуйте ConveyThis безкоштовно протягом 3 днів!
CONVEYTHIS