Добавление Функций к Фреймворку Вашей WordPress Темы

Russian (Pусский) translation by Narine Hovhannisyan (you can also view the original English article)

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

Если вы работали с примером кода, то в вашем фреймворке сейчас есть шесть хуков-действий:

wptp_in_header, который находится на правой стороне header
wptp_before_content, который находится до цикла
wptp_after_content, который идет сразу после цикла
wptp_sidebar, который находится в sidebar.php
wptp_footer, который находится внутри элемента footer
wptp_after_footer, который находится после элемента footer.

В этом уроке я покажу вам, как добавить виджет зоны к трем из них и пользовательскую функцию к последнему.

Что Вам Понадобится

Для этого урока вам понадобится:

установка WordPress для разработки
кодовый редактор
файлы кода с предыдущего урока, если вы работаете с примером кода. Вы можете получить доступ к ним, просмотрев этот урок или с помощью репозитория GitHub для этих серий, ссылка к которому находится наверху этой страницы.

Добавление Виджет-Зон с Помощью Функции

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

Создание Файла Include для Виджет-Зон

Поскольку виджет-зоны добавляются с помощью функциий, вам не нужно скодировать их в соответсвующие файлы шаблонов. Вы можете добавить их к вашему файлу functions.php, но для управления кодом, я собираюсь добавить файл include с кодом для виджет-зон.

Создайте папку под названием includes в папке вашей темы, внутри нее создайте файл под названием widgets.php. Сохраните файл.

Теперь окройте ваш файл functions.php и добавьте этот код до следующих функций:

// include for widgets
include( TEMPLATEPATH . '/includes/widgets.php' );

Это эффективно включает контенты файла widgets.php на этом месте в файле функций.

Теперь сохраните ваш файл функций.

Виджет-Зона в Header

Для начала давайте добавим виджет-зону в header. Откройте ваш новый файл widgets.phpи добавьте это:

function wptp_in_header_widget_area() {
if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
  	<aside class="in-header widget-area" role="complementary">
			<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
		</aside>
	<?php } 
}
add_action( 'wptp_in_header', 'wptp_in_header_widget_area' );

Функция wptp_in_header_widget_area() добавляет код для виджет-зоны в правильном месте. Сначала, она проверяет, если виджет зона заполнена виджетами, используя if( is_active_sidebar), затем, если это так, то она выводит виджет в элемент aside.

Функция активируется с помощью хука-действия wptp_in_header, который вы добавили к файлу header.php в последнем уроке. Это заменяет код для виджет зоны, который изначально находился в header.php.

Сделав это, будет означать, что, если вы захотите удалить виджет-зону для сайта, работающего на дочерней теме, вы сможете сделать это, используя remove_action(), вот так:

remove_action( 'wptp_in_header', 'wptp_in_header_widget_area' );

Это также означает, что вы можете добавить допонительные функции, активирующиеся с помощью того же хука, если бы вы захотели добавить вызов к кнопке действия наверху виджет зоны, вы бы, например, создали функцию, содержащую код, и затем прицепили бы ее к хуку-действию wptp_in_header, с приоритетом менее 10, так как это приоритет, установленный по умолчанию, который будет дан наверху функции виджет-зоны. Функции с более низким показателем приоритета работают первыми.

function wptp_add_cta() {
//code for cta here
}
add_action( 'wptp_in_header' , 'wttp_add_cta', 5 );

Вы можете узнать больше о функции add_action() в Кодексе WordPress.

Виджет-Зона в Боковой Панели

Следующий шаг - это добавление виджет-зоны в боковой панели, используя похожий код, который вы также добавляете к вашему файлуwidgets.php:

function wptp_sidebar_widget_area() {
if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
		<aside class="sidebar widget-area" role="complementary">
			<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
		</aside>
	<?php } 
}
add_action( 'wptp_sidebar', 'wptp_sidebar_widget_area' );

Это добавляет виджет-зону в боковую панель до тех пор, пока она заполнена, с соответсвующими классами для идентификации ее стиля.

Виджет-Зона в Footer

Наконец, добавим виджет в footer. Я собираюсь добавить четыре виджет-зоны - вы, возможно, захотите добавить меньше, если ваш фреймворк требует столько. Мои виджет-зоны используют классы, которые используют преимущества объектно-ориентированного CSS в моей теме.

