Ошибка 404 — страница не найдена. И что дальше?

страница 404 Это было очень сложно. Просто катастрофично. Но основная проблема была не столько в создании этой страницы, сколько в наличии информации в сети. То ли мне такие сайты попадались, то ли я чего- не понимаю. Многие статьи были похожи «как под копирку», совершенно пустые и бесполезные. Или попадался кусочек кода, но вот что с ним делать до конца не было понятно. А самое интересное, что у 70%  сайтов, которые пишут как сделать страницу 404,  этой самой страницы нет вообще! Вот парадокс! Пришлось потратить на ее создание три дня. Но результат того стоил. А вы это сможете сделать теперь сделать за два часа.

            Но вначале давайте по-порядку.

Страница 404 появляется в том случае, когда пользователь пытается перейти на несуществующую страницу сайта (например, вы удалили страницу с постом, а материал уже проиндексировался и по этой ссылки с поисковиков на эту страницу перешел посетитель). Или, например, вводили ссылку в строку браузера и ошиблись. Все. Этой страницы не существует. И об этом сообщает страница 404.

Если вы еще не видели этой страницы, то введите в конце ссылки какие-нибудь цифры, ну например, 569, и вы на нее попадете. Как правило, там нечего суперинтересного нет.

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

Ошибка 404 - страница не найдена

         это может быть дополнительной возможностью для общения с вашими читателями.

Посмотреть образцы оформления страниц 404 можно очень просто: зайдите в Яндекс, наберите «страница 404» и посмотрите выборку по картинкам. Возможно, вы там найдете свое вдохновение?

Вот так моя страница выглядела изначально.404

А вот так она выглядит сейчас

404_new

Поближе вы можете ее посмотреть, например, по ссылке.

Какая вам больше нравится? Если вы хотите сделать у себя такую же – то читайте дальше внимательно, далее следует подробная инструкция.

Инструкция " Как создать страницу 404"

Где найти эту страницу и как ее редактировать

Здесь нам с вами придется работать с кодами. Да, по другому ну никак. Но я вам покажу несколько хитростей и еще кое-что, так что не бойтесь. Пока просто постарайтесь разобраться в информации.

Итак, чтобы начать работать с этой страницей вам нужно будет ее найти. Идем на хостинг, там входим в Файловый менеджер, открываем сайт, папку wp-content, там нужен раздел с данными вашей темы, т.е. в папке themes, а там уже входите в вашу тему и ищем страницу 404.

Посмотрите на рисунке404_hosting

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

Итак, нашли файл. Потом нажимаем Файл-Редактировать (см на рисунке выше) и каждый увидит свою картину, смотря что у вас прописано в теме.

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

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

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

Разбор файла

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

Начальный блок

<?php get_header(); ?>

 <div id="content">

 <div id="wrap">

 <div id="content">

 <div class="postwrap">

</div> </div>  </div>  </div>

Зачем этот блок объяснять долго, просто его оставьте. Ничего корректировать тут не надо.

Блок с картинкой

            <a href="http://point-up.ru/wp-content/uploads/2013/06/nVmREzQfEl4.jpg"><img class="size-full wp-image-3016 alignright" alt="nVmREzQfEl4" src="http://point-up.ru/wp-content/uploads/2013/06/nVmREzQfEl4.jpg" width="347" height="604" /></a>

Этот блок вставляет вашу картинку. Его проще сделать каждому самому, чем корректировать мой. Вы просто заходите в админ-панели WP в раздел «Записи», создаете новую, вставляете картинку, корректируете ее расположение так, как нужно (у меня, например, она смещена вправо, и настроено обтекание текста с левой стороны). После этого переходите во вкладку с кодами и копируете этот код и вставляете его. И все! Все очень просто!404_kartinka

Блоки с текстом

<span style="color: #800000;"><h1><p> Я очень долго искала ... </p>

<div  style="padding:14px;">

<p>Но такого у меня нет....</p>

</div>

</h1></span>

На что нужно обратить внимание здесь:

- h1 – проставьте h1 h2 h3 – это формат заголовков, таким образом вы можете быстро и просто изменить формат текста

- span style="color: #800000 – это обозначение цвета текста.

Откуда его взять: возвращаемся в админ панель, и делаем простую вещь. В визуальной вкладке пишете текст, окрашиваете его как вам нужно и потом переходите во вкладку с кодами – и все! У вас есть код цвета вставки на страницу.

- <p> ваш текст </p> - таким образом вы можете корректировать длину строки с текстом.

