Configurer un template pour un custom post type WordPress

Dewy.fr » Blog » WordPress » Configurer un template pour un custom post type WordPress

Pour ce tout premier article de blog, je souhaite vous parler d’une fonctionnalité importante du contenu personnalisé WordPress, le paramètre template. Lorsqu’on veut ajouter un contenu personnalisé ou un custom post type via du code, on peut pré configurer un template ou un gabarit pour le custom post type. Cela peut être assez flou pour le néophyte, mais je vais expliquer comment implémenter cette option lors de la déclaration d’un contenu personnalisé.

Configuration d’un template gutenberg pour un site d’une école de surf

Pour l’exemple, on va partir d’un use case simple. Imaginons, qu’une école de surf souhaite mettre en avant les plus beaux spots de sa région. Sur leur nouveau site WordPress, un contenu personnalisé dédié est paramétré via du code. Ce nouveau contenu personnalisé se nomme Spot surfschool.

L’utilisateur souhaite ajouter des informations génériques sur chaque spot de surf comme :

• Le nom du spot
• Une description du spot de surf
• Un contenu spécifique sur le meilleur itinéraire pour accéder au spot
• Un lien vers une map

Maintenant nous allons paramétrer tout cela avec notre code personnalisé 🙂

Un nouveau paramètre disponible depuis la version 5.0 de WordPress

Tout d’abord, ce paramètre template est disponible depuis la version 5.0 de WordPress. En effet, c’est à partir de cette version que les blocs gutenbergs sont apparus dans l’espace d’édition d’articles et de pages WordPress. Donc avant cette version vous ne pouvez pas ajouter ce paramètre dans la déclaration de votre custom post type.

Pour ajouter un nouveau contenu dans le menu de l’administration WordPress avec du code personnalisé, il faut utiliser la fonction suivante register_post_type. Cette fonction doit être ajoutée dans le fichier functions.php de votre thème et appelée via le hook WordPress init.

/* Add custom post type */
if(!function_exists('cpt_spot_surfschool')) {
function cpt_spot_surfschool() {

    $labels = array(
      'name'                  => _x( 'Spot surfschool', 'Post Type General Name', 'cpt_spot_surfschool' ),
      'singular_name'         => _x( 'Spot surfschool', 'Post Type Singular Name', 'cpt_spot_surfschool' ),
      'menu_name'             => __( 'Spots surfschool', 'cpt_spot_surfschool' ),
      'name_admin_bar'        => __( 'Spot surfschool', 'cpt_spot_surfschool' ),
      'archives'              => __( 'Item Archives', 'cpt_spot_surfschool' ),
      'attributes'            => __( 'Item Attributes', 'cpt_spot_surfschool' ),
      'parent_item_colon'     => __( 'Parent Item:', 'cpt_spot_surfschool' ),
      'all_items'             => __( 'All Items', 'cpt_spot_surfschool' ),
      'add_new_item'          => __( 'Add New Item', 'cpt_spot_surfschool' ),
      'add_new'               => __( 'Add New', 'cpt_spot_surfschool' ),
      'new_item'              => __( 'New Item', 'cpt_spot_surfschool' ),
      'edit_item'             => __( 'Edit Item', 'cpt_spot_surfschool' ),
      'update_item'           => __( 'Update Item', 'cpt_spot_surfschool' ),
      'view_item'             => __( 'View Item', 'cpt_spot_surfschool' ),
      'view_items'            => __( 'View Items', 'cpt_spot_surfschool' ),
      'search_items'          => __( 'Search Item', 'cpt_spot_surfschool' ),
      'not_found'             => __( 'Not found', 'cpt_spot_surfschool' ),
      'not_found_in_trash'    => __( 'Not found in Trash', 'cpt_spot_surfschool' ),
      'featured_image'        => __( 'Featured Image', 'cpt_spot_surfschool' ),
      'set_featured_image'    => __( 'Set featured image', 'cpt_spot_surfschool' ),
      'remove_featured_image' => __( 'Remove featured image', 'cpt_spot_surfschool' ),
      'use_featured_image'    => __( 'Use as featured image', 'cpt_spot_surfschool' ),
      'insert_into_item'      => __( 'Insert into item', 'cpt_spot_surfschool' ),
      'uploaded_to_this_item' => __( 'Uploaded to this item', 'cpt_spot_surfschool' ),
      'items_list'            => __( 'Items list', 'cpt_spot_surfschool' ),
      'items_list_navigation' => __( 'Items list navigation', 'cpt_spot_surfschool' ),
      'filter_items_list'     => __( 'Filter items list', 'cpt_spot_surfschool' ),
    );
  
    $rewrite = array(
      'slug'                  => 'spot-surfschool',
      'with_front'            => true,
      'pages'                 => true,
      'feeds'                 => false,
    );
  
    $args = array(
      'label'                 => __( 'plages surfschool', 'cpt_spot_surfschool' ),
      'description'           => __( 'Contenu personnalisé pour lister les plages proches de la surfschool', 'cpt_spot_surfschool' ),
      'labels'                => $labels,
      'supports'              => array( 'title', 'editor', 'excerpt' ),
      'hierarchical'          => false,
      'public'                => true,
      'show_ui'               => true,
      'show_in_menu'          => true,
      'menu_position'         => 20,
      'menu_icon'             => 'dashicons-grid-view',
      'show_in_admin_bar'     => true,
      'show_in_nav_menus'     => true,
      'can_export'            => true,
      'has_archive'           => 'spots-surfschool',
      'exclude_from_search'   => false,
      'publicly_queryable'    => true,
      'rewrite'               => $rewrite,
      'capability_type'       => 'page',
      'show_in_rest'          => true,
      'template' => [
            [ 'core/heading', [
            'level' => 2,
            'content' => 'Description du spot de surf',
            'className' => 'title-desc-spotsurf',
            'textAlign' => 'center',
            ] ],
            [ 'core/paragraph', [
            'placeholder' => 'Ajouter une description du spot de surf dans cette partie',
            ] ],
            [ 'core/heading', [
            'level' => 2,
            'content' => 'Itinéraire',
            'className' => 'title-itineraire-spotsurf',
            'textAlign' => 'center',
            ] ],
            [ 'core/paragraph', [
            'placeholder' => 'Faîtes une description clair et précise sur le meilleur itinéraire pour accéder à ce spot',
            ] ],
            [ 'core/button', [
            'text' => 'Voir spot de surf',
            'title' => 'visualiser le spot sur la carte',
            'textColor' => 'vivid-cyan-blue', 
            'backgroundColor' => 'foreground',
            'align' => 'center',
            'url' => '#'
            ] ],
        ],
      'template_lock' => 'all'
    );
  
    register_post_type( 'cpt_spot_surfschool', $args );
  
  }
  add_action( 'init', 'cpt_spot_surfschool', 10 );
}

