Dela med sig:
Så här skapar du ett WordPress TinyMCE-plugin
Om du är WordPress-utvecklare, då kan du på något sätt komma överens om att anpassa eller utvidga WordPress Visual Editor. Till exempel kan du lägga till en knapp i Visual Editors verktygsfält så att din klient enkelt kan infoga en textruta eller en anropsknapp utan att skriva någon HTML-kod. I den här artikeln visar vi hur du skapar ett TinyMCE-plugin i WordPress.
Krav
Denna handledning är avsedd för avancerade användare. Om du är en nybörjarnivåanvändare som bara vill förlänga visuell redaktör, kolla TinyMCE Advanced plugin eller kolla på dessa tips om hur du använder WordPress visuell redigerare.
För denna handledning behöver du grundläggande kodningsförmåga, tillgång till ett WordPress-installationsprogram där du kan testa det.
Det är en dålig övning att utveckla plugins på en levande webbplats. Ett mindre misstag i koden kan göra din webbplats otillgänglig. Men om du måste göra det på en levande webbplats, så åtminstone backup WordPress först.
Skapa din första TinyMCE-plugin
Vi börjar med att skapa ett WordPress-plugin för att registrera vår anpassade TinyMCE verktygsfältsknapp. När du klickar kan den här knappen tillåta användaren att lägga till en länk med en anpassad CSS-klass.
Källkoden kommer att tillhandahållas i sin helhet i slutet av den här artikeln, men tills dess, låt oss skapa plugin steg för steg.
Först måste du skapa en katalog i wp-content / plugins mappen på din WordPress install. Namnge den här mappen TinyMCE-custom-link-klass.
Härifrån börjar vi lägga till vår plugin-kod.
Plugin Header
Skapa en ny fil i plugin-katalogen som vi just skapat och namnge den här filen TinyMCE-custom-link-class.php. Lägg till den här koden i filen och spara den.
/ ** * Plugin Name: TinyMCE Anpassad Link Class * Plugin URI: http://wpbeginner.com * Version: 1.0 * Författare: WPBeginner * Författare URI: https://www.wpbeginner.com * Beskrivning: En enkel TinyMCE Plugin att lägga till en anpassad länk klass i Visual Editor * Licens: GPL2 * /
Detta är bara en PHP-kommentar, som berättar för WordPress namnet på pluginet, såväl som författaren och en beskrivning.
I WordPress-administratörsområdet aktiverar du ditt nya plugin genom att gå till Plugins> Installed Plugins och sedan på Activate next to the TinyMCE Custom Link Class plugin:
Ställa in vår Plugin Class
Om två WordPress-plugins har funktioner med samma namn, skulle detta orsaka ett fel. Vi kommer att undvika detta problem genom att ha våra funktioner inslagna i en klass.
klass TinyMCE_Custom_Link_Class / ** * Constructor. Kallas när plugininitieras. * / funktion __construct () $ tinymce_custom_link_class = nya TinyMCE_Custom_Link_Class;
Detta skapar vår PHP-klass, tillsammans med en konstruktion som heter när vi når linjen $ tinymce_custom_link_class = nya TinyMCE_Custom_Link_Class;.
Alla funktioner vi lägger till i den här klassen borde inte vara i konflikt med andra WordPress-plugins.
Börja ställa in vårt TinyMCE-plugin
Därefter måste vi berätta för TinyMCE att vi kanske vill lägga till vår anpassade knapp till Visual Editors verktygsfält. För att göra detta kan vi använda WordPress 'åtgärder - specifikt, i det verkan.
Lägg till följande kod i ditt plugin __konstruera() fungera:
om (is_admin ()) add_action ('init', array ($ this, 'setup_tinymce_plugin')); Detta kontrollerar om vi finns i WordPress Administration-gränssnittet. Om vi är så frågar det WordPress att springa setup_tinymce_plugin funktionen i vår klass när WordPress har avslutat sin initiala laddningsrutin.
Lägg sedan till setup_tinymce_plugin fungera:
/ ** * Kontrollera om den nuvarande användaren kan redigera inlägg eller sidor och använder den visuella redigeraren. Om så är fallet, lägg till några filter så att vi kan registrera vårt plugin * / funktion setup_tinymce_plugin () // Kontrollera om den inloggade WordPress-användaren kan redigera inlägg eller sidor // Om inte, registrera inte vårt TinyMCE-plugin om (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return; // Kontrollera om den inloggade WordPress-användaren har den visuella redigeraren aktiverad // Om inte, registrera inte vårt TinyMCE-plugin om (get_user_option ('rich_editing')! == 'true') return; // Ange några filter add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button')); Detta kontrollerar om den nuvarande inloggade WordPress-användaren kan redigera inlägg eller sidor. Om de inte kan det finns ingen anledning att registrera vår TinyMCE-plugin för den användaren, eftersom de aldrig kommer att se den visuella redigeraren.
Vi kontrollerar sedan om användaren använder Visual Editor, eftersom vissa WordPress-användare stänger av det via Användare> Din profil. Återigen, om användaren inte använder Visual Editor, returnerar vi (avslutar) funktionen, eftersom vi inte behöver göra något annat.
Slutligen lägger vi till två WordPress-filter - mce_external_plugins och mce_buttons, att ringa våra funktioner som laddar den nödvändiga Javascript-filen för TinyMCE, och lägg till en knapp till TinyMCE-verktygsfältet.
Registrera Javascript-filen och knappen till den visuella redigeraren
Låt oss fortsätta och lägga till add_tinymce_plugin fungera:
/ ** * Lägger till en TinyMCE-plugin-kompatibel JS-fil till TinyMCE / Visual Editor-förekomsten * * @param array $ plugin_array Array av registrerade TinyMCE-plugins * @return array Ändrad array av registrerade TinyMCE-pluggar * / funktion add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'TinyMCE-custom-link-class.js'; returnera $ plugin_array;
Den här funktionen säger till TinyMCE att den behöver ladda de Javascript-filer som finns lagrade i $ plugin_array array. Dessa Javascript-filer kommer att berätta för TinyMCE vad de ska göra.
Vi måste också lägga till en kod till add_tinymce_toolbar_button funktion för att berätta för TinyMCE om knappen som vi skulle vilja lägga till i verktygsfältet:
/ ** * Lägger till en knapp i TinyMCE / Visual Editor som användaren kan klicka * för att infoga en länk med en anpassad CSS-klass. * * @param array $ knappar Array av registrerade TinyMCE-knappar * @return array Ändrad array av registrerade TinyMCE-knappar * / funktion add_tinymce_toolbar_button ($ knappar) array_push ($ buttons, '|', 'custom_link_class'); returnera $ knappar;
Detta trycker på två objekt på arrayen av TinyMCE knappar: en separator (|) och vår knapps programmatiska namn (custom_link_class).
Spara ditt plugin och rediger sedan en sida eller post för att visa den visuella redigeraren. Chansen är att verktygsfältet inte visas just nu:
Oroa dig inte - om vi använder vår webbläsares inspektörskonsol ser vi att ett 404-fel och meddelande har genererats av TinyMCE och berättar att det inte kan hitta vår Javascript-fil.
Det är bra - det betyder att vi framgångsrikt har registrerat vårt anpassade plugin för TinyMCE och nu behöver skapa Javascript-filen för att berätta för TinyMCE vad man ska göra.
Skapa Javascript-plugin
Skapa en ny fil i din wp-content / plugins / TinyMCE-custom-link-klass mapp och namnge den TinyMCE-custom-link-class.js. Lägg till den här koden i din js-fil:
(funktion () tinymce.PluginManager.add ('custom_link_class', funktion (editor, url) );) (); Detta kallar TinyMCE Plugin Manager-klassen, som vi kan använda för att utföra ett antal TinyMCE-pluginrelaterade åtgärder. Specifikt lägger vi till vårt plugin till TinyMCE med hjälp av Lägg till fungera.
Detta accepterar två saker; namnet på plugin (custom_link_class) och en anonym funktion.
Om du är bekant med begreppet funktioner i kodning är en anonym funktion helt enkelt en funktion utan namn. Till exempel, funktion foobar () ... är en funktion som vi kunde ringa någon annanstans i vår kod genom att använda Foo bar().
Med en anonym funktion kan vi inte ringa den funktionen någon annanstans i vår kod - den kallas bara vid den punkten Lägg till() funktionen åberopas.
Spara din Javascript-fil och rediger sedan en sida eller post för att visa den visuella redigeraren. Om allt fungerade ser du verktygsfältet:
Just nu har vår knapp inte lagts till i verktygsfältet. Det beror på att vi bara har sagt TinyMCE att vi är ett anpassat plugin. Vi måste nu berätta för TinyMCE vad man ska göra - det vill säga lägga till en knapp i verktygsfältet.
Uppdatera din Javascript-fil, ersätt din befintliga kod med följande:
(funktion () tinymce.PluginManager.add ('custom_link_class', funktion (editor, url) // Lägg till knapp till Visual Editor Toolbar editor.addButton ('custom_link_class', title: 'Insert Button Link', cmd: ' custom_link_class ',););) (); Observera att vår anonyma funktion har två argument. Den första är redaktör exempel - det här är TinyMCE Visual Editor. På samma sätt kan vi ringa olika funktioner på PluginManager, Vi kan också ringa olika funktioner på redaktör. I det här fallet ringer vi till addButton funktion, för att lägga till en knapp i verktygsfältet.
Spara din Javascript-fil och gå tillbaka till din visuella editor. Vid en första blick verkar ingenting ha förändrats. Om du svävar muspekaren över till höger om den övre radens högsta ikon bör du se en verktygstips visas:
Vi har lagt till en knapp på verktygsfältet, men den behöver en bild. Lägg till följande parameter i addButton funktion, under titel: linje:
bild: url + '/icon.png',
url är webbadressen till vårt plugin. Det här är praktiskt om vi vill referera till en bildfil i vår plugin-mapp, eftersom vi kan lägga till bildfilnamnet på webbadressen. I det här fallet behöver vi en bild som heter icon.png i pluginens mapp. Använd ikonen nedan:
Ladda om vår visningsredigerare, och nu ser du din knapp med ikonen:
Definiera en kommando att köra
Just nu, om du klickar på knappen kommer ingenting att hända. Låt oss lägga till ett kommando till TinyMCE som berättar vad som ska göras när vår knapp klickas.
I vår Javascript-fil, lägg till följande kod nedanför slutet av editor.addButton sektion:
// Lägg till kommando när knappen Klickad editor.addCommand ('custom_link_class', funktion () alert ('Button clicked!');); Ladda om vår visuella editor, klicka på knappen och en varning kommer att visas som bekräftar att vi bara klickade på knappen:
Låt oss ersätta varningen med en snabb och fråga användaren om den länk som de vill vikla runt den valda texten i den visuella redigeraren:
// Lägg till kommando när knappen Klickad editor.addCommand ('custom_link_class', funktion () // Kontrollera att vi har valt lite text som vi vill länka var text = editor.selection.getContent ('format': 'html' ), om (text.length === 0) alert ("Vänligen välj text som ska länka."); return; // Be användaren att ange en URL var result = prompt ('Enter the link'); om (! resultat) // Användaren avbröts - Avsluta retur; om (result.length === 0) // Användaren angav inte en URL-exit returnera // Sätt in vald text tillbaka till redaktör, omslag det i en ankare tagg editor.execCommand ('mceReplaceContent', false, '' + text + '');); Det här kvarteret utför några åtgärder.
Först kontrollerar vi om användaren valt lite text som ska länkas i den visuella redigeraren. Om inte, kommer de se en varning som berättar för dem att välja lite text som ska länkas.
Därefter ber vi dem att skriva in en länk igen och kontrollera om de gjorde det. Om de avbröt eller inte skrev in något gör vi inte något annat.
Slutligen kör vi execCommand funktionen på TinyMCE-editoren, som kör specifikt mceReplaceContent verkan. Detta ersätter den valda texten med vår HTML-kod, som består av en ankarlänk med class = "button", med den text som användaren valt.
Om allting fungerade ser du att din valda text nu är länkad i visningsredigeraren och textvisningarna, med klassen inställd på knapp:
Sammanfattning
Vi har lyckats skapa ett WordPress-plugin som lägger till en knapp i TinyMCE visuella redigerare i WordPress. Denna handledning har också täckt några av grunderna i TinyMCE API och WordPress-filter tillgängliga för TinyMCE-integreringar.
Vi lade till kod så att när en användare klickar på vår anpassade knapp uppmanas de att välja lite text i den visuella redigeraren, som de sedan kan länka till en valfri URL. Slutligen ersätter vår plugin den valda texten med en länkad version som innehåller en anpassad CSS-klass som heter knapp.
Vi hoppas att denna handledning hjälpte dig att lära dig hur du skapar ett WordPress TinyMCE-plugin. Du kanske också vill kolla in vår guide om hur du skapar ett sajtspecifikt WordPress-plugin.
Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.