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

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

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

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

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

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

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

Интеграция вёрстки страницы page.html не сильно отличается от главной страницы, поэтому большая часть действий будет одинакова, но не стоит расслабляться, так как будут небольшие различия.

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

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

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

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

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

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

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

<?php get_header(); ?>

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

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

Каркас страницы page.php после разбиения на блоки.

<?php get_header(); ?>

	<!-- Область для вывода контента -->
	<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>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

Перед блоком div с классом information-post вставляем конструкцию, которая запускает цикл для вывода информации на текущей странице.

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

После закрытия блока div с классом text-post вставляем конструкцию, которая завершит выполнение цикла.

<?php endwhile; ?>
<?php endif; ?>

Переходим к блоку information-post в котором необходимо написать три функции для вывода названия страницы, даты публикации и количества просмотров.

Важный момент: если вы хотите, чтобы у вас отображалось количество просмотров записи/страницы, то вам необходимо установить плагин — WP-PostViews.

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

#стало
<!-- Информация о записи страницы/записи-->
<div class="information-post">
	<h1><?php the_title(); ?></h1>
	<p>Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>
</div>

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

#было
<!-- Текст страницы/записи -->
<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 class="text-post">
	<?php the_content(); ?>
</div>

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

Интеграция вёрстки успешно закончена, ниже представлен окончательный вариант страницы page.php.

<?php get_header(); ?>

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

		<?php if(have_posts()) : ?>
		<?php while(have_posts()) : the_post(); ?>

		<!-- Информация о записи страницы/записи-->
		<div class="information-post">
			<h1><?php the_title(); ?></h1>
			<p>Опубликовано: <?php the_time('Y-m-d'); ?> / Просмотров: <?php if(function_exists('the_views')) { the_views(); } ?></p>
		</div>

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

		<?php endwhile; ?>
		<?php endif; ?>

	</div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

</div>

</body>
</html>

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

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

Сайт: ArtemSannikov.ru

Tags: , .

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

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