Vous cherchez un moyen de créer des boutons de médias pour ajouter automatiquement des shortcodes ? Cet extrait ajoutera un menu déroulant avec une liste générée automatiquement de vos shortcodes.
Instructions :
Ajoutez ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site
Modifiez éventuellement la ligne 10 du tableau pour exclure certains shortcodes.
add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
global $shortcode_tags;
/* ------------------------------------- */
/* enter names of shortcode to exclude bellow */
/* ------------------------------------- */
$exclude = array("wp_caption", "embed");
echo ' <select id="sc_select"><option>Shortcode</option>';
foreach ($shortcode_tags as $key => $val){
if(!in_array($key,$exclude)){
$shortcodes_list .= '<option value="['.$key.'][/'.$key.']">'.$key.'</option>';
}
}
echo $shortcodes_list;
echo '</select>';
}
add_action('admin_head', 'button_js');
function button_js() {
echo '<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#sc_select").change(function() {
send_to_editor(jQuery("#sc_select :selected").val());
return false;
});
});
</script>';
}
Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière d'ajouter correctement des extraits de code dans WordPress, afin de ne pas endommager accidentellement votre site.
Si vous avez aimé cet extrait de code, n'hésitez pas à consulter nos autres articles sur le site, tels que : Shortcodes Ultimate Review : Ajoutez des shortcodes à WordPress rapidement et facilement.
Bonjour, script très utile, j'ai encore une question pour l'amélioration,
il affiche la syntaxe des shortcodes existants entre crochets, mais pas exactement les identifiants disponibles.
De plus, j'aurais besoin d'une logique conditionnelle inverse pour n'afficher que certains plugins comme « à inclure », pouvez-vous proposer une approche ou un script ?
Cordialement
au fait, si vous voulez personnaliser ce qui est imprimé, vous pouvez faire quelque chose comme ceci
foreach ($shortcode_tags as $key => $val){
if(!in_array($key,$exclude)){
if ($key==’button’){
$shortcodes_list .= “”.$key.””;
}elseif ($key==’focus’){
$shortcodes_list .= “”.$key.””;
}else{
$shortcodes_list .= ”.$key.”;
}
}
}
Salut Emmanuel,
J'ai essayé de suivre votre tutoriel dans les commentaires, et je suis un peu confus quant au symbole (""") dans "". $key."", pouvez-vous expliquer à quoi il sert ?
Excellent exemple, merci beaucoup, exactement ce dont j'avais besoin pour afficher mes shortcodes personnalisés ! Continuez à partager de bonnes choses :)
yo kev super article ! M'a épargné beaucoup de codage et beaucoup de douleur à chercher des articles avec des moyens plus compliqués de faire cela. J'avais une question. Lorsque j'insère le code, il fonctionne très bien. Je voulais savoir juste pour l'afficher comme un bouton à la place.
Ce n'est pas quelque chose qui fonctionnerait pour cet extrait car la plupart des installations WordPress auraient de nombreux shortcodes. C'est l'une des raisons pour lesquelles j'utilise un menu déroulant, car il pourrait contenir une liste d'un nombre indéterminé d'éléments. Faites-moi savoir si j'interprète mal votre question.
au lieu de cela echo ‘ “Shortcode”‘;
echo ‘ “”‘;
Je ne suis pas sûr de comprendre, utilisez le formulaire http://wpsnip.com/contact/ et envoyez-moi un e-mail.
je veux qu'il affiche une image au lieu du shortcode d'option
je pense que j'ai mal posé la question. Je ne veux pas que les options dans le menu déroulant s'affichent comme un bouton, mais que le menu déroulant lui-même s'affiche comme un bouton, de sorte que lorsque je clique dessus, il affiche un menu montrant tous les shortcodes.
Extrait génial mais il ne fonctionnera pas pour des shortcodes plus complexes. Par exemple, j'aime inclure un shortcode source avec deux tableaux : nom et lien, de sorte que le nom s'affiche et soit lié à la page vers laquelle il est dirigé. S'il y a une solution, faites-le moi savoir !
” ce sont de bons conseils” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus
Cool, content que vous aimiez l'extrait.
Salut Kevin,
Y a-t-il un moyen de faire passer le menu déroulant du bouton média à la 3ème ou 2ème ligne de l'éditeur tinymce ? Parce qu'avec le téléchargeur mis à jour (avec la v3.3), cela ne rend pas bien.
Merci,
Hoko
Et maintenant, j'ai vérifié, cela fonctionne maintenant avec WordPress 3.3… 🙁
………*ne fonctionne pas….
désolé encore, cela fonctionne correctement avec WordPress 3.3.
Mais je me demande toujours si nous pouvons déplacer le menu déroulant de la place des boutons média vers l'une des lignes de boutons de TinyMCE ?
Merci Kevin
+1 pour cette demande d'ajouter le menu déroulant dans la barre de menu réelle de l'éditeur TinyMCE. Au fait, c'est un excellent extrait et exactement ce que je cherche, MAIS j'aimerais que le menu déroulant soit déplacé. Il a l'air un peu déplacé juste à côté du bouton média de téléchargement et casse un peu le CSS.
Pas facilement non,
Excellent extrait Kevin, merci pour cela. J'ai une question – pour le moment, cela permet simplement de placer la balise de shortcode d'ouverture et de fermeture l'une à côté de l'autre, mais ce serait encore mieux si vous pouviez sélectionner un bloc de texte et que les balises d'ouverture et de fermeture enveloppent ce texte. Est-ce que cela a du sens ? Pensez-vous que ce serait possible ?
Salut Matt, bien sûr, ce n'était qu'une première version, c'est principalement JQuery qui fera cette partie. Je ne suis pas sûr quand je publierai une version mise à jour cependant. Mais j'essaierai de m'en occuper dès que possible.
[…] pour me souvenir des shortcodes, j'ai donc cherché sur internet et j'ai trouvé l'extrait de Kevin Chard sur http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-s… pour intégrer une liste déroulante de shortcodes dans l'éditeur. J'ai modifié le code de Kevin pour qu'il fonctionne avec […]
Quand je mélange le code Javascript d'ici et que je le remplace par le Javascript « Ajouter des boutons média personnalisés pour la sélection de shortcodes », cela fonctionne très bien 🙂 merci.. toujours.. la sélection heurte légèrement le haut de mon éditeur, cachant le haut de leurs outils.
Ce n'est pas si mal mais ça a l'air bizarre.. j'ai essayé le CSS mais ça ne marche pas
J'ai une idée comment je peux influencer la div "media-buttons" depuis mon functions.php ?
(juste pour que je puisse ajouter une valeur de margin-bottom: 10px)
Merci quand même
Vous pouvez styliser les éléments avec id="sc_select" le code suivant ajoutera du CSS. Je ne suis pas sûr que cela résolve les problèmes, mais cela vous aidera à jouer avec le CSS pour régler les choses.
function wps_add_my_css(){?>
#sc_select{margin-bottom:10px;}
< ?}
add_action( 'admin_head-post.php', 'tinymce_title_css');
add_action( 'admin_head-post-new.php', 'tinymce_title_css');
Merci mec... j'ai un peu compris ça mais le select peut avoir une "marge" puisqu'il est à l'intérieur d'un div... ce n'est pas grave, j'ai simplement défini la taille de la police à 11px et elle s'est bien placée au-dessus de la barre d'outils de l'éditeur.
Merci pour ce super code 🙂
De rien, content que vous aimiez cet extrait.
Y a-t-il un moyen de spécifier l'ordre dans lequel il apparaît dans le div #media-buttons ? Actuellement, il semble apparaître aligné à gauche et cela déforme ma zone de texte principale.
Petit extrait de code génial cependant.
c.
Il devrait juste être à côté de l'icône Ajouter un média au-dessus de la barre d'outils de l'éditeur, comme sur l'image ci-dessus, n'est-ce pas comme ça pour vous ?
Désolé si je rate quelque chose de très évident, mais que fait l'insertion du shortcode ? Y a-t-il des captures d'écran disponibles ? Merci.
Salut Cliff
Les shortcodes sont un petit bout de code que vous pouvez ajouter à vos articles, c'est une manière courte d'ajouter des fonctionnalités ou vraiment n'importe quoi. Par exemple, le lien ci-dessous vous permettra d'ajouter un iframe avec juste un peu de code. [ iframe url=”http://wpsnipp.com” ]
http://wpsnipp.com/index.php/functions-php/iframe-shortcode-for-posts-and-pages/
WordPress a également des shortcodes intégrés comme [ gallery ] cette page fournira plus de détails sur le shortcode de galerie.
http://codex.wordpress.org/Gallery_Shortcode
Cependant, le code ci-dessus dans ce post créera une liste des shortcodes dont vous disposez afin que vous puissiez les sélectionner pour les ajouter à vos articles. J'espère que cela explique les choses un peu mieux.
Je sais ce que sont les shortcodes (et je les adore, car ils permettent de rester dans l'éditeur visuel – comme votre iframe, qui est géniale), mais je me demandais si du code supplémentaire était requis quelque part. Je pose la question car j'ai vu [/php] et [/html] et je n'étais pas sûr de l'utilisation. Mettez-vous du code PHP ou HTML directement dans l'éditeur visuel ? Merci.
Ce code créera une liste des shortcodes que vous avez déjà dans votre installation WordPress, donc si vous avez [/php] ou [/html], alors c'est spécifique à vous.
Compris. Je ne les ai pas dans ma liste de shortcodes – je les ai vus sur votre capture d'écran au début de cet article.
Selon votre commentaire, en quoi cette fonctionnalité diffère-t-elle de ceci (http://wpsnipp.com/index.php/template/print-a-list-of-all-supported-shortcodes/) ?
Avez-vous des conseils pour obtenir des shortcodes PHP ou HTML à utiliser ?
C'est très différent, le lien vers l'extrait publié utilisera uniquement print_r et affichera le tableau lui-même. Le code ci-dessus ajoutera un menu à votre écran d'éditeur avec une liste des shortcodes disponibles. Lorsque vous en sélectionnerez un, il l'ajoutera à l'éditeur.
Bonjour Kevin,
Personnellement, je pense que ce sera l'un des meilleurs et des plus conviviaux morceaux de code que j'utiliserai lors de la création d'un nouveau site.
Ce serait cependant vraiment génial d'avoir une deuxième boîte de sélection qui liste toutes les entrées (valeurs de shortcode) d'une manière ou d'une autre.
Cordialement,
Cor
Cool, content que ça vous plaise, pouvez-vous expliquer un peu plus en détail le deuxième menu déroulant ?
WordPress inclut déjà jQuery… pas besoin de l'avoir deux fois.
Et si vous l'ajoutez pour une raison quelconque, il devrait être appelé avec wp_enqueue_script("jquery") avant wp_head().
@vagrantradio:disqus c'est un bon conseil.
Salut Mark, comment vas-tu,
C'est très vrai, j'ai fait les mises à jour du snippet, je ne sais pas ce qu'il y avait dans mes céréales ce matin.
Merci de m'avoir prévenu.
[…] ajouter l'icône média. Modifiez la valeur= pour changer le texte inséré. Cet extrait a été récemment mis à jour ( sélection de shortcode ).PHP add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo […]