Как сделать и настроить страницу с 404 ошибкой на сайте. И для чего это нужно?)

Основы

Хорошие новости друзья, сегодня будет статья технического содержания, коих давненько не было на моем блоге, хотя именно с них и начинал.

А посвящена она будет созданию страницы с 404-й ошибкой на сайте.  Почему именно такая «свежая» тема, о которой никто никогда и нигде не писал?)

Дело в том что одна из моих постоянных читательниц написала письмо и попросила разобрать этот момент, я не смог отказать. А самое главное, указала мне на тот факт, что у самого 404-я страница практически голая, а это не порядок. Короче мне стыдно стало =)

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

Для начала немного теории.

Что такое страница с 404-й ошибкой и зачем она нужна?

Уверен вам не раз приходилось видеть подобную надпись, покоряя интернеты: Ошибка 404 — Страница не найдена.  Или в английском варианте  404 not found.

Так происходило, когда вы пытались перейти по ссылке на страницу, которую уже по каким-то причинам удалили с сервера (либо в результате технических ошибок она самоудалилась). Как вариант если вы наберете в конце адресной строки браузера абракадабру, допустите ошибку, то тоже туда попадете.

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

Теперь следующий вопрос.

Зачем создавать страницу с 404 ошибкой или как-то настраивать ее?

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

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

Зацените оригинальное решение на одном из строительных порталов 404 ошибка. Сколько уже лайков наставили =)

У шаблонов вордпресса уже имеется созданная страница 404. Она находится в файлах шаблона под названием 404.php. Вот какое содержание этого файла было у меня:

<?php get_header(); ?>
<div id="contentwrap">
<div>
<div id="content">
<h2 class='pagetitle'>Ошибка 404 - Страница не найдена</h2>
</div>
</div>
<?php get_sidebars(); ?>
</div>
<?php get_footer(); ?>

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

Не густо, как видите =) Из шаблона подключается хэдер, блоки для размещения контента, всего один заголовок h2 с названием ошибки, сайдбар и футер. И на том все.

Вот как это выглядело раньше, согласитесь не очень дружелюбно :

404 ошибка

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

Осталось лишь сделать страничку немного более дружелюбной =) Для этого решил добавить туда  картинку и немного текста, поисковую форму + немного ссылок на разделы сайта, которые могут заинтересовать посетителя.

Вот что в итоге получилось:

404 ошибкаХотя, зачем скрины, можете и сами посмотреть воочию — https://ruskweb.ru/404.php

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

Как создать страницу с 404 ошибкой по быстрому, и не возится вручную с html и оформлением?

Да очень просто — все внутреннее наполнение вы можете сделать в визуальном редакторе, в том самом, в котором пишете статьи.  Затем, когда все готово просто переключаетесь в html редактор кнопкой «Текст», копируете оттуда весь html код и вставляете его в файл 404.php

404 not found

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


Вот и все хитрости. Удачи вам с оформлением, будьте оригинальны, посетители оценят)

Вообще, в идеале, что бы пользователь никогда не попадал сюда по вашей вине, т.е. что бы не было битых ссылок на сайте и за его пределами, говорят это не очень хорошо сказывается на поисковой оптимизации =)

Проверить наличие битых ссылок на своем сайте можно с помощью плагина Broken Link Checker.  Так же подобную инфу по 404 ошибкам  можно увидеть в кабинетах вебмастера Яндекса или Гугла.

P. S. я не пропал, писать стал реже потому что приболел немного, только отхожу =) Кроме того выполняю сейчас заказ — делаю сайт-визитку для одной московской компании, так что времени маловато. Но вскоре вернусь)

Полезное по теме:

  1. Как создать сайт на WordPress — с чего начинать?
  2. Как узнать кто посещал мою страницу вконтакте
  3. Как сделать оптимизацию сайта под мобильные устройства в WordPress
  4. Как сделать хлебные крошки в WordPress (breadcrumb)

Комментариев: 54

  • Сто лет у тебя не было технических статей, взял на заметку. А то у мне я то же никак руки не дойдут сделать себе такую страничку.

    Ты еще напиши как заглушку на блог поставить без плагинов

    Ответить

  • Это как раз та самая страница. до которой у меня все руки не доходят. Еще на ЛБ ждала, что меня за это дело порогают, но тогда никто не заметил. А теперь и подавно пиннуть некому))))

    Ответить

  • Актуальная тема. Давненько слышал о 404 и хочу ее оформить. А тут все так просто и доступно наверное любому. Только бы маленькую подсказку. Конкретно в какое место вставлять полученный код?
    Думаю подредактировать строчку с заголовком «H2» и дальше вставить свой код или вообще заменить эту строчку своим кодом?

    Ответить

    • Александр, код вставлять туда, где в вашем файле 404.php начинается блок с контентом.
      В моем случае это после div id=»content».
      А вообще, вставляйте после заголовка, и не ошибетесь) Сам заголовок просто отредактируйте.

      Ответить

      • Спасибо! Понял. В ближайшее время обязательно займусь. Говорят что оформление этой страницы очень полезно. Теперь надеюсь справлюсь.

        Ответить

  • Сергей, можно сделать так, чтобы на 404-й странице отображались ссылки на несколько последних постов блога (но тут php код нужен), ссылка на карту блога. Можно и на страницу рассылки направить (если есть).

    Ответить

    • Да, конечно можно, кому как больше нравится =)
      У меня на 404й подключены сайдбар и футер, там уже эти элементы есть все в принципе. Насчет подписки не уверен — зачем человеку подписываться со страницы с ошибкой =) Он сначала должен с сайтом познакомится, убедиться что тут полезный и интересный материал.

      Ответить

  • Если посетитель попадает на 404 страницу, он до футера может и не дойти. 404-я как бы говорит человеку: «Брысь отсюда!» Вот я, например, у тебя до футера не дошел. Дело твое, конечно… На вкус и цвет товарища нет.

    Ответить

    • Кстати (таргет бланк) из ссылок в комментариях у тебя не настроен! Подкинул тебе немного работы!
      Помню твою статью о (таргет бланКЕ) авторов комментариев на блоге.
      Если честно, то у себя не реализовал только потому, что если посетитель начинает искать потерянную страницу через поисковик — это ещё круче! 😛

      Ответить

      • Да, спасибо, забыл после обновления блога прописать =) Нужно заново править после апдейта движка.

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

        Ответить

        • …»Помню твою статью о (таргет бланКЕ) авторов комментариев на блоге.
          Если честно, то у себя не реализовал только потому, что если посетитель начинает искать потерянную страницу через поисковик – это ещё круче! :razz:»…
          Проверенно временем. У меня на http://vipbloger.ru/ (мой любимый личный блог) посетители редкие, но постоянные. Только в этом и вижу смысл! Конверт офигенный, если люди понимают, что я не туфту и копирайт пишу. Тут соотношение посетителей и пользой — разные вещи!
          Ещё заметил, что лучшие комментаторы в плане покупок вообще не входят в категорию потенциальных покупателей. Вёл статистику по ситиадс, хостенко и другим партнёркам по почте и личности. Доход приносят абсолютно не знакомые!

          Ответить

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

            Ответить

  • Кстати, у меня тоже не настроена 404-я 🙂
    Надо же. Посмотрел, часто точкой входа бывает эта страница, так как в свое время удалил пару десятков статей с блога.

    Ответить

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

    Ответить

        • На самописных сайтах 404ю в htaccess прописывают. Но насколько я понял в WordPress это дело в самом движке прописано. Проверить в общем то не сложно — создай уникальную страницу 404.php помести в файлы шаблона и набери несуществующий адрес на блоге в строке браузера. Если вылезет именно твоя страница то все ок)

          Ответить

      • Ну да. У меня просто вопрос немного в другом, 404 страница она открывается как новая страница? Просто у вас на сайте она появляется вместе с меню наверху и панелью справа. Или это получается путём добавления:

        Ошибка 404 — Страница не найдена

        ?

        Ответить

            • Аркадий в статье написано — там в файле 404.php идет вызов функций которые вставляют футер, хедер и т.д.
              Это
              < ?php get_header(); ?>

              < ?php get_sidebars(); ?>

              < ?php get_footer(); ?>

              Ну и между хедером и сайдбаром сам контент уже прописывается

  • Спасибо за статью! Пригодилась. Страницу переделала, заодно на русский кое-что на ней перевела. Не подскажете в каком файле искать =читать далее= . чтобы перевести на русский эти слова

    Ответить

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