2

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

 

Здравствуйте, друзья. Сегодня решил изменить дизайн страницы “Ошибка 404” на своем блоге. Как я это сделал, и что получилось в итоге, читайте дальше.

  • Во-первых, для чего нужна данная страница. Она информирует посетителя сайта о том, что страница не существует, или неправильно набран URL- адрес в поисковой строке. Бывают такие ситуации, когда пользователь переходит по ранее сохраненной ссылке ведущей  на определенную страницу вашего сайта, или кликает по вашей ссылке, размещенной на стороннем ресурсе. Но вместо необходимой страницы пользователь попадает на страницу ошибки. Такое происходит, если неправильно сохранен или скопирован адрес страницы или вы изменили ее адрес. Например,  вы присвоили странице  другую рубрику или внесли изменения в названии. Часто неправильные, никуда не ведущие ссылки размешают в комментариях.Такие ссылки еще называют “битыми ссылками” и от них желательно избавляться, потому-что они отрицательно влияют на юзабилити и  продвижение сайта.
  • Во-вторых, страница ошибки 404 предлагает посетителю ресурса выполнить определенные действия для устранения причины ошибки. В стандартных шаблонах, обычно предлагается вернуться  на главную страницу сайта или воспользоватся формой поиска.

Разработчики шаблонов особенно не заморачиваются как сделать страницу ошибки 404 более привлекательной  и применяют стандартные решения. Их можно понять. Сложно выполнить такой внешний вид и функционал страницы, который устраивает всех.

Как сделать страницу ошибки 404 .

Посмотрите, как скромно и некрасиво выглядела страница ошибки 404  у меня на блоге,  до внесения изменений.

Как сделать страницу ошибки 404

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

Перед тем как начать изменять внешний вид страницы, я накидал эскиз. Посмотрите, что у меня получилось:

 Как сделать страницу ошибки 404 проект

Поясню, что я хотел увидеть на своей странице.

  1.   Шапка сайта. Пользователь должен сразу понимать, где он находится.
  2.  Меню сайта. У меня меню сайта будет отображаться как в шапке сайта, так и подвале. Тем самым посетителю сайта будет предложена навигация по сайту в начале и в конце страницы.
  3.  Мотивирующая картинка, которая позволит задержать посетителя на странице и изучить ее содержание.
  4. Крупная надпись “Ошибка 404”. Сразу сообщает, что-то пошло не так!
  5.   Сайдбар сайта. Позволяет заполнить пустое место на странице справа. А также позволяет показать привычную форму поиска (6) и вывести виджет “Рубрики”(7). Тем самым предоставляем посетителю дополнительные возможности поиска и навигации на сайте. В дальнейшем в сайдбаре будут расположены рекламные материалы, которые также будет видеть пользователь.
  6.  Форма поиска по сайту. Как я уже отметил, одна форма поиска будет расположена в сайдбаре, на привычном для пользователей месте. Вторая форма поиска расположена под мотивирующей картинкой и сопровождается призывом воспользоватся ей.
  7. Рубрики сайта. Дополнительная навигация.
  8. На главную страницу. Размещена ссылка для перехода на главную страницу сайта, также с призывающим текстом.
  9. Последние статьи. У меня они расположены также в двух местах. Под картинкой с поясняющим текстом и  в подвале сайта (10). Я специально сделал по два места расположения формы “Поиск”, “Меню сайта” и “Последние статьи”. По мере развития блога будут меняться виджеты в подвале и сайдбаре сайта. И для того чтобы пользователю оставался хотя бы один вариант перехода на другую страницу,  было выполнено дублирование.
  10. Подвал сайта. Как и сайдбар, позволит менять виджеты и тем самым изменять внешний вид и возможности страницы ошибки 404.

Далее, давайте перейдем непосредственно к технической части создания новой страницы ошибки.

Заходим в админ панель вашего сайта и переходим:  Консоль(1)=> Внешний вид(2) => Шаблон ошибки 404(3). Вы увидите код  страницы ошибки на своем  шаблоне сайта.

