На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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



В этой главе мы добавим меню в футер, немного его оформим, а также научимся работать с поиском в 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;
}
}
Итак, теперь наш сайт выглядит так:





Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



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





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Оптимизация MySQL запросов: практика
Пошаговое руководство по верстке на вордпресс. Глава вторая: создаем скелет


© upread.ru 2013-2022
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.