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

Опубликовано: 2021-07-21

Хотите улучшить свой шаблон страницы 404 в WordPress?

Улучшение страницы WordPress 404 по умолчанию может помочь улучшить взаимодействие с пользователем, снизить показатель отказов и увеличить количество просмотров страниц.

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

How to improve your 404 page template in WordPress (2 ways)

Зачем улучшать шаблон страницы 404 в WordPress?

Большинство посетителей, которые попадают на страницу WordPress 404 по умолчанию, быстро покинут ваш сайт WordPress.

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

Улучшая страницу WordPress 404, вы можете направлять посетителей на популярные посты, увеличивать количество просмотров страниц и снижать показатель отказов, а также превращать разовых посетителей в постоянных читателей и клиентов.

404 page example

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

Кроме того, это может улучшить вашу поисковую оптимизацию WordPress, поэтому вы получите больше трафика из поисковых систем.

Примечание: важно создать пользовательскую страницу 404, но вы также должны отслеживать URL-адреса 404, которые посетители используют для посещения вашего веб-сайта, а затем настраивать правильные перенаправления для улучшения рейтинга SEO.

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

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

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Метод 1. Создайте пользовательскую страницу 404 в WordPress без кода

Лучший и наиболее удобный для новичков способ улучшить шаблон страницы 404 — использовать плагин конструктора страниц SeedProd.

SeedProd — лучший конструктор целевых страниц для WordPress. Он позволяет создавать, редактировать и настраивать страницы WordPress без написания кода.

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

Первое, что вам нужно сделать, это установить плагин SeedProd. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

Примечание: доступна бесплатная версия SeedProd, но мы будем использовать версию Pro, поскольку в ней есть нужные нам шаблоны страниц 404.

После активации вам необходимо перейти в SeedProd »Настройки и ввести лицензионный ключ. Вы можете найти эту информацию на странице своей учетной записи на веб-сайте SeedProd.

Enter SeedProd license key

После этого перейдите в SeedProd »Страницы и нажмите кнопку «Настроить страницу 404» в мета-окне «Страница 404».

Это приведет вас на страницу, где вы можете выбрать свой шаблон страницы 404.

Set up 404 page

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

Чтобы выбрать шаблон, наведите на него курсор и нажмите значок «Галочка». В этом уроке мы будем использовать шаблон «О, нет, страница 404», но вы можете использовать любой понравившийся вам шаблон.

Select 404 page template

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

Вы найдете блоки и разделы, которые вы можете добавить на свою страницу 404, в левой части экрана. Правая сторона страницы — предварительный просмотр в реальном времени. Каждый элемент на странице можно редактировать и настраивать.

SeedProd editor

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

Для этого перетащите блок «Текст» на свою страницу и щелкните его, чтобы изменить текст.

Add text block

Далее мы изменим ссылку на кнопку главной страницы и вместо этого дадим ссылку на одну из самых ценных частей контента.

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

Сначала перетащите блок «Заголовок» и добавьте новый заголовок.

Add headline block

Затем перетащите другой блок «Текст» и введите текст, описывающий вашу статью.

После этого нажмите на кнопку, чтобы открыть экран редактора кнопок.

Change button text

Здесь вы можете настроить текст, цвет, размер и многое другое.

Добавьте свои самые популярные сообщения на страницу WordPress 404

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

Самый простой способ сделать это — использовать плагин MonsterInsights. Это лучшее аналитическое решение для WordPress, которым пользуются более 3 миллионов веб-сайтов.

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

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

После того, как плагин активирован и настроен, все, что вам нужно сделать, это добавить один шорткод на свою страницу.

Для этого просто перетащите блок «Шорткод» на свою страницу.

Add shortcode block

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

Часть theme=“beta” относится к тому, как будут отображаться ваши популярные посты. Если вы хотите посмотреть, как выглядят разные темы, перейдите в « Статистика» »Популярные сообщения и нажмите «Виджет популярных сообщений».

В разделе «Выбрать тему» вы можете просмотреть каждую из тем и их названия.

Choose popular posts theme

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

Добавьте контактную форму на страницу WordPress 404

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

Лучший способ добавить контактную форму на ваш сайт — использовать плагин WPForms. Это лучший плагин контактной формы для WordPress, используемый более чем 4 миллионами веб-сайтов.

Для получения более подробной информации см. наше пошаговое руководство о том, как создать контактную форму в WordPress.

После активации и настройки плагина вы можете просто перетащить блок «Контактная форма» на свою страницу.

Add contact form block

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

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

Select contact form drop down

Вы также можете добавить блок «Заголовок» или «Текст» над контактной формой.

Выполните те же шаги, что и выше, чтобы добавить эти блоки.

Contact form headline block

Когда вы закончите вносить изменения, не забудьте нажать «Сохранить» в правом верхнем углу страницы.

Если вы хотите опубликовать свою страницу в реальном времени, выберите стрелку раскрывающегося списка рядом с «Сохранить» и нажмите «Опубликовать».

Save changes and make page live

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

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

404 page template final

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

Чтобы сделать вашу новую страницу 404 активной, вернитесь к SeedProd »Pages , а затем переключите переключатель «Страница 404» в положение «Активно».

Make 404 page active

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

Совет для профессионалов: вы можете отслеживать производительность своей страницы WordPress 404, чтобы увидеть, как она конвертируется и какие изменения наиболее полезны. Дополнительные сведения см. в нашем руководстве для начинающих по установке Google Analytics в WordPress.

Способ 2. Создайте пользовательскую страницу 404 в WordPress, добавив код

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

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

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

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

FTP 404.php file

После того, как вы подключитесь к своему веб-сайту, вы увидите файл 404.php в папке вашей темы WordPress.

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

Отображение самых популярных сообщений на странице 404

Первое, что вам нужно сделать, это установить и активировать бесплатный плагин WordPress Popular Posts. Это один из самых популярных плагинов для постов в WordPress.

Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

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


<?php wpp_get_mostpopular(); ?>

Отображение самых комментируемых сообщений на странице 404

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

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

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

Вы также можете ознакомиться с нашим руководством о том, как отображать большинство комментариев в WordPress.

Отображение последних сообщений на странице 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>

Добавьте ежемесячные архивы с компактными архивами

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

Здесь, в WPBeginner, мы отображаем наши ежемесячные архивы на нашей странице 404 с помощью плагина Compact Archives. Этот плагин разработан и поддерживается нашей командой.

Подробнее читайте в нашем руководстве по созданию компактных архивов в WordPress.

После активации и настройки плагина просто добавьте следующий код в файл 404.php .


<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($); ?>
</ul>

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

Вот как это отображается на нашей странице 404.

Compact Archives WPBeginner

Пример шаблона 404 для WordPress

Вот пример файла 404.php , основанный на стандартном шаблоне страницы 404 темы WordPress Twenty Twenty-One.


<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
			
			<h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
			
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

Сравните этот шаблон 404 с шаблоном по умолчанию в Twenty Twenty-One.

Вы заметите, что сразу после формы поиска мы добавили собственный код для отображения популярных, наиболее комментируемых и последних сообщений.

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

Для получения более подробной информации см. наше руководство о том, как легко добавить пользовательский CSS на ваш сайт WordPress.


.col1, .col2, .col3  
width:30%;
float:left;
padding:0px 10px 10px 10px;
margin:0px;

.col3:after
clear:both;

.col-header  
background:#28303D;
color:#D1E3DD;
margin:0px;
padding:1px;
text-align:center;

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

Custom 404 page example

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.