Share
Hoogstwaarschijnlijk weet u dat WordPress is gebundeld met de HTML WYSIWYG-editor, TinyMCE. De verscheidenheid aan functies en de mogelijkheid om door plug-ins te worden uitgebreid, maken dit de meest gebruikte WYSIWYG-editor ter wereld. WordPress maakt echter geen gebruik van alle functies. WordPress past het aan en bewaart alleen onderdelen die echt nuttig zijn voor gebruikers, zodat de gebruikersinterface niet kapot gaat. Dat betekent ook dat sommige functies, zoals knoppen, voor gebruikers zijn verborgen. U kunt de verborgen MCE-knoppen volledig inschakelen. Meestal zijn ze dat stylesheet, sub, sup toetsen. Als zelfs de verborgenen nog steeds niet voldoen aan je behoeften, dan moet je een TinyMCE-plug-in maken om je eigen te kunnen toevoegen. In deze tutorial zal ik je door de basis van het toevoegen van je WordPress Editor-knoppen leiden door een TinyMCE-plug-in te maken.
Zoals eerder vermeld, zullen we een nieuwe TinyMCE-plug-in maken, wiens taak het is om de nieuwe knoppen toe te voegen die we willen. Dus welke knoppen gaan we toevoegen? We zullen proberen om twee eenvoudige knoppen toe te voegen: Dropcap en recente berichten, waarbij de eerste je de mogelijkheid geeft om een geselecteerde letter om te zetten in een letter met een drop-cap, en de laatste geeft recente berichten weer. De code genereert de onderstaande knoppen.
Laten we een nieuwe map maken met de naam wptuts-editor-knoppen (natuurlijk kunt u dit naar iets anders wijzigen als u dat wilt) in uw themamap (ik gebruik TwentyTwelve). Ga door met het maken van twee nieuwe bestanden, wptuts.php die op maat gemaakte PHP roept, en de andere met de naam wptuts-plugin.js waar de JavaScript-codefragmenten zullen worden gevonden. Open tot slot je thema's functions.php bestand en voeg de nieuw gecreëerde toe wptuts.php bestand erin. Let op, vergeet niet om het pad precies te definiëren:
Accentsconagua
vereisen ('wptuts-editor-buttons / wptuts.php'); Dan moeten we een code voor die twee knoppen voorbereiden:
/ * Voeg deze code toe in style.css * / .dropcap float: left; lettertypegrootte: 80px; opvulling rechts: 7px; regelhoogte: 72 px;
add_shortcode ('recente berichten', 'wptuts_recent_posts'); functie wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('numbers' => '5',), $ atts)); $ rposts = nieuw WP_Query (array ('posts_per_page' => $ numbers, 'orderby' => 'date')); if ($ rposts-> have_posts ()) $ html = 'recente berichten
We gaan ervan uit dat wanneer gebruikers op de. Klikken recente berichten knop, zal de browser een dialoogvenster openen waarin gevraagd wordt naar het aantal berichten dat ze willen weergeven. Na het hebben van dat nummer vult de redacteur het als een argument in de bovenstaande shortcode. Als we bijvoorbeeld zeven recente berichten willen weergeven, wordt de shortcode als volgt gegenereerd:
[recente berichten nummers = "7" /]
Ervan uitgaande dat we de nieuwe plug-in al hadden, moeten we deze registreren bij WordPress om deze in de TinyMCE-editor te integreren. De code wordt hieronder getoond:
add_action ('init', 'wptuts_buttons'); function wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons'); function wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/Wptuts-editor-buttons/wptuts-plugin.js'; return $ plugin_array; function wptuts_register_buttons ($ buttons) array_push ($ buttons, 'dropcap', 'showrecent'); // dropcap ',' latestposts return $ buttons; De belangrijke filterhaak mce_external_plugins wordt gebruikt om de nieuwe plug-in aan TinyMCE te koppelen. We moeten een plug-in-ID doorgeven (wptuts) en de absolute URL die naar ons verwijst wptuts-plugin.js het dossier. De mce_buttons hook wordt gebruikt om de TinyMCE-editor te vertellen welke knoppen in onze plug-in we willen weergeven. De dropcap en showrecent zijn de ID-waarden van deze knoppen die we willen maken. Onthoud deze waarden, ze zullen later worden gebruikt.
Over het algemeen denk ik dat de beste manier om iets op een platform uit te breiden of te ontwikkelen, de documentatie voor dat platform is. TinyMCE heeft een eigen wiki die je misschien handig vindt. Door een voorbeeld te volgen van het maken van een TinyMCE-plug-in, hebben we de volgende initialisatiecode:
(function () tinymce.create ('tinymce.plugins.Wptuts', / ** * Initialiseert de plug-in, deze wordt uitgevoerd nadat de plug-in is gemaakt. * Deze aanroep is gedaan voordat de editor-instantie de initialisatie heeft voltooid dus gebruik de onInit-gebeurtenis * van de editorinstantie om die gebeurtenis te onderscheppen. * * @param tinymce.Editor ed Editorinstantie waarin de plug-in is geïnitialiseerd. * @param string url Absolute URL naar waar de plug-in zich bevindt. * / init: function (ed, url) , / ** * Maakt controle-instanties gebaseerd op de inkomende naam.Deze methode is normaal niet * nodig, omdat de methode addButton van de klasse tinymce.Editor een gemakkelijkere manier is om toe te voegen knoppen * maar soms moet je complexere besturingselementen maken zoals keuzelijsten, gesplitste knoppen, enz. dan kan deze * methode worden gebruikt om deze te maken. * * @param String n Naam van het besturingselement dat moet worden gemaakt. * @param tinymce.ControlManager cm Besturingsbeheer gebruiken om een nieuw besturingselement te maken. * @return tinymce.ui.Control Nieuw besturingselement inst of null als er geen controle is gemaakt. * / createControl: function (n, cm) return null; , / ** * Retourneert informatie over de plug-in als een naam- / waardearray. * De huidige sleutels zijn longname, auteur, auteur, infourl en versie. * * @return Object Naam / waarde-array met informatie over de plug-in. * / getInfo: function () return longname: 'Wptuts Buttons', auteur: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', versie: "0.1"; ); // Registreer plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) (); Vergeet niet om deze code toe te voegen aan de wptuts-plugin.js het dossier. We hebben de opmerkingen over de code voor u achtergelaten om gemakkelijk te begrijpen wat er aan de hand is. De bovenstaande code heeft slechts twee hoofdtaken:
creëren methode. Het gedrag van onze plug-in wordt gedefinieerd in de in het en CreateControl functies. U kunt zien dat de informatie van de plug-in wordt gedeclareerd in de informatie verkrijgen functie ook. Onze plug-in heeft de naam Wptuts en de ID wptuts zoals je kunt zien.In de in het functie, beginnen we met het maken van onze knoppen. De code als volgt:
(functie () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', afbeelding: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Voeg recente berichten shortcode toe', cmd: 'showrecent', image: url + '/recent.jpg');, // ... Verborgen code); // Registreer plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) (); Door de addButton methode van de ed object, vertellen we de huidige editor dat we al deze knoppen willen maken. Deze methode accepteert twee argumenten:
cmd eigendom, het heeft de waarde van showrecent. Dat is het ID van het commando dat elke keer dat het wordt aangeroepen wordt uitgevoerd, we zullen binnenkort in detail tredenbeeldwaarde.Controleer nu de WordPress-editor en we zullen onze knoppen zien verschijnen. Ze doen echter nu niets.
We hebben de naam gedefinieerd van de commando's die onze knoppen zullen uitvoeren, maar hebben nog niet gedefinieerd wat ze daadwerkelijk zullen uitvoeren. In deze stap zullen we de dingen instellen die onze knoppen zullen doen. Binnen in de in het functie, ga verder met het toevoegen van deze code zoals getoond:
(functie () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', afbeelding: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Voeg recente berichten toe shortcode', cmd: 'showrecent', image: url + '/recent.jpg'); ed. addCommand ('dropcap', function () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ('showrecent', function () var number = prompt ("Hoeveel berichten wilt u weergeven?"), shortcode; if (number! == null) number = parseInt (number); if (number > 0 && nummer <= 20) shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode); else alert("The number value is invalid. It should be from 0 to 20."); ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )(); Nu de ed.addCommand methode zal ons helpen om een nieuwe opdracht toe te voegen. U moet de ID van de opdracht en de callback-functie doorgeven die zal worden uitgevoerd als deze is aangeroepen door de ed.execCommand methode. Let daar op ed vertegenwoordigt de tinyMCE.activeEditor voorwerp. Laten we eens kijken naar de callback-functies:
dropcap opdracht, de wens die we willen is wanneer een gebruiker een letter selecteert en op de knop klikt DropCap knop, de letter zal dan worden omgezet in de vorm van een drop-cap. Hoe krijgen we die brief? Nou ja, de ed.selection.getContent methode zal dat voor ons doen. Vervolgens, als we eenmaal die brief hebben gekregen, wikkelen we hem gewoon in een span element. Vergeet niet om de klaswaarde van dit element in te stellen dropcap dat we eerder hebben gedefinieerd, toch? Ten slotte hebben we de volledige tekst die moet worden ingevoegd in de editor. TinyMCE heeft een standaardopdracht met de naam mceInsertContent die wordt gebruikt om specifieke inhoud in de editor in te voegen, hoe deze te gebruiken is hierboven weergegeven. De inhoud zal worden doorgegeven als het derde argument van de mceInsertContent methode.In plaats van pure tekst toe te voegen wanneer de knoppen inhoud in de visuele editor invoegen, kunnen we het veel visueler maken door aangepaste CSS voor onze knoppen te registreren. Het hangt af van welk type inhoudsgegevens en u kunt een geschikte stijl kiezen. Bijvoorbeeld onze DropcapDe stijl kan hetzelfde zijn als degene die op de voorkant wordt weergegeven. Dus je kunt de CSS-code helemaal bovenaan dit bericht plaatsen en het in de. Plaatsen editor-style.css bestand (zie standaard add_editor_style voor detais).
Voor shortcodes hebben ze mogelijk zelf geen HTML-element. Hoe zouden we ze moeten stylen? Nou, deze situatie is veel complexer om het resultaat te bereiken, het is echter niet onmogelijk (je kunt een standaard WordPress-knop zien zoals 'Media toevoegen'). Het kan echter nog steeds lastig zijn, door die shortcode in een HTML-element in te pakken en dat element vervolgens te stylen zoals hierboven. Het is vrij eenvoudig, maar nog niet helemaal perfect. In deze post richten we ons niet op die complexe verwerking.
Ten slotte worden de resultaten die we krijgen als volgt weergegeven:
Dan aan de voorkant:
En de knop met recente berichten werkt ook goed:
Oké, we hebben een oefening behandeld die vrij eenvoudig en gemakkelijk te volgen is. Mogelijk merkt u dat u met de knop Recente berichten een instelling kunt aanpassen (het aantal berichten dat wordt weergegeven). U weet zeker dat we de standaard JavaScript hebben gebruikt, prompt, om dat te bereiken. Wat als je een meer complexe pop-up wilt, met veel instellingen in plaats van slechts één? Nou, in een andere post zullen we dit bespreken en een andere aanpak proberen.
Alle feedback over dit bericht wordt op prijs gesteld. Bedankt voor het lezen en tot later.
TinyMCE_Custom_Buttons