Опять, в widgets.php, добавьте следующее:

function wptp_footer_widget_area() { ?>

<aside class="fatfooter" role="complementary">

		<?php
		// the first widget area
		if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
			<aside class="first quarter left widget-area">
				<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
			</aside><!-- .first .widget-area -->
		<?php } 
		
		// the second widget area
		if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
			<aside class="second quarter widget-area">
				<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
			</aside><!-- .first .widget-area -->
		<?php } 
	
		// the third widget area
		if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
			<aside class="third quarter widget-area">
				<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
			</aside><!-- .first .widget-area -->
		<?php } 
	
		// the fourth widget area
		if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) { ?>
			<aside class="fourth right quarter widget-area">
				<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
			</aside><!-- .first .widget-area -->
		<?php } ?>
	
	</aside>

<?php	
}
add_action( 'wptp_footer', 'wptp_footer_widget_area' );

Это добавит четыре виджет-зоны внутри элемента aside с классом fatfooter в моей теме, что используется для стиля, это означает, что фон в полную ширину может быть применен к элементу footer в то время, как элемент aside.fatfooter может быть расположен по центру экрана.

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

Добавление Функции для Колофона

Как для виджет зон, так и для внедрения текста для колофона я собираюсь добавить функцию к моей теме. Она будет активирована с помощью хука wptp_after_footer, она будет отображатся в самом низу экрана.

Так как это не виджет, я собираюсь добавить код к моему файлу functions.php:

function wptp_colophon() { ?>
<section class="colophon" role="contentinfo">
		<small class="copyright half left">
			&copy; <a href="<?php echo home_url( '/' ) ?>"><?php bloginfo( 'name' ); ?></a> 2014
		</small><!-- #copyright -->
	
		<small class="credits half right">
				<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
			</a>
		</small><!-- #credits -->
	</section><!--#colophon-->

<?php		
}

Это добавит элемент section, содержащий код для колофона. Теперь вы сможете увидеть колофон в моем сайте:

Как вы видите, по умолчанию текстом для ссылки copyright является название сайта. Если я захочу его поменять в дочерней теме, я с легкостью смогу это сделать с помощью создания новой функции, прикрепленной к хуку-действию wptp_after_footer, и удаления исходной функции, используя remove_action():

remove_action( 'wptp_after_footer', 'wptp_colophon' );

Кроме того, я могу сделать мою первоначальную функцию сменной, это озаначет, что она не активируется, если с другой функцией с таким же названием уже сталкивались в WordPress (например, в дочерних темах). Я сделаю это, обернув функцию в условную функцию, вот так:

if ( ! function_exists( 'wptp_colophon' ) ) {
function wptp_colophon() { ?>
		<section class="colophon" role="contentinfo">
			<small class="copyright half left">
				&copy; <a href="<?php echo home_url( '/' ) ?>"><?php bloginfo( 'name' ); ?></a> 2014
			</small><!-- #copyright -->
		
			<small class="credits half right">
					<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
				</a>
			</small><!-- #credits -->
		</section><!--#colophon-->

	<?php		
	}

}
add_action( 'wptp_after_footer', 'wptp_colophon' );

Если я потом добавлю функцию под названием wptp_colophon к моей дочерней теме, WordPress запустит ее, а не ту, которая находится в родительской теме. Ловко, не так ли?

Заметьте, что в этом случае наилучшим решением нацелиться на текст в ссылке copyright будет взятие этого кода внутрь хука-фильтра. Мы рассмотрим это в следующей части этой серии.

Заключение

Теперь у фреймворка вашей WordPress темы есть некоторые функции. В этом уроке я показала вам, как использовать хуки-действия, которые вы создали ранее для активации функций, которые вы добавляете в файле functions.php или в файле include, который вы создали в вашей теме.

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

Многие фреймворки популярных WordPress тем делают это, так что нет причины, почему вы не можете. Например, вы можете написать плагин для добавления боковой панели сайту, затем активировать ее с помощью хука wptp_sidebar.

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

В следующей части этой серии вы научитесь добавлять хуки-фильтры к вашему фреймворку.