Suchen Sie nach einer Möglichkeit, Medien-Schaltflächen zum automatischen Hinzufügen von Shortcodes zu erstellen? Dieser Ausschnitt fügt ein Dropdown-Menü mit einer automatisch generierten Liste Ihrer Shortcodes hinzu.
Anweisungen:
Fügen Sie diesen Code zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin ein.
Bearbeiten Sie optional die Array-Zeile 10, um bestimmte Shortcodes auszuschließen.
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>';
}
Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzufügen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.
Wenn Ihnen dieser Code-Ausschnitt gefallen hat, ziehen Sie bitte in Betracht, unsere anderen Artikel auf der Website zu lesen, wie zum Beispiel: Shortcodes Ultimate Review: Shortcodes schnell und einfach zu WordPress hinzufügen.
Hallo, sehr nützliches Skript, habe noch eine Frage zur Verbesserung,
es werden vorhandene Shortcode-Syntaxen mit Klammern angezeigt, aber nicht genau verfügbare IDs.
Zusätzlich bräuchte ich eine umgekehrte bedingte Logik, um nur von einigen Plugins als 'einzuschließen' anzuzeigen. Können Sie einen Ansatz oder ein Skript vorschlagen?
Mit freundlichen Grüßen
Übrigens, wenn Sie anpassen möchten, was ausgegeben wird, können Sie Folgendes tun:
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.”;
}
}
}
Hallo Emmanuel,
Ich habe versucht, Ihrem Tutorial in den Kommentaren zu folgen, und bin etwas verwirrt über das Symbol (""") in "". $key. "", können Sie erklären, wofür es ist?
Tolles Beispiel, vielen Dank, genau das, was ich brauchte, um meine benutzerdefinierten Shortcodes anzuzeigen! Weiter so mit den tollen Beiträgen :)
Yo Kev, toller Beitrag! Hat mir viel Programmieraufwand und viel Schmerz bei der Suche nach komplizierteren Wegen erspart. Ich hatte eine Frage. Beim Einfügen des Codes funktioniert es großartig. Ich wollte nur wissen, ob es stattdessen als Schaltfläche angezeigt werden kann.
Dies ist nichts, was für diesen Ausschnitt funktionieren würde, da die meisten WordPress-Installationen viele, viele Shortcodes hätten. Dies ist einer der Gründe, warum ich ein Dropdown-Menü verwende, da es eine Liste mit unzähligen Elementen enthalten könnte. Lassen Sie mich wissen, wenn ich Ihre Frage falsch interpretiere,
anstatt echo '
"Shortcode"
';echo '
""
';Ich bin mir nicht sicher, ob ich folgen kann. Benutzen Sie das Formular unter http://wpsnip.com/contact/ und senden Sie mir eine E-Mail.
Ich möchte, dass es ein Bild ausgibt, anstatt des Shortcodes für die Option
Ich glaube, ich habe die Frage falsch gestellt. Ich möchte nicht, dass die Optionen innerhalb des Dropdowns als Button angezeigt werden, sondern dass das eigentliche Dropdown-Menü als Button angezeigt wird, sodass, wenn ich darauf klicke, ein Menü mit allen Shortcodes angezeigt wird.
Toller Snippet, aber er funktioniert nicht für komplexere Shortcodes. Zum Beispiel möchte ich einen Quell-Shortcode mit zwei Arrays einfügen: Name und Link, sodass der Name angezeigt und auf die Seite verlinkt wird, auf die er verweist. Wenn es eine Lösung gibt, lassen Sie es mich bitte wissen!
” Das ist ein guter Rat” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus
Super, freut mich, dass Ihnen der Snippet gefällt.
Hallo Kevin,
Gibt es eine Möglichkeit, das Dropdown-Menü der Medientaste in die 3. oder 2. Zeile des TinyMCE-Editors zu verschieben? Da es mit dem aktualisierten Uploader (mit v3.3) nicht gut aussieht.
Danke,
Hoko
Und jetzt habe ich es überprüft, es funktioniert jetzt mit WordPress 3.3… 🙁
………*funktioniert nicht….
Entschuldigung nochmals, es funktioniert ordnungsgemäß mit WordPress 3.3.
Aber ich frage immer noch, ob wir das Dropdown von der Stelle der Medientasten in eine der Zeilen der TinyMCE-Schaltflächen verschieben können?
Danke Kevin
+1 für diese Anfrage, das Dropdown in die eigentliche Menüleiste des TinyMCE-Editors einzufügen. Übrigens, dies ist ein großartiger Snippet und genau das, wonach ich suche, ABER ich möchte, dass das Dropdown verschoben wird. Es sieht neben der Upload-Medientaste etwas fehl am Platz aus und bricht ein wenig mit dem CSS.
Nicht einfach, nein,
Toller Ausschnitt Kevin, danke dafür. Ich habe eine Frage – im Moment erlaubt dies nur, den öffnenden und schließenden Shortcode-Tag nebeneinander einzufügen, aber es wäre noch besser, wenn man einen Textblock auswählen und die öffnenden und schließenden Tags diesen Text umschließen lassen könnte. Macht das Sinn? Glaubst du, das wäre möglich?
Hallo Matt, natürlich war das nur eine frühe Version, das meiste davon ist jQuery, das diesen Teil erledigen wird. Ich bin mir nicht sicher, wann ich eine aktualisierte Version veröffentlichen werde. Aber ich werde versuchen, mich so schnell wie möglich darum zu kümmern.
… um sich die Shortcodes zu merken, also suchte ich im Internet und fand Kevins Chards Snippet unter http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-s… um eine Shortcode-Dropdown in den Editor zu integrieren. Ich habe Kevins Code modifiziert, um mit […]
Wenn ich den Javascript-Code von hier mische und ihn mit dem „Add custom media_buttons for shortcode selection“-Javascript austausche, funktioniert es super 🙂 danke.. trotzdem.. die Auswahl stößt leicht an den oberen Rand meines Editors und verdeckt die Werkzeuge dort leicht.
Das ist nicht so schlimm, sieht aber komisch aus.. ich habe CSS versucht, aber es funktioniert nicht
Hast du eine Idee, wie ich den „media-buttons“-Div von functions.php aus beeinflussen kann?
(nur damit ich einen margin-bottom: 10px Wert hinzufügen kann)
Trotzdem danke
Du kannst Dinge mit id=“sc_select“ stylen, der folgende Code fügt CSS hinzu. Ich bin mir nicht sicher, ob das die Dinge repariert, aber es hilft dir, mit dem CSS herumzuspielen, um die Dinge zu sortieren.
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');
Danke Mann.. ich habe das irgendwie herausgefunden, aber Select kann „margin“, da es sich innerhalb eines Divs befindet.. das ist aber in Ordnung, ich habe einfach font-size auf 11px gesetzt und es sitzt gut über der Editor-Symbolleiste.
Danke für diesen tollen Code 🙂
Kein Problem, freut mich, dass dir das Snippet gefällt.
Gibt es eine Möglichkeit, die Reihenfolge festzulegen, in der es im #media-buttons Div angezeigt wird? Im Moment scheint es nach links geräumt zu sein und sprengt meinen Haupttextbereich.
Killer kleines Code-Snippet.
c.
Sollte direkt neben dem Hinzufügen-Medien-Symbol über der Editor-Symbolleiste sein, wie auf dem Bild oben, ist es bei dir nicht so?
Entschuldigung, wenn ich etwas sehr Offensichtliches übersehe, aber was bewirkt das Einfügen des Shortcodes? Gibt es Screenshots dazu? Danke.
Hallo Cliff
Shortcodes oder ein wenig Code, den Sie zu Ihren Beiträgen hinzufügen können, sind eine kurze Möglichkeit, Funktionalität oder wirklich alles hinzuzufügen. Zum Beispiel können Sie mit dem Link unten mit ein wenig Code einen iFrame hinzufügen. [ iframe url=”http://wpsnipp.com” ]
http://wpsnipp.com/index.php/functions-php/iframe-shortcode-for-posts-and-pages/
WordPress hat auch einige integrierte Shortcodes wie [ gallery ]. Diese Seite bietet weitere Details zum Gallery-Shortcode.
http://codex.wordpress.org/Gallery_Shortcode
Der obige Code in diesem Beitrag erstellt jedoch eine Liste der verfügbaren Shortcodes, sodass Sie sie auswählen und zu Ihren Beiträgen hinzufügen können. Ich hoffe, das erklärt die Dinge etwas besser.
Ich weiß, was Shortcodes sind (und ich liebe sie, weil man dann im visuellen Editor bleiben kann – wie bei Ihrem iFrame, was großartig ist), aber ich habe mich gefragt, ob irgendwo zusätzlicher Code erforderlich ist. Ich frage, weil ich [/php] und [/html] gesehen habe und mir über den Anwendungsfall nicht sicher war. Geben Sie PHP- oder HTML Code direkt in den visuellen Editor ein? Danke.
Dieser Code erstellt eine Liste der Shortcodes, die Sie bereits in Ihrer WordPress-Installation haben. Wenn Sie also [/php] oder [/html] haben, dann ist das spezifisch für Sie.
Verstanden. Ich habe diese nicht in meiner Shortcode-Liste – ich habe sie in Ihrem Screenshot am Anfang dieses Beitrags gesehen.
Basierend auf Ihrem Kommentar, wie unterscheidet sich diese Funktionalität von dieser (http://wpsnipp.com/index.php/template/print-a-list-of-all-supported-shortcodes/)?
Irgendwelche Tipps, wo ich PHP- oder HTML-Shortcodes zum Verwenden finden kann?
Es ist sehr anders, der Link zum geposteten Snippet verwendet nur print_r und gibt das Array selbst aus. Der obige Code fügt Ihrem Editor-Bildschirm ein Menü mit einer Liste der verfügbaren Shortcodes hinzu. Wenn Sie einen auswählen, wird er dem Editor hinzugefügt.
Hallo Kevin,
Ich persönlich denke, dass dies eines der besten und benutzerfreundlichsten Codes sein wird, die ich bei der Erstellung einer neuen Website verwenden werde.
Es wäre jedoch wirklich großartig, eine zweite Auswahlbox zu haben, die alle Einträge (Shortcode-Werte) irgendwie auflistet.
Mit freundlichen Grüßen,
Cor
Cool, freut mich, dass es Ihnen gefällt. Können Sie das zweite Auswahlmenü etwas detaillierter erklären?
WordPress enthält bereits jQuery… es muss nicht zweimal vorhanden sein.
Und wenn Sie es aus irgendeinem Grund hinzufügen, sollte es mit wp_enqueue_script("jquery") über wp_head() aufgerufen werden.
@vagrantradio:disqus Das ist ein guter Rat.
Hallo Mark, wie geht es dir?
Das ist sehr wahr. Ich habe die Aktualisierungen am Snippet vorgenommen, ich weiß nicht, was heute Morgen in meinem Müsli war.
Danke für den Hinweis.
[…] Medien-Symbol hinzufügen. Bearbeiten Sie value=, um den eingefügten Text zu ändern. Dieser Ausschnitt wurde kürzlich aktualisiert (Shortcode-Auswahl). PHP add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo […]