Страница 404 и страница текст не найден

По просьбе читателей пишу это небольшую статью, в которой объединю 2 момента:

1. Создание, так называемой, страницы ошибки 404 - это случай, когда по введённому адресу страница не найдена.
2. Создание страницы для случая, когда не найден текст, введённый через поисковую форму сайта.

По первому случаю в Сети достаточно информации, так-как ошибка 404 одна из наиболее узнаваемых в Интернет. Дело в том, что именно с ней сталкиваются пользователи при попытке посетить нерабочие (битые и мёртвые) ссылки. А такие ситуации возникают довольно часто ибо ничто не вечно в этом тленном мире и статьи могут быть удалены или перемещены на другой адрес. Большинство веб-серверов, при этом, по умолчанию выводят страницы HTML, на которых отображен код 404 и фраза «Not Found», различные системы могут интерпретировать эту фразу как, например: «Страница не найдена».

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

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

Ну и давайте уже перейдём к делу. Сделаем эти страницы применительно к WordPress.

Если набрать в поиске фразу «страница 404 wordpress», то на выходе получим множество рекомендаций по созданию правильных страниц ошибки 404, но вот про вторую часть - «Текст не найден» я что-то ничего не нашёл. Может плохо искал, но, в принципе, не особо и старался. Однако, всё по порядку.

Страница 404 WordPress

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

Важно!

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

За вывод 404 страницы отвечает одноименный файл 404.php. У меня он изначально был таким:

У Вас будет так или почти так. Обратите внимание, что изменению или замене подлежит только одна строчка! Без знания особенностей движка WordPress остальные элементы страницы желательно не трогать.

Но тут возникает вопрос, что-же вставить вместо этой самой строки? Особенно актуально этот вопрос звучит для тех, кто далёк от всякого кодирования будь то PHP, CSS или просто HTML-разметка. И вот тут очень полезным окажется совет, который я увидел на замечательном блоге Анжелики $оковой. Суть его сводится к тому, что надо просто создать новую запись, оформить её так, как должна по Вашему мнению выглядеть страница 404, со всеми картинками, ссылками и прочим. Естественно, что запись эту публиковать не надо. Когда все будет готово, переходите с визуального редактора на редактор текста, копируете весь код оттуда и вставляете вместо той самой строки в файл 404.php.

Вот каким файл получился у меня:

Если надо вставить на эту страницу форму поиска по сайту, то обратите внимание на код подсвеченный зелёным цветом.

Собственно сама форма вставляется кодом <?php get_search_form(); ?>

 Но я предпочел вставить её с тем DIV-ом, в который она была вставлена у меня в сайдбаре. Это для того, чтобы не потерять форматирование формы. Какой именно блок используется у Вас можете посмотреть в файле Вашей темы - это может быть что-то из набора sidebar.php, sidebar-left.php и т.д... либо, если форма размещена в хидере, header.php.

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

Но... у каждого свой вкус - кому-то дело, а кому-то рюшечки...

И вот теперь настал момент поговорить о другой странице, той самой, которая появляется когда на сайте просто не найден искомый текст.

Страница «Текст не найден»

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

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

Схематично это выглядит так:

Если поиск дал результат

         Вывести результаты

иначе

       Вывести сообщение, что текст нет найден

В коде моего шаблона это выглядит так (в своём смотрите по аналогии):

<?php get_header(); ?>
<div class="outer" id="contentwrap">
    <?php get_sidebars('left'); ?>
	<div class="postcont">
		<div id="content">

	<?php if (have_posts()) : ?>

		<h2 class="pagetitle">Результаты поиска</h2>

		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class('post') ?>>
                <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> <?php the_time('F jS, Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" /> <?php the_author() ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Edit', '', ''); } ?></div>
				<div class="entry">
                    <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>
					<?php the_excerpt() ?>
                    <div class="readmorecontent">
						<a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read More &raquo;</a>
					</div>
				</div>
        	</div>

		<?php endwhile; ?>

		<div class="navigation">
			<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
			<?php } ?>
		</div>

	<?php else : ?>

<h2>Записей не найдено. Попробуйте использовать поиск.</h2>
	<?php get_search_form(); ?>

	<?php endif; ?>

		</div>
	</div>

<?php get_sidebars('right'); ?>
</div>
<?php get_footer(); ?>

В данном случае менять можно то, что заключено между строк 36 - 38... Посмотрите на картинке - подсвечено жёлтым.

У Вас код может быть несколько иным, но принцип остаётся тот-же.

И вот что я вставил у себя вместо этих двух строчек:

<div id="content">    
    <h1 class='headline4'>Не нашли то, что искали?</h1>
    <table border="0">
    <tbody>
    <tr><td>
    <p><img title="Не найден текст?" alt="Не найден текст?" src="https://s013.radikal.ru/i325/1404/3c/40ce8421b015.jpg" width="166" height="164" /></p>
    <div id="topsearch">
       <?php get_search_form(); ?>
    </div>
    </td><td>
    <p><span style="color: #003366; font-size: large;"><em>Ну раз Вы здесь, то что-то пошло не так и искомый текст не найден.</em></span></p>
    <p><span style="color: #003366; font-size: large;"><em>Однако это совсем не означает, что здесь нет того, что Вы ищете, попробуйте другое словосочетание...</em></span></p>
    </td></tr>
    </tbody>
    </table>
    <div><div><p><span style="color: #003366; font-size: 14px;"><em>Если все-же не получится - перейдите на<strong> <a href="https://obg.kz/"><span style="color: #003366;">Главную страницу</span></a></strong>, там отображаются все новые статьи или <strong>, изменив искомую фразу, воспользуйтесь поиском еще раз...</strong>.
   </div></div></em></span></p>
</div>            		

Посмотреть результат можно если в поисковую форму вбить какую-либо бессмыслицу...

Что еще остаётся добавить? Думаю, что обе страницы одинаково важны, но всё-же хотелось бы, чтобы они оказались как можно менее востребованными, а посетители как можно более терпеливыми.

Удачи Вам и до встречи на моём блоге!

Материалы по теме:

Плагин ARK WYSIWYG Comment Editor – визуальный редактор комментариев

Вывод связанных записей красиво и без плагина

Минимальный набор плагинов для WordPress

Застой в мыслях? Не совсем…

Улучшенная форма обратной связи без плагина

Форма обратной связи без плагина