Ich habe diese Frage vor etwa einem Jahr gestellt und hoffe, dass es eine einfache Lösung gibt, mit der ich mein Ziel erreichen kann. Also hier geht es:
Ich benutze oft Shortcodes im Admin-Editor, aber wenn ich sie dem Client übergebe, verstehen sie oft nicht, wie sie funktionieren.
Was ich suche, ist eine Lösung, die einfach automatisch die zugehörige Ausgabe von Shortcodes im Admin-WYSIWYG-Editor rendert.
Aus einer visuellen Perspektive möchte ich, dass dies ähnlich angezeigt wird, wenn die Zeile "more" angezeigt wird oder wenn ein Bild im Editor angezeigt wird. Damit meine ich, dass der Benutzer die Ausgabe sehen, sie aber nur löschen, aber den Inhalt des gerenderten Shortcodes nicht bearbeiten kann.
Antworten:
Es ist eigentlich gar nicht so schlecht, das zu tun, wonach du fragst. Dies sollte ungefähr eine Stunde dauern, um Ihre erste und 10 Minuten, um nachfolgende zu tun.
Als letztes erstellen Sie ein TinyMCE-Plugin. Hier ist, womit du dich ausrüsten solltest:
Sie haben jetzt alle Werkzeuge, um es zu erledigen! Von alledem ist der Code, der für Sie am interessantesten ist, dieser Block im WP-Beispielcode:
Hier wird der Shortcode für eine Galerie durch ein
img
Tag ersetzt. Dasimg
Tag hat die Klassewp-gallery
, die von dem hier zu findenden CSS formatiert wird .Edit 2016-04-06: Aktualisierte Inhalte und Links für TinyMCE 4 und WordPress 4.4
quelle
Dies ist keine vollständige Antwort, nur eine Designrichtung. Ich denke, der beste Ansatz ist ungefähr so:
Im Admin Beitrag bearbeiten
Rippen Sie alle Shortcodes aus dem gespeicherten Beitrag und rendern Sie ihn, abgesehen vom Editor, in einer Metabox . Stellen Sie sicher, dass sie in derselben Reihenfolge angezeigt werden, in der die Shortcodes im winzigen Editor vorkommen.
In tinyMCE Javascript API
Erstellen Sie eine jQuery-Funktion. Wenn der Benutzer auf einen Shortcode klickt, wird der HTML-Code aus der Metabox in den Editor übertragen. Und umgekehrt. Die Bestellung selbst sollte als Assoziation in Ordnung sein, aber ich bin mir nicht sicher, ob ich Shortcodes beifüge. Es gibt jedoch viele Möglichkeiten, eine schöne ID-Verbindung zu gestalten. Die Aktualisierung von Shortcodes kann mit Ajax im laufenden Betrieb erfolgen.
Speichern Sie niemals den gerenderten Shortcode-Status
Bevor Sie die Editoren wechseln, Entwürfe speichern, automatische Entwürfe erstellen und veröffentlichen, rufen Sie die API auf, um die Wiederherstellung auszulösen, damit der gerenderte Shortcode-Status nie gespeichert wird.
Dies ist möglich, aber Sie müssen mit der tinyMCE-API vertraut sein, um zu verstehen, wo und wann Sie auf den Inhalt des Editors zugreifen können, und sich in Javascript-Aktionen einbinden können, bevor Sie "speichern" und mehr.
Es können sich mehrere tinyMCE-Editoren auf demselben Bearbeitungspost befinden.
Der Restore-Teil kann anhand des
[gallery]
Shortcodes untersucht werden. Das Anklicken[MY_SHORTCODE]
muss jedoch durch einige jQuery-Tricks erfolgen.Greifen Sie im Skript admin_footer auf den Inhalt zu, mit dem der Cursor aktiv ist:
ist ein Hinweis, wie man anfängt.
quelle
Ich suchte nach einer Möglichkeit, Shortcodes grafisch anzuzeigen und zu optimieren. Und jetzt habe ich endlich ein Tutorial gefunden, das genau das macht: https://generatewp.com/take-shortcodes-ultimate-level/
Ich füge die Beschreibung hinzu, damit Suchmaschinen sie abholen:
quelle