Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Встроенный поиск в WordPress

В CMS WordPress существует встроенный поиск, с которым можно сделать поиск по сайту практический любого вида.

Вставка формы поиска в WordPress

Для того чтобы вставить форму поиска в вашу тему WordPress, нужно вставить следующий код в любое место:
<?php get_search_form(); ?>
Если теперь посмотреть код сайта с встроенным поиском от WordPress, то можно увидеть что этот PHP код генерирует следующий HTML код:
<form role="search" method="get" id="searchform"
class="searchform" action="http://love/">
<div>
<label class="screen-reader-text" for="s">Найти:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Поиск" />
</div>
</form>

Теперь уберем отсюда все не нужное и мы получим следующий компактный HTML код:
<form role="search" method="get" id="searchform"
class="searchform" action="http://love/">
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Поиск" />
</form>
Эту HTML форму можно стилизовать с помощью CSS, например так:
#searchform input {
height: 23px;
border: 1px solid #66CCFF !important;
-webkit-appearance: none;
border-radius: 3px;
}

input[type="text"]:focus { outline: none; }

#searchsubmit {
padding: 0 5px 0 5px;
background: #66CCFF;
color: white;
}

#searchsubmit:hover {
border: 1px solid red !important;
background: red;
}

Результат будет таков:
Форма поиска в WordPress

Вывод результатов поиска в WordPress

Мы создали систему поиска в WordPress, теперь если вы будете искать через этот поиск на вашем сайте, то результаты поиска будут выводится через шаблон index.php.

Что не всегда удобно!
Поэтому в WordPress можно создать специальный шаблон страницы предназначенный для вывода результатов поиска. Вот код этого шаблона:
<?php
/*
Template Name: search
*/
?>
<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>
<p><?php the_excerpt() ?></p>
<div>Дата добавления: <?php the_date() ?></div>
</div>
<?php endwhile; ?>
<?php
else :
echo "Извините по Вашему результату ничего не найдено";
endif;
?>
Этот код будет выводить результаты поиска по сайту с ссылками на ваши страницы.

Синтаксис шаблона страницы с результатами поиска

<a href="<?php the_permalink() ?>"><?php the_title() ?></a> дает ссылку на страницу;

<?php the_title() ?> выводит название страницы;

<?php the_permalink() ?> выводит адрес страницы;

<?php the_excerpt() ?> выводит краткое описание страницы;

<?php the_date() ?> выводит дату публикации страницы.

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