Т.е. каждая ваша новая строка должна быть заключена в эти вот буковки.

- <div  style="padding:14px;"> - это классная вещь! Я очень долго ее искала.

Эта конфигурация увеличивает расстояние между строчками с текстами. Т.е. отступ от строки «Я очень долго искала» сверху и снизу будет 14 пикселей. Это очень важно для того, чтобы красиво расположить текст на странице.

Все, строчки с текстом вставлять научились. Создаем свой шедевр дальше.

Блоки с ссылками

<div  style="padding:22px;">  - обозначаем расстояние между блоками

<h2><p>Или воспользоваться </p>  - уже берем h2, и обозначаем, что это отдельная строчка

<p> <strong>    - начало строчки, обозначение того, что текст будет выделен жирным

<a href="http://yandex.ru/sitesearch?text=&searchid=2040503&lr=213" target="_blank"><span style="text-decoration: underline;"><span style="color: #008000; text-decoration: underline;">Поиском </span></span></a> - вставка ссылки

</strong> на сайте</p> конец строчки

</div> - конец блока (начало обозначается div)

Как поставить ссылку: идем опять на страницу на админ панели и пишем текст и вставляем туда нужную вам ссылку, окрашиваем, делаем подчеркивание … Вообщем оформляем как нужно. А потом просто копируем из вкладки с кодами. И получаем часть, обозначенную «вставка ссылки».

Дальше я копирую эти блоки, вставляя нужный текст и нужные ссылки.

У меня в этом блоке стоит ссылка на мой Яндекс Поиск по сайту. Чтобы сделать ссылку на эту страницу, вам нужно перейти на эту страницу и взять ссылку из строки браузера.

Блок с последними записями

<div  style="padding:22px;">

<h2><p>А можете посмотреть </p>

<p>последние статьи блога</p>

<p>вдруг вы что-то не читали?<p>

</div>

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

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

Блок с предложением подписаться на новости и подпись

<div  style="padding:22px;">

<h2><p>Да, еще приглашаю вас </p>

<p>подписаться на обновления,</p>

<p>что бы не пропустить что-нибудь интересное!<p>

</div>

Думаю, тут комментарии не нужны. А это код изображения кнопки, которая перенаправляет на страницу подписки.

<p style="text-align: center;"><a href="http://feedburner.google.com/" target="_blank"><img class="aligncenter size-full wp-image-49" alt="подписканастатьи" src="http://point-up.ru/wp-content/uploads/2012/09/main-header_new.gif" width="260" height="38" /></a></p>

Тут я делаю так же, как писала раньше – на странице в админ панели вставляю свою обычную кнопку, прикрепляю к этому изображению ссылку и копирую код.

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

<p style="text-align: center;"></p>

<p style="text-align: right;"><strong>Буду рада видеть вас вновь!</strong></p>

<p style="text-align: right;"><span style="color: #800000;"><em>Ирина Юр</em></span></p>

Заключительный блок

<!-- The main column ends -->

<?php get_footer(); ?>

Что ж, просто вставляем и все.

Ух! Ну вроде все рассказала.

Скачать шаблон страницы вы можете тут скачать подарок   

Но… А знаете, можете сделать все еще проще!

Вы просто отрываете новую запись в админ-панели WP, оформляете красиво. И, по-сути, ваша страница 404 готова. Потом вы ее очень просто собираете: берете начальный блок, потом вставляете код, который вы возьмете из своей записи, потом берете заключительный блок. По желанию, вставляете в нужном месте строчку, которая будет выводить последние посты. Как видите, бояться особо кодов не нужно, можно «обхитрить» науку сайтостроения и сделать все намного проще!

Итак, надеюсь, ваша страница 404 будет уникальная, полезная и очень интересная! И вы сможете ее сделать быстро и просто!

А дальше я расскажу как можно приукрасить Карту сайта. Так что не пропустите! Подписывайтесь на обновления!

Подписаться на обновления

.

.

Это важно и интересно:

Еще один технический урок: "Поделиться" Яндекс - как установить социальные кнопки на сайт.

А если вы решили сделать страницу благодарности за первый комментарий или подписку, то вам нужно будет ее скрыть от посторонних глаз.

Еще один хитрый трюк - для попадания в ТОП вовсе не нужно быть мегакрутым сайтом. Просто нужно знать одну хитрость.

