Почему мы создали новый веб-сайт с нуля: необходимая эволюция

Подведите итог этому посту следующим образом: 14 мин чтения

ЧатGPT Недоумение Грок Google ИИ

1) Почему мы создали новый веб-сайт и не смогли просто “сменить тему”

Когда мы впервые определили необходимость изменений, задача казалась простой: “Изменить верхний блок и сделать призыв к действию более эффективным.” На первый взгляд это может показаться быстрым решением, но вскоре мы поняли, что эта небольшая задача выявила гораздо более серьезные проблемы со структурой и дизайном сайта. Проблема была не в одном блоке, а в том, что вся архитектура объекта нуждалась в капитальном ремонте.

Наш веб-сайт создавался с течением времени, на него добавлялись разные страницы с использованием различных дизайнов и макетов, без какой-либо единой темы или шаблона. Каждая страница была уникальна по своему дизайну, что могло показаться креативным, но приводило к серьезной проблеме: непоследовательности. Если бы мы пошли дальше и создали новый дизайн только для верхнего блока, сохранив при этом остальную часть сайта такой, какая она есть, это означало бы ручное обновление этого блока на более чем 700 страницах и сообщениях. Хуже того, этот ручной процесс придется повторять каждый раз, когда мы захотим внести будущие изменения. Представьте себе неэффективность необходимости просматривать сотни страниц, следя за тем, чтобы на каждой из них были последние обновления. Быстро стало ясно, что продолжение работы на старом объекте не будет устойчивым.

Помимо логистики обновления каждой страницы, нам нужно было учитывать общий пользовательский опыт. Сегодня пользователи ожидают бесперебойного и целостного опыта при посещении веб-сайта. Если они прокрутят страницу вниз и увидят, что дизайн непоследователен – каждый блок использует разные стили – это создает разрозненное и непрофессиональное впечатление. Хуже того, когда пользователь переходит с одной страницы на другую и замечает, что макет и дизайн совершенно разные, это усиливает чувство беспорядка.

Несоответствие выходило за рамки макета. Многие изображения на сайте устарели, плохо стилизованы или даже неправильно сгенерированы нейронными сетями. Эти изображения не соответствовали современным стандартам дизайна, и их замена была еще одной сложной задачей. Использование плохих изображений плохо отражалось на общем качестве сайта, оставляя у пользователей негативное впечатление о продукте или услуге, которые мы предлагаем.

Не существовало простого способа всестороннего обновления сайта с помощью такого инструмента, как Elementor. Каждая страница и блок содержали свои собственные встроенные стили, а это означало, что изменения нельзя было вносить глобально. Если бы мы хотели обновить стиль сайта, нам пришлось бы просматривать каждую страницу и вручную обновлять каждый блок, что отнимало бы много времени и было бы неэффективно. Учитывая это, стало очевидно, что единственным решением для нас было создание нового веб-сайта с нуля. Это позволило бы нам передавать весь контент, сохраняя те же URL-адреса, но с новым, последовательным и легко обновляемым дизайном.

2) Почему мы решили не использовать Elementor

Elementor — один из самых популярных конструкторов страниц для WordPress. На первый взгляд это кажется отличным инструментом, позволяющим быстро и легко создавать страницы. Однако после интенсивной работы с ним мы столкнулись с рядом ограничений, которые заставили нас принять решение отойти от пункта Elementor и вместо этого выбрать специально созданный веб-сайт.

Elementor’ Ограничения и проблемы:

