Créer, modifier ou supprimer des éléments avec Unyson

Je vous propose un petit rappel en quelques mots : Unyson est un plugin/framework open source et gratuit pour WordPress. Sa particularité est qu'il vous propose de nombreuses extensions (activables uniquement si vous le souhaitez) très intéressant, dont un page builder pour lequel il est simple d'ajouter/modifier des éléments et shortscodes.

Attention, bien que cet article reste simple, il demande néanmoins quelques prérequis. Pour commencer, vous devez avoir accès à l'administration et aux fichiers d'un wordpress.

Il est aussi important de savoir se déplacer dans la structure de fichiers du CMS, et savoir ou trouver votre thème, vos plugins, etc.

Enfin, même si ce n'est pas nécessaire pour ce tutos, sachez que la création de nouveaux éléments demande des connaissances en HTML, CSS ainsi que de petites bases en PHP. 

Si vous ne vous sentez pas a l'aise avec les pri-requis, cet article n'est peut-être pas pour vous. Si vous vous intéressez à ce plugin en tant que simple utilisateur, pourquoi ne pas lire un autre article, détaillant son utilisation : Unyson pour WordPress : L'utilisation du page builder

Créer un nouvel element

Pour commencer, définissons un objectif : Nous allons creer un nouvel element identique à l'element text-block à une exception près : Ce dernier ne prend pas en compte les sauts de ligne dans le contenu, alors que le nôtre va les transformer en br et en p, comme l'éditeur normal de WordPress.

La création d'un nouvel element pour le builder passe par la création d'un nouveau shortcode en passant par le framework unyson, puis son intégration au builder. Et pour cela, il va falloir commencer a personnaliser le framework !

Pour commencer, creez un dossier ./framework-customizations/ dans le dossier de votre theme. Toutes la personnalisation du plugin pour votre theme ira dans ce dossier, de la creation de nouveaux elements a la creation de nouvelles pages d'options (nous traiterons ce point sur un prochain article).

Notre objectif ici est de creer un nouveau shortcode nomme "multiline text box", nous allons donc creer le dossier ./framework-customizations/extensions/shortcodes/shortcodes/multiline-text-box. Notez la presence de deux "shortcodes" d'affile. Le premier est la pour indiquer que nous ajoutons nos shortcodes dans l'extension "shortcode" directement. Si vous creez votre propre extension et qu'elle necessite des shortcodes, vous pourrez les mettre dans le dossier ./framework-customizations/extensions/mon-extension/shortcodes/.

Maintenant que nous avons notre dossier, il va nous falloir creer les fichiers. L'objectif de cet element etant d'etre exactement comme "text-block" a l'exception de la gestion des sauts de ligne, nous allons copier-coller le contenu de ce plugin (que vous trouverez dans votre dossier wp-content/https://github.com/ThemeFuse/Unyson-Shortcodes-Extension/tree/master/shortcodes/text-block ou a cette adresse).

Une fois fait, vous vous retrouvez face à plusieurs fichiers et dossiers.

config.php gère le nom, la description et la tooltip de l'element. Passez donc y modifier le nom de notre element en "Multiline text block".

options.php permet de gérer les différents champs présents dans la configuration de l'element. Ici, nous n'avons qu'un seul champ, qui est un éditeur de texte WYSIWYG, et nous allons garder ce fichier comme ça.

static/ est un dossier contenant les différents assets nécessaires à notre element : Css, js, images. Ici, nous n'avons qu'un seul fichier, image/page builder Png, qui est l'icône du short code dans le builder. Remplacez-le.

views/ contient le rendu de notre element, que nous allons modifier pour ajouter le support des sauts de ligne. Pour ce faire, remplacez la ligne 9 par la ligne suivante : <?php echo wpautop(do_shortcode( $atts['text'] )); ?>

En quelques mots, cette ligne ajoute la fonction wpautop, qui transforme les sauts de ligne en <br> ou <p>&nbsp;</p> selon la situation.

Et voila, notre shortcode est finit ! Vous pouvez aller l'essayer dans l'administration.

Modifier un element pré-existant

Cette partie est vraiment très simple, et ira donc très vite. Pour modifier n'importe lequel des shorts codes déjà présents dans le framework, créez simplement un dossier portant son nom dans de dossier ./framework-customizations/extensions/shortcodes/shortcodes de votre thème. Tous les fichiers présents dans ce dossier seront appelés a la place des fichiers originaux.

Exemple : Pour modifier le HTML de l'élément "button", créez un fichier ./framework-customizations/extensions/shortcodes/shortcodes/button/views/view.php et mettez-y votre nouveau HTML !

Retirer un element

Nous avons vu comment ajouter un element, mais il faut savoir qu'il est aussi possible de désactiver les éléments par défaut que nous ne voulons pas voir apparaitre.

Pour cela, rien de bien compliqué. Créez simplement un fichier hook.php dans le dossier ./framework-customizations/extensions/shortcodes de votre thème, et copiez-collez y le code suivant.

<?php if (!defined('FW')) die('Forbidden');
 function _filter_theme_disable_default_shortcodes($to_disable) { 
$to_disable[] = 'accordion';
$to_disable[] = 'button';
 return $to_disable;
 }
 add_filter('fw_ext_shortcodes_disable_shortcodes', '_filter_theme_disable_default_shortcodes');

Pour choisir quels éléments désactivés, il vous suffit de les ajouter juste avant le return $to_disable; sous cette forme :

$to_disable[] = 'shortcode_name';

Vous pouvez voir dans le code que vous avez collé qu'il y a deux éléments déjà désactivés en exemple : accordion et button. Attention à ne pas les laisser si vous ne voulez pas les désactiver !

Pour aller plus loin

À la fin de cet article, vous avez encore surement de nombreuses questions : Comment gérer l'organisation en onglets des éléments ? Comment appeler les CSS, JS, et autres images statiques dans les vues des éléments ? Comment modifier la grille en elle-même ?

Pour en apprendre plus sur la gestion des shortcodes et du page builder, je vous conseille d'aller jeter un oeil aux differents elements pre-existants sur Github, et d'aller faire un tour sur leur documentation. Faire un article permettant d'expliquer toutes les petites subtilités de la configuration ne serait qu'un simple exercice de traduction de la documentation, et Google translate fait ça bien mieux que moi.