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

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

Данный курс является консолидацией теоретических основ и практических примеров, которые демонстрируют работу операторов и функций SQL в системе управления базами данных PostgreSQL.

Промокод на скидку: SALE_202411

Подробнее

Регулярные выражения в Python

В этом курсе вы освоите синтаксис регулярных выражений, научитесь создавать сложные шаблоны для поиска и обработки текста, а также изучите мощные функции модуля re в Python.

Пройти курс

Модуль psycopg2 в Python

Модуль psycopg2 позволяет взаимодействовать с базами данных PostgreSQL в скриптах Python.

Пройти курс

Модуль SQLite3 в Python

Встроенный модуль SQLite3 позволяет работать с базами данных SQLite в ваших приложениях, которые написаны на языке программирования Python.

Пройти курс

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

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

Купить книгу

SQL без слёз

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

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

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

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

Сейчас мы будем производить интеграцию вёрстки для самой сложной страницы — single.html, поскольку нужно будет модифицировать не только стандартные блоки, такие как: название, мета данные и текст записи, но и еще блок — похожие записи и форма комментариев. Хотя это всё не так уж и сложно, как говорится «глаза боятся, а руки делают!».

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

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

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

Открываем файл single.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 с классом information-post вставляем конструкцию, которая запускает цикл для вывода информации на текущей странице.

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

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

<?php endwhile; ?>
<?php endif; ?>

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

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

#было
<!-- Информация о записи страницы/записи-->
<div class="information-post">
	<h1>Тестовая страница</h1>
	<p>Категория: Тест / Опубликовано: 2017-07-24 / Просмотров: 30</p>
</div>

#стало
<!-- Информация о записи страницы/записи-->
<div class="information-post">
	<h1><?php the_title(); ?></h1>
	<p>Категория: <?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>
</div>

Блок text-post очищаем от ненужной тестовой информации. Вместо тестовой информации напишем функцию, которая будет выводить текст записи.

#было
<!-- Текст страницы/записи -->
<div class="text-post">

	<p>Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.</p>

	<p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p>

	<p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>

</div>

#стало
<!-- Текст страницы/записи -->
<div class="text-post">
	<?php the_content(); ?>
</div>

Форма комментариев

После разделительной линии (блок div с классом devide-line), которая идёт после блока с похожими записями вставляем функцию для вывода встроенной формы комментариев.

<!-- Форма комментариев -->
<?php comments_template(); ?>