1. Ошибки и сбои: Хотя Elementor предлагает множество полезных функций, он не лишен технических проблем. Например, когда мы копировали страницу и пытались ее отредактировать, новая страница часто выглядела иначе, чем оригинал, даже до внесения каких-либо изменений. Часто возникали ошибки в отображении элементов, например, свойство “максимальная ширина изображения” работало неправильно. Эти сбои затрудняли обеспечение единообразного стиля на всех страницах.
2. Слишком много творческой свободы, что приводит к непоследовательности: Одним из ключевых преимуществ Elementor’ является возможность настраивать все. Однако такая гибкость может оказаться палкой о двух концах, особенно когда на сайте работают несколько редакторов. Непрофессионалам легко непреднамеренно создавать страницы с непоследовательным дизайном. Например, мы видели случаи, когда редакторы использовали розовый текст на розовых кнопках или добавляли летающие оранжевые треугольники на заднем плане, что приводило к загроможденному и запутанному дизайну. Без строгой системы дизайна стало невозможно поддерживать целостную визуальную идентичность.
3. Ограниченная настройка для расширенной функциональности: Хотя Elementor отлично подходит для создания базовых страниц с текстом и изображениями, это становится более сложным, когда вам нужно добавить пользовательские функции. Мы часто оказывались ограничены встроенными блоками, которые было трудно настроить для более сложных функций. По мере того, как наши потребности выходили за рамки базовых макетов, ограничения Elementor’ становились все более очевидными.
4. Раздутый код и проблемы с производительностью: Elementor’s метод построения страниц вводит чрезмерное вложение элементов. Например, Elementor автоматически генерирует несколько <div> контейнеры внутри других <div> элементы, каждый со своим набором стилей. Это приводит к раздутой структуре, которая отрицательно влияет на скорость загрузки, производительность страницы и, в конечном итоге, на SEO-рейтинг сайта. Когда мы проводили тесты скорости, результаты были неизменно плохими, и во многом виноват тяжелый код, сгенерированный Elementor.
5. Нет возможностей A/B-тестирования: В современном цифровом ландшафте A/B-тестирование имеет решающее значение для оптимизации пользовательского опыта. Однако Elementor не предоставляет возможности показывать разные версии сайта разным пользователям. Все видят один и тот же сайт, что ограничивает наши возможности по тестированию и настройке элементов дизайна, таких как цвета, формы кнопок и фоновые изображения. Без этой функциональности мы не смогли бы оптимизировать сайт на основе реального поведения пользователей.
6. Раздувание базы данных: Возможно, одним из самых существенных недостатков Elementor является то, как он обрабатывает стили и контент. Elementor хранит стили, вложенные структуры и другие ненужные теги, смешанные с контентом в базе данных. Это приводит к раздутой базе данных, которая не очищается даже при отключении или удалении Elementor. В результате переход на новую тему или фреймворк не решает проблему – эти стили остаются встроенными в страницы, продолжая вызывать проблемы.

Учитывая все эти проблемы, стало ясно, что нам необходимо более надежное решение. Мы приняли решение создать новый, независимый веб-сайт без Elementor, выбрав более устойчивый и гибкий подход.

3) Как создать страницу на новом сайте

Создание нового сайта с нуля дало нам возможность наладить чистый и оптимизированный процесс создания страниц. В новой системе создание страницы не представляет сложности:

1. Войдите в панель администратора WordPress и нажмите Страницы -> Добавить новую страницу.
2. Вы увидите стандартный редактор WordPress, в котором можно писать или вставлять текст, добавлять ссылки и загружать изображения.

Этот процесс прост, но гибок. Вместо того чтобы полагаться на сложную систему блоков Elementor’, редактор контента в WordPress намного чище, что позволяет быстро обновлять его и легко настраивать. Ниже редактора приведены настройки для Расширенные пользовательские поля (ACF), которые уже настроены для поддержания согласованности на всем сайте.

ACF позволяет нам создавать гибкие разделы контента с такими блоками, как Содержание 1…Содержание 15, где вы можете легко задать заголовок, текст, изображение и метки кнопок для каждого раздела страницы. Эти блоки автоматически чередуют расположение изображений и текста, гарантируя, что макет останется визуально привлекательным без необходимости ручной настройки.

Для изображений мы реализовали систему сопоставления цветов, которая автоматически применяет градиент к основным цветам сайта. Это гарантирует, что все изображения соответствуют общей эстетике. Для логотипов или скриншотов, где цвета должны оставаться нетронутыми, есть опция “сохранить цвета”, которая переопределяет градиент.

Эта система упрощает управление контентом, сохраняя при этом единообразие дизайна на всех страницах.

4) Как создать новый пост

Создание постов на новом сайте осуществляется по тому же упрощенному процессу, что и создание страниц, с несколькими ключевыми отличиями:

