Entrées de votre propre type – création d’une liste avec custom post
Dans cet article, vous apprendrez comment créer une vue de liste pour les entrées de custom post dans WordPress. Si nous disposons d’un ensemble d’entrées d’un type donné et que nous souhaitons créer une vue de liste qui affiche tous les postes, nous devons créer un fichier qui s’en chargera. Dans notre cas, nous nous baserons sur un article créé précédemment Advanced Custom Fields – types de champs WordPress personnalisés, où nous avons ajouté notre propre type d’entrées : Projet. Sur la base de ces projets, nous aimerions créer une liste de projets qui s’afficherait correctement : Le titre du projet, une brève description du projet, une image distinctive.
Comment créer une liste avec votre propre type d’entrées ?
Allons-y
La première étape consiste à modifier notre Custom Post Type Project. Allons dans l’onglet CPT UI du panneau WordPress. Choisissons notre Post Type Design et cherchons la section Has Archive. Changeons la valeur à true et définissons l’url – »projekty ».
.
Après avoir approuvé le changement de notre type de message Projet, allons dans le dossier de notre thème – dans notre cas wp_tutorial et trouvons le fichier archive.php. Ce fichier est responsable de l’affichage d’un ensemble d’entrées de base de WordPress. Pour créer une vue en liste de votre propre type d’entrées, suivez la même procédure que dans Créer une vue (template) pour un article personnalisé dans WordPress. Copiez le fichier archive.php et ajoutez Custom Post Type Slug : archive-projekt.php.
.
Nous allons éditer le fichier archive-projekt.php. Par défaut, le code et la vue sont les suivants :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?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(); |
Nous aimerions qu’ils apparaissent à nos yeux :
- une signature qui indique qu’il s’agit d’un ensemble de projets,
- le titre du projet,
- brève description,
- l’image distinctive.
Les autres éléments sont affichés inutilement, il convient donc de les supprimer. Nous passons maintenant à l’édition de code. Supprimez le titre de l’archive et sa description et remplacez-le par votre propre titre : Transite des projets. Nous devons également le modifier pour qu’il soit visible depuis le fichier content-projects.php , en changeant le chemin ‘template-part/content’ en ‘template-part/content-projects’..
1 2 3 4 | <?php <!--?php get_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 --> |
Go to the folder /template-parts select the file content.php copy and rename the copy to content-projekty.php. Go on to edit the file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <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(); ?> --> |
Nous supprimons les sections inutiles :
- entry-meta– supprimer toute la section si une section est affichée
- the_content– supprimer tout le bloc d’affichage du contenu
- wp_link_pages– delete display function
- entry-footer– delete article footer
Notre code après réduction :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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(); ?> --> |
Nous procédons à l’affichage correct de la liste. Nous voulons que l’image soit affichée à la fin d’un seul article, pour cela nous déplaçons wp_tutorial_post_thumbnail() avant la fin de tag ‘< ; /article>« . In the contenu d’entrée nous ajoutons une courte description du projet en utilisant the_excerpt().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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(); ?> --> |
Nous avons reçu la liste de projets suivante.
Résumé
La création d’une vue pour une liste de postes personnalisés est similaire à la création d’un modèle pour un seul poste personnalisé. De même, nous créons un fichier archive.php, et l’affichage est légèrement différent. Attribuez la partie du modèle appropriée pour l’affichage d’un seul message dans la liste. Nous pouvons utiliser différentes variations pour afficher le jeu Custom Post, il peut s’agir, comme dans le cas de la liste, d’une vue plus complexe et compliquée.