Créer des CPT sans coder, c’est possible avec Toolset !

Les Custom Post Types, les Custom Taxonomies et les Custom Fields, par leur puissance lorsqu’ils sont combinés, m’ont toujours fascinée. Ils offrent des possibilités qui permettent de créer des sites WordPress complexes, adaptés à tous les besoins.

Il existe déjà de nombreux plugins qui permettent de mettre tout cela en place, CPT UI pour les Custom Post Types et Advanced Custom Fields pour les Custom Fields font partie des plus connus et des plus efficaces. Mais je suis récemment tombée sur une alternative, Toolset, et j’ai été impressionnée par les possibilités que propose cette « boîte à outils ». Vous pouvez, en souscrivant à leur abonnement payant (69$ / an), créer un site WordPress très abouti, sans écrire une ligne de code !

 

Qu’est-ce que Toolset ?

Il s’agit d’une « boîte à outils » qui propose plusieurs plugins aux fonctionnalités variées et d’autres composants afin de vous aider à créer et administrer votre site WordPress (ou ceux de vos clients).

La version gratuite vous donne accès au plugin Types, un plugin tout-en-un qui vous permet de créer des Types de contenu, des Taxonomies et des Champs personnalisés directement dans votre backoffice WordPress. Cependant il faudra mettre un peu les mains dans le PHP afin de les afficher ensuite sur votre site. Une documentation est à votre disposition, elle est riche, détaillée et très pratique !

Si vous voulez utiliser tout le potentiel de Toolset et ainsi éviter d’écrire des lignes de PHP, vous pouvez souscrire à la version payante, cela vous donnera accès à Views, un plugin qui – entre autres fonctionnalités – vous permet justement d’afficher vos Types de contenu, Taxonomies et Champs personnalisés sans devoir coder et au plugin Layouts, qui vous permet, grâce à un système de Page Builder, de créer des mises en page avancées.

Dans sa version payante, Toolset propose également :

• le plugin CRED, qui permet d’éditer ou de créer du contenu pour votre site directement en front-end. Parfait pour un site où les utilisateurs soumettent du contenu (site de petites annonces, par exemple). En savoir plus.
• le plugin Access qui vous permet de personnaliser et de gérer de façon plus précise les rôles des utilisateurs de votre site. En savoir plus.
• l’ajout de Google Maps dans votre site et la possibilité d’y épingler des adresses.
• des thèmes à personnaliser afin de vous aider à créer votre site plus facilement.
• un starter theme pour les développeurs.

Je ne m’attarde pas sur ces fonctionnalités car ce sont les plugins Types, Views et Layouts qui vont nous intéresser dans cet article.

 

Qu’est-ce qu’on peut faire avec les plugins de Toolset ?

La même chose qu’avec CPT UI et ACF, donc. C’est bien, vous avez suivi ;) La différence, c’est qu’avec Toolset, vous pouvez tout faire sans jamais quitter votre backoffice.
Avec Types, Views et Layouts, vous pouvez créer une structure complexe sur votre site WordPress. Pour en savoir plus sur les possibilités qu’offrent les CPT, les Custom Tanomies et les Custom Fields, je vous invite à relire cet article. Ici, nous allons entrer dans le vif du sujet, la pratique !

Types : Créer des types de contenu, taxonomies et champs personnalisés

Je vous invite donc à installer et activer le plugin Types (celui-ci est gratuit). Allez voir par ici si cette démarche ne vous est pas familière.

Un nouvel onglet est apparu dans votre tableau de bord WordPress. C’est ici que vous allez gérer vos nouveaux types de contenu, vos taxonomies et vos champs personnalisés. Tout est au même endroit et c’est vraiment la force de Types ! Pas besoin de jongler entre plusieurs plugins.

On commence par créer un nouveau type de publication. Dans la liste vous trouvez ceux inhérents à WordPress, les pages, les articles et les médias.

Allez, comme on aime tous ça, on va créer un Type de contenu Films. Cliquez sur Ajouter un(e) nouveau(elle) et remplissez les champs. Je vais assez rapidement car le fonctionnement est à peu près le même qu’avec le plugin CPT UI que nous avons déjà étudié ici.

Créons maintenant une taxonomie Réalisateur, afin de pouvoir classer les films en fonction de leurs réalisateurs. Cliquez sur Taxonomies, Ajouter un(e) nouveau(elle) et, à nouveau, complétez les champs. N’oubliez pas de cocher la case de votre type de contenu personnalisé, Films, ici.

Enfin, nous allons créer des champs qui permettront d’ajouter des renseignements propres à chaque film : un champ Date par exemple, afin de renseigner la date de sortie du film, un champ image pour insérer l’affiche du film et un champ Texte pour écrire son synopsis. Cliquez sur Champs de publication, puis Ajouter un(e) nouveau(elle). Il faut ensuite nommer votre groupe de champs puis créer les champs un à un en paramétrant les différentes options. Comme pour la taxonomie, il faut penser à associer le groupe de champs au type de contenu Films.

Ensuite, rendez-vous dans l’onglet Films qui s’est ajouté dans votre tableau de bord.
Vos champs personnalisés ont été ajoutés dans votre éditeur et vous pouvez désormais les compléter. C’est rapide et simple à mettre en place, n’est-ce pas ?

Views : Les afficher en front-end sans coder

C’est ici que Views intervient et c’est la grande force de Toolset : il rend accessible la création et l’affichage de CPT aux novices.

Commençons par créer notre page d’archives, celles qui affichera la liste des films ajoutés.
Une fois Views installé et activé, rendez-vous dans le sous-onglet Archives WordPress et cliquez sur Ajouter un(e) nouveau(elle).

Nommez-la puis sélectionner l’archive que vous voulez créer – dans notre cas l’archive Films. Validez en cliquant sur Create WordPress Archive.

Vous êtes ensuite redirigé sur la page des paramètres de votre page d’archives. Vous avez différentes options : tri des articles, possibilité de configurer des filtres, choix du type de pagination et du nombre d’éléments à afficher par page (6 par défaut).

Ensuite, il vous faut choisir les informations à afficher sur votre page d’archives. Vous ne voulez peut-être pas y faire apparaître l’intégralité des informations relatives à votre film. On va par exemple décider de n’afficher que l’affiche et le titre du film. Dans la section éditeur de sortie de boucle, vous cliquez sur Assistant de boucle. Vous pouvez alors choisir la disposition de votre page d’archives. J’aime bien les affichages en grille alors essayons la grille Bootsrap, avec 3 colonnes. Ensuite vous choisissez dans la liste les différents champs à afficher : dans notre cas, l’affiche et le titre du film. Ensuite, à partir de vos réglages, un code est généré automatiquement.

1)

2)

Juste en dessous, vous avez un encart qui vous permet de styliser votre page d’archives avec du CSS, parce qu’en l’état, c’est un peu triste…

Maintenant, rendez-vous sur la page de votre archive, à cette adresse : url-de-votre-site.com/slug-de-votre-cpt, pour voir le résultat de vos paramètres. Si vous ne vous souvenez plus du slug de votre Type de contenu, vous pouvez le retrouvez en vous rendant dans l’onglet Types de publication, et en le sélectionnant dans la liste. Plus bas dans la page, un lien vous permet même d’accéder directement à votre page d’archives.

Il faut maintenant créer le modèle d’un film, la page qui affichera donc le contenu intégral relatif à un film. Rendez-vous dans Modèles de contenu et ajoutez-en un nouveau. Là, sélectionnez films dans la liste des Pages Uniques et cliquez sur Create Content Template.

Ensuite, en cliquant sur Champs et vues vous pouvez définir les différentes informations à afficher, de la même façon que pour votre page d’archives. Vers le bas, vous retrouverez les champs rattachés à vos films.

Enfin, pensez à créer l’archive de votre taxonomie Réalisateurs. Il suffit de refaire ce que vous avez fait pour les films, mais en cochant cette fois Réalisateurs.

Bon, vous êtes toujours là ? Concrètement, ce que nous venons de voir suffit à construire un site abouti. Mais nous allons quand même aller un peu plus loin…

Layouts : créer des mises en page avancées

Lorsque vous créez vos pages avec Views, vous choisissez les éléments à afficher, mais pas la manière dont vous les affichez (ou alors il faut le faire avec du CSS mais pour les novices ça peut se révéler ardu). Ils s’empilent simplement les uns sous les autres. Définir la mise en page de vos contenus, c’est ce que vous permet de faire Layouts. Voyons ça ensemble.

Installez et activez le plugin Layouts, inclus dans le pack payant Toolset. Dans votre onglet Toolset, allez dans le sous-onglet Mises en page et cliquez sur Ajouter un(e) nouveau(elle).

Vous pouvez dès maintenant cliquer sur Modifier la manière dont cette mise en page est utilisée et l’attribuer à votre modèle de page Films.

Ensuite eh bien vous avez un système de 12 colonnes qui vous permet d’insérer vos différents éléments de la manière que vous voulez. Sélectionnez un nombre de cellules puis insérez-y ensuite votre contenu. C’est un système flexible et plutôt intuitif, il se prend rapidement en main.

Dans la section Champs, texte et media j’ai choisi d’insérer l’élément Visual Editor. Ensuite, grâce au bouton Champs et vues (ça ne vous rappelle rien ? Vous verrez, au final tout fonctionne à peu près de la même façon et vous retrouverez vos repères), j’ai pu ajouter les champs personnalisés de mes films.

Au final, après avoir ajouté quelques champs sur deux colonnes, dans mon backoffice, ça donne ceci :

Et sur mon site, non stylisé (ce n’est pas très beau, je vous l’accorde), ça donne cela :

Vous pouvez également utiliser Layouts pour modifier la mise en page de votre page d’archives Films, il faut alors penser à bien l’attribuer à l’archive Films en cliquant sur Modifier la manière dont cette mise en page est utilisée. Il faut ensuite ajouter un élément WordPress Archive, qui se situe dans Listes et boucles.

Vous pouvez ensuite personnaliser le contenu de cette boucle en vous rendant tout en bas sous Modèles pour cette archive WordPress, dans l’encart Loop item in Films (vous pouvez aussi accéder à cet encart depuis l’onglet Archives WordPress ou encore Modèles de contenu). Il suffit alors de modifier les champs à afficher en cliquant sur Champs et vues.

Enfin, vous pouvez même utiliser Layouts pour vos pages uniques (il faut alors attribuer la mise en page à une Page Individuelle), telles que les pages Contact, A propos, Prestations, etc.

Voilà, maintenant libre à vous de jouer avec les colonnes pour créer des mises en page attractives !

Conclusion

Les possibilités offertes par ce trio de plugins sont nombreuses et puissantes. Le but de Toolset est de rendre accessible au plus grand nombre des fonctionnalités avancées de WordPress. Le but est louable, mais dans la pratique, l’utilisation de Toolset peut s’avérer complexe pour un novice. Toolset n’est pas une solution miracle et pour en exploiter tout le potentiel, il faut déjà avoir une bonne compréhension de la structure de WordPress et de la hiérarchie des templates. Toolset permet de s’affranchir du PHP, mais je pense qu’il est préférable d’avoir des notions de ce langage – ainsi que des langages HTML et CSS – pour bien utiliser Toolset.

Au final, je pense que cet outil est plutôt destiné aux professionnels qui souhaitent optimiser leur travail et gagner du temps. C’est une sacrée mécanique qui demande du temps et quelques connaissances afin d’être maîtrisée.

 

Post-scriptum : Allez voir Manchester by the sea, c’est un très beau film !