, integration af wp medier uploaderen i temaet med jquery,,,,, andel,,,,,,,, 30,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, for et stykke tid siden, vi havde en forelæsning, der viser, hvordan at integrere wordpress medier uploaderen i tema, og stik af muligheder.baseret på denne tankegang, så vil vi udvikle en anden version af det ved at ændre noget i javascript (den centrale php kode er næsten det samme som den gamle).kort sagt, vi vil drage fordel af jquery at skabe en lille jquery stik af at møde vores formål i stedet.,,, planlægning og forberedelse af, vil vi skabe en stikprøve muligheder side, som indeholder to form områder: logo og favicon.hvis hver af dem har tre komponenter, herunder: en tekst inden for indlæsning af et billede er url, en knap til vise wp medier uploaderen pop - up - og en forsmag område, der for øjeblikket udvalgte image. i temaet fortegnelse, skabe to sager ved navn, wptuts.php, og wptuts upload. js,.så åbn den, functions.php, i det samme register og vedlægge følgende kode: kræver ('wptuts. folkesundhedsprogrammet "), at skabe muligheder side, standardløsninger, først skal vi sætte standardløsninger, for vores muligheder side.vi agter at samle alle miljøer i en enkelt løsning, wptuts_options, i dette tilfælde.her er indholdet af wptuts. folkesundhedsprogrammet, er:, add_action ('after_setup_theme "," wptuts_default_options); funktion wptuts_default_options() (//kontrollere, hvorvidt den wptuts_options findes //hvis ikke skabe nye.hvis (!get_option ('wptuts_options')) ($muligheder = system ('logo = > ",'favicon = >"). update_option (' wptuts_options, $muligheder)), wptuts_default_options, funktion vil blive henrettet efter tema er anlæg, tilføje menu. side, så har vi brug for et valg, side, som vores form felter vises.denne post ikke fokusere meget på indstillinger api, vi går ud fra, at du forstår det.hvis du ikke er bekendt med de indstillinger, api - anbefaler jeg, at du henviser til andre stillinger ved det, såsom den fuldstændige vejledning til wordpress indstillinger api, f.eks., add_action ('admin_menu "," wptuts_add_page); funktion wptuts_add_page() ($wptuts_options_page = add_menu_page (' wptuts "," wptuts muligheder "," manage_options "," wptuts "," wptuts_options_page '); add_action (' admin_print_scripts - ".$wptuts_options_page, wptuts_print_scripts)} funktion wptuts_options_page() {?> < div klasse ='wrap "> < div id ='icon-tools klasse ='icon32" > < /br > < /div > < h2 > wptuts + muligheder (< /h2 > <?folkesundhedsprogrammet (isset ($_get ['settings-updated ']) & &. $_get ['settings-updated']):?> < div klasse ='updated "> < p > < stærk > indstillinger reddet. < /stærk > < /p > < /div > <?folkesundhedsprogrammet aspektet endif;?> < form handlingen ='options. folkesundhedsprogrammet "metode ='post" > <?folkesundhedsprogrammet aspektet settings_fields ('wptuts_options)?> <?folkesundhedsprogrammet aspektet do_settings_sections ('wptuts)?> <?folkesundhedsprogrammet aspektet submit_button();?> < /form > < /div > <?php} <!-?> - > koden over blot føjer en ny menu side, der har en menu titel lyder, wptuts muligheder, og kuglen værdien af wptuts,.bemærk den funktion, opkald til wptuts_options_page, vil det gøre indholdet af vores muligheder side.ved siden af det, vi også tilføje en funktion, der hedder, wptuts_print_scripts, som enqueues javascript og stylesheet på vores muligheder side er klo, denne funktion vil blive omtalt senere. registrere muligheder, add_action ('admin_init "," wptuts_add_options); funktion wptuts_add_options() (//registrering af nye muligheder register_setting (' wptuts_options "," wptuts_options "," wptuts_options_validate '); add_settings_section (' wptuts_section "," wptuts + muligheder "," wptuts_section_callback "," wptuts'); add_settings_field ('wptuts_logo "," wptuts + logo, wptuts_logo_callback "," wptuts "," wptuts_section'); add_settings_field ('wptuts_favicon "," wptuts + favicon "," wptuts_favicon_callback "," wptuts "," wptuts_section)} funktion wptuts_options_validate ($) værdier (for hvert ($værdier som $n = > $v) $- værdier [n] = $esc_url ($); tilbage $værdier;}, kan du huske den mulighed, der hedder, wptuts_options,?nu er vi faktisk register til indstillinger api - grænseflade.den fremlagde værdi vil blive valideret af den funktion, wptuts_options_validate,.denne kode også registre over en ny sektion, som er vores nye om muligheder.de tre funktioner, som vil gøre indholdet af den nyoprettede afdeling og indstillinger:, funktion wptuts_section_callback() {* trykke noget * /}; funktion wptuts_logo_callback() {$muligheder = get_option ('wptuts_options)?> < over klasse ='upload "> < input type ='text" id ='wptuts_logo klasse ='regular-text tekst lægger navn ='wptuts_options [logo] værdi = <?php echo esc_url ($muligheder ["logo"]).> '/> < input type ='button klasse ='button knap upload "værdi ='upload et billede" /> < /br > < img stil ='max-width: 300px; display: blok "src = <?php echo esc_url ($muligheder ["logo"]).> "klasse ='preview-upload /> < /span > <?php} funktion wptuts_favicon_callback() {$muligheder = get_option ('wptuts_options)?> < over klasse ='upload "> < input type ='text" id ='wptuts_favicon klasse ='regular-text tekst lægger navn ='wptuts_options [favicon] værdi = <?php echo esc_url ($muligheder ("favicon"]).> '/> < input type ='button klasse ='button knap upload "værdi ='upload et billede" /> < /br > < img stil ='max-width: 300px; display: blok "src = <?php echo esc_url ($muligheder ("favicon"]).> "klasse ='preview-upload /> < /span > <?php} <!-?> - >, kan du se hver indstilling består af tre dele, som vi skulle over?teksten inden for klassen er værdien af tekst, upload, knap, upload, for knap, og værdien af forpremiere upload, for de resterende forpremiere område.vi efterlod liget af wptuts_section_callback, tom, fordi vi ikke behøver at trykke yderligere oplysninger, bare skriv alle sine omgivelser.andre emner, som vi nævner ikke er indbygget wordpress klasser, vi bruger dem til bedre ui.,, omfatter nødvendige manuskripter, som tidligere har sagt, må vi fastsætte nogle vigtige indbygget manuskripter, herunder thickbox og medier, upload,:, funktion wptuts_print_scripts() {wp_enqueue_style ('thickbox); //stylesheet, der anvendes af thickbox wp_enqueue_script (' thickbox '); wp_enqueue_script (media upload "); wp_enqueue_script (' wptuts upload", get_template_directory_uri(). "/wptuts upload. js, system ('thickbox "," media upload ")), sidste linje i funktion ovenfor, vil integrere vores, wptuts-upload.js, fil (det er stadig tom så vidt, at vi har skabt.alle vores javascript kode vil blive skrevet her, så åbner den og gå videre til næste punkt.,, skabe jquery stik af, i, wptuts-upload.js, fil, første ting, vi skal gøre, er at aktivere base i den nye stik af: (funktion ($) {% (function() {$. fn.wptuts = funktion (optioner) {var vælgeren = $(dette). komitéen; //få gearvælgeren //sæt standardløsninger, var misligholdelser = {'preview:. forpremiere upload ",'text:. tekst, upload,'button": ".". '} var muligheder = $. udvide (misligholder sine forpligtelser. optioner)))) (jquery), vi har skabt en jquery stik af navn, wptuts,.det, i komitéen, angiver html element eller genstand, at det stik af vil få indflydelse på.hvis vi f.eks. skrive javascript sådan her: $("noget"). wptuts(), og vælgeren vil være html element med et klasse.vi plejer at bestå i papir, jquery stik af vil manipulere sit barn komponenter.tag et kig på vores to skabt indstillinger, hver af dem har et stykke papir, hvis klasse hedder, uploade.så senere anvendelse, vil vi gøre dette: $(. upload "). wptuts(); //over alle html element med klasse er værdien af" overføring til jquery stik af. de misligholdelser, variable har alle standardløsninger, for vores stik af.vi definerer tre misligholdelse egenskaber, hvis navn anføres elementer, de henviser til, og deres værdier er http: //vælgeren, disse værdier guide vores stik af og fastslå, som vælgeren, er barn element er tekstfeltet, knap eller forpremiere område.naturligvis er disse muligheder kan erstattes af brugernes valgmuligheder (hvis de findes).de valgmuligheder, der er den variabel, der fastholder, at brugernes valgmuligheder.endelig er vi fusionere to slags muligheder i en variabel, der hedder, optioner,., næste, vi må tilføje en begivenhed, kontakt til knap element: $. fn.wptuts = funktion (muligheder) (var - vælgeren = $(dette). komitéen; //få gearvælgeren //sæt standardløsninger, var misligholdelser = {'preview:. forpremiere upload ",'text:. tekst, upload,'button": ".". '} var muligheder = $. udvide (misligholdelser, optioner); //når dosisknappen er trykket...$(options.button). klik (function() (//få teksten element.var tekst = $(dette). søskende (options.text); //vise wp medier uploaderen pop - up - tb_show ("uploader et logo, media-upload.php?referer = wptuts & type = image & tb_iframe = sandt & post_id = 0, falske); //at definere den globale funktion send_to_editor "//definere, hvor den nye værdi vil blive sendt til window.send_to_editor = funktion (http: ////////////////-) (url af nyt image var src = $(img ', html). attr (src); //sende denne værdi til teksten.tekst. attr ("værdi", src). udløser ('"); tb_remove(); //så tæt på den pop - up - vindue} tilbage falske})}, når knappen er trykket, jquery affyrer et klik begivenhed kontaktperson.nedenfor er strømmen af denne begivenhed funktion:,, finde tekstfeltet, der er forbundet med det.fordi teksten er sin søster, vi bruger, søskende, metode med den tekst, der er klasse værdi som argument. vis wp medier uploaderen pop - up - vindue for at uploade image, eller vælge en fra biblioteket. at definere, send_to_editor, funktion.denne globale funktion blev oprindeligt defineret af wp medier uploaderen er dens vigtigste opgave at placere et fingerpeg om, hvor de nye html image element (hvis brugeren få et billede fra pop - up - vindue) sendes til.vi vil analysere det html image element er permalink værdi og opbevare den i, src, variable., så denne værdi, er værdien af teksten.før jeg afslutter det pop - up - vindue ved hjælp af, tb_remove, funktion, sætter vi en begivenhed, der hedder, ændring, at tekstfeltet element, som er defineret af nedenstående.,,, $(options.text). bind ("ændring", function() (//få værdien af aktuelle objekt var url = this.value; //bestemme forpremiere område var forpremiere = $(dette). søskende (options.preview); //binder den værdi, se felt $(preview). attr ("src, url)}), hvis teksten område har en ny værdi, er denne værdi vil blive øjeblikkeligt bundet til forpremiere område for at vise det nyudvalgte image.den endelige javascript skabe stik af vil være: (funktion ($) {% (function() {$. fn.wptuts = funktion (muligheder) (var - vælgeren = $(dette). komitéen; //få gearvælgeren //sæt standardløsninger, var misligholdelser = {'preview ":" forpremiere upload ",'text".: '. tekst, upload,'button ":". ".'} var muligheder = $. udvide (misligholdelser, optioner); //når dosisknappen er trykket...$(options.button). klik (function() (//få teksten element.var tekst = $(dette). søskende (options.text); //vise wp medier uploaderen pop - up - tb_show ("uploader et logo, media-upload.php?referer = wptuts & type = image & tb_iframe = sandt & post_id = 0, falske); //at definere den globale funktion send_to_editor "//definere, hvor den nye værdi vil blive sendt til window.send_to_editor = funktion (http: ////////////////-) (url af nyt image var src = $(img ', html). attr (src); //sende denne værdi til teksten.tekst. attr ("værdi", src). udløser ('"); tb_remove(); //så tæt på den pop - up - vindue} tilbage falske}); $(options.text). bind (" ændring ", function() (//få værdien af aktuelle objekt var url = this.value; //bestemme første område var forpremiere = $(dette). søskende (options.preview); //binder den værdi, se felt $(preview). attr (src, url)})} //anvendelse $(. upload"). wptuts(); //anvendelse som default mulighed.})} (jquery), anvendelse, vores jquery stik af er klar til at blive brugt.i slutningen af denne kode stumper ovenfor (det sted, vi fremsatte), tilføjes det enkelt kode: //anvendelse $(. upload "). wptuts(); //anvendelse som default mulighed. den fulde måde at anvende dette stik af: $(komitéen). wptuts ('preview": /* forpremiere er vælgeren * /,'text: /* tekst er vælgeren * /,'button: /* knap er vælgeren * /), alt hvad du behøver er at udfylde deres selektorer ordentligt (afhængigt af din html struktur). for at få værdien af disse billeder "url, - denne: $wptuts_options = get_option ('wptuts_options. $wptuts_logo = $wptuts_options ['logo']; //logo $wptuts_favicon = $wptuts_options ['favicon ']; //favicon - logo, blot tilføje følgende kode i en skabelon fil, du vil vise det logo.prøv at sige det til fods. php, f.eks. <?php $wptuts_options = get_option ('wptuts_options)?> <?folkesundhedsprogrammet aspektet om (""!= $wptuts_options ['logo ']):?> < en href = "<?php echo home_url();?> "> < img afsnit =" <?folkesundhedsprogrammet aspektet bloginfo (navn).> "src =" <?php echo esc_url ($wptuts_options ['logo ']).> "/> < /a > <?folkesundhedsprogrammet aspektet endif;?>, - favicon i, wptuts. php,, vedlægges denne kode:, funktion wptuts_add_favicon() ($wptuts_options = get_option ('wptuts_options. $wptuts_favicon = $wptuts_options ['favicon']?> < forbindelse rel = "ikon" type = "image /men heller ikke dér er menneskene sikre" href = "<?php echo esc_url ($wptuts_favicon)?> "> <?php} add_action ('wp_head "," wptuts_add_favicon). <!-?> - >,, indgåelse, dette er blot en enkelt stik af, det vil give dig muligheden for at integrere wp medier uploaderen meget mere easilly og større fleksibilitet.vi behøver ikke gentage mange af javascript kode for hver formular uploade input i tilfælde af, at du har mange uploade input, der integreres med wp medier uploaderen.jeg håber, du kan lide det.feedback ville blive værdsat. du kan downloade kildekode øverst på denne post eller finde det på github.,, referencer, hvordan at integrere wordpress medier uploaderen i tema, og stik af muligheder, den fuldstændige vejledning til wordpress indstillinger api, skrive en jquery stik af,