Введение

В прошлой части мы рассматривали создание фундамента рабочей темы WordPress из готового Bootstrap шаблона.

Сегодня мы пойдем дальше, рассмотрим интересные хуки Theme Hook Alliance, которые позволяют добиться максимальной гибкости при разработке тем и плагинов.

THA позволяет проводить легкую кастомизацию и изменение функционала с помощью специальных хуков и тегов для вывода содержания в шаблонах. На примере всё станет понятно.

Приступим!

к содержанию ↑

Подключение Theme Hook Alliance

Скачиваем файл tha_theme_hooks.php отсюда

Подключаем его в functions.php

include( 'tha-theme-hooks.php' ); 

Скачиваем и устанавливаем плагин Tha Hooks Interface

Всё, базовая настройка завершена.

Адаптирование WordPress темы на использование THA

Открываем index.php, вставляем следующий код

<?php if (is_home()) { tha_content_top(); } ?>

— До цикла вывода записей

<?php if (is_home()) { tha_content_bottom(); } ?>

— сразу после цикла

Код читается: если открыта домашняя страница (мы хотим выводить данное содержание только на главной), то выводим с помощью хуков tha_content_top(); и tha_content_bottom(); нужный контент над основными записями и, соответственно, под ними.

Весь index.php

<?php get_header(); ?>
<!-- Begin Body -->
<div class="container">
	<div class="row">
  			<div class="col col-sm-3">
            <?php get_sidebar(); ?> 
            </div>  
      		<div class="col col-sm-9">
              <div class="panel">
                <?php if (is_home()) { tha_content_top(); } ?>
               <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_content(); ?>       
                <?php endwhile; else : ?>
                    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                <?php endif; ?>	
                <div><p><?php posts_nav_link(); ?></p></div>
                <?php if (is_home()) { tha_content_bottom(); } ?>
<?php get_footer(); ?>

Вы видите, насколько код стал ухоженный, при том, что выводит весь нужный контент.

Фактически, еще не выводит, мы только прописали хуки.

Заходим в консоль WordPress на страницу плагина THA Hooks Interface (‘wp-admin/options-general.php?page=tha-hooks-interface’), переходим на вкладку Content

Wordpress bootstrap theme Flathood  THA Hooks Interface

Находим там поля tha_content_top и tha_content_bottom, добавляем в них наше выводимое содержание. Вот так всё просто. Вставляем содержание, обязательно проверяем, и убеждаемся, что всё работает.

tha_content_top

              <h1>The Top Stories from Around</h1>
              
              <div class="row">
              	<div class="col col-sm-8">
                  <img src="//s.bootply.com/assets/example/bg_iphone.png" class="img-responsive">
                </div> 
        		<div class="col col-sm-4">
                  <img src="//placehold.it/400x180/FF3333/FFF" class="img-responsive">
                  <h4>Aside</h4>
                  <hr>
                  <img src="//placehold.it/400x180/FF3333/FFF" class="img-responsive">
                  <h4>Aside 2</h4>
              	</div>   
              </div>

tha_content_bottom

                <hr>
                
                 <div class="row">
                  <div class="col col-sm-6">
                    <img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
                    
                  </div> 
                  <div class="col col-sm-6">
                    <h1>There is still a lot to be said about the Responsive Web.</h1>
                  </div>   
                </div>
                
                <hr>
              
              	<h2>Responsive Text</h2>
      			Eeaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                eos qui ratione voluptatem sequi nesciunt. Bootply is this awesomeness. Editor, prototype tool, adipisci velit, 
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
              
                <hr>
                
              	<h2>Responsive Images</h2>
      			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
              
                <hr>
                
              	<h2>Media Queries</h2>
      			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

Погодите, если вы думаете, что хуки ограничены выше перечисленными двумя, спешу вас порадовать, что это не так. 🙂

Список всех tha хуков вы найдете в файле примеров разработчиков tha-example-index.php

Поэтому, давайте сделаем еще одно улучшение в нашей теме.

Мы видим, что под заголовком выводится новостная строка.

Wordpress bootstrap theme Flathood  News Line Header

Пока что код прописан статически в header.php, что не очень удобно. Давайте это исправим, и подключим нашу новостную ленточку с помощью соответствующего хука — tha_header_bottom.

Было

   <div class="container">
	<div class="row">
      <div class="col col-sm-12">
        
        <div class="panel">
        <div class="panel-body">
          You may want to put some news here  <span class="glyphicon glyphicon-heart-empty"></span>
        </div>
        </div>
        
      </div>
  	</div>
    </div>

Стало

   <div class="container">
	<div class="row">
      <div class="col col-sm-12">
        
        <div class="panel">
        <div class="panel-body">
            <?php tha_header_bottom(); ?>
        </div>
        </div>
        
      </div>
  	</div>
    </div>

Теперь, всё, что нужно сделать, просто записать новостную строку в соответствующем поле плагина THA Hooks Interface (Вкладка Header, поле tha_header_bottom)

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

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

Оставить комментарий

avatar
  Подписаться  
Уведомление о