Accentsconagua

Guide til å lage dine egne WordPress Editor-knapper

Kode
Share

Sannsynligvis vet du at WordPress er buntet med HTML WYSIWYG-editoren, TinyMCE. Mangfoldet av funksjoner, og muligheten til å bli utvidet om plugins, gjør den til den mest brukte WYSIWYG-editoren i verden. WordPress gjør imidlertid ikke bruk av alle dens funksjoner. WordPress tilpasser det og holder bare deler som er veldig nyttige for brukerne, slik at brukeren ikke blir slått av. Det betyr også at noen funksjoner, knapper for eksempel, har blitt skjult for brukere. Du kan aktivere de skjulte MCE-knappene helt. Vanligvis er de stilark, under, sup knapper. Hvis selv de skjulte fremdeles ikke tilfredsstiller dine behov, må du lage et TinyMCE-plugin for å legge til ditt eget. I denne opplæringen vil jeg gå gjennom grunnleggende om å legge til WordPress Editor-knappene dine ved å lage et TinyMCE-plugin.

Før vi begynner

Som nevnt tidligere, vil vi opprette et nytt TinyMCE-plugin som har til formål å legge til de nye knappene vi ønsker. Så hvilke knapper skal vi legge til? Vi vil prøve å legge til to enkle knapper: Dropcap og Siste innlegg, der den førstnevnte gir deg muligheten til å konvertere et valgt brev til en dråpekapsbrev, og sistnevnte viser siste innlegg. Koden genererer disse knappene vist nedenfor.

La oss lage en ny mappe som heter wptuts-redaktør-knapper (selvfølgelig kan du endre det til noe annet hvis du vil) i temakatalogen din (jeg bruker TwentyTwelve). Fortsett å lage to nye filer, wptuts.php som påkaller tilpasset PHP, og den andre heter wptuts-plugin.js der JavaScript-kodene vil bli plassert. Til slutt åpner du temaet ditt functions.php fil og inkludere den nyopprettede wptuts.php filen i den. Merk, husk å definere banen nøyaktig:

 krever ('wptuts-editor-knapper / wptuts.php');

Da må vi lage noen kode for disse to knappene:

  • Dropcap - Den ideelle måten å lage et brev i drop caps er å enkelt pakke brukerens valgte brev i en forhåndsdefinert HTML span klasse hvilke stiler som lettere å se ut som drop caps. CSS-koden til klassen som vises nedenfor, legger bare til temaet ditt style.css fil: 
     / * Legg til denne koden i style.css * / .dropcap float: left; skriftstørrelse: 80px; polstring-høyre: 7px; linjehøyde: 72px;
  • Siste innlegg - Vi vil lage en kortkode som vil legge til en liste over de siste innleggene i siden, åpne wptuts.php fil og legg til følgende kode: 
     add_shortcode ('recent-posts', 'wptuts_recent_posts'); funksjon wptuts_recent_posts ($ atts) ekstrakt (shortcode_atts (array ('numbers' => '5',), $ atts)); $ rposts = ny WP_Query (array ('posts_per_page' => $ tall, 'orderby' => 'dato')); hvis ($ rposts-> have_posts ()) $ html = '
    Siste innlegg
      '; mens ($ rposts-> har_posts ()) $ rposts-> the_post (); $ html. = sprintf ('
    • % s
      • ', get_permalink ($ rposts-> post-> ID), get_the_title (), get_the_title ());  $ html. = '
    ';  wp_reset_query (); returner $ html;

    Vi antar at når brukere klikker på Siste innlegg knappen, vil nettleseren popup en dialog som ber dem om antall innlegg de vil vise. Etter å ha det nummeret, vil redaktøren fylle det som et argument i ovenstående kortkode. Hvis vi for eksempel vil vise syv siste innlegg, genereres kortnummeret som følger:

     [nylig innleggte numre = "7" /]

Registrering av et nytt TinyMCE-plugin

Forutsatt at vi allerede hadde det nye pluginet, må vi registrere det med WordPress for å integrere det i TinyMCE-editoren. Koden er vist nedenfor:

 add_action ('init', 'wptuts_buttons'); funksjon wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons');  funksjon wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/Wptuts-editor-buttons/wptuts-plugin.js'; returner $ plugin_array;  funksjon wptuts_register_buttons ($ knapper) array_push ($ knapper, 'dropcap', 'showrecent'); // dropcap ',' recentposts returnerer $ knapper;

