Как создать пользовательскую страницу 404 в дочерней теме WordPress

Независимо от того, насколько хорошо спроектирован и спроектирован ваш веб-сайт, в какой-то момент пользователи столкнутся со страницей 404. Это может быть что-то такое же простое, как ввод URL-адреса с орфографической ошибкой. Например, если у вас есть контактная страница, найденная по адресу www.website.com/contact, и кто-то пытается попасть на www.website.com/contacts, есть большая вероятность, что они будут перенаправлены на страницу 404. Кроме того, корректировки содержимого веб-сайта не всегда могут учитывать страницы, которые могли быть перемещены без перенаправления ссылок. Надеемся, что это не слишком часто случается с вашими пользователями, но когда это происходит, это возможность предложить помощь и сделать что-то уникальное для вашего бренда.

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

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

Фигма

Figma — это простая страница 404, но графика очень хорошо сочетается с векторными точками. Мне нравится, насколько это просто и смело; это действительно все, что нужно.

Airbnb

Этот пример предлагает немного больше с точки зрения содержания. Иллюстративный подход содержит элемент юмора. Это включает в себя некоторые из основных ссылок. Если пользователь что-то опечатался, вполне возможно, что он сможет найти то, что ищет в списке.

MailChimp

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

Получите темы Genesis Framework и StudioPress бесплатно!

Когда вы размещаете свои сайты на Flywheel, у вас будет доступ к более чем 30 премиальным темам WordPress (включая Genesis!) прямо с нашей восхитительной панели инструментов. Это более 2000 долларов, с которыми вы можете начать всего за 15 долларов в месяц! Узнайте больше здесь.

Создание пользовательской страницы 404

Перво-наперво: все настройки должны выполняться в дочерней теме. Таким образом, любые модификации не будут переопределены обновлениями обычной темы. Эта страница 404 будет файлом в дочерней теме, точнее, файлом с именем 404.php .

Как добавить переменные CSS для настройки дочерних тем WordPress

Переменные CSS, также называемые пользовательскими свойствами CSS, позволяют легко повторно использовать их в таблицах стилей CSS. Если вы работали с дочерними темами WordPress, вы, вероятно, обнаружите, что делаете много стилей...

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

1. Создайте новый файл

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

2. Отредактируйте файл

Базовый пример

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

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

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

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

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

Виджетный подход

Это необязательно, но многие дизайнеры предпочитают работать с областями виджетов. Легче вносить изменения и удобнее в сопровождении. Например, виджет — это эффективный способ отображения самых последних и популярных статей блога.

Добавление виджета

Чтобы добавить виджет в 404.php file , вам нужно создать новую область виджетов. Дочерней теме нужен файл functions.php , поэтому сейчас самое время проверить, есть ли он в дочерней теме.

В файле functions.php потребуется сниппет для добавления нового виджета на страницу.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

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

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

<?php dynamic_sidebar( '404' ); ?>

Теперь, когда вы установили, где отображать новую область виджетов, пришло время добавить содержимое виджета, выбрав « Внешний вид» > «Виджеты» . Здесь вы можете выбрать такие вещи, как блок HTML, популярные сообщения или любой другой виджет для страницы 404.

Независимо от того, создаете ли вы что-то простое или страницу с множеством ссылок, создать пользовательскую страницу 404 довольно просто. Использование дочерней темы и виджетов открывает неограниченные возможности дизайна.

Ищете другие способы настроить свой сайт? Посмотрите эти уроки:

• Как добавить переменные CSS для настройки дочерних тем WordPress
• Простые настройки для вашей дочерней темы Genesis
• Как создавать и использовать настраиваемые поля в WordPress