Почему мы создали новый веб-сайт с нуля: необходимая эволюция
Сделайте свой сайт многоязычным за 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 позволяет нам создавать гибкие разделы контента с такими блоками, как Контент 1…Контент 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. В зависимости от значения параметра сайт будет показывать разные версии страницы, например, разные цвета кнопок или фоновые изображения. Это позволяет нам собирать ценные данные о предпочтениях и поведении пользователей.
Все события регистрируются в.csvфайле, а также в базе данных MySQL, что позволяет нам анализировать данные и принимать обоснованные решения по улучшению сайта.
7) Файл functions.php
- Пользовательские типы постов и таксономии
Одним из ключевых применений файла functions.php было создание пользовательских типов записей и таксономий, что позволило нам более эффективно организовывать контент. Вместо того чтобы полагаться исключительно на структуру WordPress по умолчанию (страницы и записи), мы ввели пользовательские типы для определенного контента, такого как тематические исследования, отзывы или характеристики продукта. Это не только позволило лучше организовать наш контент, но и улучшило пользовательский опыт, упростив навигацию и поиск релевантной информации.
Например, чтобы создать пользовательский тип записи для тематических исследований, мы добавили следующий код в functions.php :
функция create_case_study_post_type() {
register_post_type( 'кейс_исследования',
множество(
'метки' =>множество(
'имя' => __( 'Исследования случаев' ),
'singular_name' => __( 'Исследование случая' )
),«публично» => правда,
'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 для определенных шаблонов
если( 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,
'пользовательская_кнопка'
);
вернуть ' ' . esc_html( $atts['label'] ) . ' ';
}
add_shortcode('custom_button', 'custom_button_shortcode');
Этот шорткод позволил редакторам легко добавлять кнопки с пользовательским текстом и URL-адресами, что позволило быстро вносить изменения, не нарушая дизайн.8) Управление SEO и скоростью сайта
Основное внимание во время перестройки сайта было уделено улучшению SEO и общей производительности сайта. Оригинальный сайт, созданный с помощью Elementor, имел проблемы с медленной загрузкой и неоптимальными методами SEO из-за раздутого кода и неоптимизированных изображений.
Улучшение 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/conveythis",
"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 его стили и настройки все еще были встроены в базу данных. Мы использовали пользовательские запросы, чтобы удалить эти избыточные данные и очистить базу данных. Кроме того, мы удалили все неиспользуемые медиафайлы, пост-ревизии и просроченные переходные процессы, которые накопились со временем.
- Индексация базы данных
Мы также оптимизировали базу данных, добавив индексы к часто запрашиваемым столбцам, гарантируя, что запросы к базе данных будут быстрее и эффективнее. Например, добавление индекса кдата_постколонка ускорила запросы, связанные с последними публикациями, повысив производительность страниц нашего блога.
Заключение
Решение создать новый сайт с нуля было обусловлено ограничениями и неэффективностью старого сайта. Простая смена темы не была жизнеспособным вариантом из-за несоответствий дизайна, раздутых стилей и проблем с производительностью, вызванных Elementor. Создав новый сайт с индивидуальной разработкой и расширенными пользовательскими полями, мы добились более эффективного, связного и профессионального сайта, который улучшает пользовательский опыт, обеспечивая при этом оптимизированные обновления и функциональность A/B-тестирования. Этот новый сайт обеспечивает прочную основу для будущего роста и улучшений.
Готовы начать?
Перевод — это гораздо больше, чем просто знание языков, это сложный процесс.
Следуя нашим советам и используя ConveyThis, ваши переведенные страницы найдут отклик у вашей аудитории и будут ощущаться как родные для целевого языка.
Хотя это требует усилий, результат стоит того. Если вы переводите веб-сайт, ConveyThis может сэкономить вам часы с помощью автоматизированного машинного перевода.
Попробуйте ConveyThis бесплатно в течение 7 дней!
CONVEYTHIS