Разбираем и наполняем файл index php WordPress


index.php WordPressРазбираем и наполняем файл index php WordPress, знакомимся с некоторыми функциями и переносим часть HTML шаблона в файл index.php WordPress

В прошлой статье мы перенесли часть дизайна из статического HTML файла в WordPress шаблон, тем самым наполнив файл header.php. Теперь пришла пора разобрать содержимое стандартного файла index.php WordPress и перенести еще часть верстки из HTML в WP.

Как устроен файл header.php можно узнать из статьи «Наполняем файл header.php WordPress». Сссылка на все статьи из рубрики «Перенос сайта из HTML в WordPress».

Содержимое стандартного файла index php WordPress

Прежде, чем приступить к наполнению файла index.php, верно будет вкратце объяснить как он устроен и что выполняют функции, заложенные в него.

Стандартный файл index php WordPress из темы Twenty Twelve 1.8

Его мы возьмем за основу index.php нашей темы Start WP.

<?php
/**
* The main template file
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
	<div id="primary" class="site-content">
		<div id="content" role="main">
		<?php if ( have_posts() ) : ?>
			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
			<?php endwhile; ?>
			<?php twentytwelve_content_nav( 'nav-below' ); ?>
		<?php else : ?>
			<article id="post-0" class="post no-results not-found">
			<?php if ( current_user_can( 'edit_posts' ) ) :
				// Show a different message to a logged-in user who can add posts.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
				</header>
				<div class="entry-content">
					<p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
				</div><!-- .entry-content -->
			<?php else :
				// Show the default message to everyone else.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				</header>
				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			<?php endif; // end current_user_can() check ?>
			</article><!-- #post-0 -->
		<?php endif; // end have_posts() check ?>
		</div><!-- #content -->
	</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

В коде я вырезал лишь описание, дабы сократить его. Итак, теперь по порядку:

<?php get_header(); ?>

Подключает файл header.php в index.php, тем самым соединяя нашу заготовку в одно целое.

<?php if ( have_posts() ) : ?> 

Условный тег, который проверяет, есть ли публикации для текущего запроса. Читайте далее и увидите, что будет выводиться, при отсутствии подходящих постов.

Если есть что выводить, запускается цикл

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

Циклы в WordPress нужны для вывода страниц и записей. И в зависимости от страницы, на которой находится посетитель, цикл будет отдавать из базы данных соответствующее содержимое.

Например, если посетитель находится на главной странице, то выведется контент, тот, что вы указали в консоли с настройками. Либо это статическая страница, либо записи. Если посетитель находится на странице рубрик, выводятся записи, соответствующие данной рубрике. Если посетитель находится на странице с записью, то выводится сама запись, и так далее.

/* Start the Loop */ — Просто комментарий, разработчики темы пометили начало цикла. И переводится соответственно как «начало цикла».

while ( have_posts() ) : the_post(); — Начало цикла

get_template_part( 'content', get_post_format() ); — Выводится содержимое страницы content.php, другими словами содержимое цикла (в дальнейшем мы познакомимся с этим содержимым).

Cодержимое цикла может состоять из названия записи, рубрики, страницы, самого контента, даты, названия рубрики, меток, автора, и так далее.

endwhile; — окончание цикла.

Далее вкратце пробегусь по коду, так как все самое основное — это вывод цикла.

<?php twentytwelve_content_nav( 'nav-below' ); ?>

Функция постраничной навигации.

<?php else : ?>

Это то, о чем я писал выше. Если нет подходящего по запросу посетителя контента, то начинается вывод различных, я их назову вспомогательными, шаблонов и служебных функций.

Например, Показывать различные сообщения для зарегистрированного пользователя, который может добавлять записи:

<article id="post-0" class="post no-results not-found">
<?php if ( current_user_can( 'edit_posts' ) ) :
				// Show a different message to a logged-in user who can add posts.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
				</header>
				<div class="entry-content">
					<p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
				</div><!-- .entry-content -->

Для всех остальных выводить запись типа «Ничего не найдено» с поисковой формой:

			<?php else :
				// Show the default message to everyone else.
			?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				</header>
				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			<?php endif; // end current_user_can() check ?>
			</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>

Это окончание условного тега проверки, самого первого в коде have_posts(). Как в HTML как бы закрывающий тег, только здесь он означает завершение работы функции.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Функции вызова сайдбара и футера шаблона соответственно.

Создаем основную разметку файла index.php WordPress

Хватит теории, давайте займемся разметкой нашего шаблона Start WP. Так как мы делаем сайт с использованием сетки Bootstrap, нам нужно разметить соответствующим образом все файлы. Файл header.php мы уже разметили и даже наполнили, теперь пришла пора заняться файлом index.php

Откроем файл index.php нашей темы и дополним его стандартным содержанием. Скопируйте код, приведенный в самом начале статьи, и вставьте в индексный файл. Только описание оставьте наше, из прошлых занятий.

После того, как вставите код, WordPress выдаст ошибку такого рода:

error index.php WordPress

Обратите внимание на ключевую фразу, которую выдает нам сервер — Call to undefined function twentytwelve_content_nav() Это значит, что вызов функции на странице есть, а саму функцию сервер найти не может. Это вызывается функция постраничной навигации, но так как мы ее еще не прописали в файле functions.php, просто пока закомментируйте ее таким образом:

<?php // twentytwelve_content_nav( 'nav-below' ); ?>

Теперь ошибка устранена, а саму функцию мы пропишем позже.

Давайте пока вообще уберем, а лучше закомментируем весь цикл WordPress таким образом:

	<?php /* Start the Loop */ ?>
	<?php // while ( have_posts() ) : the_post(); ?>
		<?php // get_template_part( 'content', get_post_format() ); ?>
	<?php// endwhile; ?>
	<?php // twentytwelve_content_nav( 'nav-below' ); ?>

А сразу под

	<?php // twentytwelve_content_nav( 'nav-below' ); ?>

поставим нашу html разметку из исходников:

Разбираем и наполняем файл index php WordPress

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

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

index.php WordPress

Если есть желание, пропишите линки на картинки, для чистоты эксперимента 🙂

Скачайте получившийся у меня файл index.php WordPress, для сравнения.

В следующих материалах

Следующим материалом по данной теме будет создание и наполнение сайдбаров WordPress. Очень интересная, на мой взгляд, тема. Следите за обновлениями сайта по FeedBurner, комментируйте, задавайте вопросы.


Похожие по Тегам статьи