Создание темы для WordPress. Поиск

Ромчик
1

Создание своей темы для 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

Отлично форма поиска у нас получилась. Теперь давайте настроим вывод результатов поиска.

Шаблон результатов поиска

За вывод результатов поиска в теме 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 рассылку данного блога.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Андрей - 27.12.2014 в 17:26

    Спасибо за понятную статью, удалось настроить внешний вид результатов поиска

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика