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

Основы PL/pgSQL в СУБД PostgreSQL

Курс по изучению процедурного расширения PL/pgSQL в СУБД PostgreSQL. Основная концепция PL/pgSQL заключается в том, чтобы преодолеть ограничения языка SQL и предоставить разработчикам новые возможности для работы с базами данных.

Поступить на курс

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

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

Поступить на курс

JSON в PostgreSQL

Курс «JSON в PostgreSQL» познакомит вас с форматом JSON и покажет, как создавать и обрабатывать JSON-данные в СУБД PostgreSQL.

Поступить на курс

XML в PostgreSQL

Курс по изучению и практическому применению расширяемого языка разметки XML (eXtensible Markup Language) в системе управления базами данных PostgreSQL.

Поступить на курс

Оконные функции в PostgreSQL

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

Поступить на курс

Массивы в PostgreSQL

Курс по изучению и практическому применению массивов (array) в системе управления базами данных PostgreSQL.

Поступить на курс

Главная › 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 продвижение

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

Психология

Основы PL/pgSQL в СУБД PostgreSQL

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

JSON в PostgreSQL

XML в PostgreSQL

Оконные функции в PostgreSQL

Массивы в PostgreSQL

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

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

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

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

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

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

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

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

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

Рекомендую

Мои проекты

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

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

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

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

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

Базы данных

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

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

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

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

CMS системы

Математика

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

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

Психология

Основы PL/pgSQL в СУБД PostgreSQL

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

JSON в PostgreSQL

XML в PostgreSQL

Оконные функции в PostgreSQL

Массивы в PostgreSQL

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

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

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

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

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

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

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

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

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

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

Рекомендую

Мои проекты

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

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

Управляй данными, как профессионал!