Красивая страница 404 для WordPress. Как ее сделать?

Привет всем читателям expromtom.ru!

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

Ошибка 404 или Not Found (не найдено) информирует о том, что сервер не может найти данные согласно запроса. Наиболее частой причиной возникновения подобной ситуации является тот факт, что запрашиваемая страница ресурса была перемещена или удалена.

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

До сегодняшнего дня текстовое содержание данной страницы моего блога выглядело следующим образом:

Красивая страница 404 для WordPress. Как ее сделать?

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

Как сделать красивую страницу 404 для WordPress?

 

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

Для начала я определю что нам нужно отобразить на странице 404:

  • информацию о том, что запрошенная страница не найдена — это нужно сделать в первую очередь.
  • предложение воспользоваться формой поиска по сайту (и саму форму поиска, разумеется), чтобы читатель мог найти нужную информацию.
  • ссылку на карту сайта (перечень всех статей блога).
  • перечень ссылок на самые свежие статью блога.
  • напоследок я вставлю «С уважением, Владимир Денисов!».

Вот такой фронт работ, переходим от слов к делу.

Для проведения манипуляций с файлом 404.php я воспользуюсь доступом к файлам на хостинге посредством FTP. Как настроить FTP-клиент для доступа к файлам на хостинге я писал здесь. Вы также можете воспользоваться внутренним редактором WordPress, который доступен в админ-панели по вкладке Внешний видРедакторШаблон ошибки 404 (404.php).

Я сразу приведу код моего файла 404.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php get_header(); ?>
<div id="content">
<div class="entry">
<img src="http://ваш сайт/wp-content/themes/название темы/images/404.jpg">
<p><?php _e('Попробуйте найти интересующую Вас страницу с помощью формы поиска:', 'название темы_lang'); ?></p>
<p><?php get_search_form(); ?></p>
<?php wp_reset_query(); ?>
<p><?php _e('Или воспользуйтесь разделом ', 'название темы_lang'); ?><a title="Все статьи блога" href="http://ваш сайт/karta-sajta" target="_blank">все статьи блога</a><?php _e(', где Вы найдете очень много полезной информации!', 'название темы_lang'); ?></p>
<p><?php _e('А это самые свежие статьи блога:', 'название темы_lang'); ?></p>
<ul>					
<?php query_posts('post_type="post"&post_status="publish"&showposts=10'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?> 
</ul>
<p style="text-align: right;">С уважением, <a href="http://ваш сайт.ru/" target="_blank" rel="nofollow">Имя</a>!</p>				
</div>
</div>			
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Теперь разберем подробно за что отвечает каждый фрагмент кода. Нас интересуют следующие строки:

  • строка 4 — вставка изображения. Конечно это не обязательно, но с картинкой данная страница будет выглядеть гораздо красивее. Кстати, именно посредством картинки я реализовал информирование читателя о том, что запрошенная страница не найдена. Не забудьте закинуть файл картинки на хостинг и прописать верный путь к этому файлу.
  • строка 5 — вставка текстового фрагмента.
  • строка 6 — код формы поиска.
  • строка 7 — конструкция, которая аннулирует данные последнего запроса.
  • строка 8 — вставка текстового фрагмента и ссылки на карту сайта.
  • строка 9 — вставка текстового фрагмента.
  • строки 10-17 — конструкция, отвечающая за вывод последних (по дате публикации) записей блога. Конструкция showposts=10 определяет количество выводимых записей. Я задал 10, вы можете выбрать любое другое количество.
  • строка 18 — вставка текстового фрагмента и ссылки.

Не забудьте везде в коде заменить название темы и ваш сайт на свои.

В конечном итоге у меня получилась вполне себе красивая страница 404 для WordPress:

Красивая страница 404 для WordPress. Как ее сделать?

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

Не забывайте подписываться на обновления моего блога, чтобы быть в курсе выхода новых статей!

С уважением, Владимир Денисов!

Комментарии 5

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

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