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

13-04-04 Php, WordPress PHP, Usability, WordPress 3

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

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

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

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

Примеры

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

Пример страницы 404 ошибки
Пример страницы 404 ошибки

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

Пример страницы 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 ошибки была максимально информативной. Но лучше если посетитель никогда не попадет на нее. Для этого следует:

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

Хочешь получать статьи на почту?

Подпишись на обновления!
* Ваш email не будет разглашен/продан. Вы сможете отписаться в любое время.

3 Комментария

  1. Ирина:

    Здравствуйте!

    Подскажите, пожалуйста, почему у меня очень много ошибок 404? Я установила плагин 404 Notifier (он присылает мне в ящик сообщения об 404) и SEO Ultimate, который тоже каждый день мне указывает на 404. Страница об ошибке 404 у меня правильная, красивая.
    Но что я неправильно делаю, почему их так много?
    Я новичок! Спасибо заранее! Буду ждать ответа.

    1. root:

      Здравствуйте!
      Причин может быть много. Самое вероятное — неправильно настроенные постоянные ссылки или измененные (поисковики проиндексировали одни ссылки, но сейчас они другие), если второе, то через некоторое время все исправится. Более точного ответа дать, к сожалению, не могу.

  2. Роман:

    Здравствуйте,
    у меня стоит плагин 404 Notifier, вчера установил, он присылает на почту обращения к несуществующим страницам, так вот прислал он мне массу таких технических страниц и страниц которых нет, все их редиректнул с помосщью плагина СЕО-редирект, так вот, теперь он мне шлет пачками такое вот сообщение

    404 Report — a file not found error was registered on your site.

    404 URL:

    Referred by:

    User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36

    То-есть адрес админки, не понимаю о чем это говорит — во-первых неужели поисковики так часто обращаются к админке (закрыта в роботс.тхт)? Или это не поисковики — вообще как понимать эту ситуацию? Во-вторых как быть в этом случае? Редирект-то поставить я не могу — иначе сам не зайду в админку…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *