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

Погружение в базы данных Oracle

Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.

Купить книгу

SQL без слёз

Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.

Скачать книгу

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

Урок #10. Интеграция вёрстки. Главная страница. Создание темы 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

Метки: Wordpress, Создание темы.

Комментарии к записи

Дмитрий:

02.01.2018 в 18:02

Добрый день. Не сосем понятно как должен выглядеть фаЙл functions.php. Можно пожалуйста его конечный код?

Ответить
- Артём Санников:
  
  27.02.2018 в 22:57
  
  Финальный файл functions.php можете посмотреть в следующих уроках.
  
  Ответить

Артём Санников

Языки программирования

Формат данных

Базы данных

Программное обеспечение

Операционные системы

Мобильная разработка

Сетевые технологии

CMS системы

Математика

SEO продвижение

Социальные сети

Психология

Хостинг провайдер

Смартфоны

Погружение в базы данных Oracle

SQL без слёз

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

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

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

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

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

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

Комментарии к записи

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

Рекомендую

Мои проекты

Активность в сети

Правовая информация

Артём Санников

Языки программирования

Формат данных

Базы данных

Программное обеспечение

Операционные системы

Мобильная разработка

Сетевые технологии

CMS системы

Математика

SEO продвижение

Социальные сети

Психология

Хостинг провайдер

Смартфоны

Погружение в базы данных Oracle

SQL без слёз

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

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

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

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

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

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

Записи по теме

Комментарии к записи

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

Рекомендую

Мои проекты

Активность в сети

Правовая информация