Retour à l’assistance Contenu et médias Pages et articles Code court d’affichage des articles

Code court d’affichage des articles

Le code court d’affichage des articles vous permet d’ajouter une liste de vos articles de blog à différentes pages. L’utilisation d’arguments vous permet d’afficher des articles spécifiques en fonction de leurs catégories et étiquettes.

Les codes courts sont de petits snippets de code conçus pour WordPress. Ils permettent d’ajouter différentes fonctionnalités à votre site ou blog. Vous trouvez plus d’informations sur les codes courts ici.

📌

Si vous avez ajouté le code court avant la mise à niveau vers un plan payant compatible avec les extensions, votre code restituera le contenu après l’installation de l’extension Code court d’affichage des articles. Plusieurs extensions offrent des fonctionnalités similaires.

Vous pouvez également envisager les blocs Articles de blog ou Derniers articles.


Présentation du code court d’affichage des articles

Vous pouvez souhaiter utiliser le code court d’affichage des articles pour de nombreuses raisons.


Ajouter le code court

Les instructions suivantes permettent de modifier une page, un article ou un widget de texte. En ajoutant le code suivant, vous ne voyez que le texte indicatif du code dans l’éditeur. Par contre, lors de la publication de votre page, le résultat du code court apparaît.

  1. Modifiez une page, un article ou un widget de texte.
  2. Ajoutez le code court [display-posts] à l’article ou à la page.
  3. Publiez ou mettez à jour votre page/article.

Si vous utilisez l’éditeur de blocs de WordPress, vous pouvez également ajouter un bloc de code court pour insérer le code court d’affichage des articles.

L’affichage des nouveaux articles et la mise à jour des articles existants peuvent prendre jusqu’à une heure avec ce code court.

Code court d’affichage des articles en direct
Voilà à quoi ressemble le code court d’affichage des articles sur une page en direct avec le thème Twenty Seventeen.

Le code court d’affichage des articles présente les 10 articles les plus récents par défaut dans une liste à puce. Il est possible de personnaliser le nombre d’articles, de même que le style et les éléments présentés dans la liste (titre, images à la une, extraits, etc.).


Arguments d’affichage

Les arguments sont utilisés pour personnaliser l’affichage des articles. Voici une liste des arguments usuels que vous pouvez ajouter à votre code court d’affichage des articles, ainsi que des exemples de l’apparence du code court lorsque l’argument est appliqué.

author
Spécifiez l’auteur de l’article.
Par défaut : vide
Exemple : [display-posts author="bill"]

category
Spécifiez l’identifiant de la catégorie (utilisez la virgule comme séparateur si vous en indiquez plusieurs). Découvrez le fonctionnement de ce code court sur ce site de démonstration.
Par défaut : vide
Exemple : [display-posts category="fishing,hiking"]

date_format
Spécifiez le format de date utilisé lorsque include_date est vrai. Consultez Formatage de la date et de l’heure dans le Codex pour en savoir plus.
Par défaut : ‘(n/j/Y)’
Exemple : [display-posts include_date="true" date_format="F j, Y"]

id
Spécifiez un (ou plusieurs) ID d’article spécifique à afficher.
Par défaut : vide
Exemple : [display-posts id="9, 10"]

image_size
Spécifiez un format d’image pour l’affichage d’une image mise en avant si l’article en comprend une. Vous pouvez configurer image_size sur miniature, moyenne ou grande (sous Réglages > Média).
Par défaut : vide
Exemple : [display-posts image_size="thumbnail"]

Si le thème que vous utilisez prend en charge les Options de contenu et est configuré pour ne pas afficher les images mises en avant sur les pages, l’argument image_size n’aura aucune incidence sur les codes courts utilisés par les pages du site. Les images mises en avant ne s’afficheront pas sur les articles ajoutés via le code court même si ce dernier est configuré pour les afficher.

include_content
Permet d’ajouter le contenu complet de l’article après le titre.
Par défaut : vide
Exemple : [display-posts include_content="true"]

include_date
Permet d’ajouter la date de l’article après le titre de ce dernier. Le format par défaut est (7/30/12) mais il est personnalisable à l’aide du paramètre ’date_format’.
Par défaut : vide
Exemple : [display-posts include_date="true"]

include_excerpt
Permet d’ajouter un extrait de l’article après le titre (ainsi que la date, le cas échéant).
Par défaut : vide
Exemple : [display-posts include_excerpt="true"]

offset
Nombre d’articles à ignorer.
Par défaut : 0
Exemple : [display-posts offset="3"]

order
Spécifiez si les articles sont triés dans l’ordre décroissant (DESC) ou croissant (ASC).
Par défaut : DESC
Exemple : [display-posts order="ASC"]

orderby
Spécifiez le paramètre de tri des articles. Découvrez les paramètres disponibles ici.
Par défaut : date
Exemple : [display-posts orderby="title"]

portfolio_type
Si vous utilisez le type d’article Portfolio, utilisez cet argument pour obtenir les éléments appartenant à un type de portfolio spécifique.

post_parent
Affichez les pages enfant d’une page donnée. Vous pouvez indiquer un ID ou la valeur ’current’ pour afficher les enfants de la page actuelle.
Par défaut : vide
Exemple : [display-posts post_type="page" post_parent="8"]

post_status
Affichez les articles associés à un certain état d’article.
Par défaut : publish
Exemple : [display-posts post_status="publish, future"]

post_type
Indiquez le type d’article à utiliser. Vous pouvez utiliser une valeur par défaut (article ou page). Pour les Portfolios, utilisez « jetpack-portfolio ». De même, pour les Témoignages, utilisez « jetpack-testimonial ».
Par défaut : post
Exemple : [display-posts post_type="page"]

posts_per_page
Nombre d’articles à afficher.
Par défaut : 10
Exemple : [display-posts posts_per_page="5"]

tag
Spécifiez l’identifiant de l’étiquette (utilisez la virgule comme séparateur si vous en indiquez plusieurs).
Par défaut : vide
Exemple : [display-posts tag="tag1, tag2"]

taxonomy, tax_term et tax_operator
Utilisez ces paramètres dans les requêtes avancées sur la taxonomie. Utilisez ’taxonomy’ pour la taxonomie à interroger, ’tax_term’ pour l’identifiant du ou des termes à inclure et ’operator’ pour modifier la façon dont la requête utilise ces termes (dans la plupart des cas, ce champ n’est pas obligatoire).
Par défaut : ‘taxonomy’ = empty , ‘tax_term’ = empty , ‘tax_operator’ = ‘IN’
Exemple : [display-posts taxonomy="color" tax_term="blue, green"]

wrapper
Type d’HTML à utiliser pour afficher les listes. Il peut s’agir d’une liste non ordonnée (ul), d’une liste ordonnée (ol) ou d’une liste diverse (div) que vous personnaliserez ensuite.
Par défaut : ul
Exemple : [display-posts wrapper="ol"]


Exemples de personnalisation

Voici quelques exemples de codes courts combinant plusieurs arguments afin d’afficher une liste spécifique d’articles.

[display-posts tag="Avancé" posts_per_page="20"]

Permet de lister les 20 derniers articles avec l’étiquette « Avancé ».

[display-posts tag="Avancé" image_size="thumbnail"]

Permet de lister les 10 derniers articles avec l’étiquette « Avancé » et d’afficher une image des articles au format « thumbnail » (Miniature).

[display-posts category="must-read" posts_per_page="-1" include_date="true" order="ASC" orderby="title"]

Permet de lister chaque article dans la catégorie À lire, par ordre alphabétique, en ajoutant la date à la fin.

[display-posts wrapper="ol"]

Permet d’afficher les articles sous la forme d’une liste ordonnée. Les options sont « ul » pour listes non ordonnées (par défaut), « ol » pour listes ordonnées ou « div » pour divers.

[display-posts id="14,3"]

Permet de n’afficher que les articles dont l’ID est 14 et 3.


Alignement de l’image

Une requête standard consiste à afficher une liste d’articles en alignant à droite le titre, un extrait et la miniature. Voici le code court que vous pourriez utiliser :

[display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"]

Il comprend l’extrait, ajoute une image au format miniature (que vous pouvez personnaliser dans Réglages → Médias) et précise d’afficher la liste sans puces.

Afin d’obtenir une image flottante à droite, ajoutez-la à votre fichier CSS personnalisé (nécessite la mise à niveau WordPress.com Premium ou WordPress.com Business) :

.display-posts-listing .alignleft {
    float: right;
    margin: 0 0 5px 5px;
}


Plusieurs requêtes de taxonomie (avancé)

Bien que la plupart des gens n’auront besoin que d’une seule requête de taxonomie, ce code court prend en charge un nombre infini de requêtes de taxonomie. Imaginons que vous voulez ajouter tous les articles dans la catégorie « featured » avec l’étiquette « homepage ». Nous utiliserons un code court de ce type :

[display-posts taxonomy="category" tax_term="featured" taxonomy_2="post_tag" tax_2_term="homepage"]

Si vous souhaitez obtenir tous les articles dans la catégorie « featured » avec l’étiquette « blue » ou « green », vous pouvez utiliser un code court de ce type :

[display-posts taxonomy="category" tax_term="featured" taxonomy_2="post_tag" tax_2_term="blue, green" tax_2_operator="OR" tax_relation="AND"]

Vous pouvez créer une chaîne aussi longue que vous le voulez. Vous devez seulement commencer le compte à 2. Dans la liste de champs ci-après, remplacez (count) par un nombre réel.

Voici les champs disponibles :

taxonomy_(count)
Taxonomie à interroger
Par défaut : vide

tax_(count)_term
Termes à inclure (pour en inclure plusieurs, utilisez la virgule comme séparateur)
Par défaut : vide

tax_(count)_operator
Mode d’interrogation des termes (IN, NOT IN ou AND)
Par défaut : IN

tax_relation
Décrivez la relation entre les diverses requêtes de taxonomie (le résultat doit-il correspondre à toutes les requêtes ou seulement à l’une d’entre elles). Options disponibles : AND et OR
Par défaut : AND


Limites

Le code court d’affichage des articles ne peut pas afficher plus de 100 articles.


Comment trouver l’ID de l’article

Vous pouvez trouver l’ID de l’article dans l’URL de modification de l’article de votre éditeur d’article. Par exemple, l’ID de l’article pour l’exemple suivant est 125.

post_id
Copied to clipboard!