Создание темы для WordPress. Поиск
Доброго времени суток. Мы с вами продолжаем создавать собственную тему для WordPress. И так мы с Вами уже сверстали и разбили html-шаблон на несколько файлов, создали из полученных файлов тему для WordPress, сделали вывод постов, сделали вывод отдельных страниц, добавили меню навигации по страницам, добавили в нашу тему поддержку виджетов. И в принципе тема для WordPress уже готова, единственное, что нам не хватает — это вывода комментариев, страницы вывода результатов поиска и еще некоторые незначительные доработки.И так на поиске и шаблоне вывода результатов поиска мы и остановимся в данной статье. Так, что кому интересно читаем дальше.
При создании собственной темы для WordPress мы столкнулись со множеством файлов, которые отвечают за определенные области темы WordPress. Вот и для формы поиска существует файл, который отвечает за ее вывод — searchform.php.
Форма поиска
Давайте создадим в нашей теме данный файл и добавим в него следующий код:
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label for="s"><?php echo "Поиск"; ?></label> <input type="text" name="s" id="s" placeholder="<?php echo "Поиск"; ?>" /> <input type="submit" name="submit" id="searchsubmit" value="<?php echo "Поиск"; ?>" /> </form>
Вдаваться в подробности html кода мы не будем, а вот функции esc_url и home_url мы разберем.
Функция esc_url
Функция esc_url устраняет недопустимые и удаляет опасные символы. Всегда используйте данну функцию для защиты URL. В качестве параметров данная функция принимает три значения esc_url( $url, $protocols, $_context ), где
- $url — обрабатываемый url адрес
- $protocol — массив протоколов, по умолчанию null, тогда URL будет обрабатываться как ‘http’, ‘https’, ‘ftp’, ‘ftps’, ‘mailto’, ‘news’, ‘irc’, ‘gopher’, ‘nntp’, ‘feed’, ‘telnet’.
- $_context — url будет отображаться (по умолчанию) или возвращаться переменной.
Функция home_url
Функция home_url — возвращает домашний url для текущего сайта. В качестве параметров принимает следующие значения home_url( $path, $scheme ), где:
- $path — относительная домашняя ссылка
- $scheme — схема ссылки, по умолчанию http или https.
Добавление формы поиска к создаваемой теме WordPress
Отлично форму поиска мы создали и разобрали функции, которые использовали в ней. Теперь нам необходимо добавить нашу форму поиска в создаваемую нами тему WordPress.
Для этого в место, где должна отобразиться форма поиска вставляем следующий код:
<?php get_search_form(); ?>
Давайте перейдем на сайт и посмотрим, что у нас получилось:
Отлично форма поиска у нас получилась. Теперь давайте настроим вывод результатов поиска.
Шаблон результатов поиска
За вывод результатов поиска в теме WordPress отвечает файл search.php. Давайте его и создадим. Теперь добавим в файл search.php следующий код:
<?php get_header() ?> <div id="content"> <div id="center"> <h1><?php echo 'Результат поиска: ' . '<span>' . get_search_query() . '</span>'; ?></h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="posts"> <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2> <div id="post_info"> <div>Автор: <?php the_author() ?></div> <div>Дата добавления: <?php the_date() ?></div> <div id="clear"></div> </div> <p><?php the_excerpt() ?></p> <span>Категория: <?php the_category(', ') ?></span> </div> <?php endwhile; ?> <?php else : echo "Извините по Вашему результату ничего не найдено"; endif; ?> </div> <?php get_sidebar() ?> <?php get_footer() ?>
Теперь давайте проверим, что у нас получилось. Введем в строке поиска что-нибудь и увидим результат, когда мы что-то нашли:
Теперь давайте введем что-то, чтобы ничего не нашлось на нашем сайте и посмотрим:
Видим, что наш шаблон результата поиска работает.
На этом данный пост, посвященный созданию собственной темы для WordPress можно заканчивать. А в следующем посте мы добавим в создаваемую нами тему для WordPress поддержку миниатюр постов. Так, что не пропускайте выхода новых статей, подписавшись на RSS или email рассылку данного блога.
Спасибо за понятную статью, удалось настроить внешний вид результатов поиска
Чувак, ты меня спас! За что я очень очень благодарен тебе! Несмотря на то, что пост довольно старый, но он до сих пор не терял свою актуальность. А то я уже 2 часа морочу себе голову. В общем, респект тебе большой за статью и помощь