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

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

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

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

Страница 404 отображается пользователю только в том случае, когда он перешёл по не правильному или не существующему адресу.

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

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

HTML каркас

Открываем файл 404.html для внесения изменений.

Удаляем полностью div с классом information-post, а вместо него добавляем другой div с классом title-404.

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

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

Вставляем в блок с классом title-404 строку с заголовком страницы.

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

		<!-- Информация о записи страницы/записи-->
		<div class="title-404">
			<h1>Ошибка #404 - Ничего не найдено</h1>
		</div>

Блок text-post очищаем от лишнего текста, и добавляем два абзаца с нужной информацией.

		<!-- Текст страницы/записи -->
		<div class="text-post">
			<p>Извините, запрашиваемая страница не найдена!</p>
			<p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</p>
		</div>

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

<!DOCTYPE html>
<html>
<head>
	<!-- Charset -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Page info -->
	<title>404 страница</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="title-404">
			<h1>Ошибка #404 - Ничего не найдено</h1>
		</div>

		<!-- Текст страницы/записи -->
		<div class="text-post">
			<p>Извините, запрашиваемая страница не найдена!</p>
			<p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</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 стили

Ниже представлен код css для оформления блока с классом title-404.

Добавьте код в файл style.css.

		/*Заголовок страницы 404*/
		.title-404 {
			width: 670px;
			height: auto;
			margin: 0 0 20px 0;
			overflow: hidden;
		}	
			/*Заголовок записи/страницы*/
			.title-404 h1 {
				font-weight: bold;
				font-size: 16px;
				color: #333;
				line-height: 1;
			}	

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

Сайт: ArtemSannikov.ru

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

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

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