Créer des entités spécifiques pour un template wordpress.

Cet article est le deuxième de la série sur le développement de templates Wordpress en adoptant une structure proche du framework Symfony. Si vous n'avez pas lu le premier, c'est ici

Parfois, lorsque l'on monte un site sous wordpress, on ne peut pas se contenter des classiques posts ou pages. On a besoin des créer des types d'articles spécifiques pour représenter des objets propres au site.

Par exemple, pour un site sur lequel je travaille en ce moment et qui parle de papillons, j'ai eu besoin de créer des posts particuliers pour les espèces de papillons, leurs habitats ou les plantes dont les chenilles se nourrissent.

Pour cela, nous allons utiliser une fonctionnalité native de Wordpress, les custom posts et le plugin magique : ACF = Advanced Custom Fields.

Puis, pour rester dans la philosophie de développement objet, nous allons créer des entités, repository et controller spécifiques dans notre template. J'ai utilisé ce système ici pour la "linkothèque", jusqu'ici bien peu fournie, mais ça va venir.

Au programme

  • Création du Custom Post
  • Installation et paramétrage d'ACF
  • Création de notre entité
  • Création du repository
  • Création du controller
  • Création du template d'affichage

Création du custom post

Ouvrez votre fichier "functions.php" et ajoutez y le code suivant :

function link_entity() {

    // On rentre les différentes dénominations de notre custom post type qui seront affichées dans l'administration
    $labels = array(
        // Le nom au pluriel
        'name'                => _x( 'Liens', 'Post Type General Name'),
        // Le nom au singulier
        'singular_name'       => _x( 'Lien', 'Post Type Singular Name'),
        // Le libellé affiché dans le menu
        'menu_name'           => __( 'Liens'),
        // Les différents libellés de l'administration
        'all_items'           => __( 'Tous les liens'),
        'view_item'           => __( 'Voir les liens'),
        'add_new_item'        => __( 'Ajouter un lien'),
        'add_new'             => __( 'Ajouter'),
        'edit_item'           => __( 'Editer le lien'),
        'update_item'         => __( 'Modifier le lien'),
        'search_items'        => __( 'Rechercher un lien'),
        'not_found'           => __( 'Non trouvé'),
        'not_found_in_trash'  => __( 'Non trouvé dans la corbeille'),
    );

    // On peut définir ici d'autres options pour notre custom post type

    $args = array(
        'label'               => __( 'Liens'),
        'description'         => __( 'Tous sur les liens'),
        'labels'              => $labels,
        // On définit les options disponibles dans l'éditeur de notre custom post type ( un titre, un auteur...)
        'supports'            => [ 'title', 'author', 'revisions', 'custom-fields', ],
        'taxonomies'          => [ 'liens',  'post_tag' ],
        /*
        * Différentes options supplémentaires
        */
        'show_in_rest'        => true,
        'hierarchical'        => false,
        'public'              => true,
        'has_archive'         => true,
        'rewrite'             => [ 'slug' => 'liens'],

    );

    // On enregistre notre custom post type qu'on nomme ici "links" et ses arguments
    register_post_type( 'liens', $args );

}

add_action( 'init', 'link_entity', 0 ); 

Une fois ceci fait, dans la colonne de gauche de l'admin de Wordpress, vous avez une nouveau type de contenu appelé "Liens".

Installation de ACF

Téléchargez et installez le plugin : https://fr.wordpress.org/plugins/advanced-custom-fields/

Une fois installé et activé, la colonne de gauche de l'admin de wordpress contient maintenant un menu ACF

Paramétrer les propriétés de notre entité

Allez dans ACF -> groupe de champs et créez un nouveau groupe de champs du nom de votre entité.

Ajoutez autant de champs que vous le souhaitez. Ici moi je me suis contenté d'un champ url et d'un champ résumé. Les mots clés sont directement gérés par wordpress. Vous me direz le résumé aussi, mais ça me permet d'ajouter un champ pour l'exemple :-)

Une fois fait, n'oubliez pas de préciser que ce groupe de champs doit être utilisé pour vos Liens

Une fois validé, lorsque vous vous rendez sur l'édition d'un Lien, la page d'édition devrait ressembler à ça :

Utilisation des champs

ACF fournit les fonctions qui permettent de récupérer vos champs spécifiques et notamment get_field('nom_du_champ', $postId) qui nous sera très utile.

Créer les classes MVC

Création de l'entité

