Оформляем 404-страницу на сайте

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

Рассмотрим плагин 404 Page by SeedProd. С помощью данного плагина можно создать красивую страницу страницу ошибки, с произвольным содержанием.

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

После установки плагина переходим в раздел Настройки404 Page by SeedProd.

На странице настройки 4 вида вкладок. Работать будем с тремя из них.

Настройки плагина 404 Page by SeedProd
Рисунок 1. Настройки плагина 404 Page by SeedProd

 

Page Settings (см. 1, рис. 1) – настройки содержимого страницы и включение пользовательской страницы ошибки.

Desing Settings (см. 2, рис. 1) – настройки внешнего вида страницы. Здесь мы задаем фоновое изображение, цвет текста и ссылок дополнительных элементов (кнопки соц. сетей и формы поиска).

Live Preview (см. 3, рис. 1) – предспросмотр страницы, здесь можно посмотреть, как выглядит 404-страница. Чтобы увидеть последние изменения, не забываем нажать кнопку Save All Changes.

Настройка содержимого страницы ошибки

Укажите заголовок (Headline) страницы ошибки (см 1, рис.2) и основное сообщение для пользователей (Message) (см. 2, рис. 2). Визуальный редактор позволит оформить полноценную статью.

Рисунок 2. Настройка содержимого 404-страницы

Также есть возможность добавить на страницу дополнительные элементы:

Форму поиска. Если хотите, чтобы на странице выводилась форма поиска, установите галочку “Enabled WordPress Search Form” (см. 1, рис. 3).

Также можно указать ссылки на профили Facebook (см. 3, рис. 3)  и Twitter (см. 2, рис. 3).

Примечание. Кнопки социальных сетей мы можем вставить в текст статьи с помощью ссылок-картинок. 

В благодарность автору плагина можно поставить внизу надпись “Powered By SpeedProd” (см. 4, рис. 3).

Рисунок 3. Настройка содержимого 404-страницы
Рисунок 3. Настройка содержимого 404-страницы

Мы наполнили нашу страничку, теперь сохраняем настройки – нажимаем на кнопку Save All Changes. И можно уже смотреть промежуточный результат – нажимаем на вкладку Live Preview (см. 3, рис. 1).

У меня получилось вот такая страничка:

Пользовательская 404-страница с помощью плагина 404 Page by SeedProd
Рисунок 4. Пользовательская 404-страница с помощью плагина 404 Page by SeedProd

Теперь посмотрим, какие же возможности изменения дизайна нам предоставляются. Переходим к вкладке “Desing Settings” (см. 2, рис. 1).

В качестве фона вы можете задать:

  1. Произвольное изображение (см. 2, рис. 5).
  2. Скриншот главной страницы вашего сайта (см. 1, рис. 5). Пример можно посмотреть на рисунке 4.
  3. Залить цветом (см. 3, рис. 5).

Я написала настройки в порядке приоритета, т.е. если вы указали изображение, то будет показано именно оно, даже есть стоит галочка Background Screenshot. Одноцветный фон вы получите только, если у вас не установлена галочка и не задано  фоновое изображения.

Если вы остановились на варианте с фоном-картинкой, то у вас в запасе есть следующие возможности.

Масштабировать (растянуть) изображение по размеру экрана – ставим галочку Responsive Background (см.4, рис. 5).

Если изображение не масштабируется, то можно указать, будет ли оно повторяться (см. 5, рис. 5), где будет размещаться (см. 6, рис. 5) и будет ли прокручиваться вместе со страницей (см. 7, рис. 5). Поэкспериментируйте и найдите для себя идеальный вариант оформления.

Рисунок 5. Настройка дизайна 404-страницы
Рисунок 5. Настройка дизайна 404-страницы

Настройки текста вам понадобятся, только если вы размещаете у себя форму поиска и кнопки социальных сетей. Link Color – цвет кнопок и ссылок. Text Font – шрифт. Но я думаю, что можно вполне обойтись без этих блоков, и тогда эти настройки вам не понадобятся.

Рисунок 6. Настройка форматирования текста 404-страницы
Рисунок 6. Настройка форматирования текста 404-страницы

 

Альтернативное решение

Для создания 404-страницы на базе стандартной страницы WordPress отличным решением будет плагин 404 to 301.
Краткая подсказка о настройке плагина:
Redirect type (см. 1, рис. 6) – указываем тип редиректа. Оставляем по умолчанию 301 Redirect (SEO).
Redirect to (см. 2, рис. 6) – куда переходит пользователь, если он попадает на несуществующую страницу. В зависимости от вашего выбора будет изменяться следующий пункт формы.
Если вы указали Existing Page, т.е. существующая страница, вам предложат выбрать из списка Select the page  (см. 3, рис. 6) страницу сайта (вам заранее нужно создать нужную страницу). Если выбрать Custom URL, то в поле ниже вы сможете ввести адрес любой странички, как на вашем сайта, так и на другом ресурсе. No Redirect – отключает функцию переадресации на страницу ошибки.
Анализировать ошибочные страницы позволяет возможность ведения лога – Log 404 Errors (см. 4, рис. 6). Enabled Error Logs – журнал ошибок включен, Disable Error Logs – выключен.
Если вы хотите получать отчеты о страница ошибок на почту, то поставьте галочку Email notification (см. 5, рис. 6), в поле Email Adress (см. 6, рис. 6) введите адрес своей почты.
(см. 1, рис. 6)
Поле Excloude paths (см. 7, рис. 6) – значение оставьте по умолчанию.

Настройки плагина "404 to 301"
Рисунок 6. Настройка плагина “404 to 301”

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

Плагины, с которыми возникли небольшие трудности

Custom 404 Pro

Плагин прост в настройке и хорошо работает, если не включать журнал ошибок. При подключении журнала странички загружаются очень долго, что очень не удобно.

All 404 Redirect to Homepage

Совсем простой плагин. Нужно только задать включена или выключена пользовательская страница ошибки и указать адрес, на который следует перевести пользователя в случае, если он попал на несуществующую страницу. Работает быстро, единственный недостаток – это сообщение на страничке настройки плагина “Unable to save data!”. Если не обращать на него внимание, то все работает нормально.

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

Светлана, спасибо за такой замечательный вопрос! Задать свои вопросы можно на сайте, в нашей группе ВКонтакте  или мне на почту mail@heartweb.ru.

Анна Воронина

2 comments on “Оформляем 404-страницу на сайте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *