Wpisy własnego typu – tworzenie listy z custom post type

W tym artykule dowiesz się jak stworzyć listę zawierającego wpisy typu custom post. W przypadku, gdy mamy zbiór wpisów danego typu i chcielibyśmy stworzyć widok listy wyświetlającej wszystkie post’y potrzebne jest stworzenie pliku, który by to obsłużył. Będziemy bazować na stworzonym wcześniej artykule Advanced Custom Fields – własne typy pól WordPress, w którym dodaliśmy wpisy własnego typu: Projekt. Na bazie tych projektów chcielibyśmy utworzyć listę projektów, która odpowiednio wyświetlałaby: Tytuł projektu, krótki opis projektu, obraz wyróżniający.

Wpisy typu custom post – jak stworzyć listę z wpisami własnego typu ?

Zaczynamy tworzenie listy wpisów custom post

Pierwszym krokiem jest edycja naszego Custom Post Type Projekt. Przejdźmy do zakładki CPT UI w panelu WordPress. Wybierzmy nasz typ posta Projekt i szukajmy rubryki: Has Archive. Zmieńmy wartość na true oraz ustawmy url – ”projekty”.

Po zatwierdzeniu zmiany w naszym typie post’a Projekt, wejdźmy do folderu naszego motywu – w naszym przypadku wp_tutorial i znajdźmy plik archive.php. Plik ten odpowiada, za wyświetlanie zbioru podstawowych wpisów WordPress. Aby stworzyć widok listy wpisów własnego typu postępujemy analogicznie jak w artykule Tworzymy widok (template) dla custom post w WordPress. Kopiujemy plik archive.php i dopisujemy Custom Post Type Slug: archive-projekt.php.

Przechodzimy do edycji pliku archive-projekt.php. Domyślnie kod oraz widok prezentują się w następujący sposób:

<?php
get_header();
?>
  <div id="primary" class="content-area"></div>
    <main id="main" class="site-main"></main>
    <?php if ( have_posts() ) : ?>
      <header class="page-header"></header>
        <?php
        the_archive_title( '<h1 class="page-title"></h1>', '</h1>' );
        the_archive_description( '<div class="archive-description"></div>', '</div>' );
        ?>
      </header><!-- .page-header -->
      <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', get_post_type() );
      endwhile;
      the_posts_navigation();
    else :
      get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php
get_sidebar();
get_footer();

<?php

get_header();

<?php if ( have_posts() ) : ?>

<?php

the_archive_title( '<h1 class="page-title"></h1>', '</h1>' );

the_archive_description( '<div class="archive-description"></div>', '</div>' );

</header>

<?php

while ( have_posts() ) :

the_post();

get_template_part( 'template-parts/content', get_post_type() );

endwhile;

the_posts_navigation();

else :

get_template_part( 'template-parts/content', 'none' );

endif;

</main>

</div>

<?php

get_sidebar();

get_footer();

Chcielibyśmy aby w naszym widoku pojawiły się:

napis, który informuje o tym, że jest to zbiór projektów,
tytuł projektu,
krótki opis,
obraz wyróżniający.

Reszta elementów jest zbędnie wyświetlana więc należy je usunąć. Przechodzimy do edycji kodu. Usuwamy tytuł archiwum oraz jego opis i zastępujemy go własnym tytułem: Zbiór Projektów. Musimy też zmienić, aby pobierało widok z pliku content-projekty.php zmieniając ścieżkę ’template-part/content’ na ’template-part/content-projekty’.

<?php
get_header();
?>
  <div id="primary" class="content-area">
    <main id="main" class="site-main">
    <?php if ( have_posts() ) : ?>
      <header class="page-header">
        <h2 class="tytul-zbioru">Zbiór Projektów</h2>
      </header><!-- .page-header -->
      <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content-projekty', get_post_type() );
      endwhile;
      the_posts_navigation();
    else :
      get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php
get_footer();

<?php

get_header();

<?php if ( have_posts() ) : ?>

<h2 class="tytul-zbioru">Zbiór Projektów</h2>

</header>

<?php

while ( have_posts() ) :

the_post();

get_template_part( 'template-parts/content-projekty', get_post_type() );

endwhile;

the_posts_navigation();

else :

get_template_part( 'template-parts/content', 'none' );

endif;

</main>

</div>

<?php

get_footer();