Для того, чтобы форма комментариев отображалась корректно необходимо добавить следующий код в файл style.css.

		/*Форма комментариев*/
		#commentform p.comment-form-author > label,
		#commentform p.comment-form-comment > label,
		#commentform p.comment-form-email > label,
		#commentform p.comment-form-url > label {
			display: block;
			margin: 0 0 10px 0;
			font-size: 14px;
			color: #666;
			line-height: 1;
		}
		#commentform input[type="text"] {
			font-family: 'Open Sans', sans-serif;
			font-size: 14px;
			width: 240px;
			height: auto;
			color: #666;
			padding: 10px 5px 10px 5px;
			margin: 0 10px 10px 0;
			border: 1px solid #dedede;
			border-radius: 2px;
		}
		#commentform textarea {
			font-family: 'Open Sans', sans-serif;
			width: 97.8%;
			height: 100px;
			font-size: 14px;
			color: #666;
			padding: 1% 1%;
			margin: 0 0 10px 0;
			border: 1px solid #dedede;
			resize: vertical;
			border-radius: 2px;
		}
		#commentform input[type="submit"]{
			cursor: pointer;
			font-family: 'Open Sans', sans-serif;
			font-size: 14px;
			color: #333;
			background-color: #FFD15C;
			margin: 10px 0 0 0;
			padding: 6px 5px;
			border: 1px solid #FFD15C;
			border-radius: 2px;
			transition: 0.2s;
				-moz-transition: 0.2s;
				-o-transition: 0.2s;
				-webkit-transition: 0.2s;
		}
			#commentform input[type="submit"]:hover{
				color: #fff;
				background: #2689b0;
				border: 1px solid #2689b0;
				transition: 0.2s;
					-moz-transition: 0.2s;
					-o-transition: 0.2s;
					-webkit-transition: 0.2s;
			}

		/*Количество комментариев*/
		#comments-wordpress h3#comments {
			font-size: 14px;
			font-weight: normal;
			color: #5f5f5f;
		}
		/*Текст с количеством комментариев*/
		h3#comments {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			line-height: 1;
		}
		/*Текст - Добавить комментарий*/
		#respond > h3 {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			line-height: 1;
			margin: 30px 0;
		}
			#respond > h3 > a {
				color: #2d3e50;
				text-decoration: underline;
			}
				#respond > h3 > a:hover {
					text-decoration: none;
					color: #333;
				}
		/*отменить комментарий*/
		a#cancel-comment-reply-link {
			font-size: 16px;
			color: #2d3e50;
			text-decoration: underline;
		}
			a#cancel-comment-reply-link:hover {
				text-decoration: none;
				color: #333;
			}
		/*Текст в форме комментариев для зарегистрированного пользователя*/
		#commentform p.comment-notes {
			font-size: 14px;
			color: #666;
			line-height: 1;
			margin: 0 0 30px 0;
		}
			#commentform p.comment-notes a {
				text-decoration: underline;
				color: #5b892f;
			}
				#commentform p.comment-notes a:hover {
					text-decoration: none;
					color: #333;
				}
		/*Текст для зарегистрованного пользователя (вы вошли как)*/
		p.logged-in-as {
			font-size: 14px;
			color: #666;
			line-height: 1;
			margin: 0 0 30px 0;
		}
			p.logged-in-as a {
				text-decoration: underline;
				color: #666;
			}
				p.logged-in-as a:hover {
					text-decoration: none;
					color: #2d3e50;
				}
		/*Список комментариев*/
		ol.commentlist {
			width:100%;
			list-style:none;
			list-style-position:outside;
			display:block;
			margin: 30px 0;
			padding:0 0;
		}
			ol.commentlist ul {
				list-style-type:none;
				list-style-position:outside;
				margin:0;
			}
				/*Стиль комментария*/
				ol.commentlist li {
					padding: 0 0 10px 40px;
					margin: 30px 0 0 0;
					position:relative;
					border-bottom:1px solid #f3f4f5;
				    background:none;
				    outline: 0px solid green;
				}
					/*Коментарий ожидает проверки*/
					em.comment-awaiting-moderation {
						font-size: 12px;
						color: #fff;
						font-style: normal;
						background-color: #e0891f;
						padding: 2px 2px 2px 2px;
						margin: 2px 0 2px 13px;
					}
					/*Выделение комменария автора поста*/
					.commentlist li.bypostauthor > .comment-body {
						border-left:2px solid #2d3e50;
						margin: 0 0 0 5px;
					}
					ol.commentlist li p {
						font-size: 14px;
						color: #333;
						line-height: 1.8;
						margin:10px 0 10px 13px;
					}
						ol.commentlist li p a {
							text-decoration: underline;
							color: #2d3e50;
						}
							ol.commentlist li p a:hover {
								color: #333;
								text-decoration: none;
							}
		/*Автор комментария*/
		div.comment-author.vcard {
			margin:0 0 3px 13px;
		}
			div.comment-author.vcard cite {
				font-size: 14px;
				color: #333;
				font-style: normal;
			}
				div.comment-author.vcard cite a.url {
					text-decoration: none;
					color: #333;
				}
					div.comment-author.vcard cite a.url:hover {
						color: #2d3e50;
						text-decoration: underline;
					}
		/*Дата публикации комментария*/
		div.comment-meta.commentmetadata {
			display: inline-block;
			margin:0 0 0 13px;
		}
			ol.commentlist li .comment-meta a {
				font-size: 12px;
				color: #ccc;
				text-decoration: none;
			}
		/*Аватар комментатора*/
		ol.commentlist li .avatar {
			background:#fff;
			padding: 2px 2px 2px 2px;
			border:1px solid #ccc;
			position:absolute;
			left:0;
			top:0;
			border-radius:50%;
		}

		/*Кнопка - Ответить на комментарий*/
		ol.commentlist .reply {
			position:absolute;
			right:0px;
			top:0px;
		}
			ol.commentlist .reply span.comment-reply-link {
				font-size: 14px;
				color: #ccc;
				text-decoration: none;
				background-color: #fff;
				border: 1px solid #f3f4f5;
				padding: 3px 3px;
				display:block;
				border-radius: 2px;
				cursor: pointer;
			}
				ol.commentlist .reply span.comment-reply-link:hover {   
					color: #fff;
					background-color: #2689b0;
					border: 1px solid #2689b0;
				}
		/*Дочерние комментарий*/
		ol.commentlist li .children li {
			margin-top: 20px;
		    padding-top: 20px;
			padding-bottom:0;
			border-top:1px solid #E5E8EA;
			border-bottom:none;
			overflow:hidden;
			outline: 0px solid green;
		}	
			/*Аватар коментатора*/
			ol.commentlist li .children li .avatar {
				top:20px;
			}
			/*Кнопка ответить*/
			ol.commentlist li .children li .reply {
				top: 20px;
			}
				.reply a.comment-reply-link {
					font-size: 12px;
					color: #ccc;
					text-decoration: none;
					padding: 0 2px;
					border: 1px solid #ccc;
					border-radius: 2px;
				}
					.reply a.comment-reply-link:hover {
						background: #2d3e50;
						color: #fff;
						border: 1px solid #2d3e50;
						cursor: pointer;
					}

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

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

