Как создать страницу «Ошибка 404» на WordPress

Сегодня мы вместе с вами сделаем страницу «Ошибка 404» для нашего блога своими руками. Следуя простой инструкции, каждый сможет создать привлекательную страницу для своего сайта.

Статья будет полезной как молодым разработчикам, так и людям, которые вовсе ничего не понимают в сайтостроении, а просто собирают свой блог как конструктор. Именно поэтому мы будем «собирать» эту страницу 404-ой ошибки из нескольких частей.

Также читайте: как должна выглядеть страница «Ошибка 404» + несколько классных примеров.

Анализ 

Дизайнер нарисовал макет страницы, на который мы и будем ориентироваться. Изначально нужно изучить макет и определить основные блоки для вёрстки (так делают опытные верстальщики). Такой подход позволит сэкономить нам время и нервы, избавив от лишних действий. Итак, давайте оценим работу дизайнера:

Как создать страницу «Ошибка 404» на WordPress
Страница 404 веб-студии MEDIOL

Что мы видим? Давайте разбирать по порядку:

  • визуально отсутствует шапка сайта, есть только рамка;
  • в центре изображение «404» и занимает оно чуть больше половины высоты страницы;
  • под изображением заголовок первого уровня с текстом: «Ухты!:) А такой странички у нас нет»;
  • под заголовком подчёркивающая линия, а под ней две кнопки одинакового размера, одна из которых ведёт на главную, а вторая — в блог;
  • под кнопками заголовок третьего уровня с приглашением: «Изучайте материалы и присоединяйтесь к нам. Мы открыты для общения!». Кстати, милости просим посетить другие страницы нашего сайта;
  • ещё ниже у нас блок социальных кнопок;
  • под ними подвал, в мире веб-разработчиков он называется футер. Этот футер остался без изменений.

Если обобщить весь анализ, то наш макет состоит из шапки (header), подвала (footer) и контента (все что между шапкой и подвалом). Как известно, в Wordpress, вёрстка хедера и футера хранится в отдельных файлах. Отсюда, значит, что страницу «Ошибка 404» мы действительно будем собирать из двух частей, а контент сверстаем сами. Пора действовать активнее.

Подготовка к созданию страницы 404-ой ошибки

Часто подготовка отнимает гораздо больше времени, чем основные работы. Но только качественная подготовка позволит сделать меньше ошибок или не сделать их вовсе. Как говорится: «Тяжело в учении — легко в бою».

Я не зря уточнил, что шапка сайта отсутствует визуально. На самом деле код шапки присутствует, но он немного изменён. Без него вся вёрстка сайта на движке WordPress просто слетела бы. Поэтому призываю быть аккуратными.

Для начала найдём файл стандартной страницы ошибки 404 в консоли, чтобы внести необходимые изменения. В большинстве тем он называется 404.php. Кроме него, нам понадобится код шапки и подвала сайта. Они зачастую хранятся в файлах header.php и footer.php соответственно.

Консоль WordPress
Консоль WordPress

Хочу напомнить, что профессиональные разработчики не рекомендуют проводить правки через консоль сайта в целях безопасности и во избежание критических ошибок в его работе! Попросту можно удалить что-то нужное, после чего сайт перестанет работать. Мы тоже последуем их совету и будем работать в популярном текстовом редакторе Notepad++.

Скачаем вышеуказанные файлы с сервера. Они хранятся в корневом каталоге активной темы: http://ваш-сайт/wp-content/themes/имя-темы/. Рекомендация: скачивать и загружать на сервер файлы сайта удобнее через FTP клиент, например FileZilla. Если такой возможности нет, то откройте их в консоли сайта и по очереди скопируйте код в отдельные файлы на компьютере.

Ну вот, теперь можно ковыряться в коде сколько угодно, а сайт будет продолжать работать. Приступим!

Убираем шапку и меню из шаблона ошибки 404

Работаем в файле header.php. Очистим его от меню, логотипа, заголовка и подзаголовка сайта. На скриншоте шапка нашего сайта, которой не должно быть на странице 404-ой ошибки.

header
header

