Платформа для привлечения клиентов из интернета

Апгрейд 404 — делаем красивую страницу об ошибке

Пару дней назад я случайно наткнулся на страницу 404 у одного блогера. Она полностью была на английском языке. Тут я решил посмотреть какая же страница у меня на блоге. А получилось, что она ничем не отличается. Я подумал, что это неправильно. И буквально вчера сделал небольшой апгрейд своей 404-страницы.

страница 404

Вы можете посмотреть на нее, например, скопировав и вставив этот URL https://sosnovskij.ru/111 в строку вашего браузера. А какая она у вас?

Вообщем что я там изменил? Я, во-первых, написал по-русски, что человек попал не туда и дал ссылку на главную. Это вполне естественно, но есть не на всех блогах. Во-вторых, ниже я вставил список самых популярных тем на блоге и посоветовал их прочитать.

Это, конечно, хорошо, а как это сделать-то? А сделать это обычно проще простого.

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

1) Вначале надо скачать ваш файл со 404-страницей (путь domen.com/wp-content/themes/ваша-тема/404.php. Часто используется именно этот файл.

2) Затем перевести все что вы хотите на русский язык или дописать что-то свое. Надо переводить именно то, что непосредственно показывается на вашей странице 404. Редактируйте файлы wordpress в правильном редакторе. Я, например, использую NotePad++.

3) Загрузить файл обратно на сервер.

Программа минимум выполнена. Но это все равно обычная страница 404 только переведенная. Идти можно и дальше, а именно:

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

1
<?php include (TEMPLATEPATH . '/searchform.php'); ?>

2) Вывод популярных статей (если у вас стоит соответствующий плагин).

1
<?php akpc_most_popular(); ?>

3) Вывод категорий

1
<?php wp_list_cats(); ?>

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

веселая страница 404

смешная страница 404

страница 404

Те, которые пробовали и пытались, но у них ничего не вышло,  пишите в комментариях в чем проблемы. Я постараюсь помочь ;-).