Przechodzimy do folderu /template-parts wybieramy plik content.php kopiujemy i zmieniamy nazwę kopii na content-projekty.php. Przechodzimy do edycji pliku.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header"></header>
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
    endif;
    if ( 'post' === get_post_type() ) :
      ?>
      <div class="entry-meta"></div>
        <?php
        wp_tutorial_posted_on();
        wp_tutorial_posted_by();
        ?>
      </div><!-- .entry-meta -->
    <?php endif; ?>
  </header><!-- .entry-header -->
  <?php wp_tutorial_post_thumbnail(); ?>
  <div class="entry-content"></div>
    <?php
    the_content( sprintf(
      wp_kses(
        /* translators: %s: Name of current post. Only visible to screen readers */
        __( 'Continue reading<span class="screen-reader-text"></span> "%s"</span>', 'wp_tutorial' ),
        array(
          'span' => array(
            'class' => array(),
          ),
        )
      ),
      get_the_title()
    ) );
    wp_link_pages( array(
      'before' => '<div class="page-links"></div>' . esc_html__( 'Pages:', 'wp_tutorial' ),
      'after'  => '</div>',
    ) );
    ?>
  </div><!-- .entry-content -->
  <footer class="entry-footer"></footer>
    <?php wp_tutorial_entry_footer(); ?>
  </footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title">', '</h1>' );

else :

the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

endif;

if ( 'post' === get_post_type() ) :

<?php

wp_tutorial_posted_on();

wp_tutorial_posted_by();

</div>

<?php endif; ?>

</header>

<?php wp_tutorial_post_thumbnail(); ?>

<?php

the_content( sprintf(

wp_kses(

/* translators: %s: Name of current post. Only visible to screen readers */

__( 'Continue reading<span class="screen-reader-text"></span> "%s"</span>', 'wp_tutorial' ),

array(

'span' => array(

'class' => array(),

)

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links"></div>' . esc_html__( 'Pages:', 'wp_tutorial' ),

'after' => '</div>',

) );

</div>

<?php wp_tutorial_entry_footer(); ?>

</footer>

</article>

Usuwamy niepotrzebne sekcje:

entry-meta– należy usunąć całą sekcję if wyświetlającą sekcję
the_content– usuwamy cały blok wyświetlający content
wp_link_pages– usuwamy funkcję wyświetlającą
entry-footer– usuwamy stopkę artykułu

Nasz kod po redukcji:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
    endif;
    ?>
  </header><!-- .entry-header -->
  <?php wp_tutorial_post_thumbnail(); ?>
  <div class="entry-content">
  </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title">', '</h1>' );

else :

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

endif;

</header>

<?php wp_tutorial_post_thumbnail(); ?>

</div>

</article>

Przechodzimy do poprawnego wyświetlenia listy. Chcemy aby obraz wyświetlał się na końcu pojedynczego artykułu, w tym celu przesuwamy wp_tutorial_post_thumbnail() przed końcem tag’u ’< /article>’. W sekcji entry-content dodajemy wyświetlanie krótkiego opisu projektu za pomocą funkcji the_excerpt().

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php
    if ( is_singular() ) :
      the_title( '<h1 class="entry-title"></h1>', '</h1>' );
    else :
      the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark"></a>', '</a></h2>' );
    endif;
    ?>
  </header><!-- .entry-header -->
  <div class="entry-content"></div>
  <?php the_excerpt(); ?>
  </div><!-- .entry-content -->
  <?php wp_tutorial_post_thumbnail(); ?>
</article><!-- #post-<?php the_ID(); ?> -->

<?php

if ( is_singular() ) :

the_title( '<h1 class="entry-title"></h1>', '</h1>' );

else :

the_title( '<h2 class="entry-title"></h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark"></a>', '</a></h2>' );

endif;

</header>

<?php the_excerpt(); ?>

</div>

<?php wp_tutorial_post_thumbnail(); ?>

</article>

Otrzymaliśmy następujący widok listy projektów.

Podsumowanie

Stworzenie widoku dla listy postów własnego typu jest podobne do tworzenia template dla pojedynczego custom post’a. Analogicznie tworzymy plik archive.php, natomiast samo wyświetlanie odbywa się nieco inaczej. Przypisujemy odpowiedni template-part dla wyświetlania pojedynczego post’a w liście. Możemy stosować różne wariacje wyświetlania zbioru Custom Post’ów, może być to tak jak w tym przypadku listy, może być to bardziej złożony i skomplikowany widok.