[SPXSHORTCODES] environnement pour shortcodes

je-evrard

Ce plugin tout simple va vous permettre de créer des shortcodes qui seront utilisables dans les fichiers du thème, des articles, des pages statiques.



Les shortcodes doivents êtres placés dans un fichier de config à la racine de votre thème
Exemple : Créer votre fichier config.php à la racine de votre thème et placer le code suivant :

[== PHP ==]
<?php 
function button_shortcode() {
    return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"';
}
add_shortcode('button', 'button_shortcode'); 
 ?>

Le code suivant va créer un shortcode button. Pour appeler ce code, utilisez la syntaxe suivante : [button]

Pour plus de détail sur les shorcodes : http://codex.wordpress.org/Shortcode_API

1.3 version officielle

Historique :

version 1.3 (29/04/2016)
- mod function shortcode_p_replace

version 1.2 (16/07/2014)
- add shortcode from external plugin

version 1.1 (13/06/2014)
+ [SUPP P] suppression de la balise p si besoin

version 1.0 (28/10/2013)
+ [LAUNCH] version de base

Jerry Wham

Merci pour ce plugin mais je n'ai pas compris à quoi ça sert. Quelle est la différence avec les hook ?
Ça ajoute une couche de traitement supplémentaire pas forcément nécessaire. Peux-tu expliquer un peu mieux que la doc de WP ? J'ai beau la lire, je ne comprends pas l'intérêt (et je n'aime pas ne pas comprendre...)

je-evrard

En traduction littérale shortcode signifie « un code court ». Ce sont des « petits » bouts de code que l’on utilise dans un éditeur visuel, ils peuvent être insérés n’importe où, que ce soit en mode « Visuel » ou « HTML ». Ces codes seront transformés via le plugin en un contenu HTML souhaité là où vous les avez placés dans la page (En d’autre termes, ils permettent de créer une macro-code).

Il permet de réduire les taches rébarbatives (le copier coller de code HTML par exemple, pour des éléments de mise en page.).
Encore on peux grâce aux shortcodes insérer dans les pages du contenu interactif (en utilisant du code PHP).

Les 4 types de shortdodes

Les « self-closing » shortcodes

Sans attributs :

[== HTML ==]
[gallery]

Avec attributs :

[== HTML ==]
[gallery size="medium" id="123"]

Les « enclosing » shortcodes

Sans attributs :

[== HTML ==]
[caption]Lorem ipsum dolor sit amet[/caption]

Avec attributs :

[== HTML ==]
[caption color="#000000"]Lorem ipsum dolor sit amet[/caption]

Sans compter les imbrications

[== HTML ==]
[mon-shortcode-a]

            [mon-shortcode-b]

                     [mon-shortcode-c]

            [/mon-shortcode-b]

[/mon-shortcode-a]

Pour plus d'information voir le site : http://wp-themes-pro.com/shortcode-wordpress

Perso je les utilise beaucoup via mon plugin spxdatas pour centraliser le code

Pour moi rien avoir avec les hook de pluxml. Ici tu créés tes shortcodes dans le config.php du thème librement et tu les utilises n'importe ou coté client (fichier thème, articles, statiques...)

Exemple de shortcode pour un thème bootstrap :

Une "alert" bootstrap à la structure html suivante :

[== HTML ==]
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

C'est une structure assez complexe et pas facile à mettre dans un article pour un client.
On en fait un shortcode dans le fichier de config.php du thème:

[== PHP ==]
/**
 * Notification fichier config.php du thème
 */
function dws_notice($params, $content = null){
	extract(shortcode_atts(array(
		'type' => 'unknown'
	), $params));
	$content = preg_replace('/<br class="nc".\/>/', '', $content);
	$result = '<div class="alert alert-'.$type.'">';
	$result .= '<button class="close" type="button" data-dismiss="alert">×</button>';
	$result .= do_shortcode($content );
	$result .= '</div>'; 
	return force_balance_tags( $result );
}
add_shortcode('notification', 'dws_notice');

Ici nous déclarons un shortcode avec attributs.

Maintenant pour créer une alerte dans un article c'est simple :

[== HTML ==]
[notification type=block]Texte de mon alert[/notification]

Ce code sera transformé en notification bootstrap html en sortie coté client.

Ce plugin est orienté pour des gens qui ont envie soit de créer leurs shortcodes soit de prendre des shorcodes gratuits sur le net pour simplifier l'html coté client. Tu verras jerry c'est très pratique à l'usage.

Jerry Wham

Ok, je comprends mieux. Merci pour les explications.

Francis

Super intéressants, ces shortcodes !
En fait, j'avais déjà commencé il y a quelques mois (au moins) à développer un plugin pour pouvoir insérer le résultat fourni par un autre plugin (du Javascript ou du PHP) en écrivant un code clair dans l'interface Wysiwyg d'un article ou d'une page statique (j'avais même prévu d'utiliser les fichiers langues des plugins).
Pour l'instant, je l'utilise "en dur" dans mon thème, je n'ai pas eu le temps de terminer le plugin.

Ça m'a l'air en tout cas très souple, il suffit de le déclarer dans [del]le header du thème, si j'ai bien compris[/del] un nouveau fichier appelé config.php dans la racine du thème, j'ai bien compris cette fois (il suffit de bien lire !).
Est-ce que l'imbrication des shortcodes marche déjà avec cette version du plugin ?
Ça ouvre des tas de perspectives, tout ça !

je-evrard

Francis a écrit:

Ça m'a l'air en tout cas très souple, il suffit de le déclarer dans le header du thème, si j'ai bien compris.
Est-ce que l'imbrication des shortcodes marche déjà avec cette version du plugin ?

Tu dois déclarer tes shortcodes dans un nouveau fichier php (config.php) à la racine du thème.
Puis de n'importe ou tu peux appeler tes shortcodes car le traitement est global dans l'output de sortie : header, footer...articles, pages statiques...

Francis

Merci pour la précision, j'avais lu un peu trop vite !

Hamtaro

Très très puissant comme plugin !
Tu as mis le doigt sur une fonctionnalité intéressante de Wordpress (d'ailleurs, je pense que tu parcours pas mal les docs là-bas comme moi avec les thèmes... ) et je pense qu'il a un très bel avenir devant lui s'il est bien travaillé et qu'il ne gêne pas Pluxml dans sa rapidité notamment.

Edit : tu pourrais peut être permettre l'édition du fichier config.php dans la partie admin du plugin ?

Jerry Wham

Pourquoi mettre le fichier de config dans le thème et pas dans un sous-dossier de data/plugin/spxshortcodes du nom du thème, pour rester cohérent avec la politique de gestion des plugins et faciliter la sauvegarde des données et les mises à jour ?

Francis

Si c'est un fichier config général et valable pour plusieurs thèmes, je le verrais bien effectivement dans un sous-dossier data/plugin/spxshortcodes/
Mais s'il est spécifique au thème, je trouve plus pratique qu'il soit dans le dossier du thème.
Peut-être pourrait-on faire cohabiter les deux : prendre en compte le fichier général data/plugin/spxshortcodes/config.php puis celui du thème, dans le dossier idoine ? (j'aime bien ce mot "idoine" )

je-evrard

Merci pour vos réponses. Pour vous rassurer sachez que j'utilise ce système pour mes clients et je n'ai pas de soucis de performance.

-le fichier de config va peut être être renommé en spxshortcodes.PHP
- ce qui est sur c'est que ce fichier de config va rester au niveau du thème.
- édition du fichier de config dans le plugin. Oui.
- intégrer dans le plugin une aide a la rédaction de short code. Oui

A suivre...

Jerry Wham

Et si tu changes de thème et que tu oublies de copier ton fichier config dans le nouveau, qu'est-ce qui se passe quoi ?

Les articles sont indépendants des thèmes. S'ils comportent un code du style :

[notification type=block]Texte de mon alert[/notification]

comme ton exemple ci-dessus, tu te retrouves avec cette "phrase" au beau milieu de ton article.

Ça fait genre "j'ai dû oublié quelque chose mais quoi ?".

Si ton client a la main sur la gestion de pluxml (sélection de thèmes), ça peut devenir problématique non ?

Hamtaro

Exactement Jerry Wham, c'est le souci des shortcodes... Tu dois les utiliser à vie !
Ou alors peut être un plugin qui pourrait "parser" le contenu et remplacer les shortcodes par les bons codes html lors de la suppression du plugin. Mais là, je pense que ça doit être lourd et surtout difficile à mettre en oeuvre si tu as beaucoup de shortcodes différents.

Jerry Wham

Oui, donc j'ai bien compris. Je réitère donc ma suggestion. Il faudrait que le fichier de config soit indépendant du thème...

je-evrard

Jerry,

Un short code n'est pas un record de datas et encore moins une configuration de plugin.

Un shortcode remplace une structure HTML spécifique et c'est très bien !

Si tu mets dans un article une structure HTML dédiée a bootstrap sans shortcode. Ton article sera valable que pour un thème bootstap.
Si au lieu de ça tu déclares un shotcode, il sera valable pour x thème si tonshort code existe bien sur. Un thème ne se fait pas en 5 minutes, et je n'ai jamais oublié mes shortcodes.

Je confirme donc que le fichier de config restera dans le thème pour ce plugin. Je n'empêche personne de reprendre l'idée pour en proposer autre chose...

A noter: les shortcodes dans WordPress sont déclarés dans les thèmes.
De plus, jai prévu pour ma suite de plugin une logique et le fichier de config doit rester dans le thème.

Spxtynimce sera utilisé pour générer un plugin shortcode qui ira lire dans ce fichier de config.

A+

Frédéric

Jerry Wham a écrit:

Et si tu changes de thème et que tu oublies de copier ton fichier config dans le nouveau, qu'est-ce qui se passe quoi ?

J'ai envie de dire la même chose que si tu oublie d'insérer les hooks de certains plugins qui le demande
Très bonne idée sinon je-evrard de le proposer pour PluXml.

Jerry Wham

je-evrard a écrit:

Un short code n'est pas un record de datas et encore moins une configuration de plugin.

Un shortcode remplace une structure HTML spécifique et c'est très bien !

J'ai bien compris.
Donc, imaginons que tu ais une sélecteur de thèmes sur ton site et que tu appelles un shortcode dans un article. Tu vas donc recopier autant de fois que tu as de thèmes ton fichier config.
Alors que s'il était déclaré une fois pour toute dans les datas, tu n'aurais besoin d'en avoir qu'une copie.

Et ce n'est pas parce que chez wp ils font ça qu'on est obligé de faire exactement pareil. Il n'y a pas je crois, d'équivalent de dossier data dans wp vu qu'il fonctionne avec une bdd.

je-evrard a écrit:

Je n'empêche personne de reprendre l'idée pour en proposer autre chose...

Ce n'est pas le but de mon propos. Le but est d'échanger les idées et de mettre en évidence certains points qui peuvent poser problème. C'est de la discussion que jailli la lumière dit-on. Si tout est figé dans le marbre, ces échanges n'ont plus d'intérêt et chacun reste dans son coin et garde ses idées.

Frédéric a écrit:

J'ai envie de dire la même chose que si tu oublie d'insérer les hooks de certains plugins qui le demande wink

Oui, certes, mais là le problème est que le shortcode peut être inscrit dans un article et donc être indépendant d'un thème malgré tout.

Jerry Wham

J'ajouterai que je ne vois pas quel est le problème de déplacer ce fichier. C'est juste un chemin à modifier dans le plugin. Ce n'est pas la mer à boire...

je-evrard

jerry a écrit:

Donc, imaginons que tu ais une sélecteur de thèmes sur ton site et que tu appelles un shortcode dans un article. Tu vas donc recopier autant de fois que tu as de thèmes ton fichier config.
Alors que s'il était déclaré une fois pour toute dans les datas, tu n'aurais besoin d'en avoir qu'une copie.

Recopier en modifiant la structure html fonction du thème. Le fichier de config peux etre complètement différent selon les thèmes.

Pas de soucis jerry pour discuter. Je suis ouvert sauf quand je sens que ça cloche. Peux tu détailler dans le détail ton point de vue ?

jerry a écrit:

un sous-dossier de data/plugin/spxshortcodes du nom du thème ???

Francis a écrit:

Si c'est un fichier config général et valable pour plusieurs thèmes, je le verrais bien effectivement dans un sous-dossier data/plugin/spxshortcodes/
Mais s'il est spécifique au thème, je trouve plus pratique qu'il soit dans le dossier du thème.
Peut-être pourrait-on faire cohabiter les deux : prendre en compte le fichier général data/plugin/spxshortcodes/config.php puis celui du thème, dans le dossier idoine ?

Pourquoi pas les deux ? Allo Stephane, que penses-tu de tout ça stp ? Ca demande réflexion.

PS : pour info je n'utilise jamais de sélecteur de thèmes (un client = 1 thème = Des besoins spécifiques = des shortcodes spécifiques = un fichier de config coté thème spécifique)

Hamtaro

De toute façon, l'utilisation de shortcodes fait appel à un besoin. La personne qui installe le plugin doit être consciente de ça.

Histoire de critiquer un peu les shortcodes (et pourtant je suis fan), si tu fonctionnes sans et donc en mettant une structure html propre à Bootstrap par exemple, le contenu est toujours visible, on est pas sur l'affichage du shortcode [blabla] si le plugin est désactivé.

C'est pour moi le grand souci du shortcode mais il est très puissant donc la balance penche pour moi du côté de son utilisation.

Je suis en train de fouiner dans les plugins de wordpresss et j'en ai trouvé un super sympa qui ajoute des boutons pour bootsrtap dans tinyMCE et quelque chose me dit que je ne suis pas le seul à être tombé dessus. Je vais peut être arrêter de travailler dessus alors...

Pour le moment je monte progressivement mes shortcodes pour répondre à des besoins persos avec le thème bootstrap fait par Fred.
Mon but est de passer entièrement par des shortcodes pour cette page : http://labo.customtaro.fr/static2/snippets-bootstrap

je-evrard

Hamtaro a écrit:

Je suis en train de fouiner dans les plugins de wordpresss et j'en ai trouvé un super sympa qui ajoute des boutons pour bootsrtap dans tinyMCE et quelque chose me dit que je ne suis pas le seul à être tombé dessus. Je vais peut être arrêter de travailler dessus alors...

Il y a des super trucs c'est vrai et j'adore bootstrap !

Francis

Pour prendre deux exemples simples :

- Si on veut insérer, quelque part dans une page, un carte GoogleMap, je verrai bien un petit shortcode.
Ce n'est pas lié à un thème, ça peut s'utiliser tout le temps, donc ça aurait bien sa place dans data/plugins/spxshortcodes/config.php ou data/plugins/spxshortcodes.php.

- Mais si c'est pour afficher un encadré avec une mise en forme définie et liée au thème, ça n'a rien à faire dans data/, c'est plus logique de mettre un fichier dans le thème.

Dans la partie commune, on pourrait voir se développer des fonctions courantes.

Une autre possibilité, que j'utilise dans le plugin du même genre que j'avais commencé, c'est d'aller chercher le contenu fourni par un autre plugin.
Ça éviterait d'avoir des "plugins à l'intérieur du plugin shortcodes", et ça permettrait de gérer de façon plus rationnelle les configurations des fonctions.

J'avais aussi prévu des noms de paramètres en clair, et dans la langue choisie.

@je-evrard : je t'envoie un mail pour te passer ce que j'ai fait.

Hamtaro

Oui Francis, sous Wordpress, en général, les plugins ont leurs propres shortcodes et non un plugin shortcode qui gère tout.

Francis

Pour les plugins qui peuvent être utilisés à l'intérieur d'une page (dans mon exemple GoogleMap), il suffirait d'une simple adaptation au plugin général shortcodes, pour qu'il lui passe des paramètres (coords. GPS, ...) et puisse restituer le résultat (la carte, pour l'exemple que j'ai pris).

Ça me semble plus simple que de réinventer un shortcode spécifique à chaque plugin : une porte d'entrée pour les paramètres, et un retour du contenu.

Ou même encore plus direct, définir un shortcode qui écrit un callhook avec le nom du plugin en paramètre, pour pouvoir afficher le contenu de n'importe quel autre plugin.

Jerry Wham

Même si ce n'était pas ce à quoi je pensais, les exemples de Francis sont pertinents pour illustrer mon propos. Pour résumer :
- shortcode générique (Carte OSM) -> config dans data
- shortcode spécifique à un thème -> config dans thème

Frédéric

Après réflexion, ce plugin est un vrai plus dans le cas d'article ou commentaire qui fait penser a une imbrication de hook sans éditer les fichiers d'un template pour l'intégrer directement, pour du reste les templates (pour les thèmes) et les pages statiques permettent déjà beaucoup de possibilités.

je-evrard

Je fais une syntèse des points qui me semble importants :

jerry a écrit:

- shortcode générique (Carte OSM) -> config dans data
- shortcode spécifique à un thème -> config dans thème

Entirement d'accord avec ça (comme quoi )
- shortcode générique (Carte OSM) -> config dans data -> éditable dans le plugin
Je serais plus pour un chemin data/plugins/spxshorcodes/config.php ???

- shortcode spécifique à un thème -> config dans thème -> éditable dans le plugin

Oui Francis, sous Wordpress, en général, les plugins ont leurs propres shortcodes et non un plugin shortcode qui gère tout.

En effet sous wordpress je trouve que c'est un peu le bordel à ce niveau. Tout le monde fait sa cuisine... Des noms de shortcode par milliers.

Francis a écrit:

Ou même encore plus direct, définir un shortcode qui écrit un callhook avec le nom du plugin en paramètre, pour pouvoir afficher le contenu de n'importe quel autre plugin.

Je trouve l'idée très intéressante d'aller chercher en "get" le contenu d'un plugin via un shortcode (à définir). Je regarde ton code Francis dès réception.

Ca avance et c'est bien.

je-evrard

Juste un point important :
Les shortcodes c'est bien, mais encore faut-il le connaitre son nom et ses paramètres quand on les utilises dans un article.

Mon idée serait d'intégrer un plugin dans spxtynimce qui irait lire l'ensemble des shortcodes des fichiers de config (de spxshortcode et du thème donc) et d'en propser la lise avec les propiétés dans un bouton de l'éditeur de tinymce du plugin spxtynimce (une sorte de plugin générique de shortcodes qui se transforme en fonction de ce qu'il y trouve).

Pas facile à faire, mais je pense que ça peux etre vraiment bien à l'usage. Je pense passer du temps à cogiter la dessus car ça me semble très important.


Un lien intéressant : wordpress-shortcodes-page-builders

Francis

Avec en plus, une interface utilisateur en vue, ça promet !
Effectivement, ça doit être assez délicat à mettre en place, mais les shortcodes eux-mêmes sont déjà une belle avancée.

Jerry Wham

@je-evrard : ah tu vois quand tu veux
Sinon, plutot que data/plugins/spxshorcodes/config.php je verrais à la place data/plugins/spxshorcodes/lafonctiondemoncode/config.php ou data/plugins/spxshorcodes/lafonctiondemoncode.php afin de mieux s'y retrouver s'il y en a beaucoup

je-evrard

jerry a écrit:

Sinon, plutot que data/plugins/spxshorcodes/config.php je verrais à la place data/plugins/spxshorcodes/lafonctiondemoncode/config.php ou data/plugins/spxshorcodes/lafonctiondemoncode.php afin de mieux s'y retrouver s'il y en a beaucoup

Tu penses à une gestion de librairy. Pourquoi pas ? Avec la possibilite de creer, modifier supprimer, activer au travers du plugin les differentes lib. Ca peux etre hyper puissant !!