Нужен многоязычный сайт?
Сделайте свой сайт многоязычным за 5 минут
Нет данных карты
1) Почему мы создали новый сайт и не могли просто «сменить тему»
Когда мы впервые определили необходимость изменений, задача казалась простой: «Изменить верхний блок и сделать призыв к действию более эффективным». На первый взгляд, это может показаться быстрым решением, но вскоре мы поняли, что эта небольшая задача выявила гораздо более крупные базовые проблемы со структурой и дизайном сайта. Проблема была не только в одном блоке; вся архитектура сайта нуждалась в капитальном ремонте.
Наш веб-сайт создавался с течением времени, с добавлением разных страниц с использованием различных дизайнов и макетов, без какой-либо объединяющей темы или шаблона. Каждая страница была уникальна по своему дизайну, что могло показаться креативным, но привело к значительной проблеме: непоследовательности. Если бы мы пошли дальше и сделали новый дизайн только для верхнего блока, оставив остальную часть сайта такой, какой она была, это означало бы ручное обновление этого блока на более чем 700 страницах и постах. Хуже того, этот ручной процесс пришлось бы повторять каждый раз, когда мы хотели бы внести будущие изменения. Представьте себе неэффективность необходимости прочесывать сотни страниц, гарантируя, что на каждой из них есть последние обновления. Быстро стало ясно, что продолжать работать со старым сайтом не будет устойчивым.
Помимо логистики обновления каждой страницы, нам пришлось учитывать общий пользовательский опыт. Сегодня пользователи ожидают бесшовного, связного опыта при посещении веб-сайта. Если они прокручивают страницу и видят, что дизайн непоследователен — каждый блок использует разные стили — это создает разрозненное и непрофессиональное впечатление. Еще хуже, когда пользователь переходит с одной страницы на другую и замечает, что макет и дизайн совершенно разные, это усиливает ощущение беспорядка.
Несоответствие распространялось не только на макет. Многие изображения на сайте были устаревшими, плохо оформленными или даже неправильно сгенерированными нейронными сетями. Эти изображения не соответствовали современным стандартам дизайна, и их замена была еще одной сложной задачей. Использование плохих изображений плохо отражалось на общем качестве сайта, оставляя у пользователей негативное впечатление о предлагаемом нами продукте или услуге.
Не существовало простого способа всестороннего обновления сайта с помощью такого инструмента, как Elementor. Каждая страница и блок содержали свои собственные встроенные стили, а это означало, что изменения нельзя было вносить глобально. Если бы мы хотели обновить стиль сайта, нам пришлось бы просматривать каждую страницу и вручную обновлять каждый блок, что отнимало бы много времени и было бы неэффективно. Учитывая это, стало очевидно, что единственным решением для нас было создание нового веб-сайта с нуля. Это позволило бы нам передавать весь контент, сохраняя те же URL-адреса, но с новым, последовательным и легко обновляемым дизайном.
2) Почему мы решили не использовать Elementor
Elementor — один из самых популярных конструкторов страниц для WordPress. На первый взгляд это кажется отличным инструментом, позволяющим быстро и легко создавать страницы. Однако после интенсивной работы с ним мы столкнулись с рядом ограничений, которые заставили нас принять решение отойти от пункта Elementor и вместо этого выбрать специально созданный веб-сайт.
Elementor’ Ограничения и проблемы:
- Ошибки и сбои: Хотя Elementor предлагает множество полезных функций, он не лишен технических проблем. Например, когда мы копировали страницу и пытались ее отредактировать, новая страница часто выглядела иначе, чем оригинал, даже до внесения каких-либо изменений. Часто возникали ошибки в отображении элементов, например, свойство “максимальная ширина изображения” работало неправильно. Эти сбои затрудняли обеспечение единообразного стиля на всех страницах.
- Слишком много творческой свободы, что приводит к непоследовательности: Одним из ключевых преимуществ Elementor’ является возможность настраивать все. Однако такая гибкость может оказаться палкой о двух концах, особенно когда на сайте работают несколько редакторов. Непрофессионалам легко непреднамеренно создавать страницы с непоследовательным дизайном. Например, мы видели случаи, когда редакторы использовали розовый текст на розовых кнопках или добавляли летающие оранжевые треугольники на заднем плане, что приводило к загроможденному и запутанному дизайну. Без строгой системы дизайна стало невозможно поддерживать целостную визуальную идентичность.
- Ограниченная настройка для расширенной функциональности: Хотя Elementor отлично подходит для создания базовых страниц с текстом и изображениями, это становится более сложным, когда вам нужно добавить пользовательские функции. Мы часто оказывались ограничены встроенными блоками, которые было трудно настроить для более сложных функций. По мере того, как наши потребности выходили за рамки базовых макетов, ограничения Elementor’ становились все более очевидными.
- Раздутый код и проблемы с производительностью: Elementor’s метод построения страниц вводит чрезмерное вложение элементов. Например, Elementor автоматически генерирует несколько
контейнеры внутри другихэлементы, каждый со своим набором стилей. Это приводит к раздутой структуре, которая отрицательно влияет на скорость загрузки, производительность страницы и, в конечном итоге, на SEO-рейтинг сайта. Когда мы проводили тесты скорости, результаты были неизменно плохими, и во многом виноват тяжелый код, сгенерированный Elementor. - Нет возможностей A/B-тестирования: В современном цифровом ландшафте A/B-тестирование имеет решающее значение для оптимизации пользовательского опыта. Однако Elementor не предоставляет возможности показывать разные версии сайта разным пользователям. Все видят один и тот же сайт, что ограничивает наши возможности по тестированию и настройке элементов дизайна, таких как цвета, формы кнопок и фоновые изображения. Без этой функциональности мы не смогли бы оптимизировать сайт на основе реального поведения пользователей.
- Раздувание базы данных: Возможно, одним из самых существенных недостатков Elementor является то, как он обрабатывает стили и контент. Elementor хранит стили, вложенные структуры и другие ненужные теги, смешанные с контентом в базе данных. Это приводит к раздутой базе данных, которая не очищается даже при отключении или удалении Elementor. В результате переход на новую тему или фреймворк не решает проблему – эти стили остаются встроенными в страницы, продолжая вызывать проблемы.
Учитывая все эти проблемы, стало ясно, что нам необходимо более надежное решение. Мы приняли решение создать новый, независимый веб-сайт без Elementor, выбрав более устойчивый и гибкий подход.
3) Как создать страницу на новом сайте
Создание нового сайта с нуля дало нам возможность создать чистый, оптимизированный процесс создания страниц. В новой системе создание страницы простое:
- Войдите в панель администратора WordPress и нажмите Страницы -> Добавить новую страницу .
- Вы увидите стандартный редактор WordPress, в котором можно писать или вставлять текст, добавлять ссылки и загружать изображения.
Этот процесс прост, но гибок. Вместо того чтобы полагаться на сложную систему блоков Elementor’, редактор контента в WordPress намного чище, что позволяет быстро обновлять его и легко настраивать. Ниже редактора приведены настройки для Расширенные пользовательские поля (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 . Эти шорткоды позволили пользователям легко вставлять сложные функциональные возможности или стилизованные элементы без необходимости прикасаться к коду. Например, мы создали шорткод для добавления пользовательских кнопок в любом месте сайта:
[УДАЛЕНО]
Этот шорткод позволил редакторам легко добавлять кнопки с пользовательским текстом и 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»,
"логотип": «https://www.conveythis.com/logo.png",
"Самы": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
";
}
add_action( 'wp _head', "добавить схему разметки");
Оптимизация скорости сайта
Производительность является критическим фактором не только для пользовательского опыта, но и для рейтингов SEO. Мы предприняли несколько шагов для улучшения скорости сайта:
- Оптимизация изображения : мы использовали современные форматы изображений, такие как WebP , которые обеспечивают лучшую степень сжатия, чем традиционные форматы, такие как PNG и JPEG. Все изображения были представлены в соответствующем размере в зависимости от разрешения экрана пользователя, что обеспечивает быструю загрузку даже на мобильных устройствах.
- Ленивая загрузка : Внедрив ленивую загрузку для изображений, мы гарантировали, что изначально загружались только те изображения, которые видны на экране пользователя. Дополнительные изображения загружались по мере прокрутки страницы пользователем, что сокращало время начальной загрузки страницы.
- Кэширование и минификация: Мы использовали WP Rocket для кэширования, минификации и сжатия файлов HTML, CSS и JavaScript . WP Rocket помог нам ускорить время загрузки, уменьшив общий размер файла и предоставляя статические кэшированные версии страниц постоянным посетителям.
9) Оптимизация и очистка базы данных
На старом сайте накопилось значительное количество “мусорных” данных из-за раздутости Elementor’ и неэффективной структуры базы данных. Чтобы обеспечить бесперебойную работу нового сайта, мы провели тщательную очистку и оптимизацию базы данных.
- Удаление старых Elementor данных
Как упоминалось ранее, даже после деактивации Elementor его стили и настройки по-прежнему были встроены в базу данных. Мы использовали пользовательские запросы, чтобы удалить эти лишние данные и очистить базу данных. Кроме того, мы удалили все неиспользуемые медиафайлы, исправления постов и просроченные переходные процессы, накопившиеся с течением времени.
- Индексация базы данных
Мы также оптимизировали базу данных, добавив индексы к часто запрашиваемым столбцам, гарантируя, что запросы к базе данных будут быстрее и эффективнее. Например, добавление индекса к дата_пост колонка ускорила запросы, связанные с последними публикациями, повысив производительность страниц нашего блога.
Заключение
Решение создать новый сайт с нуля было обусловлено ограничениями и неэффективностью старого сайта. Простое изменение темы оказалось нецелесообразным из-за несоответствий в дизайне, раздутых стилей и проблем с производительностью, вызванных Elementor. Создав новый сайт с индивидуальной разработкой и расширенными пользовательскими полями, мы создали более эффективный, целостный и профессиональный веб-сайт, который улучшает пользовательский опыт, одновременно обеспечивая оптимизированные обновления и функциональность A/B-тестирования. Этот новый сайт обеспечивает прочную основу для будущего роста и улучшений.
Подведем итог этой публикации следующим образом:
Готовы начать?
Перевод — это гораздо больше, чем просто знание языков, это сложный процесс.
Следуя нашим советам и используя ConveyThis, ваши переведенные страницы найдут отклик у вашей аудитории, чувствуя себя родными для целевого языка.
Хотя это требует усилий, результат приносит удовлетворение. Если вы переводите веб-сайт, ConveyThis может сэкономить вам часы с помощью автоматизированного машинного перевода.
Попробуйте ConveyThis бесплатно в течение 3 дней!
CONVEYTHIS