Артём Санников

Персональный блог

Мобильная разработка
Менеджеры пакетов
Хостинг провайдер
Смартфоны
› Урок #15. Интеграция вёрстки. Страница 404. Создание темы WordPress.

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

Интеграция вёрстки. Страница 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

Метки: , .

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

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

Реклама от Google
Реклама от Google