, bevarelse af wordpress widgets: del 1 af 2.,,,,, 1,,,,,,,,, 6,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,,, bedste wptuts 2011: hver uge i januar, skal vi se på nogle af vores favorit stillinger fra 2011.stik af udvikling ofte kan føles som det vilde vesten, hvis du laver noget fra bunden uden en boilerplate eller en lignende stik af arbejdet - tom er 2 del serie om bevarelse af wordpress widgets /plugins tilbyder nogle praktiske retningslinjer, der skal holde dig på sporet!når det kommer til udvikling af software, rammer og biblioteker er populære, fordi de er nyttige, ikke?de giver en ensartet måde at skrive og organisere kode i håb om, at udvikling og vedligeholdelse, så let som muligt.,,,,,,, det er de samme principper, som gælder for større virksomhedsplan systemer er lige så relevant for mindre projekter - f.eks. wordpress plugins - udviklet af et lille hold.og lige så store systemer er fulde af bevægelige dele, f.eks. er tilfældet med wordpress plugins.f.eks. har du det centrale kode, der er ansvarlig for at kommunikere med wordpress (via filtre, aktioner og kroge) administration instrumentbrætter, client-side synspunkter, javascript filer, stil ark, lokalisering af filer, så alle, der er opnået ved hjælp af mindst fire forskellige programmeringssprog. i min tid tilbragt i wordpress udvikling, jeg har lavet et par boilerplates, at jeg bruger til at begynde med hver af mine projekter.denne lektion vil tage et kig på min wordpress dims boilerplate kode, hvordan at udnytte det nye projekter, og et eksempel på anvendelse i håb om at hjælpe dig med at få din næste wordpress projekt til en god begyndelse.,, en dims boilerplate, organisation, når det kommer til udvikling, det typisk forsøger at gøre tingene så enkle som muligt ved planlægning for de nødvendige elementer, men dette er et tilfælde, som jeg agter at være udtømmende.det er næsten altid lettere at begynde at planlægge en boilerplate, når du kender alle de komponenter, som kan gå ind i systemet. et stik af i sidste ende kan bestå af følgende:,, centrale stik af kode, stil ark, java manuskripter, lokalisering af filer, avance, billeder, med alle de ovennævnte i betragtning, widget - boilerplate adresseregister er fastsat sådan, vi skal se på hvert enkelt register i detaljer senere i denne artikel, skelet, foruden fil organisation, jeg kan også lide at skodde den kode, der anvendes til at drive den dims.den wordpress codex [1] er en detaljeret redegørelse for den dims api [2], og fordi der er en vej til craft foreslår dem, jeg prøver at følge med.desuden er jeg tilhænger af at skrive min kode i en samt måde sammen med kode bemærkninger hjælper med til at forklare, hvad der foregår i hvert område af koden.som sådan er den oprindelige widget kode ser sådan ud:, <?php /* stik af navn, stik af uri: todo beskrivelse: todo version 1.0. forfatter: todo forfatter uri: todo forfatter e - mail: todo kørekort: ophavsret 2011, ([email protected]) programmet er gratis software; man kan omfordele og /eller ændre det, inden for rammerne af den nationale samlingsregering i offentligheden, kørekort, 2. udgave som offentliggjort af fri software - fonden.dette program er fordelt i det håb, at det vil være nyttigt, men uden nogen garanti, selv uden underforstående garantier for merchantability eller egnethed til et bestemt formål.se den nationale samlingsregering generelle offentlige licens for flere detaljer.du skulle have modtaget en kopi af den nationale samlingsregering generelle offentlige kørekort med dette program; hvis ikke, skrive til gratis software - instituttet, inc., 51, franklin st. femte sal, boston, mor 02110-1301 usa * ///todo: ændringer plugin_name til navnet på deres faktiske stik af klasse plugin_name udvider wp_widget {/* -------------------------------------------------- * /* * -------------------------------------------------- konstruktøren * /* * * widget - konstruktør.angiver classname og beskrivelse, instantiates * den dims, belastninger lokalisering filer, og som omfatter nødvendige manuskripter og * styles.* ///todo: det bør afspejle de afsnit i klassen definition ovenfor.funktion plugin_name() (//definere constnats hele stik af $- > init_plugin_constants(); //todo: ajourføring classname og beskrivelse $widget_opts = system ('classname = > plugin_name,'description = > __ ('short beskrivelse af stik af her. "plugin_locale) $denne - > wp_widget (plugin_slug, __ (plugin_name, plugin_locale), $widget_opts); load_plugin_textdomain (plugin_locale, falske dirname (plugin_basename (__file__))./lang /) //belastning javascript og stylesheets $- > register_scripts_and_styles();} //ende konstruktøren /* -------------------------------------------------- * /* api - funktioner /* -------------------------------------------------- * /* * * output indholdet af den dims.* * @ args den vifte af form elementer * @ instans * /funktion widget ($args $instans) (ekstrakt ($args, extr_skip); echo $before_widget; //todo: dette er hvor du hente den dims værdier //- dims omfatte (wp_plugin_dir. "/«.plugin_slug. "/synspunkter /widget. folkesundhedsprogrammet) echo $after_widget;} //ende widget /* * * processer, den dims er muligheder for at blive reddet.* * @ new_instance tidligere tilfælde af værdier, før den opdatering.* @ old_instance nye tilfælde af værdier, der frembringes via opdatering.* /funktion ajourføring ($new_instance, $old_instance) ($) = $old_instance; //eller ajourføre den dims med nye værdier tilbage $instans.} //ende widget /* * * skaber administration form for widget.* * @ instans den vifte af nøgler og værdier for den dims.* /funktion form ($instans) (//eller fastsætte standardværdier for din variabler $instans = wp_parse_args (array) $eksempel system ("= > ')); //, opbevarer de værdier af dims i en variabel //- administrationen form omfatter (wp_plugin_dir."/«.plugin_slug. "/synspunkter /admin. folkesundhedsprogrammet)} //ende form /* -------------------------------------------------- * /* private funktioner /* -------------------------------------------------- * /* * * initializes konstanter, der anvendes for nemheds skyld i * stik af.* /privat funktion init_plugin_constants() {*, * * dette giver den entydige identifikator for din stik af, der anvendes i * lokalisere strengene, der anvendes i.* * for eksempel: wordpress dims boilerplate indbyggere.* hvis (!defineret ('plugin_locale ')) (definere ('plugin_locale "," stik af navn locale');} //hvis /*, * * definerer dette som navnet på din stik af.det er, hvad viser * i widgets område af wordpress.* * for eksempel: wordpress dims boilerplate.* hvis (!defineret ('plugin_name ')) (definere ('plugin_name "," stik af navn)) //hvis /*, * * det er kuglen i din stik af, der anvendes i starter med den wordpress api - grænseflade.* dette bør også være * fortegnelse, hvor din stik af er bosat.use bindestreger.* * for eksempel: wordpress dims boilerplate * /er.defineret ('plugin_slug ')) (definere ('plugin_slug "," stik af navn skovsnegl ");} //, hvis} //ende init_plugin_constants /* * * registre og enqueues stylesheets for administration - panel og * offentlige i stedet.* /privat funktion register_scripts_and_styles() (hvis (is_admin()) ($- > load_file (plugin_name "/".plugin_slug. "/er /admin. js, sande); $- > load_file (plugin_name "/".plugin_slug. "/css /admin. css)} andre {$- > load_file (plugin_name "/".plugin_slug. "/er /admin. css, sande); $- > load_file (plugin_name "/".plugin_slug. "/css /widget. css)} /////////////////, hvis ellers} udgangen register_scripts_and_styles /* * * hjælper funktion for registrering og enqueueing manuskripter og styles.* * @ navn legitimation til at registrere wordpress * @ file_path vejen til den egentlige fil * @ is_script frivilligt argument for, hvis det kommende file_path er en javascript kilde fil.* /privat funktion load_file ($navn, $file_path, $is_script = falske) ($url = wp_plugin_url.$file_path. $file = wp_plugin_dir.$file_path; hvis (file_exists ($fil)) (hvis ($is_script) (wp_register_script ($navn, $url); wp_enqueue_script ($navn);} andre (wp_register_style ($navn, $url); wp_enqueue_style ($navn)) //, hvis} hvis) ////ende load_file} //ende klasse add_action ('widgets_init, create_function ("," register_widget ("plugin_name"); ')); //, husk at ændre denne svarer til klasse definition ovenfor?> bemærker, at der er en række todo er i kode.disse er nyttige, navnlig i forbindelse med at skrive din kode på toppen af boilerplate., konstatere, at der er tre primære dele af koden, men:,, konstruktøren.denne funktion er ansvarlig for initialiserer widget, der importerer lokalisering af filer, og herunder javascript kilder og stil, plader, api - funktioner.disse funktioner er de tre funktioner, der er nødvendige for forvaltningen af, udviser, og ajourføre den dims, hjælper funktioner.disse er private funktioner, som jeg bruger til at hjælpe med ofte gentagne eller nødvendige opgaver. de tre vigtigste funktioner, api - funktioner er nødvendige for at udvikle din stik af.,, widget() uddrag lagrede værdier, og at den offentlige mening update() er ansvarlig for ajourføring af tidligere reddede værdier med de værdier, som brugeren, form() gør administrationen form og er nødvendige for lagring af funktioner, de nye værdier.,, fordi plugins ofte er opdelt mellem administration funktionalitet og kunden for funktionalitet, jeg deler min javascript kilde, stil ark, og http: //i overensstemmelse hermed.jeg hedder disse filer i overensstemmelse hermed og slå dem ud på en passende måde:, javascript kilder:, administration, er:, jquery (funktion ($) (//sted din administration specifik kode her}), widget. er:, jquery (funktion ($) (//sted din offentlige står over for javascript her}), stil ark:, admin. css: /* denne stil plader anvendes til stil administrationen mulighed i form af den dims.* /, widget. css: /* denne stil plader anvendes til at stil den offentlige opfattelse af den dims.* /, holdninger, <!- det her er vant til - administration i form af den dims.- > <!- det her er vant til - den offentlige for widget.- >, let, ikke?du kan se (og gaffel!)hele denne boilerplate herunder lokalisering filer og gør den github. der er nu et sted for alting, og når det kommer til skib, du bare udelukke visse filer fra den endelige bygge... et eksempel med deres sociale netværk, når det kommer til programmering, praksis, bidrager til at lære et nyt sprog eller drikkepenge her er et kort eksempel på brugen af ovennævnte boilerplate at skabe en enkel widget gør det let at dele din twitter og facebook, og google + forbindelser. vi sætter kravene:,, en administration på for at komme ind på værdier.dette omfatter avance og styles. en offentlig mening, der står for forbindelserne til sociale netværk.dette omfatter også - og styles., muligheder for lagring af en twitter brugernavn, facebook brugernavn og google + id, for det andet, lad os åbne boilerplate og begynde stubbing de nødvendige dele. først definerer vi ud og stik af navn, kugle, og lokale værdier.disse anvendes gentagne gange i kode, så det er rart at oplagre dem som konstanter for let læsning.find init_plugin_constants() funktion og sørge for, at deres kode ser sådan ud:, privat funktion init_plugin_constants() (hvis (!defineret ('plugin_locale ')) (definere ('plugin_locale "," min sociale netværk locale');} //ende hvis (!defineret ('plugin_name ')) (definere ('plugin_name "," min sociale netværk)} //ende hvis (!defineret ('plugin_slug ')) (definere ('plugin_slug "," min sociale netværk)} //, hvis} //ende init_plugin_constants, efter det, vi har brug for at forberede konstruktøren:, funktion my_social_network() (//definere konstanter, der anvendes i stik af $- > init_plugin_constants(). $widget_opts = array ('classname = > plugin_name,'description = > __ (»en simpel wordpress dims for at dele nogle af deres sociale netværk. "plugin_locale) $- > wp_widget (plugin_slug, __ (plugin_name, plugin_locale), $widget_opts); load_plugin_textdomain (plugin_locale, falske dirname (plugin_basename (__file__))./lang /) //belastning javascript og stylesheets $- > register_scripts_and_styles();} //ende konstruktoeren og slukke api funktioner:, funktion widget ($args $instans) (ekstrakt ($args, extr_skip); echo $before_widget. $twitter_username = tomme ($) ['twitter_username '])? "- apply_filters ('twitter_username, $instans ['twitter_username ']); $facebook_username = tomme ($) ['facebook_username'])? "- apply_filters ('facebook_username, $instans ['facebook_username ']); $google_plus_id = tomme ($) ['google_plus_id'])? "- apply_filters ('google_plus_id, $instans ['google_plus_id ']) //- dims omfatte (wp_plugin_dir. "/«.plugin_slug. "/synspunkter /widget. folkesundhedsprogrammet) echo $after_widget;} //ende widget funktion ajourføring ($new_instance, $old_instance) ($) = $old_instance. $instans ['twitter_username '] = strip_tags (stripslashes ($new_instance ['twitter_username']); $instans ['facebook_username '] = strip_tags (stripslashes ($new_instance ['facebook_username']); $instans ['google_plus_id '] = strip_tags (stripslashes ($new_instance ['google_plus_id']); tilbage $instans.} //ende widget funktion form ($instans) ($instans = wp_parse_args (array) $eksempel system ('twitter_username = > '"," facebook_username = > "," google_plus_id = >')); $twitter_username =strip_tags (stripslashes ($new_instance ['twitter_username ']); $facebook_username = strip_tags (stripslashes ($new_instance ['facebook_username']); $google_plus_id = strip_tags (stripslashes ($new_instance ['google_plus_id ']) //- administrationen form omfatter (wp_plugin_dir. "/«.plugin_slug. "/synspunkter /admin. folkesundhedsprogrammet)} //ende udgør den endelige udgave af stik af burde se sådan, <?php /* stik af navn: mit sociale netværk, stik af uri: http://github.com/tommcfarlin/my-social-network beskrivelse: en simpel wordpress dims for at dele nogle af deres sociale netværk.version 1.0. forfatter: tom mcfarlin forfatter uri: http://tommcfarlin.com forfatter e - mail: [email protected] kørekort: ophavsret 2011 mit sociale netværk ([email protected]). dette program er gratis software; man kan omfordele og /eller ændre det, inden for rammerne af den nationale samlingsregering i offentligheden, kørekort, 2. udgave, som blev offentliggjort af fri software - fonden.dette program er fordelt i det håb, at det vil være nyttigt, men uden nogen garanti, selv uden underforstående garantier for merchantability eller egnethed til et bestemt formål.se den nationale samlingsregering generelle offentlige licens for flere detaljer.du skulle have modtaget en kopi af den nationale samlingsregering generelle offentlige kørekort med dette program; hvis ikke, skrive til gratis software - instituttet, inc., 51, franklin st. femte sal, boston, mor 02110-1301 usa * /klasse my_social_network udvider wp_widget {* -------------------------------------------------- * /* * -------------------------------------------------- konstruktøren * /* * * widget - konstruktør.angiver classname og beskrivelse, instantiates * den dims, belastninger lokalisering filer, og som omfatter nødvendige manuskripter og * styles.* /funktion my_social_network() (//definere konstanter, der anvendes i stik af $- > init_plugin_constants(). $widget_opts = system ('classname = > plugin_name,'description = > __ (»en simpel wordpress dims for at dele nogle af deres sociale netværk. "plugin_locale) $- > wp_widget (plugin_slug, __ (plugin_name, plugin_locale), $widget_opts); load_plugin_textdomain (plugin_locale, falske dirname (plugin_basename (__file__))./lang /) //belastning javascript og stylesheets $- > register_scripts_and_styles();} //ende konstruktøren /* -------------------------------------------------- * /* api - funktioner /* -------------------------------------------------- * /* * * output indholdet af den dims.* * @ args den vifte af form elementer * @ instans * /funktion widget ($args $instans) (ekstrakt ($args, extr_skip); echo $before_widget. $twitter_username = tomme ($) ['twitter_username '])? "- apply_filters ('twitter_username, $instans ['twitter_username ']); $facebook_username = tomme ($) ['facebook_username'])? "- apply_filters ('facebook_username, $instans ['facebook_username ']); $google_plus_id = tomme ($) ['google_plus_id'])? "- apply_filters ('google_plus_id, $instans ['google_plus_id ']) //- dims omfatte (wp_plugin_dir. "/«.plugin_slug. "/synspunkter /widget. folkesundhedsprogrammet) echo $after_widget;} //ende widget /* * * processer, den dims er muligheder for at blive reddet.* * @ new_instance tidligere tilfælde af værdier, før den opdatering.* @ old_instance nye tilfælde af værdier, der frembringes via opdatering.* /funktion ajourføring ($new_instance, $old_instance) ($) = $old_instance. $instans ['twitter_username '] = strip_tags (stripslashes ($new_instance ['twitter_username']); $instans ['facebook_username '] = strip_tags (stripslashes ($new_instance ['facebook_username']); $instans ['google_plus_id '] = strip_tags (stripslashes ($new_instance ['google_plus_id']); tilbage $instans.} //ende widget /* * * skaber administration form for widget.* * @ instans den vifte af nøgler og værdier for den dims.* /funktion form ($instans) ($instans = wp_parse_args (array) $eksempel system ('twitter_username = > "," facebook_username = > "," google_plus_id = > ')); $twitter_username = strip_tags (stripslashes ($new_instance ['twitter_username "]); $facebook_username = strip_tags (stripslashes ($new_instance ['facebook_username']); $google_plus_id = strip_tags (stripslashes ($new_instance ['google_plus_id ']) //- administrationen form omfatter (wp_plugin_dir."/«.plugin_slug. "/synspunkter /admin. folkesundhedsprogrammet)} //ende form /* -------------------------------------------------- * /* private funktioner /* -------------------------------------------------- * /* * * initializes konstanter, der anvendes for nemheds skyld i * stik af.* /privat funktion init_plugin_constants() (hvis (!defineret ('plugin_locale ')) (definere ('plugin_locale "," min sociale netværk locale');} //ende hvis (!defineret ('plugin_name ')) (definere ('plugin_name "," min sociale netværk)} //ende hvis (!defineret ('plugin_slug ')) (definere ('plugin_slug "," min sociale netværk)} //, hvis} //ende init_plugin_constants /* * * registre og enqueues stylesheets for administration - panel og * offentlige i stedet.* /privat funktion register_scripts_and_styles() (hvis (is_admin()) ($- > load_file (plugin_name "/".plugin_slug. "/er /admin. js, sande); $- > load_file (plugin_name "/".plugin_slug. "/css /admin. css)} andre {$- > load_file (plugin_name "/".plugin_slug. "/er /admin. css, sande); $- > load_file (plugin_name "/".plugin_slug. "/css /widget. css)} /////////////////, hvis ellers} udgangen register_scripts_and_styles /* * * hjælper funktion for registrering og enqueueing manuskripter og styles.* * @ navn legitimation til at registrere wordpress * @ file_path vejen til den egentlige fil * @ is_script frivilligt argument for, hvis det kommende file_path er en javascript kilde fil.* /privat funktion load_file ($navn, $file_path, $is_script = falske) ($url = wp_plugin_url.$file_path. $file = wp_plugin_dir.$file_path; hvis (file_exists ($fil)) (hvis ($is_script) (wp_register_script ($navn, $url); wp_enqueue_script ($navn);} andre (wp_register_style ($navn, $url); wp_enqueue_style ($navn)) //, hvis} hvis) ////ende load_file} //ende klasse add_action ('widgets_init, create_function ("," register_widget ("my_social_network") ').>, lad os tilføje nogle former for administration form.find /css /admin.css og tilføje følgende kode:,. papir fieldset {grænse: 1px fast&#ddd; bredde: 90%; polstring: 5%} mulighed (margen: 12px 0 12px 0} mulighed input (bredde: 100%), og lad os skrive den avance, der vil gøre den opfattelse af administrationen form:, < div klasse = "papir" > < fieldset > < legende > <?folkesundhedsprogrammet aspektet _e (mit sociale netværk, plugin_locale)?> < /legende > < div klasse = "mulighed" > < etiket til = "twitter" > <?folkesundhedsprogrammet aspektet _e ('twitter brugernavn, plugin_locale)?> < /etiketten > < input type = "tekst" id = "<?php echo $- > get_field_id ('twitter_username)?> "navn =" <?php echo $- > get_field_name ('twitter_username)?> "værdi =" <?php echo $instans ['twitter_username ']?> "klasse =" /> < /div > < div klasse = "mulighed" > < etiket til = "facebook" > <?folkesundhedsprogrammet aspektet _e ('facebook brugernavn, plugin_locale)?> < /etiketten > < input type = "tekst" id = "<?php echo $- > get_field_id ('facebook_username)?> "navn =" <?php echo $- > get_field_name ('facebook_username)?> "værdi =" <?php echo $instans ['facebook_username ']?> "klasse =" /> < /div > < div klasse = "mulighed" > < etiket til = "google_plus" > <?folkesundhedsprogrammet aspektet _e ('google + id ", plugin_locale)?> < /etiketten > < input type = "tekst" id = "<?php echo $- > get_field_id ('google_plus_id)?> "navn =" <?php echo $- > get_field_name ('google_plus_id)?> "værdi =" <?php echo $instans ['google_plus_id ']?> "klasse =" /> < /div > < /fieldset > < /div > <!- /papir - >, endelig er vi nødt til at skrive en avance for at gøre offentligheden i betragtning af den dims, når det er bo på den faktiske blog:, < h3 > <?folkesundhedsprogrammet aspektet _e (mit sociale netværk, plugin_locale)?> < /h3 > < ul klasse = "min sociale netværk" > <?folkesundhedsprogrammet (strlen (trim ($twitter_username) > 0) {?> < li > < en href = "http: //twitter. kom /<?php echo $twitter_username;?> "> <?folkesundhedsprogrammet aspektet _e ('twitter, plugin_locale)?> < /a > < /li > <?php} //, hvis?> <?folkesundhedsprogrammet (strlen (trim ($facebook_username) > 0) {?> < li > < en href = "http: //facebook. kom /<?php echo $facebook_username;?> "> <?folkesundhedsprogrammet aspektet _e ('facebook, plugin_locale)?> < /a > < /li > <?php} //, hvis?> <?folkesundhedsprogrammet (strlen (trim ($google_plus_id) > 0) {?> < li > < en href = "http: //plus. google. kom /<?php echo $google_plus_id;?> "> <?folkesundhedsprogrammet aspektet _e ('google + «, plugin_locale)?> < /a > < /li > <?php} //, hvis?> < /ul > <!- min sociale netværk - - >, det er klaret.ikke dårligt, hva '?en del af arbejdet og funktionalitet gjort relativt hurtigt. du kan downloade fungerer kildekoden (herunder en associeret gør) for denne dims på github eller her i wptuts.i sidste ende opretholdelsen af et software - projekter beløber sig til at forsøge at organisere kompleksitet.selv om ovennævnte boilerplate ikke er * * måde at organisere og forvalte kode, det er en effektiv måde at organisere * * kode, og jeg har konstateret, er meget nyttige i mange af mine projekter, og vi håber, det hjælper dig med din fremtidige arbejde. husk på, du kan få en kopi af både boilerplate og f.eks. projekt fra deres respektive github samlinger.jeg anbefaler, bookmarking den wordpress codex [1].det er en kolossal ressource for enhver, der søger at gøre avancerede wordpress udvikling.,http://codex.wordpress.orghttp://codex.wordpress.org/widgets_api, videre til del to, tjek den anden del af denne lektion i serier, hvor vi skal grave dybere i at skabe pålidelige plugins!vi skal se på, hvordan man bruger, kroge, inden for wordpress - og så vil vi virkelig sætte vores boilerplate til brug for at skabe en anden nyttig stik af.klar til anden del?,