vachevskiy.ru

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

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


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

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

Error 404 - Page Not Found

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 звезда2 звезды3 звезды4 звезды5 звезд (4 оценок, среднее: 5.00 из 5)


  1. Никита пишет:

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

  2. Маша пишет:

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

  3. Анжелика пишет:

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

  4. Наталия пишет:

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

  5. vachevskiy пишет:

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

  6. Вячеслав пишет:

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

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

  7. Ярослав пишет:

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

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

  8. Ярослав пишет:

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

Leave a Reply to Наталия