Как создать собственную страницу ошибки 404 в WordPress

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

Зачем создавать пользовательскую страницу 404 для WordPress?

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

Во-первых, давайте посмотрим на общую страницу, которую мы пытаемся избежать.

Общая страница 404

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

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

Страница 404 должна дать вам больше информации. Это должно быть полезно. Он должен предоставлять инструменты, ссылки, советы или некоторую помощь. Вы же не хотите, чтобы вас оставили одного в проходе, не зная, куда идти дальше.

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

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

1. Google

Страница 404 Google (не WordPress) проста. Это небольшая область содержимого в центре экрана. Сообщение просто сообщает об ошибке и предоставляет изображение робота, разбитого на части. Он не предоставляет другой информации, но это Google, поэтому все, что вам нужно сделать, это ввести что-то еще в строке поиска.

2. WordPress.org

На странице 404 WordPress.org отображаются их стандартные верхний и нижний колонтитулы. В теле есть заголовок, показывающий, что страница не найдена, краткое объяснение с легким юмором, а затем список ссылок, которые помогут вам. Ссылки нацелены на то, чтобы быть полезными.

3. WordPress.com

Страница 404 WordPress.com удаляет верхний и нижний колонтитулы. Он показывает графику, заголовок, описание с интерактивными ссылками, поле поиска и логотип WordPress.com. Ссылки полезны.

4. Элегантные темы

Страница 404 Elegant Themes (потому что я знаю, что вы все равно будете искать) показывает заголовок ET, большой заголовок с небольшим пояснением и кнопку в качестве CTA. Отсюда у вас есть доступ практически ко всему.

5. Двадцать двадцать один

Тема WordPress Twenty Twenty-One имеет страницу 404, которая использует ваше основное меню и меню нижнего колонтитула. У него большое название. У тела есть краткое описание и поле поиска. Линии используются для укладки. Фон соответствует сайту.

6. Двадцать двадцать

Тема WordPress Twenty Twenty отображает верхний и нижний колонтитулы. В теле есть большой заголовок в центре, объяснение и поле поиска. Все используют цвета темы.

7. Слабость

На странице 404 Slack (не WordPress) в центре отображается поле с информацией об ошибке со ссылкой на справочный центр. Все меню тоже здесь. Самое интересное - это фон. Это мультяшный фон, который прокручивается вправо или влево, следуя за курсором мыши. По экрану движутся анимированные животные.

8. Amazon

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

Содержание страницы 404

Итак, что нужно странице 404? В приведенных выше примерах мы видим несколько общих элементов.

Во-первых, он должен быть полезным. Он не должен просто сообщать посетителю об ошибке. Он должен сказать, что означает ошибка. Представьте себе, что в вашей машине загорается индикатор ошибки. Ваш первый вопрос: «Что это значит?» Непредоставление полезной информации об ошибке расстраивает.

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

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

Это так просто. 404 страницы не нуждаются в большом количестве контента. Достаточно, чтобы быть полезным.

Пример выше включает:

• Цвета фона и узоры, которые соответствуют веб-сайту /
• Заголовок с коротким сообщением об ошибке.
• Большой текст, показывающий, что это страница 404.
• Несколько кнопок, указывающих посетителю направление.

Это просто, но стильно и полезно. Это все, что вам нужно.

Давайте посмотрим, как создать настраиваемую страницу 404 для WordPress, используя только что обсужденные идеи контента.

Как создать собственную страницу 404 в WordPress с помощью конструктора тем Divi

Divi Theme Builder позволяет легко создавать и назначать страницу 404. В Elegant Themes есть несколько готовых страниц 404, которые вы можете скачать бесплатно. Вы можете настроить их как хотите. Это отличный способ начать работу над дизайном страницы 404. Если хотите, можете построить его с нуля.

Приведенный выше пример взят из пакета макетов Fourth Theme Builder. В блоге ET доступно множество страниц 404. Чтобы найти их, выполните поиск по запросу «пакет макетов для конструктора тем» или ознакомьтесь с ними здесь:

• Загрузите первый БЕСПЛАТНЫЙ пакет для создания тем для Divi
• Загрузите второй БЕСПЛАТНЫЙ пакет для создания тем для Divi
• Загрузите Третий БЕСПЛАТНЫЙ пакет для создания тем для Divi
• Загрузите Четвертый БЕСПЛАТНЫЙ пакет для создания тем для Divi
• Загрузите Пятый БЕСПЛАТНЫЙ пакет для создания тем для Divi
• Загрузите шестой БЕСПЛАТНЫЙ пакет для создания тем для Divi

Импорт пользовательской страницы 404 в конструктор тем Divi

Вы найдете Divi Theme Builder на панели управления WordPress, перейдя в Divi > Theme Builder . Откроется страница, на которой вы можете создавать или импортировать шаблоны и назначать их. В правом верхнем углу вы увидите значок импорта. Щелкните этот значок, чтобы импортировать шаблон страницы 404.

Примечание. Для получения руководств по использованию Divi Theme Builder выполните поиск по запросу «построитель тем» в блоге Elegant Themes.

Откроется модальное окно, в котором вы можете импортировать свой шаблон. Выберите « Импорт» и перейдите к своему файлу в разделе « Выбрать файл» . Параметры для переопределения значений по умолчанию и назначений выбраны по умолчанию. Я рекомендую оставить их выбранными. Щелкните, чтобы импортировать шаблон в нижней части модального окна. Я импортирую страницу 404 для Crowdfunding Layout Pack.

При импорте страницы 404 она назначается автоматически. Затем щелкните значок редактирования, чтобы открыть конструктор.

Теперь внесите изменения в каждый модуль, добавив ссылки, изображения, цвета, текст и т. Д. Сохраните макет и щелкните значок x в правом верхнем углу, чтобы закрыть конструктор.

Наконец, сохраните изменения, чтобы применить шаблон. Теперь у вас есть настраиваемая страница 404.

Создание пользовательской страницы 404 с помощью Divi Theme Builder

В построителе тем выберите, чтобы добавить новый шаблон.

Это открывает настройки шаблона. Прокрутите вниз и выберите Страница 404 в разделе Другое . Затем нажмите « Создать шаблон» . Настройки шаблона закроются.

Теперь вы можете создать страницу 404. Большинство из них не используют верхний или нижний колонтитулы. Выберите Добавить собственное тело .

Здесь показаны два варианта выбора, позволяющие создать собственное тело или добавить его из библиотеки. Выберите « Создать собственное тело» .

Создайте страницу 404 с помощью Divi Builder как обычно. Сохранить и выйти.

Наконец, сохраните ваши изменения. Готово.

Завершение мыслей о создании пользовательской страницы 404 для WordPress

Это наш взгляд на то, как создать собственную страницу 404 для WordPress. 404 страницы должны быть полезными. К сожалению, стандартная страница WordPress 404 бесполезна и оставляет желать лучшего. К счастью, вы можете создать свою собственную страницу 404 с помощью Divi Theme Builder.

Используя информацию, которую мы предоставили здесь, вы на правильном пути к созданию красивой страницы 404, которая предоставит пользователям отличный опыт и будет потрясающе выглядеть при этом.

Ждем вашего ответа. Вы создали настраиваемую страницу 404 для своего веб-сайта WordPress? Расскажите нам о нашем опыте в комментариях.

Лучшее изображение через Letters-Shmetters / shutterstock.com