Урок 55 Создание 404 страницы

404error

Добрый день всем, сегодня на очереди 404 страница. 404 страница – это страница, которая открывается тогда, когда пользователь переходит по не существующему адресу (URL). Я уверен, Вы ее часто встречали. Приведу Вам пример 404 страницы моего блога:

Создание 404 страницы ошибки
Если Вы “в живую” хотите увидеть как же выглядит эта “волшебная страница” на WPnew.ru, просто наберите в строке браузера несуществующий адрес в блоге. Например, я ввел случайный набор чисел и букв:

Создание 404 страницы ошибки Вы также можете посмотреть у себя на блоге, как выглядит 404 страница. Если она Вас устраивает, оставьте ее таковой, если же нет, читайте дальше, мы вместе будет создавать/редактировать “страницу неправильного адреса”.

Создание и редактирование 404 страницы

404 страница нужно обязательно! Она позволит удержать посетителя Вашего блога. Обычно те, кто видят стандартную 404 страницу ошибки, просто уходят с блога (а что еще делать, если перед их глазами какая-то непонятная надпись “Error 404. Page not found”).

Давайте приступим.

  1. В шаблоне демонстрируемого блога (напомню, он имеет адрес FanBar.ru) не оказалась той самой заветной страницы. Если у Вас также ее нет, просто создаем страницу под названием 404.php в теме блога, а у кого она есть, откройте данный файл:
    Создание 404 страницы ошибки
  2. После открытия файла добавьте на первую строчку следующее (если у Вас эта строчка уже есть, то не нужно):
    <?php get_header(); ?>

    А в конце (последняя строчка) добавьте следующий код:

    <?php get_footer(); ?>
  3. Откройте файл page.php и исходя из него поставьте примерно в то же место код:
    <?php get_sidebar(); ?>

    Так как у каждого пользователя свой шаблон WordPress, я не могу рассказать Вам как точно сделать дизайн 404 страницы для Вашего блога. Ориентируйтесь на файл page.php, используйте FireBug, ознакомьтесь с языком CSS, экспериментируйте.

Готовая 404 страница.

Приведу пример 404.php блога FanBar.ru. Я в нее добавил все необходимые комментарии, чтобы объяснить Вам какой код что делает, чтобы облегчить Вам процесс создания 404 страницы ошибки. Эту страницу Вы можете скачать тут (просто разархивируйте архив), а кому лень скачивать, смотрите код ниже:

<!--Вывод шапки-->
<?php get_header(); ?>

<!--Это вывод сайдбара, у Вас наверняка по-другому, и он стоит в конце, наверное,смотрите page.php.
Должно быть наподобие <?php get_sidebar(); ?>, поставьте ее туда же, где она стоит в page.php-->
<?php include_once("side1.php"); ?>
<?php include_once("side2.php"); ?>
<!--Конец вывода сайдбара-->

<!--Индивидуальный стиль шаблона, у Вас, наверняка что-то другое. Используйте FireBug, чтобы узнать название своего стиля-->
<div class="wrap">
<!--Конец стиля-->

<!--Название страницы-->
<h1 class="posttitle">Ошибка 404. Такая страница не найдена.</h1></br>
<!--Конец названия-->

<!--Начиная отсюда можно скопировать, просто заменив fanbar.ru на адрес своего блога и изменив страницу Контакты-->
<h3>Могут быть несколько причин:</h3>
<ul>
  <li>Страница перемещена или переименована</li>
  <li>Страница больше не существует на этом сайте.</li>
  <li>URL не соответствует действительности.</li>
</ul>
<h3>Предлагаю перейти:</h3>
<ul>
  <li><a href="http://fanbar.ru">На главную страницу</a></li>
  <li><a href="http://fanbar.ru/kontakty">Написать в контакты</a></li>
</ul>
<!--Заканчивать процесс копирования тут-->

<h3>Также, можете воспользоваться поиском:</h3>

<!--Вывод поиска. Найдите на своем блоге поиск (обычно в sidebar.php и скопируйте оттуда. У меня он выглядит так-->
<form method="get" id="searchform" action="http://fanbar.ru/">
      <div style="margin-left:70px;">
        <input alt="search" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
      </div>
    </form>
<!--Конец вывода поиска-->

<!--Вывод категорий блога. Можете просто скопировать-->
<h3>Или перейти в любую категорию блога:</h3>
	<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
<!--Конец вывода категорий блога.-->

<!--Закрытие стиля wrap, который был в начале. Читайте урок про CSS, если не понятно. -->
</div>

<!--Вывод футера (подвала) темы-->
<?php get_footer(); ?>

В принципе, все. Будут вопросы – пишите в комментариях. И не забывайте завтра - воскресенье, бесплатная видеоконференция со мной. Участвуйте все!

_____________________________

Следующий урок: Урок 56 Плагин Tweetmeme: выводим кнопку retweet на блоге.

<!--Вывод шапки-->
<?php get_header(); ?><!--Это вывод сайдбара, у Вас наверняка по-другому, и он стоит в конце, наверное,смотрите page.php.
Должно быть наподобие <?php get_sidebar(); ?>, поставьте ее туда же, где она стоит в page.php-->
<?php include_once("side1.php"); ?>
<?php include_once("side2.php"); ?>
<!--Конец вывода сайдбара--><!--Индивидуальный стиль шаблона, у Вас, наверняка что-то другое. Используйте FireBug, чтобы узнать название своего стиля-->
<div class="wrap">
<!--Конец стиля--><!--Название страницы-->
<h1 class="posttitle">Ошибка 404. Такая страница не найдена.</h1></br>
<!--Конец названия-->

<!--Начиная отсюда можно скопировать, просто заменив fanbar.ru на адрес своего блога и изменив страницу Контакты-->
<h3>Могут быть несколько причин:</h3>
<ul>
<li>Страница перемещена или переименована</li>
<li>Страница больше не существует на этом сайте.</li>
<li>URL не соответствует действительности.</li>
</ul>
<h3>Предлагаю перейти:</h3>
<ul>
<li><a href="http://fanbar.ru">На главную страницу</a></li>
<li><a href="http://fanbar.ru/kontakty">Написать в контакты</a></li>
</ul>
<!--Заканчивать процесс копирования тут-->

<h3>Также, можете воспользоваться поиском:</h3>

<!--Вывод поиска. Найдите на своем блоге поиск (обычно в sidebar.php и скопируйте оттуда. У меня он выглядит так-->
<form method="get" id="searchform" action="http://fanbar.ru/">
<div style="margin-left:70px;">
<input alt="search" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
</div>
</form>
<!--Конец вывода поиска-->

<!--Вывод категорий блога. Можете просто скопировать-->
<h3>Или перейти в любую категорию блога:</h3>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
<!--Конец вывода категорий блога.-->

<!--Закрытие стиля wrap, который был в начале. Читайте урок про CSS, если не понятно. -->
</div>

<!--Вывод футера (подвала) темы-->
<?php get_footer(); ?>

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

по хронологии
по рейтингу сначала новые по хронологии
Brainscot http://brainscot.com

Спасибо за статью - познавательно и интересно. Есть небольшое дополнение, хотя на любителя. Вместо обычного поиска встраивать поиск Google Adsense

com http://nalbatron.com/

Спасибо мне понравилось. Однако не могу понять зачем эта страница нужна и нельзя сделать ли перенаправление на главную страницу?

Алексей Туманов

com, я считаю что страница 404 нужна. Приведу пример.

Вы написали очень нужную статью, например, "как раскрутить свой блог". Статью эту вы писали из личного опыта, в ней много различных фишек, секретов. Ну, и естетственно, пройдёт время и на эту статью пользователи будут ссылаться в форумах, других сайтах, где угодно.

Потом, произошёл глобальный сдвиг в ПС, статья на все 100% потеряла актуальность, вы написали новую, ну а страрую решили удалить. Тем временем, ссылки на старую статью с никуда не исчезли. По ним и дальше будут переходить люди, и что они увидят? Непонятная ошибка, пользователь разочарован, он закрывает сайт. Вы потеряли этого посетителя. Если вы сделаете перенаправление на главную, то произойдёт практически тоже самое, ведь человек зашёл по конкретной ссылке на конкретную статью.

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

Как-то вот-так.

IvYur http://kuponam.ru

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

Сергей Николаевич http://mservice.net.ua

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

Автор
Пётр Александров

Brainscot, я просто еще не рассказывал в своих уроках про Google Adsense, по этой причине ставил стандартный поиск 🙂

com http://nalbatron.com/

Что делать если поисковые системы проиндексировали страницы, которые я удали и теперь выходит ошибка 404?

Алексей Туманов

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

IvYur http://kuponam.ru

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

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

Cooler http://best-road.ru

а вы 404 вашей темы меняли?

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

Vic http://mydonetsk.ru/

Решение нашел здесь:

http://w-blog.org.ua/?p=241

Как я и думал, ее (404 страницу) надо подключить в - .htaccess

Просто и сердито, а главное - работает!!!

Да, поиск еще никто не отменял, кто стучит - тому и открывают.

ViLKo http://egorofv.com/

Нужная статья, узнал немного интересного с неё. Только вот всё никак не мог справиться с 404, почему-то в файле .htaccess небыло прописано между WordPress'овскими тегами нужной строчки. Пришлось в интернетах искать, нашёл на офф.сайте WordPress'a на какой-то страничке форума.

Нужно вписать между:

# BEGIN WordPress и # END WordPress

сточку:

ErrorDocument 404 /index.php?error=404

Дмитрий

А можно на эту страницу картинку поставить, а то я нашёл подходящую?

Cooler http://best-road.ru

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

Дмитрий

и как это сделать?

Cooler http://best-road.ru

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

Потом заходишь в css и создаешь там класс, смотришь, как другие классы прописаны, с помощью этого класса ты выставишь расположение фотки, ну там бортики и т.д.

Это все элементарно, просто посмотри код своей темы, вордпресс довольно просто сделан, поэтому народ столько тем наклипал...

Cooler http://best-road.ru

Блин)) весь кот стерло, я даж не знаю, как тебе его написать сюда...)))

Дмитрий

напиши сюда rigastalin@mail.ru

Дмитрий

Плиз

Вячеслав http://vk4you.ru/

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

Алексей Туманов

Скорее всего проблема в кодировке. Возможно вы её случайно сменили. Поставьте UTF-8.

Игорь http://invzor.ru

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

если можете чем помочь - напишите на почту, плз...

Автор
Пётр Александров

Может проблема в хостере, возможно, у них есть своя какая-то 404 страница, которая перебивает Вашу?

Виктор http://internet4runet.ru

Можете помочь?

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

Автор
Пётр Александров

Ваша страница явно не в UTF-8. Читайте этот урок http://wpnew.ru/udobnaya-rabota/uchimsya-rabotat-s-tekstovym-redaktorom-notepad.html

Раздел "Изменение кодировки файлов темы WordPress на UTF-8 (русский язык)"

Виктор http://internet4runet.ru

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

Автор
Пётр Александров

Вот способ, как можно легко узнать названия стиля и даже номер его строки: http://wpnew.ru/udobnaya-rabota/firebug-for-firefox.html

Опять я со своими проблемами... В общем ситуация следующая - я ввожу несуществующую сраницу ( к примеру http://мойблог.ru/gde404stranica?) и у меня заместо того, чтобы вывести страничку 404 всё остается без имзменений. В файл .htaccess добавлял строку ErrorDocument 404 /404.html - безполезно...

В чём проблема? =)

Артур http://komputer-life.ru

А у меня щас полный ппц. Видно там что-то изменил и теперь не то что сайт, даже админка не открывается. Что делать????

Блин

Артур http://komputer-life.ru

Фух ,спасибо Timeweb. Сделал откат. Все заработало))))

Инна http://prigotovim-ka.ru/

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

Дмитрий

А есть способ прикрутить динамическую страницу ошибки 403? Средствами панели управления хостинга создал таковую, но она статическая.

Никита Рябин http://pro97.ru/

Большое спасибо, благодаря Вам вспомнил об этой странице, и нашёл там ряд других косяков, и наконец-то исправил!

yulyaxa http://mamulkikrasotulki.ru

Еще, как вариант - можно предложить посмотреть определенные страницы записей, чтобы посетитель не ушел безвозвратно

Здравствуйте! Пётр, у меня такая проблема. Создаю запись, любого характера, публикую. На главной она отображается, а когда в неё захожу, пишет что она не найдена (404). Разные новости создавал, всё так же. К тому же, такая же ошибка всплывает, когда захожу в рубрику новости. Смотрел url записей, всё соответствует. Не знаю что делать. В кодах html и php плохо разбираюсь. Может чего я ненароком удалил? Помогите пожалуйста!

С уважением!

Валентина http://vse-v-sonnike.ru/

Спасибо Петр за полезную статью! Как можно сделать пространство между строчками. атрибут не помогает

Elma http://www.marmarisinfo.ru

Хорошая статья, спасибо. Навела красоту с поиском и категориями))

Анатолий

Довольно таки оригинальная и креативная страничка на стройпортале okostroy.ru/404

SV http://wtfbuild.com

Как в страницу с ошибкой добавить картинку?

Алексей Туманов

Да элементарно. С помощью тегов. http://htmlbook.ru/html/img

Александр http://uam.by

Петр простой вопрос по уроку: А где именно находится page.php ?

Автор
Пётр Александров http://wpnew.ru

В папке с темой: wp-content/themes/название темы (по FTP нужно соединяться)

Наверх Рейтинг@Mail.ru