Создание эффективной 404 страницы в WordPress

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

Почему это важно?

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

Одно из основных правил юзабилити — не заводить пользователя в тупик. Конечно, всегда есть кнопка «назад» в браузере, но хотите ли вы, чтобы посетитель использовал её?

Примеры

Apple на своей 404 странице расположила карту сайта:

На странице 404 ошибки на этом сайте показаны свежие записи, список страниц и архив:

В этом уроке мы попробуем сделать нечто подобное.

Создание собственной страницы 404 ошибки в WordPress

Что сделать для улучшения ситуации? Как сделать из ошибки возможность?

Для поиска идеи можно изучить WordPress Codex или Google Webmaster Guidelines. На самом деле, наша главная задача довольно проста: объяснить, почему страницы здесь нет и предложить дальнейшие действия. Исходя из этого мы рассмотрим список некоторых пунктов, которые помогут сделать страницу 404 ошибки «идеальной»:

• Простое и понятное сообщение об ошибке с извинениями за случившееся;
• Сформировать представление об общей структуре сайта с понятной навигацией;
• Возможные альтернативы и подсказки для поиска искомой информации. Форма для поиска, ссылки на похожие и/или популярные страницы и ссылка на главную страницу — все это можно расположить на странице ошибки;
• Возможность сообщить об ошибке: вы можете оставить контактный email или другую контактную информацию.

Список полезных ссылок, которые можно расположить на странице ошибки:

• Свежие и/или популярные записи, или случайные записи;
• Ссылка на подписку (RSS например) в добавок к контактным данным;
• Карта сайта, особенно для небольших сайтов;
• Рекламу или информацию о ваших предложениях или сервисах;
• Информацию о запрошенном URL и похожие записи;
• Облако тегов;

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

<?php
/**
The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="content" class="not-found-page">
<!-- page content goes here -->
</div>
<?php get_footer(); ?>

Разметка страницы должна соответствовать структуре, используемой в теме. Вызывая функции get_header и get_footer мы можем быть уверены в том, что все элементы дизайна и навигации, а также все скрипты и стили будут загружены.

Теперь, когда скелет страницы готов, можно приступить к её наполнению. Лучшее, что мы можем сделать для посетителя, попавшего на 404 страницу — попытаться определить, что он искал и предложить максимально похожий материал. Информация о запрошенном URL хранится в поле $wp->request. Мы можем распарсить эту строку и попробовать найти похожие записи по данным в post_name. Если это не даст результатов, то можно попробовать обычный поиск по содержимому записей. Если и это не даст результаты, мы всегда можем показать свежие записи в качестве альтернативы.

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

Создадим несколько вспомогательных функций. Их можно объявить в файле functions.php вашей темы или непосредственно в начале файла 404.php.

function frl_get_requested_slug(){
global $wp;
$q = $wp->request;
$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);
$parts = explode('/', $q);
$q = end($parts);
return $q;
}

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

function frl_list_posts($posts){
if(empty($posts))
return '';
$list = array();
foreach($posts as $cpost) {
$title = apply_filters('the_title', $cpost->post_title);
$url = get_permalink($cpost);
$list[] = "<li><a href='{$url}'>{$title}</a></li>";
}
return implode('', $list);
}

Функция frl_list_posts помогает быстро вывести список ссылок на записи, в качестве аргумента — массив объектов WP_Post.

function frl_load_error_style(){
if(!is_404())
return;
$src = get_template_directory_uri().'/css/error-style.css';
wp_enqueue_style('error-style', $src);
}

Функция frl_load_error_style загружает стили для шаблона 404 страницы, .css файл находится в подпапке /css директории вашей темы.

Код шаблона будет состоять из 4 частей: сообщение об ошибке, поиск, свежие записи, контактная информация и форма поиска.

Сообщение об ошибках:

<!-- Message -->
<h2>404: Page not found</h2>
<div class="message not-found">
<p>Sorry, unfortunately, we could not find the requested page.</p>
<p>Let's find the information you need.</p>
</div>

Поиск похожих записей:

<!-- Did you mean -->
<?php
$q = frl_get_requested_slug();
$args = array(
  'post_type' => 'any',
  'post_status' => 'publish',
  'name' => $q,
  'posts_per_page' => 5
);
$query = new WP_Query($args); //query posts by slug
if(empty($query->posts)){ //search for posts
  $q = str_replace('-', ' ', $q);
  $args = array(
    'post_type' => 'any',
    'post_status' => 'publish',
    's' => $q,
    'posts_per_page' => 5
  );
  $query->query($args);
}
if(!empty($query->posts)):
  ?>
  <h4>Were you looking for the one of the following pages?</h4>
  <ul class="posts-list">
  <?php echo frl_list_posts($query->posts);?>
  </ul>
<?php endif;?>

 

Свежие записи:

<!-- Recent content -->
<?php
$args = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 5
);
$query->query($args);
if(!empty($query->posts)):
  ?>
  <h4>Why not take a look through the most recent posts?</h4>
  <ul class="posts-list">
  <?php echo frl_list_posts($query->posts);?>
  </ul>
<?php endif;?>

Контактные данные и форма для поиска:

<!-- Search options -->
<?php $home_link = home_url(); ?>
<h4>No good?</h4>
<p>Please use the search form to try again or start browsing from the <a href='<?php echo $home_link;?>'>Homepage</a>.</p>
<p>If you need further assistance please don't hesitate to contact at <em>info@domain.com</em>.</p>
<?php get_search_form();?>

Предотвращение 404 ошибки на сайте

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

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