ГлавнаяWordpressСоздание темыУрок #14. Интеграция вёрстки. Страница поиска. Создание темы WordPress.

Урок #14. Интеграция вёрстки. Страница поиска. Создание темы WordPress.

Категория: Создание темы / Опубликовано: 2017-08-16 / Просмотров: 72

Интеграция вёрстки. Страница поиска. Создание темы WordPress.

Приступаем к интеграции вёрстки страницы поиска — search.html. Несмотря на то, что поиск является не очень популярной функцией у пользователей, он должен присутствовать на вашем сайте. Потому что поиск решает достаточно большой процент всех проблем пользователей.

Подготовка к интеграции

0. Переименовываем файл search.html в search.php.

Разбиение на блоки: header, sidebar и footer

Открываем файл search.php для внесения изменений.

Выделяем весь код сверху до закрытия блока div с классом header и удаляем его. У вас должен быть удалён этот участок кода.

<!DOCTYPE html>
<html>
<head>
	<!-- Charset -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Page info -->
	<title>Страница поиска</title>
	<meta name="language" content="ru">
	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon/favicon.png" type="image/png">
	<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png">
	<!-- Style CSS-->
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css">
	<!-- JQuery Library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>

<!-- Обёртка -->
<div id="wrapper">

	<!-- Шапка -->
	<div class="header">
		<!-- Название блога и описание -->
		<div class="bloginfo">
			<h1><a href="">Блог Артёма Санникова</a></h1>
			<p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p>
		</div>
		<!-- Навигация -->
		<div class="nav">
			<ul>
				<li class="current_page_item"><a href="">Главная</a></li>
				<li><a href="">Об авторе</a></li>
				<li><a href="">Контакты</a></li>
				<li><a href="">Карта сайта</a></li>
			</ul>
		</div>
	</div>

Вместо удалённого кода вставляем функцию для подключения файла header.php.

<?php get_header(); ?>

Выделяем блоки sidebar и footer, а затем удаляем их. На их место вставляем конструкции для подключения файлов sidebar.php и footer.php.

<?php get_sidebar(); ?> //подключение файла sidebar.php
<?php get_footer(); ?> //подключение файла footer.php

Название страницы и результаты поиска

Находим блок div с классом search-result в котором у нас выводится название страницы и информация о результатах поиска.

Заголовок страницы мы оставляем без изменения, а вот строку с результатами поиска немного модифицируем. Строка с результатами поиска выводит пользователю, что он искал и сколько результатов нашлось по его запросу. Для того, чтобы всё работало в автоматическом режиме напишем несколько простых строк кода.

#было
<!-- Результаты поиска -->
<div class="search-result">
	<h1>Результаты поиска</h1>
	<p>Вы искали "<strong>wordpress</strong>", результатов найдено: "<strong>28</strong>".</p>
</div>

#стало
<!-- Результаты поиска -->
<div class="search-result">
	<h1>Результаты поиска</h1>
	<p>Вы искали "<strong><?php the_search_query();?></strong>", результатов найдено: "<strong><?php  global $wp_query;  echo $wp_query->found_posts; ?></strong>".</p>
</div>

Вывод записей

Перед блоком div с классом box-post вставляем обязательную конструкцию, которая запускает цикл по выводу записей.

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

Переходим в конец блока box-post и сразу же после его закрытия вставляем конструкцию, которая завершает цикл while.

<?php endwhile; ?>

А теперь перемещаемся в конец блока div с идентификатором page-navi, и точно так же после его закрытия вставляем код, который завершает условие if.

Важный момент: если вам нужно, чтобы система автоматически выводила текст «По вашему запросу ничего не найдено..» на месте для записей, то вам нужно вставить текст между else и endif.

<?php else : ?>
<?php endif; ?>

Сейчас нам необходимо очистить блок div с классом thumbnail-post, но сам блок не удаляем. После того, как очистили блок вставляем функцию, которая будет выводить миниатюры записей.

#было

<!-- Миниатюра записи-->
<div class="thumbnail-post">
	<img src="//artemsannikov.ru/wp-content/uploads/2017/07/install-xampp-windows-130x130.jpg" width="130" height="130">
</div>

#стало

<!-- Миниатюра записи-->
<div class="thumbnail-post">
	<?php the_post_thumbnail(); ?>
</div>

С миниатюрами мы закончили.

Перемещаемся в блок div с классом description-post. Вместо заголовка записи вставляем функцию, которая будет выводить его автоматически.

#было
<h2><a href="">Установка локального web-сервера Xampp</a></h2>
#стало
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Переходим к следующей строке, которая выводит информацию (категория, дата публикации и количество просмотров). Вставляем три функции, вместо статического текста.

Важный момент: если вы хотите, чтобы у вас отображалось количество просмотров записи/страницы, то вам необходимо установить плагин — WP-PostViews.

#было
<p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p>
#стало
<p class="info-post">Категория: <?php $category = get_the_category(); echo $category[0]->cat_name; ?> / Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>

Идём дальше, следующий абзац является — цитатой, то есть кратким описание статьи. Мы должны его удалить и вместо него вставить специальную функцию.

#было
<p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p>
#стало
<?php the_excerpt(); ?>

Ну и последний элемент, который необходимо подправить в блоке description-post — ссылка «Читать далее». В область href необходимо вставить функцию, для автоматической подставноки url адреса.

#было
<a href="" class="readmore">Читать далее..</a>
#стало
<a href="<?php the_permalink(); ?>" class="readmore">Читать далее..</a>

Постраничная навигация

Выделяем блок div с идентификатором page-navi, и удаляем его. Ниже предоставлен код, который нужно удалить.

		<!-- Постраничная навигация-->
		<div id="page-navi">
			<span class="page-numbers current">1</span>
			<a class="page-numbers" href="">2</a>
			<a class="page-numbers" href="">3</a>
			<a class="page-numbers" href="">4</a>
			<a class="page-numbers" href="">5</a>
			<a class="page-numbers" href="">6</a>
			<a class="page-numbers" href="">7</a>
			<span class="page-numbers dots">…</span>
			<a class="page-numbers" href="">42</a>
			<a class="next page-numbers" href="">»</a>
		</div>

Вместо удалённого кода вставляем конструкцию, которая будет автоматически формировать постраничную навигацию.

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?> 

Интеграция завершена

Окончательный вариант станицы поиска — search.php, представлен ниже.

<?php get_header(); ?>

	<!-- Область для вывода контента -->
	<div class="content">

		<!-- Результаты поиска -->
		<div class="search-result">
			<h1>Результаты поиска</h1>
			<p>Вы искали "<strong><?php the_search_query();?></strong>", результатов найдено: "<strong><?php  global $wp_query;  echo $wp_query->found_posts; ?></strong>".</p>
		</div>

		<!-- Вид записи -->
		<?php if(have_posts()) : ?>
		<?php while(have_posts()) : the_post(); ?>

		<div class="box-post">
			<!-- Миниатюра записи-->
			<div class="thumbnail-post">
				<?php the_post_thumbnail(); ?>
			</div>
			<!-- Описание записи-->
			<div class="description-post">
				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				<p class="info-post">Категория: <?php $category = get_the_category(); echo $category[0]->cat_name; ?> / Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>
				<?php the_excerpt(); ?>
				<a href="<?php the_permalink(); ?>" class="readmore">Читать далее..</a>
			</div>
		</div>

		<?php endwhile; ?>

		<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?> 

		<?php else : ?>
		<?php endif; ?>

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Похожие записи по теме

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *