Профессиональное обучение
блоггингу от А до Я

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

404 страница wordpress

Ребята привет! НА связи с вами Александр Борисов! 404 страница (not found) — это та страница, которую увидит читатель вашего блога при запросе не существующей на вашем блоге страницы или поста. Бывает так что когда-то вы добавили какую-то заметку, она проиндексировалась поисковым роботом, но потом вы ее удалили или изменили ссылку.

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

Так же расскажу как страницу 404 можно изменить со стандартной на другую, более красивую. Раньше моя 404 страница выглядела вот так:

На ней ни чего не было кроме 2-х надписей. «404 — не найдено» и «Извините, но того, что Вы искали, тут нет». Ну зачем мне такая хреновая страница, надо бы ее срочно переделать подумал я и сменил ей немного дизайн. Теперь она выглядит вот так - Смотреть 404 страницу. Согласитесь так лучше? Я думаю да.

Итак. Как вам сменить вашу 404 страницу со стандартной на ту которую вы хотите. Делается все очень просто. Предлагаю вам рассмотреть 2 варианта:

1. Изменить страницу 404 со стандартной на свою.
2. Сделать перенаправление с 404 страницы на другую.

Начнем с первого. Как изменить страницу 404 самостоятельно? У каждого блога wordpress есть в папке с темой файл 404.php. Вот его то и нужно редактировать, чтобы изменить дизайн 404 страницы. Сделать это можно 2-мя способами.

а) отредактировать код через административную панель вашего блога.
б) скачать файл 404.php из папки с темой на компьютер (wp-content/themes/ваша тема/404.php) и отредактировать через, допустим блокнот или редактор Notepad ++

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

Вот этот код в окне и нужно менять, чтобы изменить дизайн. Кстати если внизу этого окна нет кнопки «Обновить» или «Сохранить изменения», то это значит, что вам нужно поставить права доступа 666 на этот файл 404.php.

Как менять код? Ни чего сложного. У каждой темы свой код в файле 404.php, главное не удалять основные id, классы и т.д. Меняйте только текст. Заменяйте его на другой, вставляйте ссылки, картинки, форму поиска и т.д.

Кстати для редактирования кода и предварительного просмотра его в браузере советую пользоваться удобной программой htmlpad, о ней я писал в своей предыдущей статье «5 полезных программ для любого web-мастера».

Вот вам мини шпаргалки если вы решите отредактировать 404 страницу (их нужно вставлять в файл 404.php):
Вставка ссылки: <a href="ссылка">заголовок ссылки</a>
Вставка картинки: <img src="ссылка на картинку"> (картинку закиньте на ваш хоcтинг)
Вставка категорий блога: <?php wp_list_cats ('sort_column=name'); ?>
Вывод последних пяти записей блога: <?php get_archives ('postbypost', 5); ?>
Вывод архивов: <?php wp_get_archives ('type=monthly'); ?>
Вывод ссылок: <?php get_links ('-1', '<li>', '</li>', '', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
Вставка поиска по блогу: смотрите в файле sidebar.php или header.php и копируйте форму поиска от туда.

У меня она выглядит так:

<form role="search" method="get" id="searchform" action="http://isif-life.ru/" > <div><label for="s">Найти:</label> <input type="text" value="« name=»s" id="s" /> <input type="submit" id="searchsubmit" value="Найти" /> </div></form>

Да, кстати, если вы хотите чтобы перед ссылкой стояла маленькая точка, как это сделано у меня, то ссылку нужно дополнительно заключить в теги <li><a href="ссылка">заголовок ссылки</a></li>

Думаю если вы знаете основы html, то сделать страницу 404 вам не составит особого труда, если html вы не знаете, то советую изучить хотя бы базовые теги.

404 страница как изменить

 

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

Хорошо! Разобрались с оформлением страницы 404 для вашего wordpress блога. Теперь давайте расскажу вам о нескольких полезных плагинах.

1. Smart 404 — плагин замены 404 страницы. Данный плагин автоматически через поиск по вашему блогу выдаст пользователю список страниц, подходящих под набранный им url, вместо 404-ой страницы. Плагин ищет в тегах, метках, рубриках, страницах и постах. Плагин, я считаю, достоин внимания. Скачать можно здесь.

2. 404 Notifier — плагин уведомлений об ошибках. Данный плагин будет уведомлять вас каждый раз, когда на вашем блоге появляются страницы с 404 ошибкой. Уведомление можно получать как через RSS так и на e-mail. Хороший плагин, советую поставить. Из-за 404 ошибок вы можете потерять трафик на ваш блог. Плагин 404 Notifier как раз огородит вас от этого и при первых же ошибках будет уведомлять вас об этом. Скачать можно здесь.

3. Redirection — плагин отслеживающий ошибки 404 на блоге и перенаправляющий человека, который попал на эту страницу 404, на другую страницу, которую вы укажите в настройках плагина. Сам я этим плагином не пользовался, но читал о нем не плохие отзывы. Если что попробуйте его в действии, а мне и без него хорошо. =) Скачать можно здесь.

Ну и на последок дам вам несколько советов по оформлению вашей 404 страницы:

а) первое что должен увидеть человек, попавший на вашу 404 страницу, так это информацию о том, что страница, которую он ищет — отсутствует. Лучше это сделать в виде какой-нибудь интересной картинки.

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

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

г) как дополнение можно вывести список 5-и самых последних записей на вашем блоге.

Как изменить 404 страницу wordpress

 

Ну на этом у меня все на сегодня. Обязательно оформите свою страницу 404. Не теряйте трафик!

Желаю вам успехов!

Как дополнение почитайте еще 3 моих статьи по ведению блога на wordpress:

Как ускорить wordpress
Как защитить wordpress
Как оптимизировать wordpress

С уважением, Александр Борисов


Школа блоггеров А.Борисова

Школа блоггеров А.Борисова

Школа блоггеров А.Борисова
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 46
  1. Игорь

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

    в 00:20 | Ответить
  2. Александр Борисов

    Это бывает. Попробуй код заключить в тег «скобка» div style="margin-left: 5px">здесь код «скобка» /div «скобка»

    в 08:46 | Ответить
  3. Наталья Энис

    Александр, хочу сказать вам огромное спасибо за нужную и полезную информацию. В ней нет «воды». У меня много подписок на различные рассылки, некоторые я просто проглядываю, особенно с продажами курсов. Купила два разных и была оч-ч-чень разочарована.

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

    Успеха!

    в 22:43 | Ответить
  4. Александр Борисов

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

    в 12:16 | Ответить
  5. Али

    Эх ((( не смог сделать себе страницу 404 (((

    в 19:21 | Ответить
    • Denis

      Али всё очень просто. По шагам всё описано. [good] Удачи...

      в 03:05 | Ответить
  6. Вера

    Очень полезная информация!Неприятно,когда попадаешь на такую страницу!Постараюсь на своем блоге оформить по Вашему совету.

    в 17:14 | Ответить
  7. Евгений

    спасибо очень полезно, и написано информативно

    в 16:05 | Ответить
  8. Ильшат

    Хорошая статья. Некоторых вещей не знал) Спасибо.

    P.S. Пошловатая картинка...но забавная)))

    в 11:15 | Ответить
  9. Артур

    Хорошая статья! Получилось почти всё. Особенно понравились картинки!

    в 19:41 | Ответить
  10. Александр

    Огромное спасибо Александр. Очень пригодится статья. Нужно будет сделать себе такую страничку.

    в 12:38 | Ответить
  11. юлишна

    А как узнать, как выглядит моя страница 404?

    в 19:03 | Ответить
  12. Александр Борисов

    Юлишна — вот так.

    в 19:34 | Ответить
  13. Галина Исаева

    А вот это здорово! Пока просто изменила текст на странице,добавила ссылку на карту блога.Как только подберу картинку, обязательно поставлю. Заодно и размер текста подредактировала.А то,оказывается, я сама свою страничку не видела не разу с момента создания блога.Спасибо,Александр!

    в 14:00 | Ответить
  14. Антон

    А как лучше, сделать эту страничку ручками, или плагин поставить?

    в 18:13 | Ответить
    • Александр Борисов

      Руками.

      в 17:32 | Ответить
  15. Галина

    Ничего не поняла. Нашла шаблон, а в нем совсем не тот текст. Н =-O е тот, который выводится на стр. 404.

    в 17:02 | Ответить
    • Александр Борисов

      Я тоже ни чего не понял =)

      в 17:32 | Ответить
    • Denis

      Галина у меня так же было. Нужно вставить текст в код в теме, в файле index.php И всё будет ОК. [good]

      в 03:01 | Ответить
  16. Татьяна Ширякова

    Большущее вам человеческое спасибо!  =)

    в 10:26 | Ответить
  17. Кирилл

    Спасибо :)! побежал на свой блог применять!

    в 12:53 | Ответить
  18. Виталий

    Спасибо! Поставил себе Smart 404!

    в 23:23 | Ответить
  19. Елена Шамратова

    Александр,видео конечно смешное. Но я бы советовала посмотреть фильм целиком. Он называется «Залечь на дно в Брюгге». Это не типичный представитель американской киноидустрии на каждый день. Фильм нетривиальный и символичный, особенно для тех, кто знаком с творчеством Иеронима Босха.

    в 15:37 | Ответить
  20. Тимур

    Прикольно. Сделаю на днях себе красивую страницу 404. Александр, спасибо!

    в 18:28 | Ответить
  21. Дмитрий Чернявский

    Давно бы пора мне на сайтах сделать эту страницу, как-то раньше мало задавался этим вопросом теперь понимаю, что это вещь необходимая! А то посетитель если попадёт а там обычное 404, то можно и с этим человеком попрощаться.)

    в 11:25 | Ответить
  22. Вячеслав

    хмм, а зачем её делать красивой?)) она и так нормальная :)

    в 18:34 | Ответить
  23. Ростислав

    Спасибо за классную информацию, сделаю все как сказанно :)

    в 19:39 | Ответить
  24. Александр

    Для сервера типа Apache должен быть файл у папки со страницами сайта и названием

    «.htaccess» и содержанием файла хотя бы:

    ErrorDocument 404 /?error=404

    в 00:25 | Ответить
  25. Оля

    Не давно искала информацию про то, как можно настроить и оформить страницу 404 и вот у вас оказывается есть такая тема :) Осталась придумать , как оформить её интересно и применить вашу инструкцию ! Спасибо, Саша !! 😉 Много ценного у вас на блоге для себя нахожу !!

    в 16:16 | Ответить
  26. Юрий

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

    в 09:49 | Ответить
  27. Александр

    Может я чего то не понял, но зачем это делать? Ведь в любом случае, пользователь не находит желаемого, а значит недоволен. Другое дело если там написать, что этого мол нет, закончилось. Но если Вы хотите, могу предложить анчоусы. Что то в таком роде. Надо подумать об этом.

    в 15:36 | Ответить
  28. Александр Дубровченко

    Надо будет на днях заняться оформлением страницы 404. Спасибо за информацию!

    в 11:52 | Ответить
  29. Сергей

    Спасибо. Приму к сведению.

    в 10:27 | Ответить
  30. Александр Пузатых

    Саш, я смотрю тебе все картинки переделали. Это тот самый рисовальщик, который предложил тебе перерисовал картинки?

    в 21:26 | Ответить
    • Александр Борисов

      Да, тот самый. Но он еще не все картинки переделал! Еще статей 90 осталось!

      в 22:47 | Ответить
  31. Denis

    Спасибо за пост с подробной информацией. А картинки класс. [good]

    в 02:57 | Ответить
  32. Андрей

    Добрый день. Спасибо за грамотную статью. А я хотел у вас спросить, что если вообще не делать страницу 404, а просто поставить 301 редирект на главную страницу? Как вы думаете, проблемы с Яндексом не возникнут из-за этого?

    Заранее спасибо.

    в 16:04 | Ответить
  33. lixvar

    :-D Спасибо

    в 18:50 | Ответить
  34. Алексей

    Прочёл и тут же, что называется, воплотил в жизнь [:-))]

    в 07:36 | Ответить
  35. Евгений

    Ух у меня 404 пустая, щас будем исправлять данную проблему)), спасибо!

    в 08:31 | Ответить
  36. Ольга Суворова

    Я так поняла, что теперь у вас, Александр, нет такой страницы 404?..

    в 13:40 | Ответить
  37. Василий Цубера

    Спасибо! Я как раз себе оформляю эту страничку. Не знал как сделать и набрал в google как оформить страничку 404 на worpres и вот что выдал мне google на второе место Александра Борисова :) Конечно же я пошел сразу к нему.

    в 20:47 | Ответить
  38. Елена

    Здравствуйте, спасибо за статью, очень полезная! А лично мне хотелось бы по-больше про вставку картинки, куда конкретно на хостинг её залить и где взять ссылку на нее (как её узнать)? Расскажите, пожалуйста, буду очень признательна Вам!

    в 22:22 | Ответить
  39. Alexander

    Хорошая подробная статья. Буду применять на практике.

    в 16:03 | Ответить
  40. Елена

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

    в 05:13 | Ответить
    • Елена

      Нужно было просто удалить весь кеш (Hyper Cache)

      в 16:18 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]