Создание темы WordPress – 404.php, Search.php, and Searchform.php

Автор: | 08.04.2019

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

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

404.php

Давайте пройдем по какой-либо несуществующей странице нашего сайте, например http://test/12345 и посмотрим, как выглядит страница 404 сейчас, в теме underscore, которую мы использовали в качестве основы в статье «Как создать тему WordPress».

Создание темы WordPress – 404.php, Search.php, and Searchform.php

Теперь удалим все, что у нас есть в фале 404.php и пропишем свой код:

Создание темы WordPress – 404.php, Search.php, and Searchform.php

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

Вот как теперь выглядит страница:

Создание темы WordPress – 404.php, Search.php, and Searchform.php

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

Файл 404.php не должен быть таким же сложным, как ваша домашняя страница, но его, безусловно, нужно продумать. Убедитесь, что он имеет похожий внешний вид и создает ощущение целостности с остальной частью веб-сайта. Обязательно добавьте header и footer.И, наконец, не забудьте дать читателю указания, что делать дальше, чтобы он не просто ушел, разозлившись, что ваш сайт сломан.

Форму поиска можно использовать в сайдбаре или добавить с помощью функции include.

 

<div class="search-form-404"> <?php include(TEMPLATEPATH . "/searchform.php"); ?></div>

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

Searchform.php

Этот шаблон позволяет структурировать и стилизовать форму поиска, чтобы она могла функционировать и выглядеть так, как вы хотите. Если вы зайдете на https://codex.wordpress.org/Styling_Theme_Forms, то найдете там много базового кода и информации о стиле для выполнения простой формы поиска. Помните, что в любое время, когда на вашем веб-сайте появится строка поиска, она будет ссылаться на структуру в searchform.php, а затем ссылаться на css, прикрепленный к ее идентификаторам и классам. Взгляните на мой пример кода:

Создание темы WordPress – 404.php, Search.php, and Searchform.php

Форма поиска WordPress использует метод GET и ищет все на вашем сайте, что соответствует критериям поиска. Изучите функцию get_search_form () в Кодексе, чтобы увидеть некоторые другие действительно отличные примеры.

Search.php

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

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

Создание темы WordPress – 404.php, Search.php, and Searchform.php

Единственное, что я поменяла, это разбила оператор if/while, чтобы вписать заголовок, отображающий поисковый запрос.

 

<h2 class="page-content-title">Результаты поиска для: <?php echo get_search_query(); ?></h2>

В теге h2 я пишу » результаты поиска для:», а затем включаю функцию get_search_query();, которая просто отображает точный текст, введенный в поиске. Это позволяет нам дать пользователям ссылку на то, что они только что искали, и показать, что это результаты для введенного ими запроса.

Вот как будет выглядеть страница результатов поиска на сайте:

Создание темы WordPress – 404.php, Search.php, and Searchform.php

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

Иерархия шаблонов WordPress
Иерархия шаблонов WordPress

Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more

Создание темы WordPress — functions.php
Создание темы WordPress - functions.php

functions.php файл шаблона функций в WordPress действительно является двигателем вашей Read more

Создание темы WordPress – archive.php, category.php и tag.php
Создание темы WordPress – archive.php, category.php и tag.php

Сегодня речь пойдет об архивах записей, а точнее о файлах  Read more

Создание темы WordPress – single.php
Создание темы WordPress – single.php

Мы уже говорили о home.php и о том, как этот Read more

Создание своей темы WordPress – page.php
Создание своей темы WordPress – page.php

Файл page.php контролирует то, что отображается на каждой из ваших Read more

Создание темы WordPress — home.php, front-page.php, and index.php
home.php, front-page.php и index.php

Сегодня поговорим о трех очень важных файлах: home.php, front-page.php и Read more

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

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

4 × 3 =