Utilizarea Bootstrap 3 file pentru a afișa postările într-o taxonomie tip tip de postare personalizată

Filele Bootstrap sunt excelente pentru a afișa mult conținut într-o zonă mică. Pe scurt, ambalează o mulțime de pumn pentru foarte puține proprietăți imobiliare pe ecran!

În acest tutorial vom analiza un mod frumos de a afișa o postare personalizată tip (e) de postare împărțită în termeni de taxonomie diferiți.

Pentru acest exemplu, am creat un tip de „filme” personalizate și le vom grupa după o taxonomie a „genurilor”. Aceste genuri vor deveni filele bootstrap, iar conținutul filelor vor fi filmele care se află în aceste genuri particulare.

Iată ce încercăm să realizăm:

Configurarea tipului de postare și a taxonomiei

În primul rând, trebuie să creăm tipul de postare personalizat al filmelor. Cel mai simplu mod de a face acest lucru este să instalați excelenta interfață UI personalizată.

Utilizați setările de mai jos:

Apoi, trebuie să stabilim taxonomia genurilor, astfel încât să putem grupa toate filmele noastre în genul lor corect. Folosind UI de tip postare personalizată, creați taxonomia utilizând setările de mai jos:

Asigurați-vă că setați ierarhicul ca fiind adevărat, deoarece acest lucru va asigura că taxonomia utilizează mai degrabă casete de selectare a stilului de categorie decât etichete.

Următoarea sarcină este crearea unor filme și clasificarea lor în genurile lor corecte. Tocmai am adăugat câteva filme de testare, astfel încât să vă pot arăta următorul proces.

Pentru simplitate, voi crea o pagină în WordPress numită „filme” și apoi voi face o suprascriere a paginii în care vom pune codul nostru. Modul de a face acest lucru este să creați un fișier numit page-films.php în folderul tematic, iar apoi WordPress va folosi acest fișier pentru a afișa pagina filmelor. În acest fel, putem adăuga codul de care avem nevoie și să îl afișăm numai atunci când accesați pagina filmului site-ului.

Pagina nu trebuie să fie numită „filme”, dar asigurați-vă că slugul paginii se potrivește cu a doua parte a șablonului de pagină. Deci, dacă limbajul paginii este „filme”, fișierul șablon va fi numit page-movies.php.

Crearea filelor

Dacă vizitați site-ul Bootstrap și vizitați secțiunea de pe file, putem obține marcajul de care vom avea nevoie. Atâta timp cât aveți încărcate toate fișierele javascript Bootstrap (în special tabs.js și transitions.js), filele pe care tocmai le-ați lipit în pagina dvs. ar trebui să funcționeze bine.

Totuși, ceea ce vrem să facem este să arătăm numele genurilor noastre în file. Pentru a face acest lucru, va trebui să folosim funcția WordPress get_terms. Această funcție, practic, returnează toți termenii cu postări care sunt legate de o taxonomie. Deci, trebuie să folosim get_terms pentru a returna informații despre toate genurile pe care le avem.

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

În acest exemplu, am setat get_terms împotriva variabilei $ film_genres, dar puteți folosi orice doriți.

Apoi, trebuie să facem o buclă foreach peste această variabilă pentru a returna toate genurile pe care le-am adăugat. Vrem să facem acest lucru în lista de nav-tab-uri neordonate astfel:

 <ul class = "nav nav-tabs justificate pentru nav">
  <li class = "active">
    <a data-toggle="tab" href="#all"> Toate </a>
  </li>
  <? php foreach ($ film_genres ca $ film_genre) {?>
    <li>
      <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> nume?> </a>
    </li>
  <? }?>
</ul>

Asigurați-vă că ați setat un „Toate” înainte de toate, deoarece vom dori ca prima filă să fie afișată implicit pentru a afișa toate filmele și apoi filtrăm după gen folosind celelalte file.

Fila Conținut

Apoi dorim să setăm conținutul filei pentru fila Toate filmele și facem acest lucru folosind o wp_query peste tipul de postare al filmelor astfel:

 <div class = "tab-pane active">
  <? php 	
  $ args = array (
    'post_type' => 'filme',
    'posts_per_page' -1,
    'orderby' => 'titlu',
    'order' => 'ASC'
  );
  $ all_films = new WP_Query ($ args);		
  ?>

  <? php if ($ all_films-> have_posts ()): // asigurați-vă că avem filme de prezentat înainte de a face ceva?>
  <div class = "table-responsive">
    <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 "> Citiți mai multe </a>
        </td>
      </tr>
      <? php în cele din urmă; ?>
      <? php wp_reset_query ()?>
    </table>
  </div>
  <? php endif; ?>

</div> <! - panoul de filă pentru toate filmele ->

Asigurați-vă că setați valoarea cheii tipului de postare la numele tipului de postare (dacă nu utilizați filme), adică 'post_type' => 'tipul dvs. de postare aici'. Revenim apoi toate postările din tipul postării filmelor și ordonăm în funcție de titlu, ascendent.

Apoi rulăm o buclă WordPress normală peste acest obiect wp_query și returnăm toate postările filmului.

Pentru acest exemplu, am ales să afișez un tabel bootstrap în cadrul fiecărui panou de file, dar vă puteți transmite datele ori de câte ori doriți. Lucrul de reținut este că, folosind o buclă wp_query, putem folosi toate funcțiile excelente WordPress, cum ar fi the_title, the_excerpt, the_post_thumbnail etc.

La sfârșitul acestei bucle, nu uitați să rulați wp_reset_query, deoarece aceasta va evita orice posibile probleme pe care le-am putea avea dacă vom rula alte bucle pe această pagină.

După ce am sortat conținutul filei care afișează toate filmele, vrem să putem afișa toate filmele care au fost grupate în genuri. Vrem ca aceasta să fie dinamică, astfel încât, dacă alegem să adăugăm mai multe genuri în viitor, nu trebuie să codificăm în alte wp_quires pentru fiecare dintre acestea. Pentru a realiza acest lucru, va trebui să rulăm o altă buclă foreach în următoarea tab-content div și, în cadrul acestuia, vom rula o wp_query cu câțiva parametri de taxonomie.

 <? php foreach ($ film_genres ca $ film_genre) {?>
  <div class = "tab-pane">
    <? php 	
    $ args = array (
      'post_type' => 'filme',
      'posts_per_page' -1,
      'orderby' => 'titlu',
      'order' => 'ASC',
      'tax_query' => matrice (
        matrice (
          'taxonomy' => 'genuri',
          'field' => 'slug',
          'terms' => $ film_genre-> slug
        )
      )
    );
    $ filme = WP_Query nou ($ args);		
    ?>

    <? php if ($ films-> have_posts ()): // asigurați-vă că avem filme de prezentat înainte de a face ceva?>
    <table class = "table">
      <? 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 "> Citiți mai multe </a>
        </td>
      </tr>
      <? php în cele din urmă; ?>
      <? php wp_reset_query ()?>
    </table>
    <? php endif; ?>

  </div>
<? }?>

Înfășurăm același foreach pe care l-am folosit înainte în jurul div-tab-panel. Trebuie să facem acest lucru, astfel încât să putem obține acces la valorile din obiectul $ film_genre pe care l-am setat, deoarece va trebui să folosim valoarea slug pentru a trece în wp_query și, de asemenea, pentru a seta ID-ul panoului de filă.

Odată ce am creat wp_query, folosim aceeași buclă WordPress ca în panoul de filă „toate” filmele, ne amintim să schimbăm variabila wp_query în ceva unic precum $ film_genres.

Și chiar asta este despre asta. Filele Bootstrap ar trebui să funcționeze perfect și, atunci când adăugați un nou gen cu filme atașate, acesta ar trebui să apară ca o filă nouă.

Iată codul complet:

 <section class = "films-tabs">

  <? php $ film_genres = get_terms ('genuri'); // obțineți toate genurile?>

  <! - Filele de navigare ->
  <ul class = "nav nav-tabs justificate pentru nav">
    <li class = "active">
      <a data-toggle="tab" href="#all"> Toate </a>
    </li>
    <? php foreach ($ film_genres ca $ film_genre) {?>
      <li>
        <a href="#<?php echo $film_genre-> slug?> "data-toggle =" tab "> <? php echo $ film_genre-> nume?> </a>
      </li>
    <? }?>
  </ul>

  <! - Panouri de filă ->
  <div class = "tab-content">

    <div class = "tab-pane active">
      <? php 	
      $ args = array (
        'post_type' => 'filme',
        'posts_per_page' -1,
        'orderby' => 'titlu',
        'order' => 'ASC'
      );
      $ all_films = new WP_Query ($ args);		
      ?>

      <? php if ($ all_films-> have_posts ()): // asigurați-vă că avem filme de prezentat înainte de a face ceva?>
      <div class = "table-responsive">
        <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 "> Citiți mai multe </a>
            </td>
          </tr>
          <? php în cele din urmă; ?>
          <? php wp_reset_query ()?>
        </table>
      </div>
      <? php endif; ?>

    </div> <! - panoul de filă pentru toate filmele ->

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

      <div class = "tab-pane">
        <? php 	
        $ args = array (
          'post_type' => 'filme',
          'posts_per_page' -1,
          'orderby' => 'titlu',
          'order' => 'ASC',
          'tax_query' => matrice (
            matrice (
              'taxonomy' => 'genuri',
              'field' => 'slug',
              'terms' => $ film_genre-> slug
            )
          )
        );
        $ filme = WP_Query nou ($ args);		
        ?>

        <? php if ($ films-> have_posts ()): // asigurați-vă că avem filme de prezentat înainte de a face ceva?>
        <table class = "table">
          <? 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 "> Citiți mai multe </a>
            </td>
          </tr>
          <? php în cele din urmă; ?>
          <? php wp_reset_query ()?>
        </table>
        <? php endif; ?>

      </div>
    <? }?>

  </div> <! - tab-content ->

</section> <! - filme-filme ->

Dacă aveți nevoie de ajutor, nu ezitați să ne contactați.