Как сделать 404 страницу html. Или перейти в любую категорию блога
Добрый день всем, сегодня на очереди 404 страница . 404 страница – это страница, которая открывается тогда, когда пользователь переходит по не существующему адресу (URL). Я уверен, Вы ее часто встречали. Приведу Вам пример 404 страницы моего блога:
Если Вы “в живую” хотите увидеть как же выглядит эта “волшебная страница” на , просто наберите в строке браузера несуществующий адрес в блоге. Например, я ввел случайный набор чисел и букв:
Вы также можете посмотреть у себя на блоге, как выглядит 404 страница. Если она Вас устраивает, оставьте ее таковой, если же нет, читайте дальше, мы вместе будет создавать/редактировать “страницу неправильного адреса”.
Создание и редактирование 404 страницы
404 страница нужно обязательно! Она позволит удержать посетителя Вашего блога. Обычно те, кто видят стандартную 404 страницу ошибки, просто уходят с блога (а что еще делать, если перед их глазами какая-то непонятная надпись “Error 404. Page not found”).
Давайте приступим.
Готовая 404 страница.
Приведу пример 404.php блога FanBar.ru. Я в нее добавил все необходимые комментарии, чтобы объяснить Вам какой код что делает, чтобы облегчить Вам процесс создания 404 страницы ошибки . Эту страницу Вы можете (просто разархивируйте архив), а кому лень скачивать, смотрите код ниже:
Могут быть несколько причин:
Предлагаю перейти:
- На главную страницу
- Написать в контакты
В принципе, все. Будут вопросы – пишите в комментариях. И не забывайте завтра - воскресенье, бесплатная . Участвуйте все!
_____________________________
Следующий урок : Урок 56 : выводим кнопку retweet на блоге.
Ошибка 404. Такая страница не найдена.
Могут быть несколько причин:
- Страница перемещена или переименована
- Страница больше не существует на этом сайте.
- URL не соответствует действительности.
Предлагаю перейти:
- На главную страницу
- Написать в контакты
Также, можете воспользоваться поиском:
Или перейти в любую категорию блога:
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Ошибка 404 или Not Found («не найдено») - код ответа сервера на несуществующую страницу на сайте.
Как это работает?
Весь процесс происходит по протоколу передачи данных HTTP. Клиентское приложение формирует и отправляет запрос серверу. Сервер, в свою очередь, обрабатывает данный запрос и формирует ответ.
В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:
Причины 404 ошибки
Красивая страница 404 для сайта обязательно вам понадобиться, чтобы показать ее пользователю, когда тот:
- Перейдет по неправильной ссылке, которая содержит синтаксическую ошибку или просто опечатку.
- Попадет на страницу, которая в данный момент не существует. Это означает, что данные могли перенести или вовсе удалить. Также можно предположить, что данной страницы (а значит и ссылки) вообще не существовало.
В любом случае страница уведовляет пользователя о том, что страничка, которую он намеревался посмотреть, не найдена.
Как сделать 404 страницу?
В первую очередь следует разобраться с тем, как формируется страница 404 для сайта. На самом деле это такая же страница, как и любая другая на вашем веб-проекте.
Если вы используете какую-то CMS, то вам нужно знать структуру файлов и страницу, которая отображается при отработке 404 кода ошибки. Если ваш сайт не на движке, то вас спасет системный файл.htaccess, который располагается в корневой папке вашего сайта. В случае если он отсутствует, создайте его сами.
Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:
ErrorDocument 404 //сайт/404.php
Всё довольно просто!
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu"s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
- если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
- если страницы уже не существует - просто удаляем ссылку.
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта.
Оформление 404 страницы
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде - они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно - потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы
- Скажите “Нет!” технической информации!
- Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
- Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
- разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
- разместить полезные ссылки- это может ссылки на популярный или новый контент.
- Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать - не стоит слишком нагружать ее контентом.
Дизайн страницы 404
Визуальное оформление 404 страницы не должно выбиваться из общего дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора - это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько:
Для чего нужна страница ошибки 404, как правильно ее настроить и сделать максимально привлекательной для пользователя? Все эти вопросы не перестают быть актуальными для тех, кто создает свой , самостоятельно его настраивает и улучшает для своих клиентов и пользователей.
Настройка страницы 404 WordPress имеет некоторые нюансы, о которых пойдет речь в данной статье. Так для чего необходимо тратить драгоценное время и отдельно создавать страницу ошибки для своего сайта?
Какие функции выполняет страница 404 WordPress
Ошибка 404 означает, что серверу в данную секунду не удалось найти необходимую страницу по ссылке, которую указал пользователь. Существует несколько причин отсутствия страницы по указанному адресу. Или такую страницу никто никогда не создавал, осуществлен переход по битой ссылке, или же ее удалили. Во всех случаях система перенаправляет пользователя на специально подготовленную страницу ошибки.
Пример:
Чтобы не загонять пользователя в тупик после попадания на ошибочную страницу, важно ее оформить максимально понятно и правильно. В противном случае он просто покинет ваш сайт навсегда.
Стилизованная под общую тематику сайта, страница удерживает внимание пользователя и может рекомендовать использовать дополнительные ссылки, которые могут его заинтересовать.
Как сделать страницу 404 WordPress
Как сделать страницу 404 WordPress по всем правилам?
На странице ошибки, которую пользователи покидают реже, чем дефолтную:
— Не должно быть редиректа. Даже если нужной пользователю страницы нет, поисковым роботам необходимо видеть эту информацию. Таким образом ошибочная страница не будет индексироваться.
— Как уже говорилось выше, страницу ошибки рекомендуется оформлять в соответствии с общей тематикой сайта.
— Попросите своих читателей в случае нахождения ссылок, по которым невозможно попасть на нужные страницы, сообщать их вам по указанным координатам.
— На странице ошибки стоит в обязательном порядке указать ссылки и информацию, которая может заинтересовать пользователя. Также рекомендуется разместить форму поиска для удержания своих клиентов.
— Не стоит указывать на 404 странице слишком много технических моментов, лучше оформить и объяснить ситуацию пользователям в простой и понятной форме.
Итак, положим, вы уже работаете в админке WordPress. Чтобы создать страницу ошибки, перейдите в панель управления Внешний вид — Редактор .
Найдите в правом сайдбаре файл 404. php и нажмите на него для редактирования.
Шаг 1.
Страницу 404 not found WordPress нужно адаптировать под вашего русскоязычного пользователя. Потому все сообщения внутри кода вы можете заменить на свои. Кавычки и другие элементы, присутствующие в коде, старайтесь не упустить и случайно не удалить.
Шаг 2.
Внедряем форму поиска.
Для этого в код страницы просто нужно вставить следующий элемент кода:
Кстати, вы можете также вставить на страницу ошибки скрипты от Google или Яндекса. С их помощью пользователь сможет сделать запрос в поисковую систему прямо с вашей 404 страницы.
Шаг 3.
Если вы хотите дать возможность пользователям сразу со страницы ошибки перейти к разделам вашего сайта, вставьте следующие дополнительные строки в основной код страницы.
Новые статьи сайта
Разделы сайта
Архивы
Креативное изображение, добавленное на страницу ошибки вместе с фановым текстом и оформленными ссылками сайта, делают 404 интересной и заставляют пользователей остаться с вами.
Кстати, страницу ошибки можно создать при помощи специальных плагинов. Однако некоторые специалисты считают, что проще всего руками добавить необходимые строки кода и не нагружать свой ресурс сторонними расширениями.
- Уделите к своим пользователям должное внимание на странице ошибки, будьте вежливыми и выдержанными;
- Не нужно слишком перегружать эту страницу ссылками;
- Попытайтесь подойти к созданию страницы ошибки креативно и с юмором;
- Предложите тем, кто попал случайно на страницу ошибки, попытаться еще раз найти нужную им информацию и предложите для удержания клиентов, например, ссылку на свои продукты;
- Однако старайтесь, чтобы как можно меньше ссылок с вашего сайта были битыми или неправильными. Во-первых, этим вы повысите качество своего сайта, а во-вторых, это положительно скажется на поисковой оптимизации и SEO.
Обратите внимание на то, что некоторые WordPress шаблоны могут не иметь страницы 404. Однако ее все же рекомендуется создать, поскольку при ошибке и активированном ЧПУ система WordPress обращается к файлу 404.php. В случае его отсутствия, пользователь попадает снова на главную страницу сайта, что может в конечном итоге его полностью запутать.
При создании страницы ошибки не будьте скучными и, возможно, ваша 404 станет настоящим онлайн-достоянием, на которое захотят равняться все.
Почему обязательно надо делать свою 404-ую страницу?
Главная и единственная причина – это не потерять посетителя. У каждого пользователя наверняка возникала такая ситуация, когда нажимая на ссылки на каком-нибудь сайте, браузер вместо запрашиваемой страницы показывал свою дефолтную страницу ошибки. Ошибка возникает в результате неправильно введенного запроса или запрашиваемая страница, была удалена самим веб-мастером. В таком случае все посетители ведут себя одинаково – закрывают страницу и уходят с вашего сайта.
Хватит воду лить! Давай конкретику!
Создаем два файла – 404.html и .htaccess (этот файл без имени, но с расширением htaccess ), который автоматически перенаправляет посетителя на 404.html , в случае возникновения ошибки. Чтобы перенаправление работало, в этот файл надо прописать одну единственную строку:
ErrorDocument 404 http://www.site.ru/404.html
Когда оба файла будут готовы, залить их на сервер в корень домена.
Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу , активно применяя HTML5 и CSS3 . Я придумал свой способ, как сделать простую и красивую 404 страницу .
Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200x750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay.com это забавное изображение.
Я хочу расположить картинку как фон на все окно браузера и в центре браузера написать – 404 страница не найдена и поставить ссылку на главную. Разберем подробнее самые важные моменты.
Эффект полупрозрачности RGBA
Выбранное изображение слишком яркое, надо его слегка затемнить, тогда текст будет более читаемый. Эффект полупрозрачного затемнения, можно получить используя RGBA , прописав в стилях блока следующую строчку кода:
Background: rgba (0, 0, 0, 0.7);
Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0...1).
Позиционирование элементов
Для правильной верстки моего примера 404 страницы
, без понимания как работает свойство position
, будет трудно. Посмотрев на конечный результат 404 страницы
, нам надо понять структуру HTML
документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой
– сама картинка, средний в теге У среднего слоя будет абсолютное позиционирование, поскольку положение элемента (блок затемнения) задается относительно краев браузера с нулевыми отступами. Position: absolute;
Верхний текстовый слой позиционируем относительно элемента среднего слоя. Position: relative;
Имея этот готовый код и меняя только само изображение, можно наделать себе массу разных «ошибочных» страниц.
Если Вы планируете заниматься созданием сайтов на заказ, то разобраться во всех тонкостях верстки, используя HTML5 и CSS3, Вам поможетКод страницы 404
перейти на главную страницу..