Avec le paramètre template on peut pré configurer un gabarit pour chaque nouveau contenu d’un custom post type. Pour notre use case, on aura la même mise en page pour tous les contenus présents sur spot surfschool. C’est un gain de temps énorme pour l’utilisateur car la mise en page et les blocs sont déjà présents. Il reste plus qu’à ajouter du contenu sur les blocs pré configurés. Par exemple, dans l’administration WordPress, l’utilisateur pourra voir cette mise en page lorsqu’il voudra rajouter un nouveau spot de surf

Le design est plutôt simple mais on peut avoir une idée de ce qu’on peut faire avec ces templates.

La configuration du paramètre template dans le custom post type WordPress

Au niveau du paramètre template on peut voir les blocs utilisés ainsi que les attributs pour ajouter du contenu par défaut à la création du contenu. Pour cet exemple j’ai utilisé les blocs suivants :

• core/heading
• core/paragraph
• core/button

Pour chaque bloc, je possède des attributs que je peux renseigner pour afficher ou non tel contenu. Par exemple, pour le bloc core/heading, j’ai un attribut content qui permet d’ajouter un contenu spécifique sur ce bloc.

Pour le bloc core/paragraph, j’ai l’attribut placeholder à ma disposition. Très pratique pour ajouter une phrase descriptive du bloc.

Verrouillage de la mise en page

Via le paramètre template, vous pouvez également configurer un verrouillage de la mise en page des blocs pour le custom post type. Avec le paramètre 'template_lock' vous pouvez donner la possibilité à l’utilisateur de ce contenu personnalisé de modifier uniquement les blocs pré configurés ou bien en ajouter d’autres.

Selon le degré de maturité technique du client cela peut être intéressant de proposer un template verrouillé afin qu’il ne casse pas le design de votre contenu avec des blocs inappropriés.

Ce paramètre peut avoir deux valeurs possibles :

• all : l’utilisateur ne pourra pas insérer de nouveaux blocs, déplacer et supprimer les blocs existants
• insert : avec ce paramètre, l’utilisateur pourra déplacer les blocs existants mais il ne pourra pas insérer de nouveaux blocs

Quelques difficultés dans le paramétrage des attributs des blocs gutenberg

Pour faire ce gabarit, j’ai rencontré une difficulté sur les attributs textColor et backgroundColor. Pour renseigner les couleurs pour le bouton, il a fallu chercher le nom des couleurs. En effet, la première fois que j’ai tenté l’expérience, j’ai utilisé le code hexadécimal (#4D4D4D par exemple) pour les attributs et cela n’a pas fonctionné. Pour que cela fonctionne il faut mettre la couleur avec un format bien particulier soit le nom comme vivid-cyan-blue ou foreground pour mon cas.

Pour trouver les noms disponibles pour ces attributs il a fallu chercher dans l’inspecteur de l’élément

Pour que la couleur soit correctement prise en compte, j’ai utilisé les noms avec le prefix --wp-preset--color. On peut voir des noms de couleurs exploitables comme black, pale-pink ou luminous-vivid-orange. C’est assez étrange. J’ai peut être mal compris le fonctionnement de ces attributs. Si un développeur peut m’éclairer sur ce point, j’en serais ravi. En tout cas c’est une fonctionnalité des dernières versions de WordPress très plaisantes.