Как сделать страницу ошибки 404 панель редактирования

 

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

 Вот так выглядел мой старый код, который был установлен в теме сайта.

Как сделать страницу ошибки 404 старый код

Где:

(1) Код вывода шапки сайта.

(2) Сообщение “Ошибка 404” в виде заголовка н1.

(3) Сообщение , что адрес страницы не правильный и предложение воспользоваться поиском по сайту.

(4) Код вывода формы поиска.

Вот и все! Согласитесь довольно лаконично, скучно и не удобно!

Давайте изменим этот код на новый.

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

2. Вставляем картинку на ваш сайт. Это можно просто сделать через админку.  Заходите  Админ панель=> Записи(1) => Новая запись => Добавить медиафайл(3)

Как сделать страницу ошибки 404 изображение

Далее после добавления картинки в редакторе записи переходите из режима “Визуально” в режим “Текст”(1)

Как сделать страницу ошибки 404 kartinka-v-redaktore

В режиме текст вы увидите код с адресом вашей картинки. Скопируйте этот код и сохраните его в блокноте.

Чтобы было понятно, давайте я сразу покажу, какой код страницы ошибки получился у меня и объясню все по пунктам.

1

Выводит шапку сайта

2

Для каждого шаблона сайта может отличаться. Вы можете его посмотреть в редакторе Внешний вид => Редактор => Отдельная страница(Page.php).

3.

Вставляем свою картинку на страницу. Путь до картинки на хостинге берем из заранее сохраненного файла ( Мой адрес страницы который я взял из редактора ;  https://sergeyneznamov.ru/wp-content/uploads/2016/10/Error-404.png)

4.

“Не переживайте и попробуйте воспользоваться формой поиска на сайте” текст с призывом использовать форму поиска на сайте.

5.  

Выводит форму поиска.

6.

“Вы можете перейти на Главную страницу” текст и ссылка для перехода на главную страницу. (Вместо “https://sergeyneznamov.ru” вставляете адрес главной страницы своего сайта.)

7.

“Посмотрите полный список всех статей на Карте сайта” -текст и ссылка для перехода на страницу с картой сайта. (Вместо “https://sergeyneznamov.ru/karta-sayta/” вставляете адрес своей страницы с картой сайта.)

8.

“Предлагаю посмотреть свежие статьи блога” -текст с предложением перейти на последние статьи блога. 9.

Код для вывода последних статей блога. Цифра “5” показывает количество статей, которые будут показаны. Вы можете поставить свое количество статей, изменяя цифру.

10.

Обычные закрывающие теги.

11.  

Выводит подвал сайта (footer).

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

1.

Вставка категорий блога.

2.

Вывод архивов.

3.

Вывод ссылок.

Теперь моя страница “Ошибка 404” выглядит намного солидней и привлекательней.

novaya-stranitsa-oshibki-404

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

  1.   Custom 404 Error Page — позволяет создавать и настраивать страницу ошибки из админ панели.
  2.  Redirection – перенаправляет посетителя на указанную вами страницу. Может отслеживать все ошибки 404.
  3.   404 Notifier – плагин присылает вам на e-mail сообщение о том, что появилась страница с ошибкой 404.
  4.   Smart 404 – плагин выдает страницы с похожими URL-адресами, вместо 404 страницы.

Ну вот, наверное и все. Я постарался максимально подробно описать один из способов, как сделать красивую страницу ошибки 404 в wordpress. Интересно узнать ваше мнение, как вы изменили свою страницу. Всего вам доброго! С уважением!

P.S. В ближайшей статье я расскажу как настроить и найти проиндексированные страницы с ошибкой 404. Следите за обновлением блога.

комментария 2
  1. admin
    15.01.2018 в 14:49

    Пожалуйста, применяйте!

  2. Семион Стронговиц
    15.01.2018 в 14:46

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

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