Как создать страницу ошибки 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, или я бы даже сказал самые ...
Форма обратной связи на WordPress с помощью плагина Contact Form 7
Здравствуйте, уважаемые  читатели моего блога! Сегодня я поведаю вам, о том зачем нужна форма обратной связи на 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 =)

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

    Ответить

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









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

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

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