Своя 404 страница в Wordpress-теме Divi и Extra

Введение

404 страница появляется всегда, когда пользователь переходит по "битой" ссылке. "Битая" ссылка - это когда страница или запись по этой ссылке не найдена на сайте.

Если вы знаете PHP - то заменить в WordPress-теме стандартный шаблон страницы 404 на свой дизайн относительно легко. Ну а если не знаете?

Будет замечательно иметь возможность самостоятельно настроить страницу ошибки 404, используя для этого конструктор страниц. Без создания кода на PHP, конечно.

Ниже приведены 2 способа для темы Divi и темы Extra компании ElegantThemes переделать стандартный шаблон страницы 404 на свой дизайн.

Настройка шаблона для темы Divi кодом

По умолчанию, за вывод "не найденных" страниц в теме Divi "отвечает" шаблон no-results.php и содержит это файл следующий код:

 
<div class="entry">
<!--If no results are found-->
 <h1><!--?php esc_html_e('No Results Found','Divi'); ?--></h1>
 <p><!--?php esc_html_e('The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.','Divi'); ?--></p>
</div>
<!--End if no results are found-->

Мы собираемся заменить код шаблона своим кодом PHP, который загружает для ошибки 404 отдельную страницу, которая, в свою очередь, создана с использованием конструктора Divi.
Для этого нужно сделать следующие шаги:

1. Рекомендую использовать дочерную тему. В корневом каталоге используемой дочерной темы создайте папку с именем 'includes' (в том же месте, что и файл functions.php). Если используете дочерную тему, которая уже имеет папку 'includes' - пропустите этот шаг.

2. Внутри этой папки создайте файл с именем 'no-results.php' или скопируйте его из родительской темы Divi (вы найдете этот файл в папке родительского шаблона Divi/includes/ ).

3. Откройте файл 'no-results.php' в редакторе. Если он не пустой - удалите в нем весь код и вставьте туда код ниже:

<div class="entry">
<!--If no results are found-->
 <?php $id = ###; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
</div>
<!--End if no results are found-->

В коде значки ### надо будет заменить на id страницы.

Если вы обеспокоены, что можешь сделать перечисленные выше действия в чем-то неправильно - то просто распакуйте этот архив custom-404.zip в корневом каталоге дочерной темы. В нем уже внесены нужные изменения в коде шаблона.

Добавление содержимого на страницу 404

Теперь вы заменили стандартный шаблон 404 своим собственным, который при обращении к нему вызывает отдельную страницу по ее ID.

Следующим шагом является создание этой страницы и "привязка" ее к шаблону.

1. Создайте новую страницу. Убедитесь в том, что это страница, а не запись.
2. Добавьте на страницу любое содержание, которое будет отображаться при ошибке 404. Используйте конструктор страниц.
3. Сохраните страницу как черновик и определите идентификатор ID этой страницы.

Как определить идентификатор страницы ID

Чтобы получить идентификатор страницы ID просто наведите курсор мыши на кнопку "Изменить" рядом с опцией "опубликовать сразу" в разделе публикации.

В левом нижнем углу вы увидите код: post=###. Число есть идентификатор страницы.

Сохраните страницу. Скопируйте этот номер и перейдите в редактор ( Внешний вид> Редактор) в меню администратора.

Найдите файл с именем no-results.php и кликните на него мышкой для редактирования.

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

Заключительный шаг - настройка отображения 404 страницы с помощью CSS

Можно добавить некоторые стили CSS для настройки отображения 404 страницы.

Например, чтобы удалить все отступы и поля со значениями по умолчанию для 404 (чтобы страница заполняла всю доступную область экрана) - добавьте вот такой CSS в таблицу стилей дочерной темы:

.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
 padding: 0 !important;
 margin: 0 ;
 width: 100% !important;
 max-width: none;
}

/*отключаем сайдбар*/
.error404 #sidebar {
 display: none;
}

.error404 .et_pb_post:last-child {
margin-bottom: 0;
}

Настройка шаблона 404 страница для темы Extra

В отличии от темы Divi в теме Extra для вывода "не найденных" страниц нет отдельного шаблона. И поэтому, чтобы создать свою страницу 404 для темы Extra необходимо выполнить все действия, описанные выше для темы Divi и плюс дополнительно создать шаблон обработки ошибки 404.
Для этого:
1. В корневом каталоге дочерной темы создайте файл с именем '404.php'.
2. Откройте созданный файл ‘404.php’ и добавьте в него этот код:

<?php get_header(); ?>
<div id="main-content">
<div class="container">
        <div id="content-area" class="<?php extra_sidebar_class(); ?> clearfix">
            <div class="et_pb_extra_column_main">                
                <article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>
                    <?php get_template_part( 'includes/no-results', '404' ); ?>
                </article> <!-- .et_pb_post -->                
            </div>
            <?php get_sidebar(); ?>
        </div> <!-- #content-area -->    
</div> <!-- #main-content -->
<?php get_footer(); ?>

Сохраните файл и все должно работать.

Или же распакуйте этот архив 404.zip в корневом каталоге дочерной темы. В архиве содержится "готовый" файл 404.php