Det viktige filterkroken mce_external_plugins brukes til å koble det nye pluginet til TinyMCE. Vi må sende et plugin-ID (wptuts) og den absolutte nettadressen som peker mot vår wptuts-plugin.js fil. De mce_buttons krok brukes til å fortelle TinyMCE-editoren hvilke knapper i pluginet vi vil vise. De dropcap og showrecent er ID-verdiene til disse knappene som vi planlegger å opprette. Husk disse verdiene, de blir brukt senere.

Sette opp TinyMCE-plugin

Generelt synes jeg at den beste måten å utvide eller utvikle noe på en plattform, er å konsultere dokumentasjonen for den plattformen. TinyMCE har sin egen wiki som du kan finne nyttig. Ved å følge et eksempel på hvordan du oppretter et TinyMCE-plugin, har vi følgende initialiseringskode:

 (Function () tinymce.create ( 'tinymce.plugins.Wptuts', / ** * Initialiserer plugin, dette vil bli utført etter at plugin er opprettet. * Denne samtalen er ferdig før redaktøren eksempel er ferdig det er initialisering så bruk onInit-hendelsen * i redigeringseksemplet for å avlyse denne hendelsen. * * @param tinymce.Editor ed-redigeringseksempel at pluginet er initialisert i. * @param string url Absolutt URL til hvor pluginet er plassert. * / init: funksjon (ed, url) , / ** * Oppretter kontrollinstanser basert på innkommende navn. Denne metoden er normalt ikke * nødvendig siden addButton-metoden i klassen tinymce.Editor er en enklere måte å legge til knapper *, men du trenger noen ganger å lage mer komplekse kontroller som listebokser, deleknapper osv., og denne * metoden kan brukes til å lage dem. * * @param String n Navn på kontrollen som skal opprettes. * @param tinymce.ControlManager  cm Control Manager for å bruke inorder for å opprette ny kontroll. * @return tinymce.ui.Control Ny kontrollinst ance eller null hvis ingen kontroll ble opprettet. * / createControl: funksjon (n, cm) return null; , / ** * Returnerer informasjon om plugin som et navn / verdi array. * De nåværende tastene er etternavn, forfatter, forfatter, infourl og versjon. * * @return Object Navn / verdi array som inneholder informasjon om plugin. * / getInfo: funksjon () retur longname: 'Wptuts Buttons', forfatter: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', versjon: "0.1"; ); // Registrer plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) ();

Husk å legge til denne koden i wptuts-plugin.js fil. Vi har forlatt koden kommentarer for å enkelt forstå hva som skjer. Ovennevnte kode har bare to hovedoppgaver:

  1. Først definerer du et nytt TinyMCE-plugin på en trygg måte ved å ringe TinyMCE skape metode. Pluginets oppførsel vil bli definert i i det og createControl funksjoner. Du kan se at pluginens informasjon er erklært i få informasjon funksjon også. Vårt plugin vil ha navnet Wptuts og ID wptuts som du kan se.
  2. Sist, legg ganske enkelt til vår nye plugin i TinyMCE Plugin Manager.

Opprette knapper

I i det funksjon, begynner vi å lage våre knapper. Koden settes som følger:

 (Funksjon () tinymce.create ( 'tinymce.plugins.Wptuts', init: funksjon (ed, url) ed.addButton ( 'dropcap', tittel: 'DropCap', cmd: 'dropcap', bilde: url + '/dropcap.jpg'); ed.addButton ( 'showrecent', tittel: 'Legg nylige innlegg kortnummer', cmd: 'showrecent', bilde: url + '/recent.jpg');! // ... Skjult kode); // Registrer plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) ();

Ved å bruke addButton metode av ed objekt, forteller vi dagens redaktør at vi vil opprette alle disse knappene. Denne metoden godtar to argumenter:

  • Den første er knappens ID. I den forrige delen nevnte vi det. Det må være det samme som det vi definerte før. Ellers fungerer det ikke riktig.
  • Den andre er objektet som inneholder knappens informasjon, for eksempel:
    • Knappens tittel
    • Det viktigste: oppgaven som knappen vil gjøre. Ta en titt på cmd eiendom, det har verdien av showrecent. Det er kommandos ID som utføres hver gang det kalles, vi kommer snart inn i detalj
    • Bildet av knappen. Vær oppmerksom på at nettadresseparameteren inneholder nettadressen til den absolutte katalogen der pluginet er plassert, dette gjør det enklere å referere til bildet du vil ha. Så du må plassere bildet i pluginets mappe og sikre at navnet ditt er satt nøyaktig til bildes verdi.

Nå, sjekk WordPress-editoren, og vi vil se våre knapper dukker opp. Men de gjør ingenting nå.


Våre knapper dukket opp.

Legge til knapper 'kommandoer

Vi har definert navnet på kommandoene våre knapper vil utføre, men har ennå ikke definert hva de egentlig vil kjøre. I dette trinnet vil vi sette opp de tingene våre knapper vil gjøre. Inne i i det funksjon, fortsett å legge til denne koden som vist:

 (Funksjon () tinymce.create ( 'tinymce.plugins.Wptuts', init: funksjon (ed, url) ed.addButton ( 'dropcap', tittel: 'DropCap', cmd: 'dropcap', bilde: url + '/dropcap.jpg'); ed.addButton ( 'showrecent', tittel: 'Legg nylige innlegg kortnummer', cmd: 'showrecent', bilde: url + '/recent.jpg'); ed. addCommand ('dropcap', funksjon () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ("showrecent", funksjon () var nummer = prompt ("Hvor mange innlegg vil du vise?"), shortcode; if (tall! == null) number = parseInt > 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 ); )();

Nå, den ed.addCommand Metoden vil hjelpe oss med å legge til en ny kommando. Du må sende kommandoen ID og tilbakeringingsfunksjonen som vil bli kjørt hvis den ble kalt av ed.execCommand metode. Noter det ed representerer tinyMCE.activeEditor gjenstand. La oss ta en titt på tilbakeringingsfunksjonene:

  • I dropcap kommando, ønsket vi ønsker er når en bruker velger et brev og klikker på DropCap knappen, vil brevet bli forvandlet til drop-form. Så hvordan får vi det brevet? Vel, den ed.selection.getContent Metoden vil gjøre det for oss. Deretter, når vi har fått det brevet, pakker vi det bare inn i en span element. Husk å sette dette elementets klasseværdi til dropcap som vi har definert før, ikke sant? Til slutt har vi den komplette teksten som må settes inn i redigeringen. TinyMCE har en standardkommando med navnet mceInsertContent som brukes til å sette inn spesifikt innhold i redaktøren, hvordan du bruker det, vises ovenfor. Innholdet vil bli sendt som det tredje argumentet til mceInsertContent metode.
  • En lignende ting skjer i showrecent kommando som i dropcap kommando, bortsett fra at vi ikke trenger å få brukerens valgte innhold. Vi viser bare en dialogboks som ber brukeren hvor mange innlegg de vil vise seg, og sett deretter inn tallverdien i en passende kortkode syntaks.

Registrering av egendefinert CSS for knapper (valgfritt)

I stedet for å legge til ren tekst når knappene setter inn innholdet i den visuelle editoren, kan vi gjøre det mye mer visuelt ved å registrere egendefinert CSS for knappene våre. Det avhenger av hvilken type innholdsdata, og du kan velge en passende stil. For eksempel, vår Dropcapstilen kan ha det samme som den som vises på forsiden. Så du kan ta sin CSS-kode øverst i dette innlegget, og legg det inn i redaktør style.css fil (for standard, se add_editor_style for detais).

For kortkoder har de kanskje ikke et HTML-element selv. Hvordan skal vi style dem? Vel, denne situasjonen er mye mer kompleks for å oppnå resultatet, det er ikke umulig skjønt (du kan se noen standard WordPress-knapper som "Legg til media"). Det kan imidlertid fortsatt være vanskelig, ved å pakke inn den korte koden i et HTML-element og deretter styler det elementet som ovenfor. Det er ganske enkelt, ikke helt perfekt skjønt. I dette innlegget vil vi ikke fokusere på den komplekse behandlingen.

resultater

Til slutt blir resultatene vi får, vist som følger:


Test Dropcap-knappen.

Deretter på forsiden:


Dropcap brev i fronten.

Og knappen Nylig innlegg fungerer også bra:


Nylige innlegg knappen fungerte.

Konklusjon

Ok, vi dekket en praksis som er ganske enkel og lett å følge. Det kan hende du merker at knappen Nylige innlegg lar deg justere en innstilling (antall innlegg som skal vises). Du vet sikkert at vi brukte standard JavaScript, prompt, for å oppnå det. Hva om du vil ha en mer komplisert popup, som har mange innstillinger i stedet for bare en? Vel, i et annet innlegg vil vi diskutere dette og prøve en annen tilnærming.

Eventuelle tilbakemeldinger om dette innlegget vil bli verdsatt. Takk for at du leser, og ser deg senere.

Henvisning

  • TinyMCE_Custom_Buttons
  • Opprette et TinyMCE-plugin
Kode
×