Menggunakan Tab Bootstrap 3 untuk Menampilkan Postingan dalam Taksonomi Jenis Posting Kustom

Diterbitkan: 2021-07-19

Tab bootstrap sangat bagus untuk menampilkan banyak konten di area kecil. Singkatnya, mereka mengemas banyak pukulan untuk real estat layar yang sangat sedikit!

Dalam tutorial ini kita akan melihat cara yang bagus untuk menampilkan jenis posting kustom yang dibagi menjadi istilah taksonomi yang berbeda.

Untuk contoh ini saya telah menyiapkan jenis posting kustom "film" dan kami akan mengelompokkannya berdasarkan taksonomi "genre". Genre inilah yang akan menjadi tab bootstrap, dan konten tab akan menjadi film yang berada di bawah genre tertentu.

Inilah yang kami coba capai:

Menyiapkan Jenis Posting dan Taksonomi

Hal pertama yang pertama, kita perlu membuat jenis posting kustom film. Cara termudah untuk melakukannya adalah dengan menginstal UI Jenis Postingan Kustom yang sangat baik.

Gunakan pengaturan di bawah ini:

Kemudian kita perlu mengatur taksonomi genre sehingga kita dapat mengelompokkan semua film kita ke dalam genre yang benar. Menggunakan Custom Post Type UI, buat taksonomi menggunakan pengaturan di bawah ini:

Pastikan Anda mengatur hierarki menjadi true, karena ini akan memastikan taksonomi menggunakan kotak pilih gaya kategori daripada tag.

Pekerjaan selanjutnya adalah membuat beberapa film dan mengkategorikannya ke dalam genre yang benar. Saya baru saja menambahkan beberapa film uji sehingga saya dapat menunjukkan kepada Anda proses selanjutnya.

Untuk kesederhanaan, saya akan membuat halaman di WordPress yang disebut "film" dan kemudian membuat halaman override halaman ini di mana kita akan meletakkan kode kita. Cara melakukannya adalah dengan membuat file bernama page-films.php di folder tema Anda, dan kemudian WordPress akan menggunakan file ini untuk menampilkan halaman film. Dengan cara ini, kami dapat menambahkan kode yang kami butuhkan dan hanya akan muncul ketika Anda membuka halaman film situs tersebut.

Halaman tidak harus disebut "film", tetapi pastikan bahwa slug halaman cocok dengan bagian kedua dari template halaman. Jadi jika slug halaman adalah "film", file template akan disebut page-movies.php.

Membuat Tab

Jika Anda mengunjungi situs Bootstrap dan mengunjungi bagian tab, kami dapat mengambil markup yang kami perlukan. Selama Anda telah memuat semua file javascript Bootstrap (terutama tabs.js dan transisi.js), tab yang baru saja Anda tempel ke halaman Anda akan berfungsi dengan baik.

Apa yang ingin kami lakukan adalah menunjukkan nama genre kami di tab. Untuk melakukan ini, kita harus menggunakan fungsi WordPress get_terms. Fungsi ini pada dasarnya hanya mengembalikan semua istilah dengan posting yang terkait dengan taksonomi. Jadi, kita perlu menggunakan get_terms untuk mengembalikan informasi tentang semua genre yang kita miliki.

 <?php $film_genres = get_terms('genre'); ?>

Dalam contoh ini, saya telah menetapkan get_terms terhadap variabel $film_genres, tetapi Anda dapat menggunakan apa pun yang Anda suka.

Selanjutnya, kita perlu melakukan perulangan foreach pada variabel ini untuk mengembalikan semua genre yang telah kita tambahkan. Kami ingin melakukan ini pada daftar nav-tabs yang tidak berurutan seperti:

 <ul class="nav nav-tabs nav-justified">
  <li class="aktif">
    <a data-toggle="tab" href="#all">Semua</a>
  </li>
  <?php foreach($film_genres as $film_genre) { ?>
    <li>
      <a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->name ?></a>
    </li>
  <? } ?>
</ul>

Pastikan untuk mengatur "Semua" li sebelum Anda melakukan, karena kami ingin tab pertama menjadi default untuk menampilkan semua film, dan kemudian kami memfilter menurut genre menggunakan tab lainnya.

Isi Tab

Kami kemudian ingin mengatur konten tab untuk tab semua film, dan kami melakukan ini menggunakan wp_query di atas jenis posting film seperti:

 <div class="tab-pane aktif">
  <?php 	
  $args = array(
    'post_type' => 'film',
    'posts_per_page' -1,
    'orderby' => 'judul',
    'pesan' => 'ASC'
  );
  $all_films = new WP_Query( $args );		
  ?>

  <?php if ( $all_films->have_posts() ) : // pastikan kita memiliki film untuk ditampilkan sebelum melakukan sesuatu?>
  <div class="table-responsive">
    <tabel kelas="tabel">
      <?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">Baca selengkapnya</a>
        </td>
      </tr>
      <?php akhir; ?>
      <?php wp_reset_query() ?>
    </tabel>
  </div>
  <?php endif; ?>

</div><!-- semua panel tab film -->

Pastikan Anda mengatur nilai kunci jenis posting ke nama jenis posting Anda (jika Anda tidak menggunakan film) yaitu 'post_type' => 'jenis posting Anda di sini'. Kami kemudian mengembalikan semua posting di jenis posting film dan memesan berdasarkan judul, naik.

Kami kemudian menjalankan loop WordPress normal di atas objek wp_query ini dan mengembalikan semua posting film.

Untuk contoh ini, saya telah memilih untuk menampilkan tabel bootstrap di dalam setiap panel tab, tetapi Anda dapat menampilkan data Anda kapan pun Anda mau. Hal yang perlu diingat, adalah dengan menggunakan wp_query loop kita dapat menggunakan semua fungsi WordPress yang hebat seperti the_title, the_excerpt, the_post_thumbnail dll.

Di akhir loop ini jangan lupa untuk menjalankan wp_reset_query, karena ini akan menghindari kemungkinan masalah yang mungkin kita hadapi jika kita akan menjalankan loop lain di halaman ini.

Setelah kami memilah-milah konten tab yang menampilkan semua film, kami kemudian ingin dapat menampilkan semua film yang telah dikelompokkan ke dalam genre. Kami ingin ini dinamis, sehingga jika kami memilih untuk menambahkan lebih banyak genre di masa mendatang, kami tidak perlu membuat kode di wp_quires lain untuk masing-masing genre ini. Untuk mencapai ini, kita perlu menjalankan loop foreach lain di div konten-tab berikutnya dan di dalamnya, kita akan menjalankan wp_query dengan beberapa parameter taksonomi di dalamnya.

 <?php foreach($film_genres as $film_genre) { ?>
  <div class="tab-pane">
    <?php 	
    $args = array(
      'post_type' => 'film',
      'posts_per_page' -1,
      'orderby' => 'judul',
      'pesan' => 'ASC',
      'tax_query' => array(
        Himpunan(
          'taksonomi' => 'genre',
          'bidang' => 'siput',
          'terms' => $film_genre->slug
        )
      )
    );
    $film = new WP_Query( $args );		
    ?>

    <?php if ( $films->have_posts() ) : // pastikan kita memiliki film untuk ditampilkan sebelum melakukan sesuatu?>
    <tabel kelas="tabel">
      <?php while ( $films->have_posts() ): $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">Baca selengkapnya</a>
        </td>
      </tr>
      <?php akhir; ?>
      <?php wp_reset_query() ?>
    </tabel>
    <?php endif; ?>

  </div>
<? } ?>

Kami membungkus foreach yang sama yang kami gunakan sebelumnya di sekitar div tab-pane. Kita perlu melakukan ini agar kita bisa mendapatkan akses ke nilai dari objek $film_genre yang telah kita atur, karena kita perlu menggunakan nilai slug untuk masuk ke wp_query kita, dan juga untuk menyetel id tab-pane.

Setelah kami membuat wp_query, kami menggunakan loop WordPress yang sama seperti pada panel tab film “semua”, dengan mengingat untuk mengubah variabel wp_query menjadi sesuatu yang unik seperti $film_genres.

Dan itu benar-benar tentang hal itu. Tab Bootstrap akan bekerja dengan sempurna, dan ketika Anda menambahkan genre baru dengan film yang menyertainya, itu akan muncul sebagai tab baru.

Berikut kode lengkapnya:

 <section class="films-tabs">

  <?php $film_genres = get_terms('genre'); // dapatkan semua genre ?>

  <!-- Tab navigasi -->
  <ul class="nav nav-tabs nav-justified">
    <li class="aktif">
      <a data-toggle="tab" href="#all">Semua</a>
    </li>
    <?php foreach($film_genres as $film_genre) { ?>
      <li>
        <a href="#<?php echo $film_genre->slug ?>" data-toggle="tab"><?php echo $film_genre->name ?></a>
      </li>
    <? } ?>
  </ul>

  <!-- Panel tab -->
  <div class="tab-content">

    <div class="tab-pane aktif">
      <?php 	
      $args = array(
        'post_type' => 'film',
        'posts_per_page' -1,
        'orderby' => 'judul',
        'pesan' => 'ASC'
      );
      $all_films = new WP_Query( $args );		
      ?>

      <?php if ( $all_films->have_posts() ) : // pastikan kita memiliki film untuk ditampilkan sebelum melakukan sesuatu?>
      <div class="table-responsive">
        <table class="tabel">
          <?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">Baca selengkapnya</a>
            </td>
          </tr>
          <?php akhir; ?>
          <?php wp_reset_query() ?>
        </tabel>
      </div>
      <?php endif; ?>

    </div><!-- semua panel tab film -->

    <?php foreach($film_genres as $film_genre) { ?>

      <div class="tab-pane">
        <?php 	
        $args = array(
          'post_type' => 'film',
          'posts_per_page' -1,
          'orderby' => 'judul',
          'pesan' => 'ASC',
          'tax_query' => array(
            Himpunan(
              'taksonomi' => 'genre',
              'bidang' => 'siput',
              'terms' => $film_genre->slug
            )
          )
        );
        $film = new WP_Query( $args );		
        ?>

        <?php if ( $films->have_posts() ) : // pastikan kita memiliki film untuk ditampilkan sebelum melakukan sesuatu?>
        <tabel kelas="tabel">
          <?php while ( $films->have_posts() ): $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">Baca selengkapnya</a>
            </td>
          </tr>
          <?php akhir; ?>
          <?php wp_reset_query() ?>
        </tabel>
        <?php endif; ?>

      </div>
    <? } ?>

  </div><!-- isi-tab -->

</section><!-- film-tabs -->

Jika Anda membutuhkan bantuan dengan Anda jangan ragu untuk menghubungi kami.