Hoe een WordPress TinyMCE Plugin te maken

Als u WordPress-ontwikkelaar bent, kunt u op een bepaald moment de WordPress Visual Editor aanpassen of uitbreiden. U wilt bijvoorbeeld een knop toevoegen aan de werkbalk van de Visual Editor zodat uw klant eenvoudig een tekstvak of een call-to-action knop kan invoegen zonder een HTML-code te schrijven. In dit artikel laten we u zien hoe u een TinyMCE-plug-in maakt in WordPress.

Vereisten

Deze tutorial is bedoeld voor gevorderde gebruikers. Als je een gebruiker op beginnersniveau bent die alleen maar de visuele editor wil uitbreiden, bekijk dan de TinyMCE Advanced-plug-in of bekijk deze tips over het gebruik van WordPress visueel redacteur.

Voor deze tutorial heb je basiscoderingsvaardigheden nodig, toegang tot een WordPress-installatie waar je het kunt uitproberen.

Het is een slechte gewoonte om plug-ins te ontwikkelen op een live website. Een kleine fout in de code kan uw site ontoegankelijk maken. Maar als u het op een live site moet doen, maak dan eerst een back-up van WordPress.

Uw eerste TinyMCE-invoegtoepassing maken

We beginnen met het maken van een WordPress-plug-in om onze aangepaste TinyMCE-werkbalkknop te registreren. Wanneer erop wordt geklikt, kan deze gebruiker een koppeling toevoegen met een aangepaste CSS-klasse.

De broncode wordt aan het einde van dit artikel volledig weergegeven, maar tot die tijd kunnen we de plug-in stap voor stap maken.

Eerst moet je een map aanmaken in wp-content / plugins map van uw WordPress-installatie. Geef deze map een naam tinymce-maat-Link-klasse.

Vanaf hier beginnen we met het toevoegen van onze plugin-code.

De plug-inkop

Maak een nieuw bestand in de plugin-map die we zojuist hebben gemaakt en noem dit bestand tinymce-maat-Link-Class.php. Voeg deze code toe aan het bestand en sla het op.

 / ** * Naam van de plug-in: TinyMCE Custom Link Class * Plug-in URI: http://wpbeginner.com * Versie: 1.0 * Auteur: WPBeginner * Author URI: https://www.wpbeginner.com * Beschrijving: Een eenvoudige TinyMCE-plug-in om een ​​aangepaste linkklasse toe te voegen in de Visual Editor * Licentie: GPL2 * / 

Dit is slechts een PHP-opmerking, die WordPress de naam van de plug-in vertelt, evenals de auteur en een beschrijving.

Activeer in het gebied WordPress admin uw nieuwe plug-in door naar Plugins> Geïnstalleerde plug-ins te gaan en vervolgens te klikken op Activeren naast de TinyMCE Custom Link Class-plug-in:

Onze pluginklasse instellen

Als twee WordPress-plug-ins functies met dezelfde naam hebben, zou dit een fout veroorzaken. We zullen dit probleem vermijden door onze functies in een klas te laten verpakken.

 class TinyMCE_Custom_Link_Class / ** * Constructor. Wordt aangeroepen wanneer de plug-in is geïnitialiseerd. * / function __construct ()  $ tinymce_custom_link_class = nieuw TinyMCE_Custom_Link_Class; 

Hiermee wordt onze PHP-klasse gemaakt, samen met een constructie, die wordt genoemd wanneer we de regel bereiken $ tinymce_custom_link_class = nieuw TinyMCE_Custom_Link_Class;.

Functies die we binnen deze klasse toevoegen, mogen niet conflicteren met andere WordPress-plug-ins.

Begin met het instellen van onze TinyMCE-plug-in

Vervolgens moeten we TinyMCE vertellen dat we misschien onze aangepaste knop aan de werkbalk van de Visual Editor willen toevoegen. Om dit te doen, kunnen we de acties van WordPress gebruiken, met name de in het actie.

Voeg de volgende code toe aan uw plug-ins __construct () functie:

 if (is_admin ()) add_action ('init', array ($ this, 'setup_tinymce_plugin'));  

Dit controleert of we in de WordPress Administration-interface zijn. Als dat zo is, vraagt ​​het WordPress het setup_tinymce_plugin functie binnen onze klasse wanneer WordPress zijn initiële laadroutine heeft voltooid.

Voeg vervolgens de setup_tinymce_plugin functie:

 / ** * Controleer of de huidige gebruiker berichten of pagina's kan bewerken en gebruikt de Visual Editor * Voeg filters toe zodat we onze plug-in * / functie setup_tinymce_plugin () kunnen registreren // Controleer of de ingelogde WordPress-gebruiker kan berichten of pagina's bewerken // Zo nee, registreer onze TinyMCE-plug-in dan niet (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return;  // Controleer of de aangemelde WordPress-gebruiker de Visual Editor heeft ingeschakeld // Indien niet, registreer onze TinyMCE-plug-in dan niet (get_user_option ('rich_editing')! == 'true') return;  // Stel enkele filters in add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button'));  

Hiermee wordt gecontroleerd of de huidige aangemelde gebruiker van WordPress berichten of pagina's kan bewerken. Als dat niet het geval is, heeft het geen zin om onze TinyMCE-plug-in voor die gebruiker te registreren, omdat deze de Visual Editor nooit te zien krijgt.

We controleren vervolgens of de gebruiker de Visual Editor gebruikt, omdat sommige WordPress-gebruikers dit uitschakelen via Gebruikers> Uw profiel. Nogmaals, als de gebruiker de Visual Editor niet gebruikt, keren we de functie terug (exit), omdat we niets anders hoeven te doen.

Ten slotte voegen we twee WordPress-filters toe - mce_external_plugins en mce_buttons, om onze functies te bellen die het vereiste Javascript-bestand voor TinyMCE laden en een knop aan de TinyMCE-werkbalk toevoegen.

Het Javascript-bestand en de knop registreren voor de visuele editor

Laten we doorgaan en de add_tinymce_plugin functie:

 / ** * Voegt een TinyMCE plug-in compatibel JS-bestand toe aan de TinyMCE / Visual Editor-instantie * * @param-array $ plugin_array Array van geregistreerde TinyMCE-plug-ins * @return-array Gewijzigde array van geregistreerde TinyMCE-plug-ins * / function add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'Tinymce-maat-Link-class.js'; return $ plugin_array;  

Deze functie vertelt TinyMCE dat het de JavaScript-bestanden moet laden die zijn opgeslagen in de $ plugin_array matrix. Deze Javascript-bestanden zullen TinyMCE vertellen wat te doen.

We moeten ook wat code toevoegen aan de add_tinymce_toolbar_button functie, om TinyMCE te vertellen over de knop die we willen toevoegen aan de werkbalk:

 / ** * Voegt een knop toe aan de TinyMCE / Visual Editor waarop de gebruiker * kan klikken om een ​​koppeling in te voegen met een aangepaste CSS-klasse. * * @param array $ buttons Serie van geregistreerde TinyMCE-knoppen * @return-array Gewijzigde array van geregistreerde TinyMCE-knoppen * / functie add_tinymce_toolbar_button ($ buttons) array_push ($ buttons, '|', 'custom_link_class'); terug $ -knoppen;  

Dit duwt twee items op de array van TinyMCE-knoppen: een scheidingsteken (|) en de programmatische naam van onze knop (custom_link_class).

Sla uw plug-in op en bewerk vervolgens een pagina of bericht om de visuele editor te bekijken. De kans is groot dat de werkbalk niet wordt weergegeven:

Maakt u zich geen zorgen - als we de inspecteurconsole van onze webbrowser gebruiken, zullen we zien dat een 404-fout en een melding zijn gegenereerd door TinyMCE, die ons vertellen dat het ons Javascript-bestand niet kan vinden.

Dat is goed - het betekent dat we onze aangepaste TinyMCE-plug-in hebben geregistreerd en nu het Javascript-bestand moeten maken om TinyMCE te vertellen wat te doen.

De Javascript-plug-in maken

Maak een nieuw bestand in uw wp-content / plugins / tinymce-maat-Link-klasse map en noem deze tinymce-maat-Link-class.js. Voeg deze code toe aan je js-bestand:

 (function () tinymce.PluginManager.add ('custom_link_class', functie (editor, url) );) (); 

Dit roept de TinyMCE Plugin Manager-klasse aan, die we kunnen gebruiken om een ​​aantal aan TinyMCE plugin gerelateerde acties uit te voeren. Concreet voegen we onze plug-in toe aan TinyMCE met behulp van de toevoegen functie.

Dit accepteert twee items; de naam van de plugin (custom_link_class) en een anonieme functie.

Als u bekend bent met het concept van functies in codering, is een anonieme functie gewoon een functie zonder naam. Bijvoorbeeld, function foobar () ... is een functie die we ergens anders in onze code kunnen gebruiken door te gebruiken foobar ().

Met een anonieme functie kunnen we die functie ergens anders in onze code niet noemen - het wordt alleen maar aangeroepen op het punt de toevoegen() functie wordt opgeroepen.

Sla uw Javascript-bestand op en bewerk vervolgens een pagina of bericht om de visuele editor te bekijken. Als alles goed is gegaan, zie je de werkbalk:

Op dit moment is onze knop niet toegevoegd aan die werkbalk. Dat komt omdat we TinyMCE alleen hebben verteld dat we een aangepaste plug-in zijn. We moeten nu TinyMCE vertellen wat te doen - dat wil zeggen, een knop toevoegen aan de werkbalk.

Werk uw Javascript-bestand bij en vervang uw bestaande code door het volgende:

 (function () tinymce.PluginManager.add ('custom_link_class', function (editor, url) // Knop Toevoegen aan Visual Editor-werkbalk editor.addButton ('custom_link_class', title: 'Insert Button Link', cmd: ' custom_link_class ',););) (); 

Merk op dat onze anonieme functie twee argumenten heeft. De eerste is de editor instance - dit is de TinyMCE Visual Editor. Op dezelfde manier kunnen we verschillende functies op de Plugin manager, we kunnen ook verschillende functies op de editor. In dit geval bellen we de addButton functie, om een ​​knop toe te voegen aan de werkbalk.

Sla je Javascript-bestand op en ga terug naar je Visual Editor. Bij een eerste blik lijkt niets te zijn veranderd. Als u uw muiscursor echter naar de rechterkant van het meest rechtse pictogram van de bovenste rij beweegt, ziet u een knopinfo verschijnen:

We hebben een knop aan de werkbalk toegevoegd, maar er is een afbeelding voor nodig. Voeg de volgende parameter toe aan de addButton functie, onder de titel: lijn:

afbeelding: url + '/icon.png', 

url is de URL naar onze plug-in. Dit is handig als we willen verwijzen naar een afbeeldingsbestand in onze plugin-map, omdat we de afbeeldingsbestandsnaam kunnen toevoegen aan de URL. In dit geval hebben we een afbeelding nodig genaamd icon.png in de map van onze plug-in. Gebruik het onderstaande pictogram:

Herlaad onze visuele editor en je ziet nu je knop met het pictogram:

Een commando definiëren om uit te voeren

Op dit moment gebeurt er niets als je op de knop klikt. Laten we een opdracht aan TinyMCE toevoegen om het te vertellen wat te doen wanneer op onze knop wordt geklikt.

Voeg in ons Javascript-bestand de volgende code toe onder aan het einde van de editor.addButton sectie:

 // Commando toevoegen bij knopgeklikt editor.addCommand ('custom_link_class', function () alert ('Button clicked!');); 

Herlaad onze Visual Editor, klik op de knop en er verschijnt een melding dat we gewoon op de knop hebben geklikt:

Laten we de waarschuwing vervangen door een prompt en de gebruiker vragen om de link die ze rond de geselecteerde tekst in de Visual Editor willen omzetten:

 // Commando toevoegen bij knopgeklikt editor.addCommand ('custom_link_class', function () // Controleer of we een tekst hebben geselecteerd die we willen linken var text = editor.selection.getContent ('format': 'html' ); if (text.length === 0) alert ('Selecteer een tekst om te linken.'; return; // Vraag de gebruiker om een ​​URL in te voeren var result = prompt ('Voer de link in'); if (! result) // Gebruiker geannuleerd - exit return; if (result.length === 0) // Gebruiker heeft geen URL ingevoerd - exit return; // Voeg geselecteerde tekst terug in editor, inwikkeling het in een anchor-tag editor.execCommand ('mceReplaceContent', false, '' + text + '');); 

Dit codeblok voert een paar acties uit.

Eerst controleren we of de gebruiker een tekst heeft geselecteerd die moet worden gekoppeld in de visuele editor. Als dat niet het geval is, zien ze een melding waarin ze worden gevraagd een tekst te selecteren om te linken.

Vervolgens vragen we hen om een ​​link in te voeren, opnieuw om te controleren of ze dat wel deden. Als ze hebben geannuleerd of niets hebben ingevoerd, doen we niets anders.

Ten slotte voeren we het execCommand functie op de TinyMCE-editor, met name het uitvoeren van de mceReplaceContent actie. Dit vervangt de geselecteerde tekst door onze HTML-code, die bestaat uit een ankerkoppeling met class = "button", met behulp van de tekst die de gebruiker heeft geselecteerd.

Als alles werkte, ziet u dat de geselecteerde tekst nu is gekoppeld in de Visuele Editor en tekstweergaven, met de klasse ingesteld op knop:

Samenvatting

We hebben met succes een WordPress-plug-in gemaakt die een knop toevoegt aan de visuele editor van TinyMCE in WordPress. Deze zelfstudie heeft ook enkele basisbegrippen behandeld van de TinyMCE API en WordPress-filters die beschikbaar zijn voor TinyMCE-integraties.

We hebben code toegevoegd, zodat wanneer een gebruiker op onze aangepaste knop klikt, deze wordt gevraagd om wat tekst in de Visual Editor te selecteren, die vervolgens kan worden gelinkt aan een URL naar keuze. Ten slotte vervangt onze plug-in vervolgens de geselecteerde tekst door een gekoppelde versie die een aangepaste CSS-klasse bevat met de naam knop.

We hopen dat deze tutorial je heeft geholpen om te leren hoe je een WordPress TinyMCE-plug-in kunt maken. U kunt ook onze handleiding raadplegen over het maken van een sitespecifieke WordPress-plug-in.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.