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

Урок #7. Вёрстка страницы записи. Создание темы WordPress.

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

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

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

Подготовка к вёрстке

0. Создаём копию файла page.html и переименовываем его в single.html.

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

HTML каркас

Находим блок div с классом information-post и добавляем в строку, которая выводит информацию о записи новый элемент — категория.

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

После закрытия блока text-post создаём новый div с классом devide-line, который будет являться разделительной линией для блоков.

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

После блока devide-line, создаём новый div с классом related-post.

		<!-- Похожие записи -->
		<div class="related-post">
			<p>Еще записи по теме</p>
			<ul>
				<li><a href="">Урок #1. Структура темы WordPress.</a></li>
				<li><a href="">Урок #2. Создание макета для темы WordPress в Balsamiq Mockups.</a></li>
				<li><a href="">Установка локального web-сервера Xampp (Windows)</a></li>
			</ul>
		</div>

После закрытия блока related-post вставляем еще один блок devide-line, он будет отделять блок «Похожие записи» от блока с «Комментариями».

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

Готовый каркас страницы single.html.

<!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>

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

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

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

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

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

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

		</div>

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

		<!-- Похожие записи -->
		<div class="related-post">
			<p>Еще записи по теме</p>
			<ul>
				<li><a href="">Урок #1. Структура темы WordPress.</a></li>
				<li><a href="">Урок #2. Создание макета для темы WordPress в Balsamiq Mockups.</a></li>
				<li><a href="">Установка локального web-сервера Xampp (Windows)</a></li>
			</ul>
		</div>

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

	</div>

	<!-- Боковая колонка -->
	<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>

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

</div>

</body>
</html>

CSS стили

Ниже предоставлен код css для оформления блоков devide-line и related-post. Добавьте его в файл style.css.

		/*Разделительная линия*/
		.devide-line {
			width: 670px;
			height: auto;
			border-bottom: 1px solid #f5f5f5;
			margin: 30px 0;
		}
		/*Похожие записи*/
		.related-post {
			width: 670px;
			height: auto;
			overflow: hidden;
		}
			.related-post p {/*заголовок блока*/
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin: 0 0 30px 0;
				line-height: 1;
			}
			.related-post ul {/*стилизация списка*/
				list-style-position: inside;
				list-style-type: none;
				margin: 0 0 0 20px;
			}
				.related-post ul li a {
					display: inline-block;
					color: #666;
					font-size: 14px;
					color: #666;
					text-decoration: none;
					margin: 0 0 15px 0;
					line-height: 1;
				}
					.related-post ul li a:before {
						float: left;
						content: "-";
						font-size: 14px;
						color: #666;
						margin: 0 10px 0 0 ;
					}
					.related-post ul li:last-child a {
						margin: 0 0 0 0;
					}
					.related-post ul li a:hover {
						text-decoration: underline;
						color: #2d3e50;
					}

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

Сайт: ArtemSannikov.ru

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

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

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