Slik lager du et WordPress TinyMCE-plugin

Hvis du er WordPress-utvikler, kan du på et tidspunkt komme over til å tilpasse eller utvide WordPress Visual Editor. For eksempel kan det være lurt å legge til en knapp i Visual Editor's verktøylinje for å la klienten enkelt sette inn en tekstboks eller en kall til handlingsknapp uten å skrive noen HTML-kode. I denne artikkelen vil vi vise deg hvordan du lager et TinyMCE-plugin i WordPress.

Krav

Denne opplæringen er beregnet for avanserte brukere. Hvis du er en nybegynner nivå bruker som bare ønsker å utvide visuell editor, så sjekk ut TinyMCE Advanced plugin eller ta en titt på disse tipsene om å bruke WordPress visuell editor.

For denne opplæringen trenger du grunnleggende koding ferdigheter, tilgang til en WordPress installasjon hvor du kan teste det ut.

Det er en dårlig øvelse å utvikle plugins på et live nettsted. En mindre feil i koden kan gjøre nettstedet ditt utilgjengelig. Men hvis du må gjøre det på et live nettsted, så minst backup WordPress først.

Opprette ditt første TinyMCE-plugin

Vi vil begynne med å lage et WordPress-plugin for å registrere vår egendefinerte TinyMCE verktøylinjeknapp. Når du klikker, vil denne knappen tillate brukeren å legge til en kobling med en egendefinert CSS-klasse.

Kilden koden vil bli gitt i sin helhet på slutten av denne artikkelen, men til da, la oss lage plugin trinn for trinn.

Først må du opprette en katalog i wp-innhold / tillegg mappe av din WordPress installasjon. Navn denne mappen TinyMCE-custom-link-klasse.

Herfra begynner vi å legge til plugin-koden vår.

Plugin Header

Opprett en ny fil i plugin katalogen vi nettopp har opprettet og navn denne filen TinyMCE-custom-link-class.php. Legg til denne koden i filen og lagre den.

 / ** * Plugin Name: TinyMCE Tilpasset Link Class * Plugin URI: http://wpbeginner.com * Versjon: 1.0 * Forfatter: WPBeginner * Forfatter URI: https://www.wpbeginner.com * Beskrivelse: En enkel TinyMCE Plugin å legge til en egendefinert koblingsklasse i Visual Editor * Lisens: GPL2 * / 

Dette er bare en PHP-kommentar, som forteller WordPress navnet på plugin, samt forfatteren og en beskrivelse.

I WordPress-administrasjonsområdet aktiverer du det nye pluginet ditt ved å gå til Plugins> Installed Plugins, og deretter klikke Aktiver ved siden av TinyMCE Custom Link Class-plugin:

Sette opp vår Plugin Class

Hvis to WordPress-plugins har funksjoner med samme navn, vil dette føre til en feil. Vi vil unngå dette problemet ved å ha våre funksjoner innpakket i en klasse.

 klasse TinyMCE_Custom_Link_Class / ** * Constructor. Kalt når plugin er initialisert. * / funksjon __construct ()  $ tinymce_custom_link_class = ny TinyMCE_Custom_Link_Class; 

Dette skaper vår PHP-klasse, sammen med en konstruksjon, som kalles når vi når linjen $ tinymce_custom_link_class = ny TinyMCE_Custom_Link_Class;.

Eventuelle funksjoner vi legger til i denne klassen, bør ikke være i konflikt med andre WordPress-plugins.

Begynn å sette opp vår TinyMCE-plugin

Deretter må vi fortelle TinyMCE at vi kanskje vil legge til vår egendefinerte knapp til Visual Editor's verktøylinje. For å gjøre dette kan vi bruke WordPress 'handlinger - spesielt, i det handling.

Legg til følgende kode i plugin-modulen din __construct () funksjon:

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

Dette kontrollerer om vi er i WordPress Administration grensesnittet. Hvis vi er, ber den WordPress å kjøre setup_tinymce_plugin Fungerer inne i vår klasse når WordPress har fullført sin første innlastingrutine.

Deretter legger du til setup_tinymce_plugin funksjon:

 / ** * Sjekk om den nåværende brukeren kan redigere Innlegg eller Sider, og bruker Visual Editor * Hvis så, legg til noen filtre slik at vi kan registrere pluginet vårt * / function setup_tinymce_plugin () // Sjekk om den loggede WordPress-brukeren kan redigere innlegg eller sider // Hvis ikke, ikke registrer vår TinyMCE-plugin hvis (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return;  // Sjekk om den loggede WordPress-brukeren har Visual Editor aktivert // Hvis ikke, ikke registrer TinyMCE-pluginet hvis (get_user_option ('rich_editing')! == 'true') return;  // Oppsett noen filtre add_filter ('mce_external_plugins', array (& $ dette, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ dette, 'add_tinymce_toolbar_button'));  

Dette kontrollerer om gjeldende logget inn WordPress-bruker kan redigere Innlegg eller Sider. Hvis de ikke kan det, er det ikke noe poeng ved å registrere vår TinyMCE-plugin for den brukeren, da de aldri vil se Visual Editor.

Vi kontrollerer deretter om brukeren bruker Visual Editor, da noen WordPress-brukere slår av dette via Brukere> Din profil. Igjen, hvis brukeren ikke bruker Visual Editor, returnerer vi (avslutter) funksjonen, da vi ikke trenger å gjøre noe annet.

Til slutt legger vi til to WordPress-filtre - mce_external_plugins og mce_buttons, å ringe våre funksjoner som vil laste den nødvendige Javascript-filen for TinyMCE, og legge til en knapp i TinyMCE-verktøylinjen.

Registrering av Javascript-filen og -knappen til Visual Editor

La oss gå videre og legge til add_tinymce_plugin funksjon:

 / ** * Legger til en TinyMCE plugin-kompatibel JS-fil til TinyMCE / Visual Editor-forekomsten * * @param array $ plugin_array Array av registrerte TinyMCE-plugger * @return array Modifisert rekke av registrerte TinyMCE-plugger * / funksjon add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'TinyMCE-custom-link-class.js'; returner $ plugin_array;  

Denne funksjonen forteller TinyMCE at den trenger å laste Javascript-filene lagret i $ plugin_array array. Disse Javascript-filene vil fortelle TinyMCE hva de skal gjøre.

Vi må også legge til noen koden til add_tinymce_toolbar_button funksjon, for å fortelle TinyMCE om knappen vi vil legge til på verktøylinjen:

 / ** * Legger til en knapp til TinyMCE / Visual Editor som brukeren kan klikke * for å sette inn en kobling med en egendefinert CSS-klasse. * * @param array $ buttons Array av registrerte TinyMCE-knapper * @return array Modifisert rekke med registrerte TinyMCE-knapper * / funksjon add_tinymce_toolbar_button ($ knapper) array_push ($ buttons, '|', 'custom_link_class'); returner $ knapper;  

Dette skyver to elementer på rekke TinyMCE knapper: en separator (|), og knappens programmatiske navn (custom_link_class).

Lagre pluginet ditt, og rediger deretter en Side eller Post for å vise Visual Editor. Sjansene er at verktøylinjen ikke vises akkurat nå:

Ikke bekymre deg - hvis vi bruker vår nettleserens inspektørkonsoll, ser vi at en 404 feil og varsel er generert av TinyMCE, og forteller oss at den ikke kan finne vår Javascript-fil.

Det er bra - det betyr at vi har registrert TinyMCE-tilpasset plugin, og nå må du opprette Javascript-filen for å fortelle TinyMCE hva du skal gjøre.

Opprett Javascript-plugin

Lag en ny fil i din wp-content / plugins / TinyMCE-custom-link-klasse mappe og navnet på den TinyMCE-custom-link-class.js. Legg til denne koden i js-filen din:

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

Dette kaller TinyMCE Plugin Manager-klassen, som vi kan bruke til å utføre en rekke TinyMCE-pluginrelaterte handlinger. Spesielt legger vi til pluginet vårt til TinyMCE ved hjelp av Legg til funksjon.

Dette aksepterer to elementer; navnet på pluginet (custom_link_class) og en anonym funksjon.

Hvis du er kjent med begrepet funksjoner i koding, er en anonym funksjon bare en funksjon uten navn. For eksempel, funksjon foobar () ... er en funksjon som vi kunne ringe et annet sted i vår kode ved å bruke foobar ().

Med en anonym funksjon, kan vi ikke ringe den funksjonen et annet sted i vår kode - det blir bare kalt på det punktet Legg til() funksjonen er påkalt.

Lagre Javascript-filen, og rediger deretter en Side eller Post for å vise Visual Editor. Hvis alt virket, ser du verktøylinjen:

For øyeblikket har vår knapp ikke blitt lagt til i verktøylinjen. Det er fordi vi kun har fortalt TinyMCE at vi er et tilpasset plugin. Vi må nå fortelle TinyMCE hva de skal gjøre - det vil si legge til en knapp i verktøylinjen.

Oppdater Javascript-filen din, og erstatt din eksisterende kode med følgende:

 (funksjon () tinymce.PluginManager.add ('custom_link_class', funksjon (editor, url) // Legg til knapp til Visual Editor Toolbar editor.addButton ('custom_link_class', title: 'Insert Button Link', cmd: ' custom_link_class ',););) (); 

Legg merke til at vår anonyme funksjon har to argumenter. Den første er redaktør eksempel - dette er TinyMCE Visual Editor. På samme måte kan vi ringe ulike funksjoner på PluginManager, Vi kan også ringe ulike funksjoner på redaktør. I dette tilfellet ringer vi til addButton funksjon, for å legge til en knapp i verktøylinjen.

Lagre Javascript-filen din, og gå tilbake til Visual Editor. Ved et første blikk synes ingenting å ha endret seg. Men hvis du holder musemarkøren over til høyre for øverste rads høyre ikon, bør du se et verktøytips vises:

Vi har lagt til en knapp på verktøylinjen, men den trenger et bilde. Legg til følgende parameter i addButton funksjon, under tittel: linje:

bilde: url + '/icon.png', 

url er nettadressen til pluginet vårt. Dette er nyttig hvis vi vil referere til en bildefil i vår plugin-mappe, da vi kan legge til bildefilnavnet til URL-adressen. I dette tilfellet trenger vi et bilde som heter icon.png i vår plugin-mappe. Bruk ikonet nedenfor:

Last inn vår visuelle editor, og du vil nå se knappen din med ikonet:

Definere en kommando for å kjøre

Akkurat nå, hvis du klikker på knappen, skjer ingenting. La oss legge til en kommando til TinyMCE som forteller det hva du skal gjøre når knappen er klikket.

I vår Javascript-fil, legg til følgende kode under slutten av editor.addButton seksjon:

 // Legg til kommando når knappen klikkes editor.addCommand ('custom_link_class', funksjon () alert ('Button klikket!';;); 

Last inn vår visuelle editor, klikk på knappen og et varsel vises, bekrefter at vi bare klikket på knappen:

La oss erstatte varselet med en ledetekst, og spør brukeren om koblingen de vil vikle rundt den valgte teksten i Visual Editor:

 // Legg til kommando når knappen klikket editor.addCommand ('custom_link_class', funksjon () // Sjekk at vi har valgt noen tekst som vi vil koble var text = editor.selection.getContent ('format': 'html' ); hvis (text.length === 0) alert ('Vennligst velg tekst som skal kobles.'); return; // Be brukeren om å skrive inn en URL var result = prompt ('Skriv inn lenken'); hvis (! resultat) // Bruker avbrutt - Avslutt retur; hvis (result.length === 0) // Brukeren skrev ikke inn en URL - exit return; // Sett inn valgt tekst tilbake til editor, innpakning det i et anker tag editor.execCommand ('mceReplaceContent', false, '' + text + '');); 

Denne kodekoden utfører noen handlinger.

Først kontrollerer vi om brukeren valgte noe tekst som skal kobles i Visual Editor. Hvis ikke, vil de se et varsel som forteller dem å velge tekst som skal kobles.

Deretter ber vi dem om å legge inn en lenke, igjen å sjekke om de gjorde det. Hvis de avbrutt, eller ikke skrev inn noe, gjør vi ikke noe annet.

Til slutt løper vi execCommand Funksjon på TinyMCE-editoren, som kjører spesifikt mceReplaceContent handling. Dette erstatter den valgte teksten med HTML-koden, som består av en ankerlink med class = "button", ved hjelp av teksten brukeren valgte.

Hvis alt fungerte, vil du se at den valgte teksten din nå er koblet sammen i visningseditoren og tekstvisningen, med klassen satt til knapp:

Sammendrag

Vi har opprettet et WordPress-plugin som legger til en knapp til TinyMCE visuelt editor i WordPress. Denne opplæringen har også dekket noen av grunnleggende om TinyMCE API og WordPress filtre tilgjengelig for TinyMCE integrasjoner.

Vi la til kode slik at når en bruker klikker vår egendefinerte knapp, blir de bedt om å velge litt tekst i Visual Editor, som de deretter kan koble til en nettadresse etter eget valg. Til slutt erstatter vår plugin den valgte teksten med en koblet versjon som inneholder en tilpasset CSS-klasse som heter knapp.

Vi håper denne veiledningen hjalp deg med å lære å lage et WordPress TinyMCE-plugin. Du kan også sjekke ut vår guide for hvordan du oppretter et nettstedsspesifikt WordPress-plugin.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.