Как создать страницу ошибки 404 на WordPress?

Автор: Александр Дубровченко
Рубрика: Уроки Wordpress
02/10/2013

stranica-oshibki-404

Приветствую вас, дорогие друзья! Сегодня я вам расскажу о теме, которая часто «всплывает» в обсуждении работы WordPress — а именно, как создается страница ошибки 404 для своего блога.

Но для начала, хочу объявить победителя сентябрьского конкурса «Лучший комментатор месяца»!

konkurs

Им становится Николай Тестов, автор блога  - http://mantext.ru/, Николай получает свой заслуженный приз 100 рублей на Webmoney!

Николай, жду ваш кошелек на мою электронную почту.

А теперь к делу!

Многие пользователи интернета знают, что  страница 404 означает ошибку — когда происходит обращение к несуществующему адресу блога или сайта. Чаще всего, такое происходит, когда по старому адресу была страница с информацией, а после ее удалили. В итоге обращаясь к такой странице, можно увидеть текст примерно следующего содержания: «Error 404». Иногда этот текст заменяют своей картинкой, что бы страница выглядела более привлекательно. Например так:-))):

06

Однако проблема заключается в следующем — «юзеры» использующие стандартный шаблон в WordPress, не могут похвастаться яркими и креативными  картинками на эту тему. Дело в том что по умолчанию страница 404 на WordPress, выглядит далеко не лучшим образом:

07

Естественно, такая картинка может просто не «вписаться»  в дизайн вашего блога, да к тому же основательно испортит ему вид, если пользователь случайно наткнется на такую недоработку .

Но к счастью, имеется возможность  исправить эту неприятность. Пользователи WordPress могут запросто сменить картинку этой страницы, на ту которою посчитают нужной. Сам процесс происходит довольно быстро, лично я затратил на это всего лишь 10 минут. Что ж давайте не будем долго «топтаться на месте» и сразу перейдем к описанию процесса.

Страница ошибки 404 на WordPress (инструкция)

 

04

Прежде чем приступить к самой работе, необходимо подготовить все «материалы», а именно подобрать нужную вам картинку. Тут я могу дать один совет — выбирайте ту, которая близко подойдет к содержанию и дизайну вашего блога. Чем интереснее получиться страница с ошибкой, тем больше будет шансов удержать на своем блоге посетителя. Ведь такая страница должна не только сообщить об ошибке, но и предложить иные варианты — например, выполнить поиск или вернуться на главную страницу.

Все готовые варианты можно найти в сети, а особо талантливые мастера могут изготовить все сами, например в фотошопе.

05

После выбора оформления, перейдем к следующему шагу. Далее нам нужно выполнить редактирование файла «404.php», используемый в стандартной теме вашего блога. Файл представляет из себя страницу, которая появляется для показа ошибки. Найти его можно в папке с вашим блогом. На первый взгляд, все это кажется довольно сложным, но вся операция выполняется легко — прямо из административной панели на WordPress.

Зайдя в редактор, выберите настройки оформления. У меня они расположены по следующему пути — «Внешний вид-Редактор». Выберите «404.php» для редактирования. В иных случаях, можно зайти в файлы блога через FTP клиент и открыть нужный файл.

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

Открывается файл — разными редакторами, например блокнотом Notepad++ . При его открытии должен появиться код, который отображает стандартную ошибку.

Теперь я расскажу о том как нужно его отредактировать. Для начала можно отредактировать текст, который будет выводится вместо стандартного. У меня он выглядит следующим образом:

01

[stextbox id="warning"]Сразу хочу предупредить, что код страницы 404 может быть у всех разный, тут все зависит от вашего шаблона. Поэтому, мой пример не является эталонным и может вам не подойти.[/stextbox]

Я добавил еще строчку:

[stextbox id="grey"]<p>Не расстраивайтесь, ведь на этом блоге вы сможете найти множество других статей. Не покидайте блог, вы сможете посмотреть другие рубрики!</p>[/stextbox]

Таким образом, при возникновении ошибки,  на странице будет изображен именно этот текст. Но это еще не все. Теперь нам нужно вставить картинку, которая будет отображаться перед с текстом. Для того чтобы вставить нужную картинку, нужно прописать следующий код: <img src="ссылка на картинку">

 Теперь это будет выглядеть так:

[stextbox id="grey"]<img src="<?php bloginfo ('template_directory'); ?>/img/404.jpg" width="550" height="287" alt="Ошибка 404" />
<p>Извините, но запрошенной страницы не существует!</p>
<p>Не расстраивайтесь, ведь на этом блоге вы сможете найти множество других статей. Не покидайте блог, вы сможете посмотреть другие рубрики!</p>[/stextbox]

В таком случае мы имеем уже готовую страницу, с нужной картинкой и текстом. Однако в нее можно вписать и другие функции, например предложить посетителю просмотреть другие рубрики и страницы. Что бы реализовать эту функцию нужно найти и скопировать код из других файлов (header.php или sidebar.php) и вставить его в нашу страницу. Он может принимать следующие виды:

•  Сам код: <a href="ссылка">анкор (текст)сылки</a>.

•  Показ разделов блога (рубрик): <?php wp_list_categories ('orderby=name&title_li='); ?>

•   Код последних 10 записей: <?php wp_get_archives ('type=postbypost&limit=10'); ?> 

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

02

Стоит отметить что помимо ручной правки кода, страницу можно сделать при помощи плагинов для WordPress. Я рекомендую, наиболее известные:

•  Custom 404 Error Page. Очень удобный и полезный плагин. Он может позволяет вам создать красивую страницу ошибки 404 без ковыряния в коде.

404 Notifier. Этот плагин сам информирует о возникающих 404 ошибках. Очень удобен в работе.

Redirection . После его установки, блог автоматически перенаправляет пользователя на выбранную вами страницу.

Эти плагины я не использовал в работе, но судя по отзывам от пользователей WorldPress они могут пригодиться тем,  для кого слово «код» — неизвестное понятие.

Итак  друзья, страница ошибки 404 у нас готова! Таким образом я показал, что cоздание страницы 404 довольно легкий процесс и надеюсь что наглядно разъяснил ключевые моменты пользователям WordPress.

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

Не забываем подписываться на обновления блога, чтобы не пропустить массу полезного и интересного!Кстати, скоро будет первое интервью, пока не скажу с кем;-)!

А на сегодня у меня все!

 Пока-пока!

С уважением, Александр Дубровченко.

Материалы по теме:

Где брать бесплатные картинки для блога?
Привет, друзья! Сегодня хочу вам рассказать, где брать бесплатные картинки для блога. Не для кого не секрет, что иллюстрации в статьях очень важны! Так ...
Топ 20 лучших плагинов для WordPress!
Приветствую вас, друзья! Сегодня меня посетила мысль написать небольшой обзор плагинов. Хочу вам представить лучшие плагины для Wordpress, или я бы даже сказал самые ...
Как составить правильный файл robots.txt для WordPress?
Всем, привет! Вот появилось немного времени, для того чтобы написать не большой пост. Сейчас времени совсем в обрез, если помните, писал про заказы на ...
Как защитить WordPress от взлома?
Здравствуйте, друзья! Данный пост хочу посвятить одному из самых важных моментов в ведении блога. Сегодня мы поговорим о том  как защитить Wordpress от взлома. ...
Почему WordPress лучший движок для блога?
Привет, мои дорогие читатели! Это моя первая статья=)И так вы решили создать свой блог и не знаете, какой движок выбрать, чтобы он максимально ...
Получайте свежие статьи
блога на ваш e-mail!
ВКонтакте
FaceBook
  1. Ильяс

    Первая картина доставила )) И кстати, у вас оЧеПятка вместо sidebar.php написано sedebar.php

    Ответить
    • Александр Дубровченко

      Спасибо, Ильяс! Поправил очепятку :-D

      Ответить
  2. Никита

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

    Никита рекомендует статью...Спойлер для сайта

    Ответить
    • Александр Дубровченко

      Никита, конечно делайте!Не берите пример с меня — блогу уже больше полугода, а страницу 404 сделал только сейчас. Тоже все руки не доходили ;)

      Ответить
      • Никита

        А моему блогу 10й месяц, а 404 страницы нет до сих пор :-D

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

        Никита рекомендует статью...Придаем объемности любому элементу на сайте с помощью CSS3 (3d css)

        Ответить
        • Александр Дубровченко

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

          Ответить
  3. Михед

    А я давненько её сделал, может спустя некоторое время, нужно будет апгрейд проводить :Ъ

    Михед рекомендует статью...Прогон по трастовым сайтам + мини-конкурс «Будущее life-crazy»

    Ответить
    • Александр Дубровченко

      Сань, да нормальная у тебя страница. Только исправь ошибку в слове предлагаю, а то сразу бросается в глаза =)

      Ответить
  4. Диана

    Еще раз здравствуйте, Александр!) Вот такую страничку я сделала, буквально вчера, будет интересно узнать ваше мнение на то, что я там придумала, простенько правда, но мне нравится.)

    Статья хорошая, ребят, оформляйте свои странички 404, читателем будет приятно, а если картинка смешная, еще и настроение поднимется.)

    Ответить
    • Александр Дубровченко

      Привет, Диана! А что, вполне себе симпатичная страничка 404 у вас получилась, веселенькая такая! Мне нравится *THUMBS UP*

      Ответить
  5. Натала

    Спасибо, Александр, сначала попробую плагин, который Вы подсказали :) Боюсь рисковать.

    Успехов!

    Натала рекомендует статью...Проверка статьи на уникальность

    Ответить
    • Александр Дубровченко

      Здравствуйте, Натала! =) Если есть сомнения, то конечно, можете сначала плагином воспользоваться ;)

      Ответить
  6. Александр

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

    Ответить
    • Александр Дубровченко

      Привет, Александр! Тоже не плохой вариант, но страница 404 призывает к действию, поэтому считается более эффективной, чем просто редирект.

      Ответить
    • Babenko

      Зачастую редирект, особенно если он не правильно сделан, пользователи могут не понять :) Ведь они открывали конкретную статью а тут их на и перекидывают (кстати некоторые браузеры это блокируют).

      Babenko рекомендует статью...Linux или Windows

      Ответить
  7. Артем

    Классный блог за короткое время! Уважаю :)

    Артем рекомендует статью...Одним словом – наконец-то :)

    Ответить
    • Александр Дубровченко

      Спасибо, Артем! =) Ну не совсем уже короткое, восьмой месяц пошел :-D

      Ответить
  8. Маргарита

    После прочтения статьи побежала на свой блог проверять, что и как. С радостью обнаружила, что в моей теме ВОрдпресс этот вопрос продуман заранее: при попадании на несуществующую страницу пользователю предлагается строка поиска по сайту и ссылки на 30 последних публикаций!

    Маргарита рекомендует статью...Зеленое озеро (Grüner See) в Австрии

    Ответить
    • Александр Дубровченко

      Маргарита, так ведь это здорово, что вам такой шаблон попался! *THUMBS UP*

      Ответить
  9. Иван

    Добрый день, Александр. Отличный пост, хорошие рекомендации. Приглашаю тебя и твоих читателей принять участие в небольшом конкурсе.

    Иван рекомендует статью...Как создать страницу 404 ошибки? + Акция!

    Ответить
    • Александр Дубровченко

      Привет, Иван! Спасибо, сейчас посмотрю, что там за конкурс у тебя. ;)

      Ответить
  10. Блог красивый Саш!

    Александр Борисов рекомендует статью...Итоги II этапа акции для клиентов КСБТ 2.0!

    Ответить
    • Александр Дубровченко

      Сань, рад тебя видеть на своем блоге! ;) Спасибо! Благодаря твоему курсу решил сразу делать уникальный дизайн. =)

      Ответить
  11. Юрий

    Я по поводу 404 страницы еще не заморачивался, не вижу в этом реального смысла.

    По мне так все равно, что на ней будет написано, я имею ввиду другие блоги.

    Это так... просто для шоу нужно, или для себя.

    Юрий рекомендует статью...Как узнать html код сайта в браузере

    Ответить
    • Александр Дубровченко

      Юрий, вам то все-равно, но другим не все-равно. Поэтому лучше пусть будет! У каждого свое мнение ;)

      Ответить
  12. Юрий

    А мне понравилась статья. Реально горадо лучше смотреть на такие надписи чем 404. Хорошая Статейка.

    Юрий рекомендует статью...Воровство контента: борьба и защита.

    Ответить
    • Александр Дубровченко

      Юрий, спасибо! =)

      Ответить
  13. Babenko

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

    Babenko рекомендует статью...Как отключить Microsoft security essentials

    Ответить
  14. Анна

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

    Ответить
    • Александр Дубровченко

      Ань, я тоже так считаю, хотя многие с этим не заморачиваются, а зря. =)

      Ответить
  15. У меня тоже в теме было прописано, что при переходе на 404 страницу, давались ссылки на 10 последних записей. Я то убрал. Поставил весёлых картинок с воодушевляющими текстами и выдал карту сайта.

    Виталий Калинин рекомендует статью...Размещаем счетчики посещений сайта в одну линию + хорошая новость на блоге

    Ответить
    • Александр Дубровченко

      Правильно сделал, Виталий!

      Ответить
  16. Для меня это пока не очень актуальная задача. Однако обязательно проработаю еще. Хотя не знаю, что лучше — креативная картинка или ссылки на какие-то статьи. Ваши примеры, конечно вдохновили :-)

    На вашем блоге тоже соединена картинка и информация. А последние статьи вы туда выводите каким-то плагином?

    Надежда Введенская рекомендует статью...Зачем человеку трудности жизни

    Ответить
    • Александр Дубровченко

      Надежда, лучше и картинки и статьи. У меня статьи выведены не плагином, а с помощью кода вручную.

      Ответить
      • У меня, к сожалению, пока еще техническая подготовка хромает. Просто буду потихоньку делать все по вашим советам. Вот тогда и уже начну чувствовать код.

        А Дмитрию ответ прост: сходите на страницу 404 и посмотрите.

        Надежда Введенская рекомендует статью...Короткие притчи в картинках: Рождение бабочки

        Ответить
  17. Дмитрий

    Честно говоря не понял куда именно помещать картинку со страницей 404 и как вписать потом адрес он написал в PHP?

    Дмитрий рекомендует статью...Кыстыбый

    Ответить
  18. Александр

    Хочу и себе сделать эту 404 страницу.

    Александр рекомендует статью...Сати Казанова

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

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

    Я у себя сделал вот такую =))) workdoma.ru/404 =)

    Александр рекомендует статью...ЛайнБро — скрипт продажи рекламы на блоге!

    Ответить

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









Оставьте ссылку на вашу статью

Оставьте комментарий и получите в подарок!

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