, vejledning til at skabe deres egen wordpress redaktør knapper,,,,, 16,,,,,,,,, 4,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, sandsynligvis ved, at wordpress er samlet med html wysiwyg redaktør, tinymce.de forskellige elementer, og evnen til at blive udvidet, men plugins, det mest anvendte wysiwyg redaktør i verden.wordpress ikke gøre brug af alle sine elementer, dog.wordpress customizes og kun er dele, som virkelig er nyttig for brugerne, således at man undgår at ødelægge brugergrænsefladen.det betyder også, at nogle egenskaber, knapper, for eksempel, har været skjult for brugerne.kan du sætte den skjulte mce knapper.typisk er de, stylesheet, afrika,, hva 'så, knapper.selv hvis den skjulte dem stadig ikke opfylder deres behov, så er du nødt til at skabe en tinymce stik af at tilføje andre.i denne lektion, jeg vil følge dig gennem det grundlæggende, at din wordpress redaktør knapper ved at skabe en tinymce stik af.,,, før vi starter, som nævnt tidligere, vil vi skabe en ny tinymce stik af, hvis opgave er at tilføje nye knapper, vi ønsker.så hvilke knapper man skal vi tilføje?vi vil forsøge at tilføje to enkle knapper:, dropcap, og de stillinger, som den tidligere giver dig mulighed for at konvertere en udvalgt brev til en dråbe, fælles landbrugspolitik, brev, og sidstnævnte vil vise nye stillinger.den kode skaber disse knapper er vist nedenfor. lad os skabe en ny mappe, der hedder, wptuts redaktør knapper, selvfølgelig, du kan ændre det til noget andet, hvis du vil have) i temaet directory (jeg bruger twentytwelve).fortsætte med at skabe to nye sager, wptuts.php, der påberåber sig - - på, og den anden hed, wptuts-plugin.js, hvor javascript kode stumper skal placeres.endelig åbner din tema er, functions.php, fil og omfatte de nyoprettede, wptuts.php, fil i det.note, husk at definere sin vej, nemlig kræve ('wptuts redaktør knapper /wptuts. folkesundhedsprogrammet), så er vi nødt til at udarbejde en adfærdskodeks for de to knapper:,, dropcap, - den ideelle måde at få et brev til - kapsler er at afslutte brugerens udvalgte brev inden for et forud fastsat: span klasse, der stil det brev til ligner fald hætter.css kode i den klasse, som vist nedenfor, vedlægges det til din tema er, style.css, fil: /* tilføje denne kode i style.css * /. dropcap {flyde: venstre; skriftstørrelsen: 80px; polstring. 7px; linje højde: 72px;}, nye stillinger, vil vi shortcode, som vil tilføje en liste over nye stillinger til side, åbne, wptuts.php, fil og tilføje følgende kode:, add_shortcode ("nye stillinger, wptuts_recent_posts); funktion wptuts_recent_posts ($atts) (ekstrakt (shortcode_atts (array ('numbers = > 5)). atts) $rposts = nye wp_query (array ('posts_per_page = > $numre, orderby = > »date«)); hvis ($rposts - > have_posts()) ($html = < h3 > de seneste stillinger < /h3 > < ul klasse = "nye stillinger" > «, mens ($rposts - > have_posts()) ($rposts - > the_post(). $html. = sprintf (< li > < en href = "% s" afsnit = "% s >% s < /a > < /li >", get_permalink ($rposts - > post - > id), get_the_title(), get_the_title()).) http: //dollars. = < /ul > «) wp_reset_query(); tilbage $html;), og vi går ud fra, at når brugerne klik, nye stillinger, browseren vil pop - up - en dialog om for antallet af stillinger, de vil vise.efter det nummer, redaktøren vil udfylde det som et argument i den ovennævnte shortcode.hvis vi f.eks. vil vise 7 nye stillinger, shortcode genereres som følger: [seneste stillinger tal = "7" /,,, registrere nye tinymce stik af, hvis vi allerede havde den nye stik af, så skal vi registrere det med wordpress til at integrere den i tinymce redaktør.koden er vist nedenfor: add_action ("lokalitet, wptuts_buttons); funktion wptuts_buttons() {add_filter (" mce_external_plugins "," wptuts_add_buttons "); add_filter ('mce_buttons", "wptuts_register_buttons)} funktion wptuts_add_buttons ($plugin_array) ($plugin_array ['wptuts'] = get_template_directory_uri()."/wptuts redaktør knapper /wptuts stik af. er "tilbagevenden $plugin_array;} funktion wptuts_register_buttons ($knapper) (array_push ($knapper, dropcap", "showrecent); //dropcap", "recentposts tilbage $knapper;}, vigtige filter, klo, mce_external_plugins, anvendes til at skaffe nye stik af for at tinymce.vi er nødt til at vedtage et stik af id (, wptuts,) og den absolutte url peger på vores, wptuts-plugin.js, fil.det, mce_buttons, krog bruges til at fortælle tinymce redaktør, der knapper i vores stik af, vi vil vise.det, dropcap, og showrecent, id - værdier for disse knapper, at vi planlægger at skabe.husk disse værdier, vil de blive brugt senere, at tinymce stik af, generelt mener jeg, at den bedste måde at udvide og udvikle noget på en platform til at rådføre sig med dokumentation for, at platform.tinymce har sin egen liste, som du kan bruge.ved at følge et eksempel på, hvordan man kan skabe en tinymce stik af, har vi følgende initialisering kode: (function() {tinymce. skabe ('tinymce. plugins. wptuts, {/* * * initializes det stik af, vil dette blive henrettet efter stik af er blevet skabt.* det er gjort før redaktør instans er færdig, det er initialization, så brug den oninit tilfælde * af den redaktør instans til at opfange det.* * @ param {tinymce. redaktør. redaktør. ed at stik af er igangsat.* @ param {snor} url absolut url, hvor stik af, er beliggende.* /lokalitet: funktion (ed, url) {}, /* * * skaber kontrolinstanser baseret på incomming navn.denne metode er normalt ikke nødvendig, da addbutton * metode i tinymce. redaktør klasse er en let måde at knapper. men du er nødt til at skabe mere komplekse kontrol, som listboxes, delt knapper osv. denne fremgangsmåde kan anvendes til at skabe dem.* * @ param {navn} n streng kontrol for at skabe.* @ param {tinymce. controlmanager} cm kontrol manager til brug for at skabe nye kontrol.* @ afkast (tinymce. ui. kontrol} nye kontrolinstans eller nul, hvis ingen kontrol blev oprettet.* /createcontrol: funktion (n, n - cm) {tilbage for;}, /* * * afkast, oplysninger om stik af som et navn /værdi system.* den nuværende nøgler er longname, forfatter, authorurl, infourl og version.* * @ afkast (objekt} navn /værdi system, der indeholder oplysninger om de stik af.* /getinfo: function() {afkast (longname: "wptuts knapper, forfatter:" lee, authorurl: http: //wp. tutsplus. kom /forfatter /leepham, infourl: http: //wiki. moxiecode. kom /index.php /tinymce: plugins /eksempel, version "0"}}}); //register, stik af tinymce. pluginmanager. der tilsættes ('wptuts, tinymce.plugins.wptuts)}) (), husk at tilføje denne kodeks i, wptuts-plugin.js, fil.vi har forladt den kode bemærkninger til dig let at forstå, hvad der foregår.denne kode er bare to hovedopgaver:,, for det første, at definere en ny tinymce stik af på en sikker måde ved at tinymce, skabe, metode.vores stik af adfærd vil blive defineret i den lokalitet, og createcontrol, funktioner.kan du se, at stik af oplysninger er angivet i, getinfo, funktion.stik af, vil vores navn, wptuts og id, wptuts, som du kan se. endelig blot tilføje vores nye stik af i tinymce stik af manager.,, skabe knapper i den lokalitet, funktion, vi begynder at skabe vores knapper.den kode set som følger: (function() {tinymce. skabe ('tinymce. plugins. wptuts, {lokalitet: funktion (ed, url) (ed.addbutton ('dropcap "(afsnit:" dropcap, cmd: "dropcap, image: url + /dropcap jpg)); ed.addbutton ('showrecent" (afsnit: "tilføje de stillinger, shortcode, cmd:" showrecent, image: url + /seneste jpg)); den //.skjult kode}); //register, stik af tinymce. pluginmanager. der tilsættes ('wptuts, tinymce.plugins.wptuts)}) (), ved at anvende den metode, addbutton, af, ed, genstand, vi fortæller den nuværende redaktør, som vi ønsker at skabe alle de knapper.denne metode accepterer to argumenter:,, det første er knap. i det foregående afsnit, vi nævnte det.det skal være den samme som den, vi har defineret før.ellers vil det ikke fungere ordentligt. den anden er den genstand, der indeholder knap er oplysninger, som f.eks.:, knappen er afsnit, det vigtigste: den opgave, som den knap nok.tag et kig på det, kommandør, ejendom, har værdi af, showrecent,.det er den ordre er id, som er blevet henrettet, hver gang det er, vi vil gå i detaljer om billedet af den knap.bemærk, at url parameter er absolut adresseregister er url, som vores stik af, er beliggende, gør det lettere at henvise til det billede, som du vil.så du er nødt til at lægge dit billede i stik af er mappen og sikre dens navn, er netop den, image, er værdi.,,, tjek det wordpress redaktør, og vi vil se vores knapper, der dukkede op.men de gør ikke noget nu.,,, vores knapper dukkede op, med tilføjelse af knapper "kommandoer, vi har defineret navn af kræver vores knapper skal udføre, men endnu ikke er defineret, hvad de rent faktisk vil løbe.i dette skridt, vil vi oprette de ting, vores knapper, vil gøre.indenfor, lokalitet, funktion, fortsætter med at tilføje denne kodeks som vist: (function() {tinymce. skabe ('tinymce. plugins. wptuts, {lokalitet: funktion (ed, url) (ed.addbutton ('dropcap "(afsnit:" dropcap, cmd: "dropcap, billede: http. /dropcap jpg)); ed.addbutton ('showrecent" (afsnit: "tilføje de stillinger, shortcode, cmd:" showrecent, image: url + /seneste jpg)); ed.addcommand ('dropcap, function() {var selected_text = ed.selection. getcontent(), var return_text = "; return_text = < over klasse =" dropcap "> + selected_text + < /span > «. ed.execcommand ('mceinsertcontent, 0, return_text)}); ed.addcommand ('showrecent, function() (var - nam2 = hurtigt (", hvor mange stillinger, vil du vise?"), shortcode; hvis (nummer!= = null) (antal = parseint (antal); hvis (antal > 0 & &, antal < = 20) (shortcode = [seneste post nummer = "+ nummer +" /] «. ed.execcommand ('mceinsertcontent, 0, shortcode)} andre (alarm ("antallet værdi er ugyldig.det skal være fra 0 til 20. ");}}}); den //.skjult kode}); //register, stik af tinymce. pluginmanager. der tilsættes ('wptuts, tinymce.plugins.wptuts)}) (), det, ed.addcommand, metode, vil hjælpe os til at tilføje en ny ordre.du er nødt til at gå - id og denne funktion, som vil blive henrettet, hvis det blev indkaldt af det, ed.execcommand metode.bemærk, at ed er, tinymce.activeeditor, objekt.lad os tage et kig på den callback funktioner:, i, dropcap, kommando, det ønske, som vi ønsker, er, når en bruger vælger et brev og klik, dropcap, brevet vil blive omdannet til at sætte fælles landbrugspolitik form.så hvordan får vi det brev?tja, ed.selection.getcontent, metode vil gøre det for os.næste gang, når vi har fået det brev, vi bare afslutte det inden for en, kalibrering, element.husk at sætte dette element er klasse værdi, dropcap, vi har defineret før, ikke?endelig har vi den fuldstændige tekst, der skal indsættes i redaktør.tinymce har en misligholdelse kommandoen med navn, mceinsertcontent, som anvendes til at indsætte specifikke indhold i redaktør, det er vist ovenfor.indholdet vil blive vedtaget, som det tredje argument om, mceinsertcontent metode. en lignende ting, der sker i, showrecent, kommando som i, dropcap, kommando, bortset fra at vi ikke har brug for at få brugeren er udvalgt indhold.vi simpelthen bare vise en dialog om brugeren, hvor mange stillinger, de vil dukke op, så stik det nummer værdi i et egnet shortcode syntaks.,, registrering af custom css for knapper (eventuelt), i stedet for at føje ren tekst, når de knapper indsæt indholdet til visuel redaktør, kan vi gøre det meget mere synlig ved registrering skik css for vores knapper.det afhænger af, hvilken type indhold, data, og du kan vælge en passende stil.for eksempel, vores, dropcap, stil kan være den samme som den, der viser på forenden.så du kan tage sin css kode i toppen af denne post, så det i, editor-style.css, fil (for misligholdelse, se, add_editor_style, for detais). for shortcodes, kan de måske ikke har en html element i sig selv.hvordan skal vi stil dem?nå, denne situation er langt mere kompliceret at opnå det resultat, det er ikke umuligt, men du kan se nogle misligholdelse wordpress knap såsom tilføje medier).men det kan stadig være en vanskelig, indpakning, at shortcode i html element, og så kalder det element, som ovenfor.det er ganske enkelt ikke helt perfekt.i denne stilling, kan vi ikke fokusere på det komplekse behandling.,, resultater, og de resultater, vi får, er vist som følgende:,,, teste dropcap knap.,,, på forenden:,,, dropcap brev, undtaget, og de seneste stillinger knap fungerer godt for: de seneste stillinger på arbejdet,.,, sidst vi dækkede en praksis, som er helt enkelt og let at følge.du vil opdage, at de stillinger, har du mulighed for at justere en knap at (antallet af stillinger, som vil vise).du ved, at vi brugte den misligholdelse javascript, hurtig, for at opnå dette.hvad, hvis du vil have en mere kompleks pop - up -, som har mange miljøer, snarere end blot en?- i en anden stilling, vil vi drøfte det og prøve noget andet. feedback om denne post vil blive værdsat.tak fordi du læste, og vi ses senere.,, reference,,, tinymce_custom_buttons,, at skabe en tinymce stik af,