Страница 404 WordPress. Создание и Настройка

Давайте рассмотрим, для чего нужна страница 404 в WordPress, изучим её особенности и, что самое важное, узнаем, как создать эту страницу.

А также в качестве бонуса предоставим примеры оформления страницы 404, которые вы можете использовать на своем сайте.

Для чего нужна страница 404 WordPress?

Страница ошибки 404 — это сообщение для пользователей, которые попадают на несуществующий URL-адрес вашего сайта. Предположим, у вас ранее была доступна страница по определенному URL-адресу, но в какой-то момент она была удалена. Несмотря на это, она все еще может оставаться в индексе поисковых систем. Когда пользователь пытается перейти на эту страницу, которая уже не существует, он видит сообщение (404: страница не найдена).

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

Как сделать страницу ошибки 404 в WordPress

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

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

Создаем файл 404.php

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

Добавить файл 404.php в тему

Переместите созданный файл 404.php в директорию вашей активной темы WordPress. Путь выглядит так: /wp-content/themes/название-вашей-темы/.

Добавляем контент на страницу ошибки 404

Теперь нам нужно наполнить файл 404.php контентом, который будет отображаться на странице ошибки 404.

Мы добавим следующее содержимое:

Текст об ошибке с подробной информацией.
Поле поиска по сайту.
Кнопку перехода на главную страницу сайта.
Вывод тегов сайта WordPress.

Поместите этот код в ранее созданный файл и проверьте результат. Для этого просто перейдите на своем сайте на несуществующую страницу. Например, https://домен-сайта.ру/kontaktu-list-page.

<?php
   /* Страница ошибки 404 (not found). */

   get_header(); ?>
<section class="ws-content-area">
   <main class="ws-site-main">
      <div class="ws-error-404">
         <header class="ws-entry-header">
            <h1 class="ws-page-title">404 <span>Страница не найдена</span></h1>
            <a class="ws-button-home" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">Перейти на главную</a>
         </header>
         <!-- .entry-header -->
         <div class="ws-entry-content">
            <p>К сожалению, запрашиваемая страница не найдена. Вы можете воспользоваться поиском или вернуться на главную страницу сайта.</p>
            <?php get_search_form(); ?>
            <?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>
         </div>
      </div>
   </main>
   <!-- #main -->
</section>
<!-- #primary -->
<?php get_footer(); ?>

И на последнем шаге добавьте CSS-стили в файл style.css:

/* стили страницы ошибки 404 */

.ws-content-area {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
    Background: #fff;
}

.ws-entry-content {
    max-width: 800px;
    margin: 0 auto;
}

.ws-entry-header {
    text-align: center;
    margin-bottom: 75px;
}

.ws-entry-header h1 {
    font-size: 180px;
    line-height: 0.8;
    margin: 0;
}

.ws-entry-header h1 span {
    font-size: 30px;
    display: table;
    margin: 30px auto 0;
    font-weight: 400;
}

a.ws-button-home {
    display: inline-block;
    padding: 13px 20px;
    background: #333;
    border-radius: 5px;
    margin-top: 35px;
    font-size: 14px;
    color: #fff;
}

@media (max-width: 720px) {
    .ws-entry-header {
        margin-bottom: 55px;
    }

    .ws-entry-header h1 {
        font-size: 130px;
    }

    .ws-entry-header h1 span {
        font-size: 22px;
    }
}

@media (max-width: 460px) {
    .ws-entry-header {
        margin-bottom: 35px;
    }

    .ws-entry-header h1 {
        font-size: 80px;
    }
    .ws-entry-header h1 span {
        font-size: 18px;
    }
}

Примеры оформления страницы 404

И как обещали в начале статьи, давайте рассмотрим пару примеров оформления ошибки 404.

Эффект Glitch

Посмотреть демо


<?php
    /* Страница ошибки 404 (not found). */
    get_header(); ?>
        
<section class="ws-content-area">
    <main class="ws-site-main">
        <div class="ws-error-404">
            <div class="ws-entry-content">
                <div class="ws-container-error">
                    <div class="glitch-effect">
                        ERROR 404: NOT FOUND
                        <div class="glitch-text">
                            <div class="glitch-text-1">ERROR 404: NOT FOUND</div>
                        </div>
                        <div class="glitch-text">
                            <div class="glitch-text-2">ERROR 404: NOT FOUND</div>
                        </div>
                    </div>
                </div>
                <p>К сожалению, запрашиваемая страница не найдена. Вы можете воспользоваться поиском или вернуться на главную страницу сайта.</p>
                <a class="ws-button-home" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">Перейти на главную</a>
            </div>
        </div>
    </main>
    <!-- #main -->
</section>
<!-- #primary -->
<?php get_footer(); ?>

CSS-стили:

/* стили страницы ошибки 404 */

.ws-content-area {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
    color: #fff;
    background: #26084A;
    position: relative;
}

.ws-entry-content {
    max-width: 800px;
    margin: 0 auto;
}

a.ws-button-home {
    display: inline-block;
    padding: 13px 20px;
    background: #fff;
    border-radius: 5px;
    margin-top: 35px;
    font-size: 14px;
    color: #333;
}

.glitch-effect {
    position: relative;
    font-size: 3em;
    font-weight: 700;
    -webkit-animation: smallGlitch 500ms infinite linear;
    animation: smallGlitch 500ms infinite linear;
}

.glitch-effect .glitch-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.glitch-effect .glitch-text .glitch-text-1 {
    color: #e600ff;
    -webkit-animation: glitch-1 500ms infinite linear;
    animation: glitch-1 500ms infinite linear;
}

.glitch-effect .glitch-text .glitch-text-2 {
    color: #11B7F2;
    -webkit-animation: glitch-2 500ms infinite linear 100ms;
    animation: glitch-2 500ms infinite linear 100ms;
}

@-webkit-keyframes smallGlitch {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(1px, 1px);
    }

    16.666666% {
        transform: translate(1px, 0);
    }

    25% {
        transform: translate(0, 1px);
    }

    33.333333% {
        transform: translate(0, -1px);
    }

    41.666666% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(-1px, 0);
    }

    66.666666% {
        transform: translate(0, 1px);
    }

    75% {
        transform: translate(-1px, 1px);
    }

    83.333333% {
        transform: translate(0, -1px);
    }

    91.666666% {
        transform: translate(-1px, -1px);
    }
}

@keyframes smallGlitch {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(1px, 1px);
    }

    16.666666% {
        transform: translate(1px, 0);
    }

    25% {
        transform: translate(0, 1px);
    }

    33.333333% {
        transform: translate(0, -1px);
    }

    41.666666% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(-1px, 0);
    }

    66.666666% {
        transform: translate(0, 1px);
    }

    75% {
        transform: translate(-1px, 1px);
    }

    83.333333% {
        transform: translate(0, -1px);
    }

    91.666666% {
        transform: translate(-1px, -1px);
    }
}

@-webkit-keyframes glitch-1 {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(0, 3px);
    }

    16.666666% {
        transform: translate(2px, 2px);
    }

    25% {
        transform: translate(3px, 0);
    }

    33.333333% {
        transform: translate(2px, -3px);
    }

    41.666666% {
        transform: translate(0, -2px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(0, 2px);
    }

    66.666666% {
        transform: translate(-3px, 3px);
    }

    75% {
        transform: translate(-2px, 0);
    }

    83.333333% {
        transform: translate(-2px, -2px);
    }

    91.666666% {
        transform: translate(0, -3px);
    }
}

@keyframes glitch-1 {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(0, 3px);
    }

    16.666666% {
        transform: translate(2px, 2px);
    }

    25% {
        transform: translate(3px, 0);
    }

    33.333333% {
        transform: translate(2px, -3px);
    }

    41.666666% {
        transform: translate(0, -2px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(0, 2px);
    }

    66.666666% {
        transform: translate(-3px, 3px);
    }

    75% {
        transform: translate(-2px, 0);
    }

    83.333333% {
        transform: translate(-2px, -2px);
    }

    91.666666% {
        transform: translate(0, -3px);
    }
}

@-webkit-keyframes glitch-2 {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(0, 3px);
    }

    16.666666% {
        transform: translate(-2px, 2px);
    }

    25% {
        transform: translate(-3px, 0);
    }

    33.333333% {
        transform: translate(-2px, -3px);
    }

    41.666666% {
        transform: translate(0, -2px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(0, 2px);
    }

    66.666666% {
        transform: translate(3px, 3px);
    }

    75% {
        transform: translate(2px, 0);
    }

    83.333333% {
        transform: translate(2px, -2px);
    }

    91.666666% {
        transform: translate(0, -3px);
    }
}

@keyframes glitch-2 {

    0%,
    100% {
        transform: translate(0);
    }

    8.333333% {
        transform: translate(0, 3px);
    }

    16.666666% {
        transform: translate(-2px, 2px);
    }

    25% {
        transform: translate(-3px, 0);
    }

    33.333333% {
        transform: translate(-2px, -3px);
    }

    41.666666% {
        transform: translate(0, -2px);
    }

    50% {
        transform: translate(0);
    }

    58.333333% {
        transform: translate(0, 2px);
    }

    66.666666% {
        transform: translate(3px, 3px);
    }

    75% {
        transform: translate(2px, 0);
    }

    83.333333% {
        transform: translate(2px, -2px);
    }
    91.666666% {
        transform: translate(0, -3px);
    }
}

Открытый космос