Использование вкладок Bootstrap 3 для отображения сообщений в таксономии настраиваемых типов сообщений

Вкладки начальной загрузки отлично подходят для отображения большого количества контента на небольшой площади. Короче говоря, они имеют много возможностей для очень небольшого экрана!

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

Для этого примера я установил собственный тип публикации «фильмы», и мы сгруппируем их по таксономии «жанров». Именно эти жанры станут вкладками начальной загрузки, а содержимым вкладок будут фильмы, относящиеся к этим конкретным жанрам.

Вот чего мы пытаемся добиться:

Настройка типа сообщения и таксономии

Перво-наперво, нам нужно создать пользовательский тип публикации фильмов. Самый простой способ сделать это - установить отличный пользовательский интерфейс Custom Post Type.

Используйте настройки ниже:

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

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

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

Для простоты я создам страницу в WordPress под названием «фильмы», а затем сделаю переопределение этой страницы, куда мы поместим наш код. Для этого нужно создать файл с именем page-movies.php в папке вашей темы, и затем WordPress будет использовать этот файл для отображения страницы фильмов. Таким образом, мы можем добавить нужный нам код, и он будет отображаться только тогда, когда вы переходите на страницу с фильмом на сайте.

Страницу не обязательно называть «фильмами», но убедитесь, что заголовок страницы соответствует второй части шаблона страницы. Поэтому, если ярлык страницы - «фильмы», файл шаблона будет называться page-movies.php.

Создание вкладок

Если вы посетите сайт Bootstrap и посетите раздел с вкладками, мы сможем получить разметку, которая нам понадобится. Пока у вас загружены все файлы javascript Bootstrap (особенно tabs.js и transitions.js), вкладки, которые вы только что вставили на свою страницу, должны работать нормально.

Что мы хотим сделать, так это показать названия наших жанров во вкладках. Для этого нам нужно использовать функцию WordPress get_terms. Эта функция в основном просто возвращает все термины с сообщениями, относящимися к таксономии. Итак, нам нужно использовать get_terms для возврата информации обо всех жанрах, которые у нас есть.

 <? php $ film_genres = get_terms ('жанры'); ?>

В этом примере я установил get_terms для переменной $ film_genres, но вы можете использовать все, что захотите.

Затем нам нужно выполнить цикл foreach по этой переменной, чтобы вернуть все добавленные нами жанры. Мы хотим сделать это над неупорядоченным списком nav-tabs следующим образом:

 <ul class = "nav nav-tabs nav-justified">
  <li class = "active">
    <a data-toggle="tab" href="#all"> Все </a>
  </li>
  <? php foreach ($ film_genres как $ film_genre) {?>
    <li>
      <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
    </li>
  <? }?>
</ul>

Обязательно установите «All» li перед тем, как вводить foreach, так как мы хотим, чтобы первая вкладка по умолчанию отображала все фильмы, а затем мы фильтруем по жанрам, используя другие вкладки.

Содержимое вкладки

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

 <div class = "tab-pane active">
  <? php 	
  $ args = массив (
    'post_type' => 'фильмы',
    'posts_per_page' -1,
    'orderby' => 'title',
    'порядок' => 'ASC'
  );
  $ all_films = новый WP_Query ($ args);		
  ?>

  <? php if ($ all_films-> have_posts ()): // перед тем, как что-то делать, убедитесь, что у нас есть фильмы для показа?>
  <div class = "table-responseive">
    <table class = "table">
      <? php while ($ all_films-> have_posts ()): $ all_films-> the_post (); ?>	
      <tr>
        <td> <? php the_post_thumbnail ()?> </td>
        <td> <h3> <? php the_title ()?> </ h3 </td>
        <td>
          <p class = "lead"> <? php the_excerpt ()?> </p>
          <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Подробнее </a>
        </td>
      </tr>
      <? php end while; ?>
      <? php wp_reset_query ()?>
    </table>
  </div>
  <? php endif; ?>

</div> <! - панель вкладок все фильмы ->

Убедитесь, что вы установили значение ключа типа сообщения на имя вашего типа сообщения (если вы не используете фильмы), то есть 'post_type' => 'ваш тип сообщения здесь'. Затем мы возвращаем все сообщения в типе сообщений о фильмах и отсортировываем их по названию в порядке возрастания.

Затем мы запускаем обычный цикл WordPress над этим объектом wp_query и возвращаем все записи фильма.

В этом примере я решил выводить таблицу начальной загрузки в каждой панели вкладок, но вы можете выводить свои данные в любое время. Следует помнить, что с помощью цикла wp_query мы можем использовать все замечательные функции WordPress, такие как the_title, the_excerpt, the_post_thumbnail и т. Д.

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