Меню сайта — это навигация, поэтому ищем в коде упоминание про навигацию. В нашем случае меню начинается с тега <nav>, а дальше идёт контейнер с остальными элементами шапки, которые нам не нужны. В блоке, который начинается с <div class=»container»> хранится логотип, заголовок и подзаголовок сайта. Дальше идёт несколько вызовов ненужных нам функций, где снова встречается навигация. Удаляем всё начиная с навигации и до закрывающего тега </header> (см. скриншот).

редактируем header
Редактируем header

После редактирования шапки сохраняем все изменения. Шапка готова, приступаем к контенту.

Верстаем контент страницы «Ошибка 404» в редакторе WordPress

Переписываем заголовки страницы

Теперь работаем в файле 404.php. Ищем предложения «Oops! That page can’t be found» и «It looks like nothing was found at this location. Maybe try one of the links below or a search?» Переписываем их на своё усмотрение.

заголовок страницы
Заголовки страницы

Обратите внимание, что эти предложение заключены в одинарные кавычки, которые нельзя удалять!

Очищаем контент блок

Остаёмся в этом же файле. Находим блок, в котором размещается весь контент страницы. У нас это <div class=»page-content«>. Как видите, все очень логично. Внутри этого блока удаляем все, кроме строчки «It looks like nothing was found at this location. Maybe try one of the links below or a search?», которую мы переписывали чуть раньше (см. скриншот).

Также необходимо удалить два участка вёрстки, которые вызывают код шапки и код подвала сайта:

  • код хедера

  • код футера

Чуть позже на их место мы вставим отредактированную верстку этих блоков.

Пишем HTML разметку

Теперь самое интересное. Верстаем нашу страницу «Ошибка 404» по заготовленному дизайну. Тут не забывайте подсматривать на макет, чтобы не упустить деталей. В контент блок страницы, сразу после тега <div class=»page-content»> вставляем следующий html код:

Внимательно читайте комментарии, там все расписано, каждый тег и его работу!

Хватило всего 23 строки, чтоб описать весь контент, а прикасались мы только с 5 по 20 строки. Но, это ещё не всё. Кроме разметки, нужно ещё назначить стили и «…тогда, наверняка, вдруг запляшут облака, и кузнечик запиликает на скрипке…», то есть страница будет выглядеть именно так, как нам нужно.

Определяем CSS стили разметки

 

Тут нам нужен файл стилей. Его можно найти в разделе «Внешний вид» — «Редактор» — «Таблица стилей» (в списке файлов справа, см. скриншот).

Или же можно найти его и скачать через ftp клиент в той же директории, где находятся файлы хедера и футера.

В файле style.css находим блок стилей для страницы 404 ошибки. В нашем случае такой блок ограничен комментарием /*———-404_error—————*/. После такого комментария мы прописываем следующие стили для всех элементов нашей страницы:

Напоминаю, читайте комментарии напротив строк, чтоб понять, зачем они нужны!

После всех манипуляций не забудьте сохранить результаты.

Вот и контент готов. Осталось подвал отредактировать и можно будет собирать все воедино.

Редактируем подвал сайта

Сейчас нам нужен файл footer.php, в котором надо убрать сайдбары. Для этого нужно найти вызов сайдбара и удалить его. Такой вызов чаще всего выглядит так:

Как раз эти три строки нам необходимо удалить. После удаления сохраните изменения.

Собираем страницу 404-ой ошибки

Мы подошли к последнему шагу. Все сложности позади и сейчас осталось только скопировать два фрагмента кода и вставить в нужное место. Если быть точным, то из файла header.php копируем весь код и вставляем в самое начало файла 404.php. Затем из файла footer.php также копируем весь код и вставляем в конец документа. Таким образом, из трёх частей мы собрали свою уникальную страницу «Ошибка 404».

Благодарим всех читателей за внимание! Если возникают какие-то вопросы, пишите в комментариях. Обязательно прочитаем и ответим.

Как создать страницу «Ошибка 404» на WordPress
Рейтинг: 5 Оценок: 2
comments powered by HyperComments
Иван Медведев

Автор: Иван Медведев

Основатель веб-студии "MEDIOL". Все началось в далеком 2008 году с увлечения сайтами. Довольно быстро это увлечение переросло в хобби. Сегодня профессионально разрабатываю и продвигаю сайты любой сложности. Я занимаюсь любимым делом и делаю это с удовольствием!