Рейтинг
1 звезда2 звезды3 звезды4 звезды5 звезд (2 голос., в среднем: 5,00 из 5)
Загрузка...
Отзывов уже 79:
Написать комментарий
  1. 1. Андрей

    Все правильно. Страницу 404 надо делать «красивую». Вот у димка не особо blog.dimok.ru/1232e2ded, а у Шакина уже повеселей shakin.ru/1232e2ded. Так же видел и просто пустые страницы 404. У них наверно вообще нет такого файла в шаблоне :x

  2. 2. valeriy www.betexpert.ru

    Простите, но может быть аПгрейд (upgrade) ? ;-)

  3. 3. Святослав expee.ru

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

    Например, хорошая страница ошибки на хабре: habrahabr.ru/asjdjashdjashd/

  4. 4. Duna fire-game.ru

    А ещё можно банеры какие-нить влепить:) Адсенс правда вроде запрещает, но что-нибудь ещё наверняка можно.

  5. 5. Павел www.shapranov.ru/blog

    Тоже хотел написать пост на эту тему)

    Посмотрите мою кстати ;)

  6. 6. Linar www.url.by

    Павел, посмотрел Вашу страницу 404 улыбнулся. Прикольно :razz: Я тоже настроил у себя эту страничку: url.by/404.php. Только у меня еще и такие страницы имеются, например, url.by/article/7866 . То есть здесь когда-то была размещена статья, но она была удалена. Получается мне надо сделать редирект подобных страниц на url.by/404.php?

  7. 7. Sosnovskij sosnovskij.ru

    valeriy, безусловно «П». Черт меня дернул. Спасибо, что сообщили ;)
    Павел, отличная страничка. Еще бы открывалась до конца :idea:

  8. 8. Sosnovskij sosnovskij.ru

    Linar, да. Несуществующие страницы должны выдавать 404.

  9. 9. Linar www.url.by

    Только программист из меня никакой, поэтому я не знаю как это сделать. Прочитав статьи, сделал вывод, что мне придется каждую страницу, которая была удалена, прописывать в .htaccess вот так: Redirect 301 /article/7866 url.by/404.php. Я правильно понял? Или можно это как-то по-другому сделать?

  10. 10. Павел www.shapranov.ru/blog

    Sosnovskij, странно, у меня грузится)

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

  11. 11. Nick Rifmer konkursy-stihov.narod.ru

    Интересно, скоро я наконец-то переделаю свою 404 ..)) никак взяться не могу =/

  12. 12. Linar www.url.by

    Sosnovskij, еще надо исправить: «И буквально вчера сделал небольшой абгрейд своей страницы 404.»

  13. 13. Sosnovskij sosnovskij.ru

    Павел, я имел в виду дырка, которая не до конца открыта ;)
    Linar, попробуйте в .htaccess вписать «ErrorDocument 404 url.by/404.php» (без ковычек). Может поможет.

  14. 14. Блог белорусской семьи tuta.by

    Похвастаться супер оригинальной страницей 404 не могу, но все же она у меня существует уже как месяца полтора… кому интересно можете заглянуть tuta.by/3543421451 )))

  15. 15. blogavod www.blogavod.ru

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

  16. 16. Роман

    Юмор на высоте.!

  17. 17. Linar www.url.by

    А вообще зачем делать страницу 404 оригинальной. У нее другое предназначение. Она должна помочь посетителю сайта найти требуемую информацию или как минимум не покинуть Ваш сайт.

  18. 18. Andrew gblog.zzl.org

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

  19. 19. Николай advuser.blogspot.com

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

  20. 20. Святослав expee.ru

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

  21. 21. Sosnovskij sosnovskij.ru

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

  22. 22. Валентин valeoblog.ru

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

  23. 23. Lingvaroom www.lingvaroom.ru

    Попыталась проверить, как выглядит моя страница 404 — меня перенаправляют на главную. Хотя сам файл страницы есть. Как это можно исправить?

  24. 24. Sosnovskij sosnovskij.ru

    Lingvaroom, видимо в файле стоит редирект на главную страницу. Киньте файл мне на почту или скопируйте сюда в комментарии. Разбиремся ;)

  25. 25. Lingvaroom www.lingvaroom.ru

    Почему-то в комментарии не отобразился весь код. Отправлю на почту.

  26. 26. Святослав expee.ru

    Сделал себе 404: expee.ru/404 :)

  27. 27. Sosnovskij sosnovskij.ru

    Святослав, посмеялся от души. Отличная страничка ;-)

  28. 28. site-katalog site-katalog.ru

    когда попадаешь на веселую страницу 404, даже настроение повышается :)

  29. 29. Андрей bysmeta.ru

    Спасибо отличная статья как раз то что искал.

  30. 30. Xstroy xstroy.com

    Не помешало бы исправить на 404-й:
    «Миссия моего дневника-» или «Миссией моего дневника является». И лучше с новой строки.

  31. 31. Sosnovskij sosnovskij.ru

    Xstroy, спасибо, поправил ;-)

  32. 32. Linar www.url.by

    После прочтения Вашего поста изменил страницу 404. Сегодня зашел в Яндекс.Вебмастер и эта страница теперь с ошибкой: HTTP-статус: Ресурс не найден (404). Список страниц, исключённых роботом при обходе сайта. Причиной исключения может быть ошибка при загрузке или обработке страницы. Кроме того, в поисковый индекс не попадают страницы, запрещённые в файле robots.txt и т.п. Исключение страниц из индекса не всегда является ошибкой в настройках сайта. Вы можете указать степень серьёзности той или иной причины исключения в Настройках.

  33. 33. Sosnovskij sosnovskij.ru

    Linar, ну так это страница, которая отдает ошибку 404 — зачем роботу ее индексировать? :smile:

  34. 34. mozgolom vpravmozgi.ru

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

  35. 35. Linar www.url.by

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

  36. 36. Alex@Macenko.com macenko.com

    А вообще, должна она присутствовать 404, но лучше, чтоб ее вообще не видели клиенты сайта

  37. 37. Sosnovskij sosnovskij.ru

    Alex@Macenko.com, в идеале, конечно, да. Но бывают пользователи, либо сами ошибаются, либо статьи куда-нибудь переносится. А редирект на главную — не лучший вариант ;)

  38. 38. paralax13 nibru.ru

    Alex@Macenko.com, если пользователь ошибся при наборе ссылки, то ему обязательно об этом нужно сообщить, чтобы не возникало путаницы: хотел попасть на одну страницу, а в итоге попал на совершенно другую (чаще всего на главную). Хотя можно сделать проверку на опечатки в набранной ссылке и попробовать либо отредиректить на предполагаемую правильную страницу, либо на 404-ой предложить список вероятных ссылок, куда метил пользователь.

  39. 39. Алексей makvak.com/ru

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

  40. 40. Ismail pro.ucoz.org

    Хм… я тоже думал как-то, поставить, что-то стильное и интересное… но как говорят: все гениальное — просто, решил все сделать просто. вот моя страница ошибки 404: pro.ucoz.org/404

  41. 41. Ян stupid-blog.ru

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

  42. 42. Alex

    А как вам такая 404-я
    postrlive.ru/error/404.html
    Прикольно придумали: ошибка будет исправлена через 404 секунды… :idea:

  43. 43. Sosnovskij sosnovskij.ru

    Alex, да, оригинальная страничка. :smile:

  44. 44. SEOman www.seostuff.org.ua

    Хороший вариант также — вывод поискового результата гугла основанного на «основных» ключевых словах вашего сайта.

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

  45. 45. Валерий rabotaisam.ru

    :razz:
    я другим путем пошел, сделал свою данным методом: rabotaisam.ru/error-404.html

  46. 46. Боксик

    Особенно улыбнула картинка со сперматозоидами… :) Наверное, нужно и себе на сайт втулить… :)

  47. 47. Дмитрий vtouchphone.ru

    оригинально))) ;-)

  48. 48. sidash sidash.ru

    ;-) сегодня переделываю 404!)
    вот мой вариант sidash.ru/404 :grin:

  49. 49. Sosnovskij sosnovskij.ru

    sidash, симпатичная страничка :smile:

  50. 50. Strikestar www.webliberty.ru

    А у меня вопросик возник :grin: . Почему вордпресс не отдает ошибку 404 если в строке адреса странички в конце вставить цифры? Например если сравнить site.ru/test/ и site.ru/test/11/ то при втором запросе с цифрами нет ошибки 404 и отдается содержание site.ru/test/ по адресу с цифрами…

  51. 51. Евгений tolevbizsystems.com

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

  52. 52. Данте frome4u.ru

    Здравствуйте, Сергей. Понравилась Ваша 404. Креативно :idea:
    Сам не так давно переделал свою, добавив изображение и немного текста. Прошу: frome4u.ru/404
    Пишите ещё, ждём новых идей от Вас ;-)

  53. 53. Пчеловод beebazar.ru

    Тоже переделал — beebazar.ru/404

  54. 54. Alex_vgf yousee24.com

    Даже на это счет и не задумывался.Осталось придумать как на этом заработать)

  55. 55. Vedro_Okunei landofpc.ru

    Блин, а у меня нет ошибки 404 в теме :( Что делать?

  56. 56. Sosnovskij sosnovskij.ru

    Vedro_Okunei, создавать ;-) .

  57. 57. Vedro_Okunei landofpc.ru

    Sosnovskij, так пробывал. А толку от неё нет. Ведь её нужно что-то где прописать наверное, чтоб на неё всё перенаправлялось

  58. 58. Sosnovskij sosnovskij.ru

    Vedro_Okunei, попробуйте ознакомиться с материалом ktonanovenkogo.ru/wordpress/wordpress_osnovi/stranitsa-oshibok-404-v-wordpress.html

  59. 59. Vedro_Okunei landofpc.ru

    Sosnovskij, да смотрел уже. Создаю 404.пхп и нефига не выходит. :(

  60. 60. Sosnovskij sosnovskij.ru

    Vedro_Okunei, обратитесь к какому-нибудь верстальщику. Он поможет.

  61. 61. Алексей proobschenie.ru

    а я не знаю как тема называется, ну название я знаю но когда вбиваю в урл нето пишет. Как подскажете название найти?

  62. 62. Sosnovskij sosnovskij.ru

    Алексей, название чего?

  63. 63. Сергей vitatour.net

    Валерий, мне ваш вариант подошел! спс! и у вас отличная и оригинальная — rabotaisam.ru/5555, только вот у меня не работает флеш, как его запустить

  64. 64. Григорий

    Прочитал всю статью и мне она понравилась. Я к стати уже сделал свою 404 страницу, по моему вот хороший пример оформления 404 ошибки на веб сервере vpn.by/error404.php

  65. 65. Роман

    А что если в самой теме нету файла 404.php? Где исправлять код?

  66. 66. peshehod pobrehushki.ru

    Свою страницу 404 я перевёл на русский язык, а как туда картинку вставить не понял. Подскажите!

  67. 67. Sosnovskij sosnovskij.ru

    peshehod, в вашем случае после слов «Извините за доставленные неудобства» нужно вставить html-код нужной картинки. Она появится после всего текста.

  68. 68. peshehod pobrehushki.ru

    Sosnovskij, Спасибо! Подыщу, что-нибудь оригинальное вставлю обязательно.

  69. 69. peshehod pobrehushki.ru

    Sosnovskij

    Получилось! Спасибо за помощь.

  70. 70. Olga

    А вот наш пример med-altai.ru/404

  71. 71. lex compoline.ru

    Интересные идеи. Посмотрите на мою станичку compoline.ru/12345

  72. 72. Евгений sovetywebmastera.ru

    Как всегда, у Вас на сайте только самое интересное, завтра попробую сотворить со своей 404-й. Спасибо.

  73. 73. Александр

    Sosnovskij,
    Я прочитал эту статью и сделал страницу ошибки, а до этого и не думал о полезности таковой. Спасибо.

  74. 74. Игорь lepeta.net

    На мой взгляд, главное, чтобы она была простой. Я сделал так: lepeta.net/404
    Так пользователь сразу понимает, что попал не туда, куда хотел. + фокусируется на тексте, а не на окружающих меню :)

  75. 75. Александр

    Вот пример с анимацией
    ldni.sumy.ua/11111

  76. 76. Евгений

    привет всем у меня такая задумка я хочу сделать так чтобы карты сайта недоброжелатель списком а изначально отображались разделы и только кликнув по нужному тогда появлялись бы категории и после материал внём, в данный момент у меня вместо страницы 404 отображается карта сайта вот оцените
    zaton09.ru/novig-saite.html
    zaton09.ru/rabotaempk/122-web/1007-404.html

  77. 77. Толян

    Прикольная 404 страница с гастарбайтерами okostroy.ru/404

  78. 78. ed

    Мне как-то тоже не нравились безликие странички об ошибках. Сегодня сделал красивую и музыкальную страничку об ошибке 404 good-surf.ru/404.shtml Думаю скоро красивыми сделать и другие странички об ошибках.

  79. 79. Коля

    Вот реальный креатив, и она там не одна такая zapolsky.moscow/404/

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

* Нажимая на кнопку "Добавить комментарий" я соглашаюсь с Политикой конфиденциальности.

css.php