Dans le dossier de votre thème, si ce n'est déja fait, créez un dossier Entity, et ajoutez y un fichier Link.php.

namespace App\Entity;

class Link {

    private $id;
    private $link;
    private $title;
    private $url;
    private $abstract;
    private $tags;

    public function __construct($id)
    {
        $this->link = get_post($id);
    }

    /**
     * @return integer
     */
    public function getId(): int
    {
        return $this->link->ID;
    }

    /**
     * @return string
     */
    public function getTitle(): string
    {
        return $this->link->post_title;
    }

    /**
     * @return string
     */
    public function getUrl(): ?string
    {
        return get_field('url', $this->link->ID);
    }

    /**
     * @return string
     */
    public function getAbstract(): ?string
    {
        return get_field('abstract', $this->link->ID);
    }

    /**
     * @return array
     */
    public function getTags(): ?array
    {
        $tags = get_the_tags($this->getId());
        $returnTags = [];
        foreach ($tags as $tag) {
            $returnTags[] = $tag->name;
        }
        return $returnTags;
    }

}

Vous aurez remarqué qu'il n'y a aucun setter. C'est normal puisque l'édition de contenu est gérée par le back office de Wordpress.

Création du repository

Dans le dossier Model de votre thème, créez le fichier LinkRepository.php

use App\Entity\Link;

class LinkRepository
{
    const ENTITY_NAME = 'liens';
    
    private static function wordpressArrayToEntityArray($posts)
    {
        $entityArray = [];
        foreach ($posts as $post) {
            $entityArray[] = new Link($post->ID);
        }
        return $entityArray;
    }

    public static function getLastLinks($limit = 5)
    {
        $links = get_posts([
            'numberposts' => $limit,
            'post_type'   => self::ENTITY_NAME
        ]);
        
        return LinkRepository::wordpressArrayToEntityArray($links);
    }

    public static function getAllLinks()
    {
        return LinkRepository::getLastLinks(-1);
    }

}

On dispose désormais de méthodes qui nous permettent de récupérer nos liens. On va donc pouvoir les exploiter dans notre controller.

Création du controlleur

Comme nous l'avons vu dans le premier article consacré à la mise en place, le controlleur sera le template de page utilisé pour l'affichage de nos liens.

Dans le dossier Controller, nous allons donc créer notre controlleur pour afficher nos liens :

namespace App\Controller;
/*
Template Name: liens
*/

use App\Model\LinkRepository;

$links = LinkRepository::getAllLinks();

echo $twig->render('links/links.html.twig', [
    'links' => $links,
]);

Ce contrôleur fabrique un modèle de page chargé d'afficher tous nos liens. Il fait appel à un fichier twig chargé du rendu. Il nous faudra ensuite appliquer ce modèle à une page de notre site. (notez que le template se nomme "Liens" (ligne 3)

Passons à l'affichage

Le fichier twig

Dans votre dossier View, créez un dossier links et ajoutez y le fichier links.html.twig

{% extends '__base.html.twig' %}

{% block title %}
La codonnerie - tous les liens
{% endblock %}

{% block body %}
<div class="container all-links">
    <div class="row home">
        <div class="col s12 center-align">
            <h2>Linkothèque</h2>
        </div>
    </div>
    <div class="row">
        {% if links %}
        {% for link in links %}
            <div class="col s12 l6 link-result">
                <span class="link-title">
                    <a href="{{ link.url }}">{{ link.title }}</a>
                </span>
                <p class="link-abstract">
                    {{ link.abstract }}
                </p>
                <span class="link-tags">
                    {% for tag in link.tags %}
                        <span class="chip">{{ tag }}</span>
                    {% endfor %}
                </span>
            </div>
        {% endfor %}
        {% else %}
        <div class="col s12 l6 link-result">
            <span class="link-title">
               Aucun lien actuellement disponible
            </span>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

Voila tout est en place. Il ne nous reste plus qu'à ...

Créer la page

Dans le backoffice de Wordpress, rendez vous dans "Pages". Ajoutez une page. Donnez lui juste un titre et appliquez lui le modèle "Liens".

Et voila, c'est fini. Vous n'avez plus qu'à créer des liens et ils s'afficheront automatiquement sur cette page.

Dans un prochain article, nous verrons comment affiner les contrôleurs et séparer mieux les templates de page à proprement parler et les contrôleurs pour avoir encore plus de souplesse.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *