Types de publication personnalisés WordPress – Aller plus loin

Dans notre série sur les types de publication personnalisée WordPress, nous avons jusqu'à présent examiné la création d'un type de publication personnalisé à l'aide d'un plugin et comment créer manuellement un type de publication personnalisé en écrivant vos propres extraits de code personnalisés. Nous avons également examiné comment vous pouvez appliquer une configuration de base à vos types de publication afin de pouvoir les gérer plus facilement depuis votre administrateur WordPress. Si vous n'avez pas consulté ces articles, assurez-vous d'y jeter un œil !

Dans cet article, nous allons faire avancer les choses en nous appuyant sur nos types de publication personnalisés créés précédemment pour étendre leurs fonctionnalités et leur convivialité sur notre site Web. Si vous souhaitez suivre, vous devrez créer les types de publication personnalisés que nous avons construits dans notre article "Créer des types de publication personnalisés WordPress manuellement", alors assurez-vous de l'avoir fait en premier afin que les informations suivantes aient un sens.

Commençons!

Afficher les types de publication personnalisés n'importe où

Comme vous l'aurez vu, nous avons précédemment créé un type de publication personnalisé pour afficher les recettes sur notre site Web. Ceci est un exemple parfait d'une situation où les types de publication personnalisés sont un moyen incroyablement utile d'étendre les fonctionnalités de notre site Web.

Dans notre exemple, nous avons pu afficher nos publications Recettes en les ajoutant au menu principal de notre site Web. Nous avons également configuré une vue d'archive qui répertorie tous nos messages liés à la recette. Ce sont d'excellentes options pour afficher nos nouveaux types de publication personnalisés, mais que se passe-t-il lorsque nous voulons afficher ce contenu ailleurs sur notre site ?

Utilisation de la fonction WP_Query pour afficher les types de publication personnalisés

Afin d'afficher nos nouvelles publications de recettes aux emplacements de notre choix sur notre site Web, nous utiliserons la fonction WP_Query . Dans ses arguments, nous pouvons trouver post_types qui sera utilisé dans cette instance car il définit les types de messages que nous voulons interroger. Parallèlement, nous utiliserons les paramètres de publish et orderby car nous voulons afficher les publications de recettes qui ont un statut publié et les trier par date décroissante pour afficher la plus récente en premier.

Imaginons que nous voulions afficher une liste de nos messages de recettes dans le pied de page de notre site Web au-dessus des informations de copyright. Pour ce faire, nous allons utiliser un extrait de code qui, dans notre cas, doit être inséré dans le fichier singular.php sous le début de l'élément <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

Nous utilisons le thème WordPress Twenty Twenty actuel par défaut dans cet exemple. Si vous utilisez un thème autre que Twenty Twenty, vous devez modifier le fichier contenant le contenu du pied de page de votre thème.

Avec le code ajouté, nous pouvons ouvrir notre site Web et nous devrions voir nos publications de recettes répertoriées dans notre pied de page.

La mise en page et l'apparence de ces messages dans votre pied de page peuvent être stylisées pour ressembler à ce que vous souhaitez en utilisant CSS. Le meilleur endroit pour ajouter du CSS est dans le fichier style.css qui se trouve sous le dossier principal de votre thème. Nous avons quelques CSS possibles que vous voudrez peut-être utiliser ci-dessous.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Une fois ce CSS enregistré et la page actualisée, vous devriez voir la disposition de vos messages de recette dans le pied de page changer pour ressembler à ceci :

L'importance de réinitialiser la boucle

Vous avez peut-être remarqué qu'après avoir défini les arguments nécessaires dans le code, une boucle de publication démarre et se termine avec la fonction wp_reset_postdata() . L'utilisation de cette fonction est très importante et voici pourquoi.

Lorsque WordPress crée une mise en page, il utilise une variable globale $post qui fonctionne bien s'il n'y a qu'une seule boucle dans la page. Maintenant que nous avons ajouté notre boucle personnalisée, nous remplaçons essentiellement la variable globale $post et, à moins que nous ne disions à WordPress que la boucle se réinitialise, elle reprendra à partir de là en utilisant le type de publication personnalisé que nous avons défini dans notre boucle.

Voyons comment cela fonctionne en pratique en faisant écho au titre du message sous le code ci-dessus comme ceci :

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Maintenant, si nous actualisons notre page sur le frontend de notre site Web, nous voyons le titre "Post 1" sous nos recettes récentes.

