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

Урок #15. Интеграция вёрстки. Страница 404. Создание темы WordPress.

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

Интеграция вёрстки. Страница 404. Создание темы WordPress.

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

Подготовка к интеграции

0. Переименовываем файл 404.html в 404.php.

Разбиение на блоки: header, sidebar и footer

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

Выделяем весь код сверху до закрытия блока div с классом header и удаляем его. У вас должен быть удалён этот участок кода.

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

Вместо удалённого кода вставляем функцию для подключения файла header.php.

<?php get_header(); ?>

Выделяем блоки sidebar и footer, а затем удаляем их. На их место вставляем конструкции для подключения файлов sidebar.php и footer.php.

<?php get_sidebar(); ?> //подключение файла sidebar.php
<?php get_footer(); ?> //подключение файла footer.php

Область для вывода текста страницы

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

Перемещаемся в блок div с классом text-post, находим текст:

<p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</p>

В атрибут href ссылки вставляем функцию, которая будет автоматически выводить адрес главной страницы.

<p>Попробуйте вернуться на <a href="<?php bloginfo('url'); ?>">главную страницу</a>, и повторите поиск.</p>

Интеграция завершена

Страница 404 успешно прошла интеграцию и теперь она готова к работе.

Окончательный вариант страницы 404.php представлен ниже.

<?php get_header(); ?>

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

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

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

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

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

Сайт: ArtemSannikov.ru

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

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

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