<?php get_header(); ?>

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

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

		<!-- Информация о записи страницы/записи-->
		<div class="information-post">
			<h1><?php the_title(); ?></h1>
			<p>Категория: <?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>
		</div>

		<!-- Текст страницы/записи -->
		<div class="text-post">
			<?php the_content(); ?>
		</div>

		<?php endwhile; ?>
		<?php endif; ?>

		<!-- Разделительная линия -->
		<div class="devide-line"></div>

		<!-- Похожие записи -->
		<div class="related-post">
			<p>Еще записи по теме</p>
			<ul>
				<?php 
					$categories = get_the_category($post->ID);
					if ($categories) {
					$category_ids = array();
					foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
					$args=array(
					'category__in' => $category_ids,  //сортировка по тегам (меткам)
					'post__not_in' => array($post->ID),
					'showposts'=>3,  //количество выводимых ячеек
					'orderby'=>rand, // в случайном порядке
					'caller_get_posts'=>1); //исключаем одинаковые записи
					$my_query = new wp_query($args);
					if( $my_query->have_posts() ) {
					echo '';
					while ($my_query->have_posts()) {
					$my_query->the_post();
				?>
					<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
				<?php
					}
					echo '';
					}
					wp_reset_query();
					}
				?>
			</ul>
		</div>

		<!-- Разделительная линия -->
		<div class="devide-line"></div>

		<!-- Форма комментариев -->
		<?php comments_template(); ?>

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

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

Сайт: ArtemSannikov.ru

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

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

Сергей Травкин:

13.04.2024 в 19:15

Эдравствуйте. Отличные уроки!!!
Как вывести изображение миниатюры в записи? ВП_КОНТЕНТ разве этим не занимается?

Ответить
- Артём Санников:
  
  28.06.2024 в 12:07
  
  За вывод миниатюры отвечает функция the_post_thumbnail
  
  Ответить

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

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

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

Базы данных

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

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

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

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

CMS системы

Математика

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

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

Психология

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

Смартфоны

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

Регулярные выражения в Python

Модуль psycopg2 в Python

Модуль SQLite3 в Python

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

SQL без слёз

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

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

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

Область для вывода текста записи

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

Форма комментариев

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

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

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

Рекомендую

Мои проекты

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

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

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

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

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

Базы данных

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

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

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

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

CMS системы

Математика

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

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

Психология

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

Смартфоны

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

Регулярные выражения в Python

Модуль psycopg2 в Python

Модуль SQLite3 в Python

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

SQL без слёз

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

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

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

Область для вывода текста записи

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

Форма комментариев

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

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

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

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

Рекомендую

Мои проекты

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

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