Share
Einer der Hauptgründe, warum WordPress die beliebteste verfügbare CMS-Plattform ist, ist die schiere Anpassungsfähigkeit, die es bietet. Heute werden wir den Prozess der Integration einer dieser beliebten Funktionen, Kurzcodes, auf benutzerfreundlichste Weise in unser Thema untersuchen.
Obwohl einige Billionen Optionen zur Auswahl stehen, hat WordPress als König der CMSs und Blogging-Plattformen mit seiner unglaublichen Flexibilität die Krone auf sich gezogen. Ein Shortcode ist eine der Funktionen, die die Benutzerfreundlichkeit des Systems verbessern.
Bei den meisten Implementierungen müssen Sie sich jedoch noch an den Shortcode selbst erinnern. Wenn Sie ein Meisterstück eines Themas erstellt haben, sollte die Verwendbarkeit nicht wirklich hinterherhinken. Ich zeige Ihnen, wie Sie Shortcodes erstellen und dann in den Editor integrieren, sodass der Benutzer nicht durch Ihre Dokumente blättern muss, um sich die korrekte Syntax für das Einbetten einer Schaltfläche zu merken. Fasziniert? Lass uns gleich loslegen!
Es heißt a Kurzcode und es ist Teil der Basis-WordPress-Installation, seit es Version 2.5 ist. Grundsätzlich sind diese ähnlich bbcodes Wird in beliebter Message Board-Software verwendet: Leichtes Markup zum Formatieren von Inhalten.
Hier können Sie Ihre eigenen Codes definieren, die innerhalb Ihres Designs verwendet werden sollen. Im Gegensatz zu BBCodes werden Shortcodes jedoch hauptsächlich dazu verwendet, den Benutzer vor langwierigen Markierungen und möglichen Fehlern zu schützen. Durch die Verwendung eines Shortcodes, z. B. einer Schaltfläche, muss sich der Benutzer nicht an die komplizierten Markierungen erinnern, die zum Erstellen der Schaltfläche eingegeben werden müssen. Alles in allem ist dies ein wichtiger Faktor für die Benutzerfreundlichkeit und möglicherweise auch die Freundlichkeit eines Themas.
Wenn Sie mit dem Konzept eines BBCodes und Shortcode nicht vertraut sind, sieht die einfachste Version so aus:
[meine Gallerie]
Wenn Sie jemals eine Galerie mit WordPress eingebettet haben, haben Sie bereits einen Kurzcode verwendet!
Es gibt zwei weitere Varianten, mit denen Sie vertraut sein sollten.
[button] Inhalt [/ button] [link to = "www.net.tutsplus.com"] NetTuts + [/ link]
Wir werden jede dieser Varianten zuerst implementieren, bevor wir uns auf andere, lebhaftere Dinge konzentrieren.
Jede Shortcode-Implementierung erfordert einen zweistufigen Prozess:
Unabhängig von der Komplexität des Shortcodes bleiben die Kernschritte gleich.
Wir werden zuerst lernen, wie man einen möglichst einfachen Shortcode implementiert. Nehmen wir als Beispiel an, Sie beenden jeden Beitrag mit einem üblichen Abmeldetext. Kopieren und Einfügen ist möglicherweise eine einfache Methode, aber Sie fühlen sich dabei wie ein Luddite. Beheben wir das mit etwas WP-Geschicklichkeit!
Wenn nicht anders angegeben, gilt der gesamte Code unten Functions.php
Die Hauptfunktion kümmert sich um die Kernlogik Ihres Shortcodes. Wir müssen dies zuerst erstellen, bevor wir fortfahren können.
function signOffText () return 'Vielen Dank für das Lesen! Und vergessen Sie nicht, unseren RSS-Feed zu abonnieren. ';
Der nächste Schritt besteht, wie Sie vielleicht annehmen, im WordPress-System, um den Kurzcode diesem Text zuzuordnen. Dies geschieht mit der add_shortcode Methode.
Accentsconagua
add_shortcode ('signoff', 'signOffText'); Ja, es genügt ein einziger Einliner. Der erste Parameter definiert den Shortcode, den Sie im Editor verwenden, während der zweite auf die Funktion verweist, die wir vor einem Moment erstellt haben.
Hinweis: Das add_shortcode Methode kommt immer nach der Handler-Methode.
Das sollte es tun. Schreib einfach [Ausloggen] In Ihrem Editor wird WordPress den Text bei Bedarf dynamisch ersetzen.
Als nächstes wollen wir uns eine andere Variante ansehen: einige Inhalte mit Markierungen umschließen. Sie müssten es so benutzen:
[Zitat] etwas Text [/ Zitat]
Die Hauptfunktion muss hier ein wenig geändert werden. Wir stellen fest, dass unsere Funktion zwei Parameter erhält: Attribute durch das atts Variable und den Inhalt selbst durch die Inhalt Variable.
Der nächste Schritt besteht darin, die Markierung um den ausgewählten Text zurückzugeben.
Funktionszitat ($ atts, $ content = null) return '"'. $ content.'"';
Dieser Schritt bleibt gleich:
add_shortcode ("quote", "quote"); Ich benenne meine Kurzcodes gerne genau wie die primären Funktionen, es sei denn, die Benennung wird unhandlich. Möglicherweise haben Sie Ihre eigenen Stile. Sie können also das Benennungsschema ändern. Es gibt keine anerkannten Best Practices.
Zum Schluss werden wir auch einen Blick auf das Hinzufügen von Attributen zum Mix werfen. Sie müssten es so benutzen:
[link to = "www.net.tutsplus.com"] NetTuts + [/ link]
Die primäre Funktion muss überarbeitet werden, um alle neuen Funktionalitäten zu handhaben. Zuerst werden die übergebenen Attribute mit dem Shortcode und den erwarteten Attributen zusammengeführt. Sie können hier mehr über den Prozess erfahren.
Der letzte Schritt besteht wie immer darin, den gewünschten Markup-Wert zurückzugeben, nachdem er entsprechend aufgefüllt wurde. Hier habe ich die Daten verwendet, die mit dem Shortcode gesendet wurden, um die Anker zu füllen href Attribut sowie Inhalt.
Funktionsverknüpfung ($ atts, $ content = null) extract (shortcode_atts (array ("to" => 'http://net.tutsplus.com'), $ atts)); return ''. $ content. ''; Dieser Schritt bleibt unverändert, aber unerlässlich. Denken Sie daran, dass WordPress ohne diese Funktion nichts mit dem Shortcode zu tun hat.
add_shortcode ("link", "link"); Hier erwarten Sie, dass dieses Tutorial endet, aber nein, Sie haben falsch geraten. Wie ich bereits erwähnt habe, nehmen Shortcodes viele Schmerzen weg, aber es gibt nur wenige Fallstricke. Zum einen muss sich der Benutzer die verfügbaren Shortcodes merken, um sie sinnvoll nutzen zu können.
Wenn Sie nur ein Paar haben, ist das alles gut, aber bei vielen themengeladenen Themen wird das Erinnern an jedes Thema zur Pflicht. Um dies zu korrigieren, fügen wir der TinyMCE-Oberfläche direkt Schaltflächen hinzu, sodass der Benutzer einfach auf die Schaltfläche klicken kann, um alles zu erledigen.
Als Beispiel werde ich Ihnen zeigen, wie Sie die zweite Variante in den Editor einfügen. Ich hoffe, Sie können diese Informationen für Ihre spezifische Funktionalität extrapolieren.
Der erste Schritt in diesem Prozess ist das Einbinden in WordPress und das Hinzufügen unseres Initialisierungscodes. Der folgende Ausschnitt sorgt dafür. Denken Sie daran, dass dies alles in Ihrem sein muss Functions.php Datei.
add_action ('init', 'add_button'); Wir bitten WordPress, die aufgerufene Funktion auszuführen add_button wenn die Seite zum ersten Mal geladen wird. add_action ist unser Haken in WordPress 'Interna.
function add_button () if (current_user_can ('edit_posts') && current_user_can ('edit_pages')) add_filter ('mce_external_plugins', 'add_plugin'); add_filter ('mce_buttons', 'register_button'); Dieses winzige Codefragment wird ausgeführt, wenn die Seite geladen wird. Wir prüfen oben, ob der Benutzer die erforderliche Berechtigung zum Bearbeiten einer Seite oder eines Beitrags besitzt, bevor Sie fortfahren.
Sobald dies erledigt ist, verbinden wir zwei unserer [noch zu schreibenden] Funktionen mit bestimmten Filtern. Beide sind tatsächlich über WordPress in die Frontend-Architektur von TinyMCE eingebunden. Der erste wird ausgeführt, wenn der Editor die Plugins lädt, während der zweite ausgeführt wird, wenn die Schaltflächen gerade geladen werden.
Im obigen Beispiel fahren wir unabhängig davon, in welchem Modus sich der Editor befindet. Wenn Sie ihn nur anzeigen möchten, wenn sich der Editor beispielsweise im visuellen Modus befindet, müssen Sie eine schnelle Überprüfung durchführen. Ob get_user_option ('rich_editing') bewertet zu wahr, Sie befinden sich im visuellen Modus. Ansonsten HTML-Modus. Normalerweise neige ich dazu, diese Schaltflächen nur im visuellen Modus hinzuzufügen, aber hier mischen und passen.
Funktion register_button ($ buttons) array_push ($ buttons, "quote"); $ -Tasten zurückgeben;
Die Funktion fügt lediglich unser Shortcode zum Tastenfeld hinzu. Sie können auch einen Trenner zwischen Ihrer neuen Schaltfläche und den vorherigen Schaltflächen hinzufügen, indem Sie ein | übergeben Vor.
Funktion add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; return $ plugin_array; Mit dem obigen Ausschnitt können TinyMCE und WordPress wissen, wie mit dieser Schaltfläche umzugehen ist. Hier kartieren wir unsere Zitat Kurzcode zu einer bestimmten JavaScript-Datei. Wir nehmen das get_bloginfo Methode, um den Pfad zur aktuellen Vorlage abzurufen. Aus organisatorischen Gründen behalte ich mein tinyMCE-Plugin zusammen mit meinen anderen JS-Dateien.
Nun zum letzten Teil unserer Bemühungen. Denken Sie daran, dass der folgende Code in eine Datei mit dem Namen gespeichert wird customcodes.js im JS-Verzeichnis Ihres Designs abgelegt. Wenn Sie dachten, es wäre in Functions.php Wie der gesamte Code oben, kein Cookie für Sie!
(function () tinymce.create ('tinymce.plugins.quote', init: function (ed, url)) ed.addButton ('quote', title: 'Angebot hinzufügen', image: url + '/ image .png ', onclick: function () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] '););, createControl: function (n, cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Sieht ein wenig komplex aus, aber ich versichere Ihnen, es ist alles andere als. Lassen Sie es uns in kleinere Abschnitte unterteilen, um das Parsen zu erleichtern.
Zuerst Tagesordnung ist eine schnelle Schließung, um den globalen Namensraum nicht zu verschmutzen. Drinnen rufen wir die an erstellen Methode, um ein neues Plugin zu erstellen und den Namen und andere sortierte Attribute zu übergeben. Der Kürze halber nenne ich mein Plugin Zitat.
Einmal drinnen definieren wir das drin Funktion, die bei der Initialisierung ausgeführt wird. ed verweist auf die Instanz des Editors, während url verweist auf die URL des Plugin-Codes.
Die meisten Attribute sollten ziemlich selbsterklärend sein. Beachten Sie, dass das übergebene Bild relativ zum übergeordneten Ordner der JS-Datei ist, in der sich der Code befindet. Hier wäre es Themenverzeichnis / js.
Nächster Dann erstellen wir den Event-Handler für diese Schaltfläche über die onclick Funktion. Der einzeilige Inhalt, den er enthält, erhält im Wesentlichen den ausgewählten Text und umschließt ihn ohne Shortcode. setContent und getContent sind Hilfsmethoden, die von tinyMCE bereitgestellt werden, um den ausgewählten Text zu bearbeiten.
Endlich, In der letzten Zeile fügen wir das frisch erstellte Plugin zum tinyMCE-Plugin-Manager hinzu. Achten Sie auf die Namen, die Sie in jedem Schritt verwenden. Es ist fehleranfällig, wenn Sie nicht aufpassen. Und das ist es auch schon! Wir sind fertig! Laden Sie den Editor und vergewissern Sie sich, dass Ihre neue Schaltfläche funktioniert.
Und da hast du es. Wir haben Shortcodes sehr benutzerfreundlich in ein WordPress-Theme integriert. Hoffentlich haben Sie dieses Tutorial als hilfreich empfunden. Sie können diesen Code an anderer Stelle in Ihren Projekten wiederverwenden und in den Kommentaren einschalten, wenn Sie Hilfe benötigen.
Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Viel Spaß beim Kodieren und vielen Dank für das Lesen!
