Главная » Создание блога » Красивая страница 404 для сайта

Красивая страница 404 для сайта

красивая страница 404 для сайта


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

Страница ошибки 404 – это такая страница, которой просто не существует. Например, вы написали статью, и по каким-то причинам решили ее удалить. Но эта статья еще индексируется поисковыми системами. Посетитель зайдет на ваш сайт и увидит вод такую некрасивую страницу ошибки:

Error 404 - Page Not Found

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

Мою страницу ошибки вы можете посмотреть по такому адресу http://vachevskiy.ru/232 Если вы хотите увидеть, как выглядит ваша страница 404, то нужно после третьего слеша ввести любые символы. Ну, например, так: http://ваш домен.ru/1212345 smile.

Для того, чтобы создать  404 страницу, нужно сначала скачать файл 404 php себе на компьютер. Для этого зайдите в панель управления – внешний вид – редактор. Откройте файл  404 php скопируйте код, который в нем находиться и вставьте его в блокнот Notepad ++ например, на рабочем столе компьютера.

Файл 404 php можно также скачать и другим способом. Для этого зайдите в корень сайта. Перейдите в папку wp-content – themes – название темы — 404.php. Скачивайте файл себе на компьютер и сделайте его копию, потому что ми сейчас будем делать изменения в коде.

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

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

правильная страница 404

Согласитесь, намного лучше, чем просто надпись, Error 404 — Page Not Found. Вы также можете скачать в интернете любую картинку. Просто введите в поиске по картинкам  "404 страница" smile.

Для того, чтобы вставить изображения в страницу ошибки, можно воспользоваться вод таким кодом:

<img src="http://ваш домен.ru/wp-content/themes/названия темы/images/названия картинки" />
но перед тем, нужно закачать изображения на хостинг в папку images, а также нужно каждое изображения оптимизировать, для этого прочтите статью, о том, как уменьшить вес фото или картинки без потери качества.

Вставить последние записи можно так:

<?php get_archives ('postbypost', 5); ?>

Вывести популярные записи можно при помощи этого кода:

<?php akpc_most_popular(); ?>

Вывод категорий сайта:

<?php wp_list_cats(); ?>

Если вы хотите вывести поиск по блогу на 404 страницу, то найдите в файле header.php или sidebar.php код, который отвечает за поиск по сайту, и вставьте его в страницу ошибки.

Если вы хотите разместить что-то по центру страницы, то нужно воспользоваться тегом

<center>код</center>

Вот, например, я хочу сделать картинку по центру:

<center><img alt="" src="http://ваш домен.ru/wp-content/themes/названия темы/images/название картинки" /></center>

Возможно, хотите сделать отступ сверху, тогда воспользуйтесь следующим кодом:

<div style="margin-top: 30px;">код</div>

 

<div style="margin-top: 30px;"><img alt="" src="http://ваш домен.ru/wp-content/themes/название темы/images/название картинки" /></div>

В последнем случаи ми сделали отступ картинки на 30px сверху. Число 30 можно изменять. Экспериментируйте smile.

Отступ снизу на 30px делается следующим образом:

<div style="margin-bottom: 30px;">код</div>

Думаю, этих знаний css будет достаточно, чтобы у вас получилась красивая страница 404 для сайта smile.

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

как создать страницу 404

Как видно, все коды нужно вставлять внутрь блока <div id="content"> Я убрал надпись <h2 class='pagetitle'>Error 404 — Page Not Found</h2>  поскольку она мне не нужна.

Вместо этого вставил картинку по центру. После картинки вставил вод такой текст:

<p style="margin-top: 20px">Очень жаль, но вы ищете то, чего на сайте нет. Начните лучше поиск с <a href="http://vachevskiy.ru/">главной страницы</a> или прочитайте последние записи.</p>

И сделал отступ сверху на 20рх, чтобы текст не прилипал к картинке. А еще ниже сделал вывод последних записей:

<h2>Вот ссылки на 5 последних статей:</h2>
<?php get_archives ('postbypost', 5); ?>

А вот, красивая страница 404 для сайта vachevskiy.ru

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

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

Smart 404. Этот плагин вместо 404 страницы выдает пользователю другую релевантную страницу. Он ищет похожую запись в рубриках и метках. Если у вас тематический сайт и много похожих статей, то думаю, этот плагин вам подойдет. Скачать можно здесь.

Вот и все, наверное, что касается вопроса, как создать страницу 404. До новых встреч smil.

vachevskiy 13 сентября 2013
  1. Никита

    Самое главное не удалять посты и не будет возникать ошибка 404

  2. Спасибо большое за ваши статьи! Понятно, красиво, всё по полочкам, с примерами. Одно удовольствие читать! smile ...и применять, конечно, тоже

  3. Анжелика

    Спасибо за полезную статью, сделала 404 страничку без проблем по Вашим подсказкам :idea:

  4. Наталия

    У вас там ошибка, на вашей страничке 404 — «на сЕйте»

  5. vachevskiy

    Наталия, спасибо исправил.

  6. Вячеслав

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

    Можно какую-то идею для себя потянуть... Или хотябы, поискать вдохновения!

  7. Ярослав

    Редирект для 404 странички не нужно делать, сервер должен выдавать ответ 404 в заголовке. А не 301, 302 и 200.

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

  8. Ярослав

    Как изменить этот аватар? :)

  9. dooddy

    Также на 404 можно ставить картинку jpg или gif, например, как тут — ngs-penza.ru/404.php