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

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

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

Ниже приведен способ для темы Divi и темы Extra компании ElegantThemes сделать стандартный шаблон страницы 404 на свой дизайн. 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-->

 

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

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

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

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

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

Как получить ID страинцы

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

Сохрани страницу. Скопируй этот номер и перейди в редактор ( Внешний вид> Редактор) в меню администратора. Найди файл с именем no-results.php и кликни на него мышкой для редактирования.

Редактирование шаблона 404

В файле необходимо заменить символы ### на идентификатор страницы, который ты ранее скопировал.
Теперь 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

Сообщи в комментариях, какой шаблон ты используешь для ошибки 404 и полезная ли тебе эта статья.

Удачи!
Александр Коваль

При подготовке записи использовал статью (англ)

Метки: