Пошаговое руководство по верстке на вордпресс. Глава четвертая: футер и поиск

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

Итак, давайте посмотрим на футер. Там внизу еще одно, дублирующее меню, статистика, кнопки соцсетей и копирайт. Сначала создадим еще одно меню и назовем его незамысловато – «niz». Структура его будет точно такая же, как и у верхнего. Вставим его в футер:

<footer>
<? wp_nav_menu( array('menu' => 'niz' , 'menu_class' => 'niz-menu'));	?>
</footer>
</div>

В принципе все получилось, но теперь надо бы его немного оформить:

.niz-menu > li {
float: left;
    width: 136px;
    margin-right: 30px;
list-style-type: none;
}
footer {
    border-top: 1px solid #D7D7D7;
}
.niz-menu {
    margin-left: -40px;
   height: 220px;
}
.niz-menu > li > a {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #AEAEAE;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
}
.niz-menu > li > .sub-menu {
margin-left: -40px;
}
.niz-menu > li > .sub-menu > li {
    margin-top: 16px;
    margin-bottom: -8px;
    list-style: none;
}
.niz-menu > li > .sub-menu > li > a {
text-decoration: underline;
color: #9C9C9C;
font-size:14px;
font: 12px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}

Далее, вставим код счетчика после меню (ливинтернет). Он расположится справа, как и требуется, если мы добавим в код счетчика:

style='float: right; margin-top: -232px;'

Ну а отрицательный отступ – чтобы приподнять его до уровня меню. Теперь заливаем в папку images икнки соцсетей и выводим их:

<div class="foot-social">
<a href="https://ru-ru.facebook.com/veretennikov"><img src="<?php bloginfo('template_url'); ?>/images/foot-02.jpg" alt=""></a>
<a href="https://instagram.com/veretennikov_info/"><img src="<?php bloginfo('template_url'); ?>/images/insta.jpg" alt=""></a>
<a href="https://vk.com/club37439783"><img src="<?php bloginfo('template_url'); ?>/images/foot-01.jpg" alt=""></a>
</div>	
<div class="copyr">©2006-2017 Кинокомпания «Третье Декабря»</div>

Обратите внимание, что мы не используем абсолютный путь до изображений, хотя и знаем его. Вместо этого мы пользуемся переменной bloginfo('template_url');. Зачем? Просто это удобно, если работы по верстке ведутся на локальном компьютере или вообще другом сервере с другими доменным именем.

Поиск вордпресс

Мы совсем забыли, что в шапке у нас есть поиск. Давайте исправим это упущение. Создадим файл searchform.php с кодом:

<style>
.searchform{
display: block;
float: left;
margin-right: 5px;
}
#searchsubmit{
width: 25px;
height: 25px;
border: 0;
}
</style>
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/" style="float: right; margin-top: -65px;">
<input type="text" class="searchform" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" /><input type="submit" id="searchsubmit" value="" class="btn" style="background: url(<?php bloginfo('template_url'); ?>/images/srch-ico.png) 0 0 no-repeat;"/>
</form>

Это у нас будет форма поиска. Теперь нам нужна еще страница с результатами поиска. За её генерацию в вордпресс отвечает файл search.php:

<?php get_header(); ?>
<section>
<?php printf( __( 'Результаты поиска: %s', 'twentyten' ), '' . get_search_query() . '' ); // Динамический заголовок поиска?>
                        <?php if ( have_posts() ) while ( have_posts() ) : the_post(); // Начало цикла ?>
			
			<div class="category-text">
                         <h3 class="entry-header"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } // Проверяем наличие миниатюры, если есть показываем ?>
				<?php the_content(); // Содержимое страницы ?>
			</div>
                                <?php endwhile; // Конец цикла ?> 
<div class="pagination"><?php // Пагинация
global $wp_query;
$big = 999999999;
echo paginate_links( array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'type' => 'list',
	'prev_text'    => __('« Назад'), 
    'next_text'    => __('Вперед »'),
	'total' => $wp_query->max_num_pages
) );
?></div>  
</section>
<?php get_footer(); ?>

Вставить форму поиска можно следующим образом:

<? include "searchform.php"; ?>

Скрываем элементы при изменении ширины

Так как мы изначально делаем адаптивным сайт, то задумаемся, как он будет выглядеть на экранах мобильных или планшетов. Точкой отсчета возьмем 1180 пикселей (ширина сайта у нас 1170) – именно при таком значении появляется мобильное меню, а обычное исчезает. Также при этом значении изменим float у логотипа, а также скроем форму поиска (она есть в адаптивном меню) и нижнее меню:

@media only screen and (max-width: 1180px) {
.logo {
    float: none;
}
#searchform{
display:none;
}
.niz-menu {
    display: none;
}
}

Итак, теперь наш сайт выглядит так:


заметки, верстка, wordpress