Отображение рубрик блоками на главной странице.

Настало время разобрать, как сделать блочное отображение рубрик с их изображениями на главной странице сайта.

Пример такого отображения можно посмотреть на сайте гончарной мастерской «Етника пластична».

Рубрики блоками на главной странице сайта

Рубрики блоками на главной странице сайта



В WirdPress заложена логика, исходя из которой, каждый файл с кодом занимает свое место в иерархии.
Всегда выполняется файл самой верхней точки иерархии. Но если файла нет, то его вместо него отрабатывает код родительского файла.

Для каждой категории (рубрики) цепочка иерархии в шаблонах WP выглядит следующим образом:

index.php -> archive.php -> category.php -> category-id.php -> category-slug.php

ВНИМАНИЕ !!! В этой статье речь идет о файлах в активном шаблоне WP, а не файлах самого WP, т.е. файлы в папке: \wp_content\themes\<tamplate>\

category-slug.php — файл верхней точки в цепочки иерархии. Slug — условное наименование рубрики, или можно сказать, что ее ярлык.
Если файл, размещенный в верхней точки иерархии, в шаблоне отсутствует, то его место занимает стоящий перед ним в иерархии файл. В нашем случае занял бы место category-id.php, и цепочка останавливалась бы на нем. В наименование этого файла входит ID страницы.
category.php — на этот файл возлагается функция вывода всех страниц с категориями.
Перед category.php в иерархии стоит файл archive.php. Его также часто используют при разработке тем WP. Он отвечает за вывод рубрик.
Ну, и самый нижний родительский уровень иерархии — файл index.php
Простейшие шаблоны сайтов на WP иногда состоят всего из двух файлов — index.php и style.css.
Сайт на WP начинается обычно с файла index.php, поэтому его можно охарактеризовать как «Главную страницу» в сайта.

Если из цепочки выпадает какой-то файл (кроме index.php, конечно), то его место смело занимает дочерний, и цепочка иерархий строится дальше.

В примере иерархия построена в обратном порядке, чем это обычно описывают в других источниках. Но сопоставив это описание с теми, что описаны в других источниках, у вас, возможно, будет вырисовываться более полная картина и понимание иерархии WordPress.
(category-slug.php -> category-id.php -> category.php -> archive.php -> index.php)

Теперь время сказать, что работать будем с графическими объектами рубрик.
Как назначить для рубрики (категории) изображение, описано в статье «Создание виджета. Рубрики блоками, с картинками на сайдбаре»

Итак, у нас уже есть рубрики с картинками. Вложенности рубрик нет. У каждой записи только одна рубрика (обязательное условие).

Для начала можно скачать файл index.php нашего шаблона WP, в котором выполняется отображение картинок категорий в блочном формате: index_theme_the_wp.zip.
В коде файла index.php также указаны комментарии.

Теперь давайте попробуем разобраться, что-же тут происходит…


<?php
get_header();
?>
 <div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">

<?php
if (is_front_page() || is_home()) {
 // Отображение категорий на главной странице
?>

Условие того, что открыта главная страница сайта (main page). Здесь будут отображаться рубрики (категории), которые мы выстроим в необходимой нам форме. В данном случае будет табличное представление рубрик с изображениями.
Иначе будут выполняться другие файлы в иерархии.

<H1>Текст в заголовке</H1>
<p>Текст в абзаце.</p>
<?php
 //вывод списка рубрик
 $args = array(
  'parent' => 0,
  'hide_empty' => 0,
  'exclude' => '', // ID рубрики, которую нужно исключить
  'number' => '0',
  'taxonomy' => 'category', // таксономия, для которой нужны изображения
  'pad_counts' => true,
  'orderby' => 'name', //'term_id',
  'order' => 'ASC'
 );
 $categories = get_categories($args); // получаем список рубрик
 $ic = 0;
 foreach($categories as $category){
 $emsp;if (!(($category->name == 'Без рубрики') || ($category->term_id == 1)) ) {
   $ic = $ic + 1;
   $category_link = sprintf( '<a href="%1$s" alt="%2$s" title="%2$s">%3$s %4$s</a>',
    esc_url( get_category_link( $category->term_id ) ),
    esc_attr( $category->name ),
    '<img src="'.z_taxonomy_image_url($category->term_id, 'thumbnail').'" STYLE="padding: 0px; margin: 0px; border: 0px solid #777; border-radius: 10px;">',
    '<span STYLE="display: block;">'.esc_html( $category->name, 'textdomain' ).' ('.esc_html($category->count, 'textdomain').')</span>'
   );
   // выводим описание и название рубрики
   // JavaScript, обрабатывающий события видимости описания рубрики находится на странице "Заголовок" (header.php)
JavaScript, обрабатывающий события видимости описания рубрики находится на странице "Заголовок" (header.php)
В нашем случае описание рубрики не используется, т.к. это противоречит дизайнерскому решению. Однако, если необходимо добавить краткое описание рубрик на главной странице, то отображение описания, например, при наведении курсора мыши на блоке с рубрикой, описывается в файле заголовка (header.php).
>>Ссылка для скачивания примера файла header.php с механизмом отображения описания рубрик.<<

   echo '<div id="categoryIdDiv'.esc_html($category->term_id,'textdomain').'" STYLE="display: inline; float: left; width: 180px; height: 220px; text-align: center; margin: 10px 20px 10px 0px; padding: 20px 5px 10px 5px; font-size: 14px; color: #777; outline: 0px solid #777; border: 1px solid #777; border-radius: 40px 10px; background-color: #'.(($ic % 2==0)?'E0FFFF':'FDEAA8').'; overflow: hidden;">';
   echo ' ' . sprintf( esc_html( '%s', 'textdomain' ), $category_link );
   echo '</div>';
  }
 }
 // Конец отображения категорий на главной странице
 //----------------------------------
} else {
Если это не главная страница, то выполняется код из других файлов по логике иерархии.
 //echo('This is not a homepage'); // действие для не главной страницы
 if ( have_posts() ) :
  /* Start the Loop */
  while ( have_posts() ) : the_post();
   /* Include the Post-Format-specific template for the content.
   * If you want to override this in a child theme, then include a file
   * called content-___.php (where ___ is the Post Format name) and that will be used instead.
   */
   get_template_part( 'content', get_post_format() );
  endwhile;
  the_wp_posts_navigation();
 else :
  get_template_part( 'content', 'none' );
 endif;
}
?>
  </main><!-- #main -->
 </div><!-- #primary -->
<?php
get_sidebar();
get_footer();
?>

Comments are closed.