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

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

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

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

С вёрсткой мы закончили в предыдущем уроке и теперь можно переходить на новый уровень — интеграция вёрстки. Интегрировать вёрстку мы начнём с главной страницы — index.html.

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

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

1. Создаём пустые файлы с именами: header.php, sidebar.php, footer.php и functions.php.

Важный момент: плотно работать с файлами header.php, sidebar.php и footer.php будем в других уроках.

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

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

Открываем файл index.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. А на месте вырезанного кода прописываем конструкцию, которая будет подключать файл header.php в страницу index.php.

<?php get_header(); ?>

Находим блок div с классом sidebar и выделяем его полностью. У вас должен быть выделен следующий участок кода:

	<!-- Боковая колонка -->
	<div class="sidebar">
		<div id="title-widget">
			<h6>CMS системы</h6>
		</div>
		<div class="widget_nav_menu">
			<ul>
				<li><a href="">Wordpress</a>
					<ul class="sub-menu">
						<li><a href="">Настройки</a></li>
						<li><a href="">Функции</a></li>
						<li class="current-menu-item"><a href="">Плагины</a></li>
						<li><a href="">Хаки</a></li>
						<li><a href="">Создание темы</a></li>
					</ul>
				</li>
				<li><a href="">Программы</a>
					<ul class="sub-menu">
						<li><a href="">Google Chrome</a></li>
						<li><a href="">Balsamiq Mockups</a></li>
						<li><a href="">Sublime Text</a></li>
						<li><a href="">Adobe Photoshop</a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div id="title-widget">
			<h6>Текстовый блок</h6>
		</div>
		<div class="textwidget">
			<p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p>
		</div>

		<div id="title-widget">
			<h6>Изображение</h6>
		</div>
		<div class="textwidget">
			<center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png" width="200"></center>
		</div>

	</div>

Перемещаем выделенный код в файл — sidebar.php, и на месте старого кода прописываем конструкцию для подключения файла sidebar.php в страницу index.php.

<?php get_sidebar(); ?>

Выделяем блок div с классом footer.

	<!-- Подвал-->
	<div class="footer">
		<p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p>
		<p>Артём Санников © 2014 - 2017</p>
	</div>

Перемещаем выделенный код в файл — footer.php. На месте старого кода прописываем конструкцию для подключения файла footer.php в страницу index.php.

<?php get_footer(); ?>

Каркас страницы index.php после перемещения участков кода в файлы header.php, sidebar.php и footer.php.

<?php get_header(); ?>

	<!-- Область для вывода контента -->
	<div class="content">
		<!-- Вид записи -->
		<div class="box-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="description-post">
				<h2><a href="">Установка локального web-сервера Xampp</a></h2>
				<p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p>
				<p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p>
				<a href="" class="readmore">Читать далее..</a>
			</div>
		</div>

		<!-- Постраничная навигация-->
		<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>
	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

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

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

А после закрытия блока вставляем конструкцию, которая завершает цикл.

<?php endwhile; ?>
<?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>

Функцию для вывода миниатюр мы вставили, но чтобы она работала нам необходимо включить поддержку миниатюр и установить их размер в файле functions.php.

Открываем functions.php и сразу же после открывающего тега <?php, вставляем следующий код.

/**
* Поддержка миниатюр
**/
add_theme_support('post-thumbnails'); //добавляем поддержку миниатюр
set_post_thumbnail_size(130, 130, true); //устанавливаем размер миниатюр, в нашем случае 130х130

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

Перемещаемся в блок 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>

Каркас страницы index.php после внесения изменений в блок box-post.

<?php get_header(); ?>

	<!-- Область для вывода контента -->
	<div class="content">
		<!-- Вид записи -->
		<?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 endif; ?>

		<!-- Постраничная навигация-->
		<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>

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

Выделяем 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(); ?>

После того, как мы написали конструкцию для вывода постраничной навигации нам необходимо создать эту функцию в файле functions.php.

Открываем functions.php и перед закрывающим тегом ?> вставляем следующий код.

/**
* Постраничная навигация
**/
function wp_corenavi() {
	global $wp_query;
	$pages = '';
	$max = $wp_query->max_num_pages;
	if (!$current = get_query_var('paged')) $current = 1;
	$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
	$a['total'] = $max;
	$a['current'] = $current;

	$total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить
	$a['mid_size'] = 5; //сколько ссылок показывать слева и справа от текущей
	$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
	$a['prev_text'] = '&laquo;'; //текст ссылки "Предыдущая страница"
	$a['next_text'] = '&raquo;'; //текст ссылки "Следующая страница"

	if ($max > 1) echo '<div id="page-navi">';
	if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
	echo $pages . paginate_links($a);
	if ($max > 1) echo '</div>';
}

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

Вот и всё, мы закончили интеграцию вёрстки главной страницы для WordPress.

<?php get_header(); ?>

	<!-- Область для вывода контента -->
	<div class="content">
		<!-- Вид записи -->
		<?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 endif; ?>

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

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

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

Сайт: ArtemSannikov.ru

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

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

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