30 thoughts on “Ошибка 404 — страница не найдена. И что дальше?

  1. О, спасибо, Ирина, для меня эти коды- темный лес, буду делать по Вашим инструкциям!)

  2. Алина, добрый вечер! Темный лес — это не страшно. Главное — когда будете его рубить, смотрите чтобы щепки далеко не улетели)))
    Создайте на всякий случай копию сайта. И обязательно копию страницы 404 в начальном варианте.
    Тогда уже не страшно!!
    Удачи!

  3. Ир, фотка классная, на мою дочку похожа, такая же взьерошенная просыпается. А у меня шаблон страницы 404 в редакторе внешнего вида, это значит мне не надо лезть в файловый менеджер?

  4. Ольга, здравствуйте! У меня тоже. Вот только что-то у меня там не срослось, с этим внешним редактором. Если у вас все получиться — то буду только рада! Все же меньше мороки. :yes:

  5. Здравствуйте, Ирина! Дело :rose: в том, что все изменения, которые я произвели не выбиваются на странице. Вообще ничего нет. С чем это может быть связано? :heart:

  6. Ирина, здравствуйте! Не знаю, отправлен ли был предыдущий комментарий. Я просто продублирую. Если все изменения на стр 404 не отражаются вообще — это проблема с темой сайта или я делаю что-то не то?

  7. Арина, здравствуйте. Может быть несколько вариантов:
    — вы выбрали не тот файл 404 страницы. У меня была подобная заморочка. Очень часто у нас храниться несколько тем, которые мы раньше устанавливали, просматривали и т.д. Когда я поняла, что где-то что-то не клеиться, то я их все удалила из админ панели, оставила только ту, которая установлена.
    — для того, чтобы отобразились изменения, попробуйте закрыть сайт и открыть еще раз, заново. Не знаю, с чем именно это связано, но такое у меня тоже было: вроде ковыряешь-ковыряешь, а ничего не меняется. Потом открываешь его заново — и оп-ля! оказывается все ок.
    Если эти варианты не устранят проблему — пишите, помогу.

  8. Написано достаточно толково, но все это такое. Если сайт мне интересен, то я буду его читать вне зависимости от красоты 404 страницы или подарков за первый комментарий. Если же сайт банально скучен, то какие страницы не делай — это не поможет.

  9. Админ, отдельное спасибо за «толково». Приятно! :yes:
    А по поводу 404 — ты прав. Если честно, то я ни разу ни у кого на такую вот страницу не попадала.. Может мне просто повезло?
    НО, как говориться, в человеке все должно быть прекрасно: и тело, и душа и мысли.
    Так же, наверное, и у блога: и главная, с посты, и 404-я :unsure:
    Тогда, наверное, ответ на вопрос: » как создать страницу 404?» не настолько уж и бессмысленен

  10. Стыдно признаться, у меня такой страницы нет. Несколько раз хотел оформить и все откладывал. Может по этому уроку и сделаю скоро.

  11. Олег, добрый вечер. Ну и чего тут стыдного? Я же писала — в основном, на всех сайтах, где размещен материал о создании 404 страницы — ее нет. Вот этим товарищам должно быть стыдно: пишешь, учишь, а у самого пшик!
    Будет время — сделаешь.
    Тем более, как мне кажется, с этими заготовками ее можно создать ну….максимум за пару часов.

  12. Спасибо, Ирина, за поддержку и советы! Сейчас сразу же попробую все сделать, как Вы советуете и отпишусь о результатах.

  13. Ирина, здравствуйте, все сделала, но ничего не получилось. Может, и не надо эту страницу делать? Вот у меня еще маленький вопрос. Если я установила форму подписки feedberner все работает. Но smurtresponer не работает. Перенаправляет на страницу Ошибка 404. Этот конфликт из-за темы сайта или feedberner неправильно установлен?Огромное спасибо, что выслушали!

  14. Добрый день, Арина.

    — по поводу 404 — странно, что ничего не получается… если хотите — могу посмотреть. но нужны будут пароли доступа в админку. Напишите в комментариях и я вам напишу по вашей эл почте.

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

    Так что — если хотите,то могу попробовать помочь. :yes:

  15. Ирина, какая ты умница! написала такую подробную инструкцию, и очень вовремя, я как раз планирую создать свою уникальную страницу 404 на что-нибудь оригинальное, спасибо за инструкцию и технические идеи!

  16. Рашида, спасибо огромное! Рада, что материал, как говориться «пришелся в тему»! Страница получилась классная!!!

  17. Я как-то особо с этой страницей не заморачивался, вставил картинку, да и все дела, просто, когда делал тему, хотелось побыстрей закочить все. Но в будущем, конечно, нужно будет и себе эту страничку довести до ума, тем более я в интернете много раз видел прикольные макеты таких страниц, можно подобрать что-то юморное :).
    А по поводу статьи, то Вы как всегда на высоте! Все предельно просто и понятно!!!

  18. Виталий, спасибо за оценку материала!
    А по поводу 404 — вот если честно, то я думаю, что скорее всего это очередной миф. Вот сколько сайтов ни посещаю, ни разу не попадала на такую вот страницу. Но… вроде как все говорят — «нужно», поэтому и сделала.
    Во-первых — «нужно», во-вторых это было интересно.
    Так что — все что ни делается все к лучшему!
    Ну и злополучная » Ошибка 404 — страница не найдена » может превратиться во что-то прикольное!

  19. Не страница получилась, а целый шедевр! Ирина, у тебя классно получилась передать весь драматизм ошибки 404, когда посетитель блога не находит нужный ему материал. А такая симпатичная, но грустная девчушка в главной роли заставляет читателя остаться на блоге и срочно искать себе любой материал — девочку подводить никому не захочется! :)

  20. Максим, спасибо большое за комментарий! Но, если честно, то чувствую себя просто этаким «монстром-спекуляторшой» ;-) Вроде как «давлю на жалость через ребенка» :mail: (шучу)

  21. Ух ты, Ирина! Какая страница классная получилась! Просто хочется любоваться. А дочка (2,7 г.) рядом пробегала, сказала «Обизеный ребенок» (только «Р» мы не выговариваем :)), очень здорово. Надо себе тоже сделать по-человечески. А то есть у меня эта страница по умолчанию в самой теме, но там только поиск предлагается повторить.

  22. Андрей, здравствуй! Рада, что вновь зашел на огонек!

    Елена, спасибо!
    Да, эта страница не критически важная, но…. Если есть возможность сделать что-то интересное, то почему бы и нет, неправда ли? ;-)

  23. Ирина спасибо за полезную статью. Страница получилась отличная. Буду работать над своим сайтом

  24. Добрый вечер! Смотрела — у вас тоже очень милая страница. Рада, что у вас все получилось! Надеюсь, моя статья по 404 странице оказалась полезной!

  25. Ирина, здравствуйте! Сижу уже часа четыре, вначале, правда, с Файлзиллой разбиралась. Толком не разобралась, все равно пришлось менять страницу 404 через файловый менеджер на хостинге.

    Никак не получилось вывести последние записи, как ни вставлю код, не получается. Решила пока сделать без них.

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

    Я так понимаю, что это из-за того, что копировала и правила посредством Блокнота. Уже сталкивалась при правке robot.txt, что нельзя в блокноте править. Но совсем не помню, как исправить теперь и в каком редакторе вносить изменения.

    Надеюсь, не очень запутала? Буду благодарна, если что-нибудь подскажете. :unsure:

  26. Галина, добрый день. Ммммм….. Дело в том, что я не очень с Файзилой. Обхожусь возможностями редактирования через хостинг.
    Что можно сделать…
    — когда у меня какой-то ступор в аналогичной работе — я все удаляю и начинаю заново.
    проверьте, чтобы у вас была ОДНА тема, загруженная на ваш домен
    найдите 404 стр и все-все там удалите.
    попробуйте сначала поставить просто фразу. Одну фразу.
    Потом обновитесь, СРАЗУ ЖЕ могут изменения и не появиться.
    попробуйте пару раз, потом еще раз минут через пять.
    должно сработать.

    Попробуйте начать с одной фразы, напишите, потом посмотрим. ОК?

  27. Ирина, спасибо, что помогаете разобраться!
    Пока только удалила все лишние темы в админке. Но это не было причиной, потому что на хостинге я правильно все сделала. Снова, когда открываю там страницу 404 в предпростмотре, все показывает нормально.
    Думаю, может быть ошибка закралась в код при копировании из блокнота? Тогда почему в предпросмотре я вижу страницу?
    Удалить и сделать заново тоже попробую, сейчас просто времени нет.
    А не подскажете, как с сайта посмотреть свою страницу 404? У меня раньше не корректно работал плагин Print, выдавал ошибку 404, и не было проблем посмотреть, а сейчас я его наладила и печать работает.

  28. Галина, добрый вечер.
    Посмотреть свою 404 очень просто — в конце любой вашей строки введите любые цифры, т.е. несуществующий адрес. И вас должно будет перевести на 404 страницу.
    Гм…. Знаете, Галина, тут что-то сказать сложно. Нужно смотреть сами коды и сам сайт.
    Если что- пишите в комментариях, можем списаться.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>