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

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

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

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

Урок #4. Вёрстка главной страницы. Создание темы WordPress.

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

Вёрстка html/css главной страницы темы WordPress.

Итак, дизайн для темы WordPress готов. Сейчас мы будем верстать главную страницу, то есть переводить изображение в html страницу. В первую очередь мы создаём html каркас страницы, а затем пропишем стили для каждого идентификатора и класса.

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

Для того, чтобы начать вёрстку подготовим необходимые директории и файлы.

0. Создаем папку FirstTheme (название нашей темы), открываем ее, и дальше создаём все директории и файлы по инструкции.

1. Создаём папку favicon и загружаем в неё 6 иконок, со следующими параметрами:

  • favicon.ico (размер 16×16);
  • favicon.png (размер 48×48);
  • favicon_apple_60.png (размер 60×60);
  • favicon_apple_76.png (размер 76×76);
  • favicon_apple_120.png (размер 120×120);
  • favicon_apple_152.png (размер 152×152).

2. Создаём пустую папку images.

3. Создаём файл .htaccess со следующим содержимым:

AddDefaultCharset utf-8
	AddCharset utf-8 *
	<IfModule mod_charset.c>
	CharsetSourceEnc utf-8
	CharsetDefault utf-8
</IfModule>

#Запрет на чтение всех дирректорий
Options All -Indexes
 
#Защита .htaccess
<Files ~ "^.*\.([Hh][Tt][Aa])">
	order allow,deny
	deny from all
	satisfy all
</Files>

4. Создаём файл reset.css со следующим содержимым:

html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
  	border:1px solid #dedede;
}

td {
	border:1px solid #dedede;  
}

5. Создаём пустой файл index.html.

6. Создаём файл style.css со следующим содержимым:

/*
Theme Name: First Theme #Название темы
Theme URI: //artemsannikov.ru #Адрес темы где ее можно скачать
Description: Простая минималистичная тема для WordPress. #Описание темы
Author: Artem Sannikov #Автор (разработчик) темы
Author URI: //artemsannikov.ru #Адрес автора темы
Tags: Sidebar, White, Adaptive, Minimalism #Теги описывающие вашу тему
Version: 1.0 #Версия темы
*/

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

/*
Theme Name: First Theme
Theme URI: //artemsannikov.ru
Description: Простая минималистичная тема для WordPress.
Author: Artem Sannikov
Author URI: //artemsannikov.ru
Tags: Sidebar, White, Adaptive, Minimalism
Version: 1.0
*/

HTML каркас

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

  • Шапка (название сайта, краткое описание и навигационное меню);
  • Вывод записей (отображаются последние записи добавленные на сайт);
  • Боковая колонка (будет включать в себя различные виджеты, как например: текст, произвольное меню и др.);
  • Постраничная навигация (выводит список всех страниц на сайте);
  • Подвал (выводится статическая текстовая информация и copyright).

Открываем файл index.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="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 стили

Каркас html готов, приступаем к оформлению css. Для того, чтобы вы понимали что это за блок стилей и к чему он относится я оставил комментарии, которые будут вам хорошим подспорьем.

Открываем файл style.css и вставляем него следующий код.

/*
Theme Name: First Theme
Theme URI: //artemsannikov.ru
Description: Простая минималистичная тема для WordPress.
Author: Artem Sannikov
Author URI: //artemsannikov.ru
Tags: Sidebar, White, Adaptive, Minimalism
Version: 1.0
*/

/*Подключение шрифта Open Sans с Fonts.Google.com*/
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600,700');

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	color: #333;
	background: #f9f9f9;
}

img {
	max-width: 100%;
	height: auto;
}

/*Обёртка*/
#wrapper {
	width: 1000px;
	height: auto;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 0 3px #dcdcdc;
	outline: 0px solid red;
}
	/*Шапка*/
	.header {
		width: 1000px;
		height: 140px;
		border-bottom: 1px solid #eee;
		overflow: hidden;
	}
		/*Название блога и описание*/
		.bloginfo {
			float: left;
			width: 300px;
			height: 60px;
			margin: 40px 0 0 30px;
		}
			.bloginfo h1 {
				font-size: 16px;
				font-weight: bold;
				margin: 0 0 10px 0;
			}
				.bloginfo h1 a {
					color: #333;
					text-decoration: none;
				}
					.bloginfo h1 a:hover {
						color: #2d3e50;
					}
			.bloginfo p {
				font-size: 14px;
				color: #666;
				line-height: 1.3;
			}
		/*Навигация*/
		.nav {
			float: right;
			margin: 55px 20px 0 0; 
		}
			.nav ul {
				list-style-type: none;
				list-style-position: inside;
			}
				.nav ul li {
					display: inline-block;
					font-size: 14px;
					line-height: 1;
				}
					.nav ul li a {/*ссылка в пассивном состоянии*/
						color: #333;
						margin: 0 0 0 15px;
						text-decoration: none;
						padding: 5px 10px;
					}
						.nav ul li.current_page_item a {/*активная ссылка*/
							background: #2d3e50;
							color: #fff;
							border-radius: 3px;
						}
						.nav ul li a:hover {/*ссылка при наведении*/
							background: #eee;
							color: #333;
							border-radius: 3px;
						}

	/*Область для вывода контента*/
	.content {
		float: left;
		width: 670px;
		height: auto;
		margin: 30px 30px;
		overflow: hidden;
		outline: 0px solid blue;
	}
		/*Вид записи*/
		.box-post {
			width: 670px;
			height: auto;
			margin: 0 0 30px 0;
			padding: 0 0 30px 0;
			overflow: hidden;
			border-bottom: 1px solid #eee;
		}
			/*миниатюра записи*/
			.thumbnail-post {
				float: left;
				width: 136px;
				height: 136px;
				margin: 0 20px 0 0;
			}
				.thumbnail-post img {
					display: block;
					vertical-align: bottom;
					padding: 2px 2px;
					border: 1px solid #dfdfdf;
					background: #fff;
					border-radius: 50%;
				}
			/*описание записи*/
			.description-post {
				float: right;
				width: 514px;
				height: auto;
			}
				.description-post h2 {
					font-size: 16px;
					font-weight: bold;
					line-height: 1;
					margin: 0 0 20px 0;
				}
					.description-post h2 a {
						text-decoration: none;
						color: #333;
					}
						.description-post h2 a:hover {
							color: #2d3e50;
						}
				.description-post p.info-post {
					font-size: 14px;
					color: #666;
					line-height: 1;
					margin: 0 0 30px 0;
				}
				.description-post p {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
					margin: 0 0 30px 0;			
				}
				.description-post a.readmore {
					display: inline-block;
					padding: 8px 12px;
					border-radius: 2px;
					background: #FFD15C;
					line-height: 1;
					font-size: 14px;
					color: #333;
					text-decoration: none;
				}
					.description-post a.readmore:hover {
						background: #2d3e50;
						color: #fff;
					}
		/*Постраничная навигация*/
		#page-navi {
			width: 670px;
			height: auto;
		}	
			/*Ссылка на страницу*/
			#page-navi a.page-numbers {
				display: inline-block;
				font-family: 'Open Sans', sans-serif;
				font-size: 14px;
				color: #666;
				padding: 6px 9px;
				border: 1px solid #dfdfdf;
				border: 0;
				margin: 0 0 0 5px;
				text-decoration: none;
			}		
				#page-navi a.page-numbers:hover {
					color: #2d3e50;
					border: 1px solid #2d3e50;
					padding: 5px 8px;
				}		
			/*Активная ссылка*/
			#page-navi .page-numbers.current {
				display: inline-block;
				font-family: 'Open Sans', sans-serif;
				font-size: 14px;
				color: #2d3e50;
				padding: 5px 8px;
				margin: 0 0 0 10px;
				border: 1px solid #2d3e50;
				background-color: #fff;
				cursor: default;
			}
			/*Страница N из N*/
			#page-navi span.pages {
				font-size: 14px;
				line-height: 1;
				color: #666;
			}

	/*Боковая колонка*/
	.sidebar {
		float: right;
		width: 240px;
		height: auto;
		margin: 30px 30px 30px 0;
		outline: 0px solid red;
	}
		/*заголовок виджета*/
		#title-widget {
			width: 240px;
			height: auto;
			margin: 0 0 30px 0;
		}
			#title-widget h6 {
				font-weight: bold;
				font-size: 16px;
				color: #333;
				line-height: 1;
			}
		/*виджет - текст*/
		.textwidget {
			width: 240px;
			height: auto;
			margin: 0 0 30px 0;
		}
			.textwidget p {
				font-size: 14px;
				color: #666;
				line-height: 1.5;
			}
				.textwidget p a {
					color: #2d3e50;
					text-decoration: underline;
				}
					.textwidget p a:hover {
						color: #666;
						text-decoration: none;
					}
			.textwidget img {
				display: block;
				vertical-align: bottom;
			}

			/*Виджет - произвольное меню*/
			.widget_nav_menu {
				width: 240px;
				height: auto;
				margin: 0 0 30px 0;				
			}
				.widget_nav_menu ul {
					list-style-type: none;
					list-style-position: inside;
				}
					.widget_nav_menu ul li {
						font-size: 14px;
						color: #666;
					}
						.widget_nav_menu ul li a {
							display: list-item;
							color: #666;
							text-decoration: none;
							margin: 0 0 15px 0;
						}	
							.widget_nav_menu ul li.current-menu-item a {/*активная категория или страница*/
								color: #2d3e50;
								text-decoration: underline;
							}
							.widget_nav_menu ul li a:hover {/*ссылка при наведении*/
								color: #333;
								text-decoration: underline;
							}
					/*древовидный список*/
					.widget_nav_menu ul.sub-menu {
						margin: 0 0 0 15px;
					}
						.widget_nav_menu ul.sub-menu a:after {/*стилизация ссылки древовидного списка*/
							float: left;
							content: "-";
							font-size: 14px;
							color: #666;
							margin: 0 5px 0 0;
						}
							.widget_nav_menu ul.sub-menu li.current-menu-item a {/*активная категория или страница*/
								color: #2d3e50;
								text-decoration: underline;
							}
							.widget_nav_menu u.sub-menul li a:hover {/*ссылка при наведении*/
								color: #333;
								text-decoration: underline;
							}
	/*Подвал*/
	.footer {
		width: 1000px;
		height: auto;
		border-top: 1px solid #eee;
		padding: 30px 0;
		overflow: hidden;
	}
		.footer p {
			font-size: 14px;
			color: #666;
			line-height: 1;
			margin: 0 0 10px 0;
			text-align: center;	
		}
			.footer p:last-child {/*убираем отступ у последнего абзаца*/
				margin: 0 0 0 0;
			}

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

Сайт: ArtemSannikov.ru

Tags: , .

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

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