Maison > interface Web > tutoriel HTML > Afficher les derniers messages par catégorie

Afficher les derniers messages par catégorie

WBOY
Libérer: 2023-08-31 11:29:05
original
807 Les gens l'ont consulté

Par défaut, la page principale de votre blog WordPress affiche vos articles les plus récents par ordre décroissant de date. Cependant, si vous utilisez des catégories sur votre site et que vos lecteurs souhaitent voir du nouveau contenu dans chaque catégorie, vous souhaiterez peut-être que les pages de votre blog soient différentes.

Dans ce tutoriel, je vais vous montrer comment procéder. Je vais vous montrer comment :

  • Identifiez toutes les catégories sur votre blog
  • Affiche le dernier message pour chaque message, ou l'image sélectionnée si le message en a une
  • Assurez-vous que les publications dans plusieurs catégories ne sont pas dupliquées
  • Ajoutez un peu de style pour lui donner une belle apparence

De quoi as-tu besoin

Pour suivre ce tutoriel il vous faut :

  • Développement installation de WordPress.
  • Quelques posts et catégories déjà mis en place. J'ai utilisé l'exemple de données des données de test unitaire du thème WordPress.
  • Un thème. Je vais créer un sous-thème du sujet "Vingt-Quatre".
  • Éditeur de code.

Définissez le thème

La première étape consiste à configurer le thème. Je vais créer un sous-thème du thème Twenty-Four avec seulement deux fichiers : style.cssindex.php.

Voici ma feuille de style :

/*
Theme Name: Display the Most Recent Post in Each Category
Theme URI: http://code.tutsplus.com/tutorials/display-the-most-recent-post-in-each-category--cms-22677
Version: 1.0.0
Description: Theme to accompany tutorial on displaying the most recent post fort each term in a taxonomy for Tutsplus, at http://bitly.com/14cm0yb
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk
License: GPL-3.0+
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Domain Path: /lang
Text Domain: tutsplus
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');
Copier après la connexion

Je reviendrai sur ce fichier plus tard pour ajouter des styles, mais pour l'instant WordPress a juste besoin de reconnaître le thème enfant.

Créer un fichier d'index

Puisque je souhaite que ma page principale de blog affiche les derniers articles de chaque catégorie, je vais créer un nouveau fichier index.php dans mon thème enfant.

Créez un fichier index.php vide

Je vais d'abord copier le fichier index.php de 24 et éditer les boucles et autres éléments pour qu'il ressemble à ceci :

<?php
/**
 * The main template file.
 * 
 * Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme included here.
 */
?>

<?php get_header(); ?>

<div id="main-content" class="main-content">

    <?php
        if ( is_front_page() && twentyfourteen_has_featured_posts() ) {

            // Include the featured content template.
            get_template_part( 'featured-content' );

        }
    ?>

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

        </div>
    </div>
    <?php get_sidebar( 'content' ); ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
Copier après la connexion

Identifier les catégories

La première étape consiste à identifier les catégories de votre blog. Ouvrez ensuite la balise <div id="content"> et ajoutez le contenu suivant :

<?php
    $categories = get_categories(); 

    foreach ( $categories as $category ) {

    }
?>
Copier après la connexion

Cela utilise la fonction get_categories() pour obtenir la liste des catégories du blog. Par défaut, cela sera récupéré par ordre alphabétique et ne contiendra aucune catégorie vide. Cela fonctionne pour moi donc je n'ajouterai aucun paramètre supplémentaire.

J'utilise ensuite foreach ( $categories as $category ) {} pour dire à WordPress d'exécuter chaque catégorie à tour de rôle et d'exécuter le code entre les accolades. L'étape suivante consiste à créer une requête qui sera exécutée sur chaque catégorie.

Définir les paramètres de requête

Vous devez maintenant définir les paramètres de votre requête. Ajoutez ce qui suit entre accolades :

$args = array(
    'cat' => $category->term_id,
    'post_type' => 'post',
    'posts_per_page' => '1',
);
Copier après la connexion

Cela ne récupérera qu'un seul message dans la catégorie actuelle.

Exécutez la requête

Ensuite, utilisez la classe WP_Query pour insérer la requête :

$query = new WP_Query( $args );

if ( $query->have_posts() ) { ?>

    <section class="<?php echo $category->name; ?> listing">
        <h2>Latest in <?php echo $category->name; ?>:</h2>

        <?php while ( $query->have_posts() ) {

            $query->the_post();
            ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class( 'category-listing' ); ?>>
                <?php if ( has_post_thumbnail() ) { ?>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail( 'thumbnail' ); ?>
                    </a>
                <?php } ?>

                <h3 class="entry-title">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h3>

                <?php the_excerpt( __( 'Continue Reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) ); ?>

            </article>

        <?php } // end while ?>

    </section>

<?php } // end if

// Use reset to restore original query.
wp_reset_postdata();
Copier après la connexion

Cela affichera l'image sélectionnée, le titre et l'extrait de chaque article, chacun inclus dans un lien.

Voyons à quoi ça ressemble maintenant :

Afficher les derniers messages par catégorie

Comme vous pouvez le constater, il y a un problème. Ma page affiche les dernières publications dans chaque catégorie, mais il s'agit d'une publication en double car parfois une publication sera la dernière publication dans plusieurs catégories. Résolvons ce problème.

Évitez les publications en double

Au dessus de la ligne où vous avez ajouté la fonction get_categories(), ajoutez la ligne suivante :

$do_not_duplicate = array();
Copier après la connexion

Cela créera un tableau vide appelé $do_not_duplicate que nous utiliserons pour stocker l'ID de chaque sortie de publication, puis vérifierons si l'ID d'une publication que nous interrogerons plus tard se trouve dans ce tableau.

Ensuite, ajoutez une nouvelle ligne sous les options de requête, pour que les deux premières lignes ressemblent à ceci :

<?php while ( $query->have_posts() ) {

    $query->the_post();

    $do_not_duplicate[] = $post->ID;
    ?>
Copier après la connexion

Cela ajoutera l’ID de la publication actuelle au tableau $do_not_duplicate.

Enfin, ajoutez un nouveau paramètre aux paramètres de requête pour éviter de générer des publications dans ce tableau. Votre argument ressemble maintenant à ceci :

$args = array(
    'cat' => $category->term_id,
	'post_type' => 'post',
	'posts_per_page' => '1',
	'post__not_in' => $do_not_duplicate
);
Copier après la connexion

Ceci utilise le paramètre 'post__not_in' pour trouver un tableau d'identifiants de publication.

Enregistrez votre fichier index.php et consultez à nouveau votre page de blog :

Afficher les derniers messages par catégorie

C'est mieux ! Votre message n'est désormais plus un doublon.

Ajouter du style

Actuellement, le contenu est un peu dispersé, avec l'image présentée au-dessus du titre et de l'extrait du message. Ajoutons un peu de style pour faire flotter l'image vers la gauche.

Dans le fichier style.css de votre thème, ajoutez ce qui suit :

.listing h2 {
    margin-left: 10px;
}

.category-listing img {
    float: left;
    margin: 10px 2%;
}

.category-listing .entry-title {
    clear: none;
}
Copier après la connexion

Maintenant, le contenu s'adapte mieux à la page et la mise en page est meilleure :

Afficher les derniers messages par catégorie

Adapter cette technologie à différents types de contenus

Vous pouvez adapter cette technique pour gérer différents types de contenu ou taxonomies. Par exemple :

  • Si vous souhaitez utiliser des termes de taxonomie personnalisés au lieu de catégories, vous pouvez transmettre le paramètre de requête get_categories() 替换为 get_terms() 并更改 'cat' pour trouver les termes de taxonomie.
  • Si vous utilisez un type de publication différent, vous pouvez ajouter un code similaire à votre fichier modèle pour afficher ce type de publication, en remplaçant le paramètre 'post_type' => 'post' dans votre paramètre de requête par votre type de publication.
  • Si vous souhaitez créer une page distincte au sein de votre page de blog principale pour afficher les derniers articles de n'importe quel type d'article pour une catégorie donnée, vous pouvez créer un modèle d'archive de catégorie et y ajouter une version adaptée de ce code. 李>
  • Vous pouvez aller plus loin et utiliser cette technique avec plusieurs taxonomies ou plusieurs types de publications, en utilisant des instructions foreach imbriquées pour exécuter plusieurs boucles.
  • Vous pouvez ajouter le code ci-dessus à votre tableau single.php 页面,以便在帖子内容之后显示每个类别中最新帖子的链接。如果执行此操作,您需要将当前显示页面的 ID 添加到 $do_not_duplicate.

Résumé

Parfois, il peut être utile d'afficher les derniers articles de votre blog d'une autre manière (plutôt que simplement par ordre chronologique). Ici, je démontre une technique pour afficher les derniers articles de chaque catégorie sur votre blog, en garantissant que les articles ne sont pas dupliqués dans plusieurs catégories.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal