Zoek in blogs & begrippen

Plugin voor Frontend tekstbewerking

Hieronder een uitleg voor een plugin om als je ingelogd bent in Wordpress tekst te bewerken op de pagina (frontend) zelf.

Deze plugin voegt een bewerkknop toe aan blogartikelen op de frontend van een WordPress-website, zodat gebruikers met de juiste rechten een artikel direct kunnen aanpassen zonder naar het WordPress-dashboard te gaan.

De plugin laadt zijn scripts en stijlen alleen op enkelvoudige blogposts, én alleen als de ingelogde gebruiker de rechten heeft om posts te bewerken (edit_posts). Hiervoor wordt ook wp_enqueue_editor() aangeroepen, wat de volledige TinyMCE-editor van WordPress beschikbaar maakt op de frontend. Via wp_localize_script worden de AJAX-URL en een beveiligingstoken (nonce) doorgegeven aan het JavaScript.

Onderaan de inhoud van het artikel verschijnt een knop “Bewerk artikel”. Via de jQuery-functie slideToggle klapt er een bewerkpaneel open of dicht als je daarop klikt. In dat paneel zit een volwaardige wp_editor-instantie, voorgevuld met de huidige inhoud van het artikel, inclusief een knop om mediabestanden toe te voegen.

Als de gebruiker op “Opslaan” klikt, leest het JavaScript de inhoud op uit de TinyMCE-editor met editor.getContent() en stuurt die via een AJAX-verzoek naar de server. Er wordt gecontroleerd of TinyMCE überhaupt beschikbaar is, omdat dit niet altijd gegarandeerd het geval is op de frontend.

Aan de serverkant verwerkt de AJAX-handler het opslaan. Eerst wordt de nonce gevalideerd als beveiligingscontrole, daarna worden de rechten nogmaals gecheckt, en tot slot wordt de nieuwe inhoud opgeschoond met wp_kses_post — wat gevaarlijke HTML verwijdert maar geldige opmaak behoudt — voordat het artikel wordt bijgewerkt met wp_update_post. Bij succes krijgt de gebruiker de melding “Opgeslagen” te zien.

Hieronder de download:

Inhoudsopgave