Cela a du sens car nous réinitialisons la boucle d'origine avec le wp_reset_postdata(); fonction.

Maintenant, commentez le wp_reset_postdata(); à partir de votre code. Vous remarquerez que the_title(); code fera écho au titre 'Recipe 1' au lieu de 'Post 1'.

Types de publication personnalisés - Gestion supplémentaire

Afin de personnaliser davantage le comportement et l'apparence de nos publications personnalisées, nous examinerons certaines options qui peuvent être ajoutées en tant qu'extension au code que nous avons utilisé dans notre article précédent pour enregistrer notre type de publication "recettes".

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Nous allons ajouter quelques arguments supplémentaires afin de :

1. Modifier le slug d'URL des recettes Custom Post Type
2. Modifier la position du menu d'administration du type de message personnalisé
3. Changer l'icône du menu

Modification du slug d'URL de type de publication personnalisé

Si nous créons une publication de recette et la nommons 'Recette 1', l'URL par défaut de la publication 'Recette 1' serait quelque chose comme https://mycompanyname.com/recipes/recipe-1/ à condition que les permaliens soient définis sur ' Publier le nom' dans nos paramètres de permalien.

Si vous souhaitez modifier la façon dont le type de publication personnalisé de recettes apparaît dans l'URL, vous pouvez utiliser l'argument de rewrite avec sa clé slug .

Comme nous l'avons remarqué à partir de l'URL, si cet argument est ignoré, la valeur par défaut serait l'étiquette Custom Post Type 'recipes'. Si nous voulons changer cela en my-home-recipes par exemple, nous devons l'écraser en modifiant notre extrait de code pour qu'il ressemble à ceci :

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Maintenant, si vous enregistrez les permaliens (videz le cache des permaliens) et visualisez à nouveau votre recette, votre URL devrait être https://mycompanyname.com/my-home-recipes/recipe-1/

Notez que si vous modifiez le slug, vous devrez également modifier l'URL de l'archive de /recipes/ à /my-home-recipes/ dans la page du menu principal.

Modification du positionnement du menu Type de message personnalisé

Si vous souhaitez déplacer le menu Recettes vers une position différente, vous pouvez utiliser l'argument menu_position comme ceci :

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Les valeurs que vous pouvez utiliser pour cet argument sont :

0 : tout en haut
5 : ci-dessous Messages
10 : ci-dessous Média
15 : ci-dessous Liens
20 : ci-dessous Pages
25 : sous les commentaires
60 : en dessous du premier espace dans le menu
65 : ci-dessous Plugins
70 : ci-dessous Utilisateurs
75 : ci-dessous Outils
80 : ci-dessous Paramètres
100 : en dessous du deuxième espace dans le menu

La capture d'écran ci-dessous montre la position du menu lorsque la valeur 5 a été ajoutée à l'argument menu_position .

Modification de l'icône du menu Type de message personnalisé

Actuellement, le menu Recettes utilise l'icône des publications par défaut. Ce serait une bonne idée d'avoir sa propre icône unique. Pour ce faire, nous pouvons utiliser l'argument menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Pour afficher votre propre icône, vous pouvez insérer l'URL complète de l'emplacement de votre icône de menu (comme indiqué dans le code ci-dessus) ou utiliser la bibliothèque WordPress Dashicons en ajoutant le nom de classe de l'icône. Vous pouvez voir les icônes avec les classes correspondantes ici.

Si, par exemple, vous choisissez l'icône de la nourriture, vous l'ajouterez à votre code comme ceci 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

Le résultat final devrait être que l'icône que vous avez choisie apparaisse dans votre menu de publication personnalisée… aidant à rendre votre publication personnalisée vraiment personnalisée !

Lectures complémentaires

Créer des types de publication personnalisés WordPress à l'aide d'un plugin
Créer manuellement des types de publication personnalisés WordPress
Créez des types de publication personnalisés WordPress en utilisant votre propre plugin !

Conclusion

J'espère que ces conseils vous aideront vraiment dans votre quête pour créer vos propres types de publication personnalisés et, ce faisant, vous permettront d'améliorer encore les fonctions et l'utilisation de votre site Web WordPress. Comme pour tout codage, il est préférable de prendre le temps de jouer et de voir comment votre nouveau code impacte votre site Web. Construire sur ces bases vous permettra ensuite de vous attaquer à des projets encore plus complexes nécessitant une forte personnalisation.