Share
Vanaf versie 4.0 zijn er 18 ingebouwde API's in WordPress. Ze zijn allemaal extreem belangrijk voor verschillende aspecten van WordPress en samen helpen ze WordPress om het meest flexibele contentbeheersysteem ter wereld te zijn.
Een van deze API's is de QuickTags API, waarmee plug-in- en thema-ontwikkelaars nieuwe knoppen kunnen toevoegen aan de tekstmodus (meestal de HTML-modus genoemd) van de WordPress-editor. In deze zelfstudie gaan we leren wat de QuickTags-API is en hoe de API te gebruiken om nieuwe knoppen voor de HTML-editor te maken.
Ook al is het meer dan dat, WordPress wordt vaak gebruikt als een "content management-systeem" en WordPress moet gebruikers laten beheren de inhoud gemakkelijk en efficiënt. Daarom wordt WordPress geleverd met TinyMCE, een van de beste WYSIWYG-editors aller tijden en misschien wel de meest geschikte content-editor voor WordPress. TinyMCE biedt gebruikers een ongecompliceerde gebruikerservaring voor het bewerken van inhoud, die tegelijkertijd de inhoud bijna weergeeft als een exacte preview van wat ze gaan publiceren.
Maar sommige gebruikers houden er niet van om dat te zien. Sommige gebruikers zouden zelfs liever zien dat de broncode van de inhoud zo is dat ze volledige controle hebben over wat ze gaan publiceren. Of misschien staat de gebruiker in de "Visuele editor" en wil hij de broncode controleren en verifiëren. Dat is waar de "HTML-editor" in het spel komt. De HTML-modus van de WordPress-editor geeft de broncode van de inhoud weer en niets meer.
Er zijn knoppen bovenop de HTML-editor, die we "Quicktag-knoppen" noemen, en ze stellen ons in staat de inhoud te bewerken zonder terug te schakelen naar de visuele editor. Met de Quicktags API kunnen we nieuwe knoppen samen met de bestaande maken.
Het gebruik van de Quicktags API is heel eenvoudig, omdat het de kern is quicktags.js bestand heeft veel meer, we zullen (en moeten) maar één functie gebruiken: QTags.addButton ().
Als u het script als een apart bestand wilt doorgeven (het aanbevolen gebruik), moet u het onderstaande codefragment gebruiken:
Maar als u geen andere keus heeft dan het script inline af te drukken, kunt u dit doen met het volgende codefragment:
Best gemakkelijk, toch? Merk op dat we de admin_print_footer_scripts actie deze keer.
Accentsconagua
QTags.addButton () De QTags.addButton () functie heeft acht parameters:
QTags.addButton (id, display, arg1, arg2, access_key, title, priority, instance);
ID kaart (string, verplicht): Een unieke ID die de HTML zal zijn ID kaart waarde voor de Quicktag-knop. (Houd er rekening mee dat de ID-waarde voor elke knop automatisch wordt toegevoegd aan de tekenreeks 'Qt_content_'.)tonen (string, verplicht): Tekst die op de knop moet worden weergegeven.arg1 (string of functie, vereist): Een starttag die moet worden ingevoegd, of de naam van een terugbelfunctie.arg2 (string, optioneel): De laatste tag die indien nodig moet worden ingevoegd.toegangssleutel (string, optioneel): Toegangstoets voor de knop.titel (string, optioneel): De HTML titel waarde voor de knop.prioriteit (integer, optioneel): De plaats waar je knop wordt geplaatst-1 tot 9 voor de eerste plaats, 11 tot 19 voor de tweede plaats, 21 tot 29 voor de derde plaats, enzovoort.aanleg (string, optioneel): Een specifieke QuickTags-instantie om de knop alleen daar weer te geven, als er meer dan één QuickTags-instantie op de pagina is. (Als dit niet is ingesteld, wordt de knop toegevoegd aan alle instanties.)De QuickTags API lijkt in eerste instantie misschien eng en gecompliceerd (vooral als je JavaScript-kennis zwak is zoals ik), maar zoals je nu zult zien, hoef je je geen zorgen te maken over het schrijven van kleine stukjes code om Quicktag-knoppen te maken.
Laten we beginnen met iets eenvoudigs: stel dat je twee shortcodeknoppen gaat toevoegen: één met shortcode eerst en één zelfomsluitende shortcode daarna. Dit is wat je doet:
QTags.addButton ('infovenster', 'informatievak', '[infobox]', '[/ infobox]'); Zie je hoe gemakkelijk dit is? Het enige wat u hoeft te doen, is een ID, een knopnaam en de strings instellen om af te drukken wanneer op de knop wordt geklikt. Je kan ook niet stel het tweede argument in (vierde parameter) en druk een zelfomsluitende shortcode af:
QTags.addButton ('handtekening', 'handtekening', '[handtekening]'); Dat is alles wat er te weten valt over het basisgebruik van de Quicktag-knoppen!
Natuurlijk zijn niet alle Quicktag-knoppen gelijk gemaakt. U kunt eenvoudig insluitende en zelfsluitende Quicktag-knoppen maken, maar misschien moet u een knop maken die wat meer werk vereist. Dat is waar JavaScript-functies in het spel komen.
We zullen hier eenvoudige voorbeelden van laten zien, maar het is aan je fantasie om gecompliceerde Quicktag-knoppen te maken met JavaScript-functies.
Laten we nu twee korte voorbeelden geven. De eerste is de klassieker alarm knop:
QTags.addButton ('alert', 'alert', my_alert); function my_alert () alert ('Hallo Quicktag!'); Zoals je kunt raden, verschijnt er een "Hallo Quicktag!" bericht. Laten we nu iets doen met een prompt:
QTags.addButton ('my_prompt', 'alert', my_prompt); function my_prompt () var my_class = prompt ('Voer een klassenaam in:', "); if (my_class) QTags.insertContent (''); Deze is een beetje lastiger: het vraagt je om een klassenaam in te typen en drukt een div af met de klasse die je hebt opgegeven.
Zoals ik al zei, ziet de API er een beetje intimiderend uit. Maar zoals u kunt zien, is het gebruik ervan vrij eenvoudig, zelfs wanneer u het gebruikt om callback-functies te activeren. De HTML-modus heeft een aantal zeer toegewijde gebruikers, en ze zouden het erg op prijs stellen als je een knop of twee invoert bij het ontwikkelen van een thema of een plug-in.
Wat is uw mening over de QuickTags API? Zou je overwegen om het te gebruiken, of heb je nog iets anders toe te voegen aan deze tutorial? Vertel ons wat je denkt door hieronder te reageren. En als je het artikel leuk vond, vergeet dan niet om het met je vrienden te delen!
