ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

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

fish1

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

А посвящена она будет созданию страницы с 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 ошибкаХотя, зачем скрины, можете и сами посмотреть воочию – http://ruskweb.ru/404.php

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

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

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

404 not found

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

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

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

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

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

Понравилась статья? Жми лайк:

54 комментариев

  1. Кстати да, весьма полезный совет по поводу визуального редактора для создания 404 страницы.

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  2. Артем пишет:

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

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Я заглушками не пользовался. Но насколько понимаю там ничего сложного не должно быть – создаешь страничку с заглушкой и делаешь на нее редирект в htacces или скриптами какими =)

    [Ответить]

    Артем отвечает:

    Может быть, тогда на один раз можно и плагин поставить…

    [Ответить]

    Ольга отвечает:

    Не надо рассказывать Артему про заглушки, иначе он заглушит свой блог и совсем писать перестанет))))

    [Ответить]

    Сергей Кобзарь отвечает:

    Точно, что Фил, что Артем, заглохли надолго)

    [Ответить]

    Артем отвечает:

    Не я не заглох, все дела и дела. То сайтик сверстать, то книгу отформатировать. Вот и не хватает времени. Попробую к выходным статью выложить, а то не пишутся они у меня…
    За всеми слежу, так что не думайте – “Балшой брат следит за вами” Все вижу, всех читаю…. ;-)

    А вот Фил провалился куда-то…

    [Ответить]

    Сергей Кобзарь отвечает:

    ой кстати да, книга.. совсем забыл =)

    [Ответить]

  3. Даша пишет:

    А у меня прикольней 404 страница))

    [Ответить]

    Ольга отвечает:

    Специально пошла смотреть))) Действительно симпатичная страничка.

    [Ответить]

    Сергей Кобзарь отвечает:

    Привет Дарья.
    Да кто ж спорит, все таки ты художник, тебе положено креативить на всю катушку =)

    [Ответить]

  4. Ольга пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Если б мне не напомнили, я бы и сам про нее не вспомнил наверное :smile: По сути делов там минут на 10-20, я в тебя верю Оль, ты сделаешь)

    [Ответить]

  5. Kristina пишет:

    Спасибо за полезный совет, а то с этим ХТМЛ я вообще не дружу =)

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  6. Макс пишет:

    Довольно-таки полезная штуковина.

    [Ответить]

    Сергей Кобзарь отвечает:

    Ну вреда от нее точно не будет =)

    [Ответить]

  7. Александр Викторович пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Александр Викторович отвечает:

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

    [Ответить]

  8. Сантехник пишет:

    Решил не париться и сделал “повторный захват”!!!
    http://vipbloger.ru/нету такой страницы

    [Ответить]

    Сергей Кобзарь отвечает:

    [Ответить]

    Сантехник отвечает:

    Думаю, чем проще – тем эффективнее!

    [Ответить]

    Сергей Кобзарь отвечает:

    тоже верно. я теперь хожу по блоггерам, смотрю у кого какие 404 страницы, интересно =)

    [Ответить]

  9. Виктор пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  10. Виктор пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    и это верно =) я больше урок спешил сделать, а не страничку наполнить толком, возможно позже доведу до ума

    [Ответить]

  11. Сантехник пишет:

    Ну вот и у меня фантазия заиграла .
    Честно – придумал сам!
    http://vipbloger.ru/нету_такой_страницы :razz:

    [Ответить]

    Сантехник отвечает:

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

    [Ответить]

    Сергей Кобзарь отвечает:

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

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

    [Ответить]

    Сантехник отвечает:

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

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    :smile: жду много счастья

    [Ответить]

    Сантехник отвечает:

    БУДЕТ!!!

    [Ответить]

  12. Дмитрий пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Тогда тем более стоит задуматься о хорошей 404й =)

    [Ответить]

  13. Александр пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Александр советую потратить 30-40 минут и сделать хорошую 404ю страничку)

    [Ответить]

    Александр отвечает:

    Да я подругому сделал, использовал редирект, с помощью которого с несуществующих страниц осуществляется автоматический переход на главную страницу.

    [Ответить]

  14. Александр пишет:

    Сергей, а как быть если 404 страница не 404.пхп? У меня какая-то другая система? Просто появляется надпись не найдено. Как ее подшаманить?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Александр отвечает:

    Создать- то ее не трудно, а как будет проходить перенаправление?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  15. Аркадий пишет:

    А можно исходники посмотреть?

    [Ответить]

    Сергей Кобзарь отвечает:

    Аркадий, исходники чего? Моей страницы 404?

    [Ответить]

    Аркадий отвечает:

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

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

    ?

    [Ответить]

    Аркадий отвечает:

    путем добавления:

    !==

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

    ==!

    [Ответить]

    Аркадий отвечает:

    Блин..:) Вообщем кода с наличием – header,footer,slider and etc?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    < ?php get_sidebars(); ?>

    < ?php get_footer(); ?>

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

    [Ответить]

  16. Софья пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Все зависит от вашего шаблона, Софья, так не угадаешь наверняка)

    [Ответить]

Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: