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

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

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

Вёрстка страницы (page). Создание темы WordPress.

Главную страницу (index.html) мы отверстали в предыдущем уроке, сейчас приступаем к вёрстке страницы (page.html).

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

0. Создаём файл page.html в корне нашей темы.

HTML каркас

Скопируем каркас для страницы page.html из файла index.html, а затем внесём несколько небольших изменений.

Находим блок div с классом content. И добавим еще два пустых блока div с классами information-post и text-post. Чтобы получилось следующее.

<div class="content">
	<!-- Информация о записи страницы/записи-->
	<div class="information-post">

	</div>

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

	</div>
</div>

Затем добавим в блок information-post две строки, которые будут выводить название и краткую информацию о странице.

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

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

	</div>
</div>

В блок text-post добавим основные элементы для форматирования текста, так как они могут понадобиться при написании статей.

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

		<p>Каждый <a href="">веб-разработчик</a> знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.</p>

		<h1>Заголовок H1</h1>
		<h2>Заголовок H2</h2>
		<h3>Заголовок H3</h3>
		<h4>Заголовок H4</h4>
		<h5>Заголовок H5</h5>
		<h6>Заголовок H6</h6>

		<p>Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день.</p>

		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li><a href="">Item 3</a></li>
			<li>Item 4</li>
		</ul>

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

		<blockquote><p>Рыбным текстом является знаменитый lorem контент. Контент – написание символов на название, не имеет никакого отношения. Возможность получить более длинный неповторяющийся набор.</p></blockquote>

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

		<ol>
			<li>Item 1</li>
			<li>Item 2</li>
			<li><a href="">Item 3</a></li>
			<li>Item 4</li>
		</ol>

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

	</div>
</div>

Вот так выглядит готовый каркас страницы page.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>Каждый <a href="">веб-разработчик</a> знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.</p>

			<h1>Заголовок H1</h1>
			<h2>Заголовок H2</h2>
			<h3>Заголовок H3</h3>
			<h4>Заголовок H4</h4>
			<h5>Заголовок H5</h5>
			<h6>Заголовок H6</h6>

			<p>Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день.</p>

			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li><a href="">Item 3</a></li>
				<li>Item 4</li>
			</ul>

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

			<blockquote><p>Рыбным текстом является знаменитый lorem контент. Контент – написание символов на название, не имеет никакого отношения. Возможность получить более длинный неповторяющийся набор.</p></blockquote>

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

			<ol>
				<li>Item 1</li>
				<li>Item 2</li>
				<li><a href="">Item 3</a></li>
				<li>Item 4</li>
			</ol>

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

		</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 стили

Сейчас мы должны написать стили для двух блоков information-post и text-post. В каждом блоке есть дочерние элементы, которые тоже нуждаются в стилизации.

Код css сопровождается комментариями.

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

		/*Информация о записи страницы/записи*/
		.information-post {
			width: 670px;
			height: auto;
			margin: 0 0 30px 0;
		}	
			/*Заголовок записи/страницы*/
			.information-post h1 {
				font-weight: bold;
				font-size: 16px;
				color: #333;
				line-height: 1;
				margin: 0 0 20px 0;
			}
			/*Мета данные о записи/странице*/
			.information-post p {
				font-size: 14px;
				color: #666;
				line-height: 1;
			}
		/* Текст страницы/записи*/
		.text-post {
			width: 670px;
			height: auto;
			margin: 0 0 20px 0;
			overflow: hidden;
		}
			/*стили для заголовков H1-H6*/
			.text-post h1, .text-post h2, .text-post h3, .text-post h4, .text-post h5, .text-post h6 {
				font-weight: bold;
				color: #333;
				line-height: 1.5;
				margin: 10px 0;
			}
				.text-post h1 {font-size: 20px;}
				.text-post h2 {font-size: 19px;}
				.text-post h3 {font-size: 18px;}
				.text-post h4 {font-size: 17px;}
				.text-post h5 {font-size: 16px;}
				.text-post h6 {font-size: 15px;}

			.text-post p {/*стили для абзаца*/
				font-size: 14px;
				color: #666;
				line-height: 1.5;
				margin: 10px 0;
			}
				.text-post p a {
					color: #2d3e50;
					text-decoration: underline;
				}
					.text-post p a:hover {
						color: #666;
						text-decoration: none;
					}
			.text-post img {/*стили для изображений*/
				display: block;
				vertical-align: bottom;
			}
				.text-post .aligncenter {/*выравнивание изображения по центру*/
					display: block;
					margin-left: auto;
					margin-right: auto;
					margin-top: 10px;
					margin-bottom: 10px;
				}
				.text-post .alignleft {/*выравнивание изображения по левому краю*/
					float: left;
					margin-left: 0px;
					margin-right: 10px;
				}
				.text-post .alignright {/*выравнивание изображения по правому краю*/
					float: right;
					margin-left: 10px;
					margin-right: 0px;
				}
			.text-post ul {/*стили для маркированного списка*/
				list-style-type: disc;
				margin: 0 0 0 30px;
			}
				.text-post ul li {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
					margin: 10px 0;
				}
					.text-post ul li a {
						color: #2d3e50;
						text-decoration: underline;
					}
						.text-post ul li a:hover {
							color: #666;
							text-decoration: none;
						}
			.text-post ol {/*стили для нумерованного списка*/
				list-style-type: decimal;
				margin: 0 0 0 30px;
			}
				.text-post ol li {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
					margin: 10px 0;
				}
					.text-post ol li a {
						color: #2d3e50;
						text-decoration: underline;
					}
						.text-post ol li a:hover {
							color: #666;
							text-decoration: none;						
						}
			.text-post blockquote {/*Цитата*/
				border-left: 2px solid #FFD15C;
				margin: 0 0 0 15px;
				padding: 0 0 0 10px;
			}
				.text-post blockquote p {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
					margin: 0 0;
				}
					.text-post blockquote p a {
						color: #2d3e50;
						text-decoration: underline;
					}
						.text-post blockquote p a:hover {
							color: #666;
							text-decoration: none;
						}
			.text-post sup {/*Верхний индекс*/
				position: relative;
				top: -6px;
				font-size: 12px;
			}
			.text-post sub {/*Нижний индекс*/
				position: relative;
				top: 6px;
				font-size: 12px;
			}

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

Сайт: ArtemSannikov.ru

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

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

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