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

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

Как выглядит большинство страниц 404 в WordPress?

Страницей 404 наиболее часто пренебрегают на своих сайтах. Большинство страниц 404 в темах WordPress выглядят так:

Страницы 404 в WordPress обрабатываются файлом шаблона под названием 404.php.

Если же у вас все не очень хорошо с ней, то 404 будет выглядеть примерно так:

Так или иначе страницы 404 реально полезны.

Когда пользователь попадает на 404, они часто обескуражены. Почему? Потому что они не смогли найти то, что искали.

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

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

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

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

Если вы редактируете вашу тему напрямую, то обязательно прежде сделайте резервную копию темы!

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

Это позволит новым пользователям сразу представить себе что вы можете им предложить.

Выводим наиболее популярные записи на странице 404

Мы будем использовать один из лучших плагинов WordPress для популярных записей для вывода их на нашей странице 404.

Прежде всего вам необходимо установить и активировать плагин WordPress Popular Posts на вашем сайте. После активации вам будет нужно добавить следующий тег шаблона в ваш файл 404.php в то место, где вы хотите вывести популярные записи.

<?php wpp_get_mostpopular(); ?>

Выводим наиболее комментируемые записи на страницах ошибки 404

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

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

Выводим последние записи на странице ошибки 404

Существует множество способов вывести свежие записи в WordPress. Самый простой путь — добавить тег шаблона в шаблон страницы 404 для вывода ваших недавних записей.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Выводим случайные записи на странице 404

Если вы хотите вывести список случайных записей в WordPress, то вы можете добавить следующий код в шаблон 404 в то место, где вы хотите вывести список случайных записей с вашего сайта.

<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post) { ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php } ?>
</ul>

Добавляем архивы по месяцам с помощью Compact Archives

С помощью плагина Compact Archives можно вывести архивы по месяцам. Для этого устанавливаем и активируем этот плагин. После активации добавляем следующий код в ваш файл 404.php темы:

<p><strong>По дате</strong></p>
<ul>
<?php compact_archive($style='block'); ?>
</ul>

Он выведет ваши архивы по месяцам вроде такого:

Пример шаблона страницы 404 в WordPress

Ниже — простой пример файла 404.php, основанный на стандартной теме WordPress — Twenty Thirteen.

<?php
/**
 * Шаблон для вывода страниц 404 (Не найдено)
 *
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Not found', 'twentythirteen' ); ?></h1>
			</header>

			<div class="page-wrapper">
				<div class="page-content">
					<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2>
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>

					<?php get_search_form(); ?>
					
					<h3>Check out some of our popular content:</h3>

<div class="col1">
<div class="col-header">			
<h3>Популярные записи</h3>
</div>
<?php wpp_get_mostpopular(); ?>
</div>

<div class="col2">
<div class="col-header">			
<h3>Наиболее комментируемые</h3>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>

<div class="col3">
<div class="col-header">			
<h3>Свежие записи</h3>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
				</div><!-- .page-content -->
			</div><!-- .page-wrapper -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Сравните этот шаблон 404 со стандартным шаблоном в Twenty Thirteen. Вы заметите, что сразу после формы поиска мы добавили наш произвольный код для вывода популярных, наиболее комментируемых и свежих записей. После этого мы добавили немного CSS для разделения их на столбцы.

.col1, .col2, .col3 { 
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header { 
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}

Вот так будет выглядеть результат:

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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