• Сообщения имеют URL-адреса, которые включают ../блог/.., отличая их от страниц.
• На правой боковой панели блок автоматически отображает три последние статьи, помогая поддерживать динамичность и интересность блога.

Шаблон для всех постов находится в файле template-parts/content/content-single.php, который управляет структурой и макетом каждой записи в блоге. Этот единый шаблон позволяет легко обновлять его и гарантирует, что все публикации соответствуют одним и тем же принципам дизайна.

5) Расширенные пользовательские поля (ACF)

ACF сыграл важную роль в разработке нашего нового веб-сайта. Это позволяет нам создавать пользовательские поля, которыми можно легко управлять через панель администратора WordPress. Поля, подобные содержание_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

The функции.php Файл в WordPress часто неправильно понимается как ограниченный задачами, связанными с блогом. Однако этот файл — гораздо больше, чем просто утилита для управления публикациями или функциями блога; он служит основой для всех пользовательских функций на сайте. В нашем случае мы использовали функции.php файл для добавления расширенных функций, оптимизации производительности и управления скриптами и настройками всего сайта.

Вот обзор того, как функции.php файл сыграл жизненно важную роль в нашей разработке:

• Пользовательские типы постов и таксономии

Одно из ключевых применений функции.php Целью файла было создание пользовательских типов постов и таксономий, что позволило нам более эффективно организовывать контент. Вместо того чтобы полагаться исключительно на структуру WordPress по умолчанию (страницы и сообщения), мы ввели пользовательские типы для определенного контента, например, тематические исследования, отзывы или характеристики продукта. Это не только позволило лучше организовать наш контент, но и улучшило пользовательский опыт, упростив навигацию и поиск нужной информации.

Например, чтобы создать собственный тип сообщения для тематических исследований, мы добавили следующий код функции.php:

function create_case_study_post_type() {

  register_post_type( 'case_studies',

    array(

           'labels' =>``array(

              'name' => __( 'Case Studies' ),

          'singular_name' => __( 'Case Study' )

        ),

            'public' => true,

           'has_archive' => true,

           'rewrite' => array('slug' => 'case-studies'),

       )

  );

}

add_action( 'init', 'create_case_study_post_type' );Это создало новый тип постов под названием “Case Studies”, который вел себя аналогично обычным постам, но имел собственную структуру архива и таксономии.

• Загрузка внешних скриптов и стилей

Еще одно важное применение функции.php заключалась в загрузке внешних скриптов и стилей, гарантируя, что на нашем сайте есть все необходимые библиотеки и фреймворки. Например, мы интегрировали такие библиотеки, как Slick.js для слайдеров и АОС (Анимация при прокрутке) для плавной анимации. Выборочно загружая эти ресурсы только тогда, когда они были необходимы (например, на определенных страницах или шаблонах), мы сократили ненужное раздувание и улучшили скорость загрузки страниц.

Вот как мы справились с загрузкой стилей и скриптов:

function load_custom_scripts() {

  // Load Slick slider for specific templates

   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 );

   }

   // Load AOS animations site-wide

   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()), мы позаботились о том, чтобы ненужные скрипты не загружались на весь сайт, тем самым оптимизируя производительность.

• Пользовательские короткие коды

Чтобы повысить гибкость управления контентом сайта для нетехнических пользователей, мы добавили пользовательские короткие коды через функции.php. Эти короткие коды позволяли пользователям легко вставлять сложные функции или стилизованные элементы без необходимости прикасаться к коду. Например, мы создали шорткод для добавления пользовательских кнопок в любое место сайта:

[ОТРЕДАКТИРОВАНО]

Этот шорткод позволил редакторам легко добавлять кнопки с пользовательским текстом и URL-адресами, что позволило быстро вносить изменения, не нарушая дизайн.

8) Управление SEO и скоростью сайта

Основное внимание при обновлении веб-сайта уделялось улучшению SEO и общей производительности сайта. Исходный сайт, созданный с использованием Elementor, имел проблемы с медленной загрузкой и неоптимальными методами SEO из-за раздутого кода и неоптимизированных изображений.

Улучшение SEO

Чтобы сделать наш новый сайт оптимизированным для SEO, мы с самого начала внедрили несколько передовых практик:

• Семантический HTML: Мы тщательно структурировали HTML-код сайта с правильным использованием тегов заголовков (<h1>, <h2>и т. д.), гарантируя, что поисковые системы смогут легко анализировать и понимать иерархию контента. Это особенно важно как для рейтинга SEO, так и для доступности.
• Метатеги и данные Open Graph: Мы использовали Йоаст SEO плагин для обработки метазаголовков, описаний и данных Open Graph для обмена в социальных сетях. Используя Yoast, мы гарантировали, что каждая страница и публикация имеют оптимизированные метаданные, что имеет решающее значение для видимости в поисковых системах и показателей кликабельности на платформах социальных сетей.
• Разметка схемы: Использование функции.php В файле мы добавили пользовательскую разметку схемы для структурированных данных, улучшив способ отображения наших страниц поисковыми системами в результатах поиска. Например, мы включили схему для статей, тематических исследований и продуктов, что помогло поисковым системам лучше классифицировать наш контент.

function add_schema_markup() {
  echo '<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "ConveyThis",
    "url": "https://www.conveythis.com",
    "logo": "https://www.conveythis.com/logo.png", "sameAs": [ "https://www.facebook.com/conveythis", "https://twitter.com/conveythis" ] } </script>'; } add_action( 'wp_head', 'add_schema_markup' );

Оптимизация скорости сайта

Производительность является решающим фактором не только для пользовательского опыта, но и для рейтинга SEO. Мы предприняли несколько шагов для повышения скорости сайта:

• Оптимизация изображения: Мы использовали современные форматы изображений, такие как ВебП, которые предлагают лучшую степень сжатия, чем традиционные форматы, такие как PNG и JPEG. Все изображения были поданы в соответствующем размере в зависимости от разрешения экрана пользователя, что обеспечивало быстрое время загрузки даже на мобильных устройствах.
• Ленивая загрузка: Реализовав отложенную загрузку изображений, мы гарантировали, что изначально будут загружены только те изображения, которые видны на экране пользователя. Дополнительные изображения будут загружаться по мере прокрутки пользователем, что сократит время начальной загрузки страницы.
• Кэширование и минимизация: Мы использовали WP Ракета для кэширования, минификации и сжатия HTML, CSS и JavaScript файлы. WP Rocket помог нам добиться более быстрой загрузки за счет уменьшения общего размера файла и предоставления статических кэшированных версий страниц постоянным посетителям.

9) Оптимизация и очистка базы данных

На старом сайте накопилось значительное количество “мусорных” данных из-за раздутости Elementor’ и неэффективной структуры базы данных. Чтобы обеспечить бесперебойную работу нового сайта, мы провели тщательную очистку и оптимизацию базы данных.

• Удаление старых Elementor данных

Как упоминалось ранее, даже после деактивации Elementor его стили и настройки по-прежнему были встроены в базу данных. Мы использовали пользовательские запросы, чтобы удалить эти лишние данные и очистить базу данных. Кроме того, мы удалили все неиспользуемые медиафайлы, исправления постов и просроченные переходные процессы, накопившиеся с течением времени.

• Индексирование базы данных

Мы также оптимизировали базу данных, добавив индексы к часто запрашиваемым столбцам, гарантируя, что запросы к базе данных будут более быстрыми и эффективными. Например, добавление индекса к post_date колонка ускорила запросы, связанные с последними публикациями, улучшив производительность страниц нашего блога.

Заключение

Решение создать новый сайт с нуля было обусловлено ограничениями и неэффективностью старого сайта. Простое изменение темы оказалось нецелесообразным из-за несоответствий в дизайне, раздутых стилей и проблем с производительностью, вызванных Elementor. Создав новый сайт с индивидуальной разработкой и расширенными пользовательскими полями, мы создали более эффективный, целостный и профессиональный веб-сайт, который улучшает пользовательский опыт, одновременно обеспечивая оптимизированные обновления и функциональность A/B-тестирования. Этот новый сайт обеспечивает прочную основу для будущего роста и улучшений.