Личный блог Артёма Санникова

Подробные пошаговые обучающие уроки по направлениям: cms системы, локальные сервера, социальные сети и операционные системы.

Категории сайта

› Урок #6. Вёрстка категории. Создание темы WordPress.
Мельникова 620000 Россия, Свердловская обл., г. Екатеринбург. +7 953 039 559 1 info@artemsannikov.ru

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

Дата публикации:  / Категория: Создание темы / Автор: 

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

Категория или рубрика (допустимы оба названия) очень схожа с главной страницей, если конечно вывод записей не отличается по дизайну. В нашем случае дизайн записей идентичен, и это нам на руку. Давайте не буду затягивать вступление и приступим к созданию категории для темы WordPress.

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

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

HTML каркас

Копию файла успешно сделали, давайте откроем файл category.html и произведём небольшую модификацию.

Сразу после того, как открывается блок div с классом content добавляем новый блок div с классом description-category. Чтобы получилось следующее:

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

	<!-- Описание категории -->
	<div class="description-category">

	</div>

	<!-- Вид записи -->
	<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>

Добавим в блок description-category несколько строк, которые будут выводить название категории и краткое описание.

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

	<!-- Описание категории -->
	<div class="description-category">
		<h1>Тестовая категория</h1>
		<p>Сегодня существует несколько вариантов lorem ipsum. Текста исключительно демонстрационная, то и зла средневековый книгопечатник.</p>
		<p>Иные буквы встречаются с использованием lorem ipsum. Широко используемый и на основе оригинального трактата, благодаря чему появляется возможность.</p>
	</div>

	<!-- Вид записи -->
	<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>

Готовый каркас страницы category.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="description-category">
			<h1>Тестовая категория</h1>
			<p>Сегодня существует несколько вариантов lorem ipsum. Текста исключительно демонстрационная, то и зла средневековый книгопечатник.</p>
			<p>Иные буквы встречаются с использованием lorem ipsum. Широко используемый и на основе оригинального трактата, благодаря чему появляется возможность.</p>
		</div>

		<!-- Вид записи -->
		<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>

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

Нам необходимо написать стили только для блока description-category, и его дочерних элементов. Давайте этим и займёмся.

Добавьте код который находится ниже в файл style.css.

		/*Описание категории*/
		.description-category {
			width: 670px;
			height: auto;
			margin: 0 0 50px 0;
			overflow: hidden;
		}
			.description-category h1 {/*Заголовок категории*/
				font-weight: bold;
				font-size: 16px;
				color: #333;
				line-height: 1;
				margin: 0 0 20px 0;
			}
			.description-category p {/*описание категории*/
				font-size: 14px;
				color: #666;
				line-height: 1.5;
				margin: 0 0 10px 0;
			}
				.description-category p:last-child {
					margin: 0 0 0 0;
				}

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

Сайт: ArtemSannikov.ru

Tags: , .

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

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