После того, как мы разобрали содержимое вкладки, в которой показаны все фильмы, мы хотим иметь возможность показывать все фильмы, сгруппированные по жанрам. Мы хотим, чтобы это было динамическим, чтобы, если мы решим добавить еще какие-либо жанры в будущем, нам не нужно было кодировать в других wp_quires для каждого из них. Чтобы добиться этого, нам нужно будет запустить еще один цикл foreach для следующего div с содержимым табуляции, и внутри него мы запустим wp_query с некоторыми параметрами таксономии в нем.

 <? php foreach ($ film_genres как $ film_genre) {?>
  <div class = "tab-pane">
    <? php 	
    $ args = массив (
      'post_type' => 'фильмы',
      'posts_per_page' -1,
      'orderby' => 'title',
      'order' => 'ASC',
      'tax_query' => массив (
        множество(
          'taxonomy' => 'жанры',
          'field' => 'slug',
          'terms' => $ film_genre-> slug
        )
      )
    );
    $ movies = новый WP_Query ($ args);		
    ?>

    <? php if ($ movies-> have_posts ()): // перед тем, как что-либо делать, убедитесь, что у нас есть фильмы для показа?>
    <table class = "table">
      <? php while ($ movies-> have_posts ()): $ movies-> the_post (); ?>	
      <tr>
        <td> <? php the_post_thumbnail ()?> </td>
        <td> <h3> <? php the_title ()?> </ h3 </td>
        <td>
          <p class = "lead"> <? php the_excerpt ()?> </p>
          <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Подробнее </a>
        </td>
      </tr>
      <? php end while; ?>
      <? php wp_reset_query ()?>
    </table>
    <? php endif; ?>

  </div>
<? }?>

Мы оборачиваем тот же самый foreach, который мы использовали раньше, вокруг div панели вкладок. Нам нужно сделать это, чтобы мы могли получить доступ к значениям из объекта $ film_genre, который мы установили, поскольку нам нужно будет использовать значение slug для передачи в наш wp_query, а также установить идентификатор панели вкладок.

После того, как мы создали wp_query, мы используем тот же цикл WordPress, что и на вкладке «все» фильмы, не забывая изменить переменную wp_query на что-то уникальное, например, $ film_genres.

И это действительно все. Вкладки Bootstrap должны работать безупречно, и когда вы добавляете новый жанр с прикрепленными к нему фильмами, он должен появиться в виде новой вкладки.

Вот полный код:

 <section class = "movies-tabs">

  <? php $ film_genres = get_terms ('жанры'); // получить все жанры?>

  <! - Вкладки навигации ->
  <ul class = "nav nav-tabs nav-justified">
    <li class = "active">
      <a data-toggle="tab" href="#all"> Все </a>
    </li>
    <? php foreach ($ film_genres как $ film_genre) {?>
      <li>
        <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> name?> </a>
      </li>
    <? }?>
  </ul>

  <! - Панели вкладок ->
  <div class = "tab-content">

    <div class = "tab-pane active">
      <? php 	
      $ args = массив (
        'post_type' => 'фильмы',
        'posts_per_page' -1,
        'orderby' => 'title',
        'порядок' => 'ASC'
      );
      $ all_films = новый WP_Query ($ args);		
      ?>

      <? php if ($ all_films-> have_posts ()): // перед тем, как что-то делать, убедитесь, что у нас есть фильмы для показа?>
      <div class = "table-responseive">
        <table class = "table">
          <? php while ($ all_films-> have_posts ()): $ all_films-> the_post (); ?>	
          <tr>
            <td> <? php the_post_thumbnail ()?> </td>
            <td> <h3> <? php the_title ()?> </ h3 </td>
            <td>
              <p class = "lead"> <? php the_excerpt ()?> </p>
              <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Подробнее </a>
            </td>
          </tr>
          <? php end while; ?>
          <? php wp_reset_query ()?>
        </table>
      </div>
      <? php endif; ?>

    </div> <! - панель вкладок все фильмы ->

    <? php foreach ($ film_genres как $ film_genre) {?>

      <div class = "tab-pane">
        <? php 	
        $ args = массив (
          'post_type' => 'фильмы',
          'posts_per_page' -1,
          'orderby' => 'title',
          'order' => 'ASC',
          'tax_query' => массив (
            множество(
              'taxonomy' => 'жанры',
              'field' => 'slug',
              'terms' => $ film_genre-> slug
            )
          )
        );
        $ movies = новый WP_Query ($ args);		
        ?>

        <? php if ($ movies-> have_posts ()): // перед тем, как что-либо делать, убедитесь, что у нас есть фильмы для показа?>
        <table class = "table">
          <? php while ($ movies-> have_posts ()): $ movies-> the_post (); ?>	
          <tr>
            <td> <? php the_post_thumbnail ()?> </td>
            <td> <h3> <? php the_title ()?> </ h3 </td>
            <td>
              <p class = "lead"> <? php the_excerpt ()?> </p>
              <a href="<?php the_permalink() ?> "class =" btn btn-primary "> Подробнее </a>
            </td>
          </tr>
          <? php end while; ?>
          <? php wp_reset_query ()?>
        </table>
        <? php endif; ?>

      </div>
    <? }?>

  </div> <! - содержимое вкладки ->

</section> <! - вкладки для фильмов ->

Если вам нужна помощь, не стесняйтесь обращаться к нам.