, genanvendelige skik meta - kasser, del 3: yderligere områder,,,,, 1,,,,,,,,, 18,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss., i del 1 og 2 i vores skik meta - box skabelon tutor - serien, vi lærte at skabe et område antennegruppe til loop gennem og skabe en skik meta - æske med din standard felter.lad os kaste lidt javascript for nogle smarte, men yderst nyttige områder.,,,,,,, så de områder, vi dækker i denne forelæsning vil kræve jquery og jquery ui.heldigvis wordpress gør det nemt at anvende disse, wp_enqueue_script, og som af 3.3, alle de jquery - interaktioner og widgets er samlet med wordpress.da vi arbejder på en side, der allerede enqueues jquery, kan vi springe, men vi bliver nødt til at få jquery ui datepicker.vi har også brug for at skabe vores egen stylesheet, fordi de nødvendige css kommer ikke samlet i wordpress endnu, selv om de arbejder på det. hvis (is_admin()) (wp_enqueue_script ('jquery-ui-datepicker '); wp_enqueue_style ('jquery-ui-custom, get_template_directory_uri(). /css /jquery ui skik. css)}, vi skal kun bruge at lade disse i administrationen og ikke på forenden af webstedet, så tager de funktioner i et betinget.den første funktion kræver, datepicker og vil også lade den jquery - kerne.den anden opgave vil kalde vores jquery-ui-custom.css stylesheet fra temaet er css mappe.f.eks. stylesheet indgår i downloade fra begyndelsen af denne forelæsning kræver ikke billeder.du kan også skabe dit eget jquery - tema. lad os se på den mængde post, vi nødt til at styrke vores $custom_meta_fields, system, vi startede i 1. del, system (»mærket« = > dato,'desc = > en beskrivelse af området. "'id = > $præfiks.'date,'type = > »date«), dette system er næsten identisk med vores tekst, punkt på dagsordenen.det er vores vigtigste etiket, en beskrivelse, en unik id, og datoen er defineret.vi skulle lige til at gå til en grundlæggende gennemførelse af datoen picker i vores eksempel her, men hvis du har brug for at krydre deres anvendelse af den dato, så du kunne også tilføje andre oplysninger til den vifte, som f.eks. den foretrukne formater, lokalisering og interval for at nævne et par stykker.og så kan du bruge den information i følgende manuskript, der er vi nødt til at tilføje, at lederen af side:, add_action ('admin_head,'add_custom_scripts); funktion add_custom_scripts() (global $custom_meta_fields $post; $produktion = < manuskript type = "tekst /javascript" > jquery (function() {"hver ($custom_meta_fields som $område) (//loop gennem markerne efter visse typer, hvis ($område ['type". = = "date") $produktion. = jquery (". datepicker"). datepicker() «} $produktion. = '}). < /manuskript & gt, echo $udgangseffekt}, det skal tilføjes uden for $custom_meta_fields, system og uden for, show_custom_meta_box, callback funktion at aktivere den dato på alle områder med de pillere klasse "datepicker". //dato "date": echo '< input type = "tekst" klasse = "datepicker" navn = ". $område ['id"]. "" id = ". $område ['id"]. "" værdi = ". $meta." "størrelse =" 30 "/> < br /> < over klasse =" beskrivelse ">. $område ['desc). < /span >" pause. denne kodeks vil blive tilføjet efter den sidste "pause" i vores meta - box skift.,, en grundlæggende tekst input, tilføjer klasse "datepicker" til jquery funktion at finde, eventuelt ændre den type "date" at være html5 klar, slider, nogle gange er det nødvendigt at samle et antal, der er fastsat til den nøjagtige rækkevidde eller behov at være multipla af 5.- det jquery ål er godt for dette, fordi det gør det nemt at trække og glid til det nummer, du ønsker at komme ind på. wp_enqueue_script ('jquery-ui-slider), sikre, at kalde det dossier, ved at tilføje det til din is_admin() pakket enqueues., system (»mærket« = > "skyder",'desc » = > en beskrivelse af området. "'id = > $præfiks.'slider,'type = >" skyder ",'min = > 0,'max = > '100','step = > 5. '), igen, vi er ved at tilføje det til vores $custom_meta_fields, system, og der er et par særlige tilføjelser., ,'min' will be sued to set the minimum number allowed.,'max' is for the maximum number allowed,'step' is for setting what step interval to use., ,if ($field['type'] == 'slider') { \t$value = get_post_meta($post->ID, $field['id'], true); \tif ($value == '') $value = $field['min']; \t$output .= ' \t\t\tjQuery( "#'.$field['id'].'-slider" ).slider({ \t\t\t\tvalue: '.$value.', \t\t\t\tmin: '.$field['min'].', \t\t\t\tmax: '.$field['max'].', \t\t\t\tstep: '.$field['step'].', \t\t\t\tslide: function( event, ui ) { \t\t\t\t\tjQuery( "#'.$field['id'].'" ).val( ui.value ); \t\t\t\t} \t\t\t});'; },Add this bit of code to the loop in the ,add_custom_scripts, function we created in the last field type. dette vil øge den skik jquery, vi har brug for, for at oprette en slider.,, får værdien reddede i post - meta, hvis værdi er tom (fordi den er en ny post), fastsatte værdi til et minimum, tilføje jquery kode til produktionen af funktion ved hjælp af de værdier, der er fastsat i nettet den sidste smule. vil fortælle den værdi, der er fastsat af de slider for at blive reddet på input område, //en sag "skyder": $værdi = $meta!= "?$meta : '0'; \techo '<div id="'.$field['id'].'-slider"></div> \t\t\t<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$value.'" size="5" /> \t\t\t<br /><span class="description">'.$field['desc'].'</span>'; break;,Again, we're just using a text field to receive the slider's value., ,Include a div with the same id set int he jQuery for the slider to be created with,The input could be set to hidden if you customize your slider to display the number differently., ,Image,Since the introduction of Post Thumbnails, setting an image with a custom meta field isn't something we do a lot, but every once in awhile there comes a time when you need to set an image other than the post thumbnail, esisær ikke, når man bygger et stik af, der tager hensyn til, at brugeren er tema måske ikke støtte efter thumbnails.dette område vil give mulighed for at overføre et billede eller udvælge en fra medierne, upload, udviser en forsmag på det billede, og redde id for maksimal anvendelse muligheder., upload knap javascript, til at få vores knap udløser medier uploaderen, vi bliver nødt til at binde det med lidt javascript., jquery (funktion (jquery) (jquery (". custom_upload_image_button). klik (function() {formfield = jquery (dette). søskende (". custom_upload_image); se = jquery (dette). søskende (". custom_preview_image '); tb_show (", "media-upload.php?type = image & tb_iframe = sand '); window.send_to_editor = funktion (http: //(imgurl = jquery ('img, html). attr ('src) klasser = jquery ('img, html). attr ('class); id = klasser. erstatte (/(*)?wp image - /''); formfield. val (id); forpremiere. attr ('src, imgurl); tb_remove();} tilbage falske}); jquery (". custom_clear_image_button). klik (function() {var defaultimage = jquery (dette). parent(). søskende (". custom_default_image '). text(); jquery (dette). parent(). søskende (". custom_upload_image). val ('); jquery (dette). parent(). søskende (". custom_preview_image '). attr ('src, defaultimage); tilbage falske})}), sætter dem i en sædvane er fil og enqueue inden for deres is_admin() pakket enqueues., wp_enqueue_script ('custom-js, get_template_directory_uri(). /er /skik, det er "); den første funktion finder den knap, vil vi skabe snart med klasse" custom_upload_image_button "og preforms, et par forskforskellige ting på klik.,, finde det område, hvor vi redder de data og sætte det som "formfield", finder den misligholdelse, image, som vil vise billedet se og sat det som "forpremiere", siger thickbox åbne medier uploaderen, hvor du vil vælge dit billede med en opdatering eller fra medierne uploaderen efter image er url og sætte det som "imgurl", få billede id ved at ribbe den fra billedet er klasse og sætte det som "id" send "id" til en værdi af "formfield" send "imgurl" til src "forpremiere", tæt på den thickbox,, den anden funktion fortæller forbindelsen vil vi klasse som "custom_clear_image_button" klart både værdien af form og nulstille forpremiere til vores standard image. skabe området system ('name = > "ry",'desc = > 'A description for the field.', \t'id'\t=> $prefix.'image', \t'type'\t=> 'image' ),We just need the basic information for this field., //image case 'image': \t$image = get_template_directory_uri().'/images/image.png';\t \techo '<span class="custom_default_image" style="display:none">'.$image.'</span>'; \tif ($meta) { $image = wp_get_attachment_image_src($meta, 'medium');\t$image = $image[0]; }\t\t\t\t \techo\t'<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" /> \t\t\t\t<img src="'.$image.'" class="custom_preview_image" alt="" /><br /> \t\t\t\t\t<input class="custom_upload_image_button button" type="button" value="Choose Image" /> \t\t\t\t\t<small> <a href="#"klasse = "custom_clear_image_button" > fjerne image < /a > < /små > < br klart = "alle" /> < over klasse = "beskrivelse" >. $område ['desc). < /span > "pause. vi har et par ting, der foregår her, men med den måde, vi har skrevet javascript, bør dette arbejde godt, uanset hvor mange image inden du tilføjer.,, sæt kurs for misligholdelse image og gem det i en skjult levetid, til brug med fjerne link, hvis der allerede er en frelst image, ovveride med mellemstore af reddede image, tilføje en skjult inden for at redde billede id, tilføje forpremiere image, tilføje uploade knap og fjerne link, gentages områder, når du virkelig ind på ved hjælp af custom meta - områder for at lagre forskellige typer af data til en stilling, du kommer til run i nødvendigheden af at flere tilfælde af samme område.ved hjælp af en del af javascript, kan man nemt gentage et område, der er så mange gange, som du har brug for det, og løse dem med hiv og fald.There are a lot of ways we can use this functionality, but for our example we're just going to use a basic text input.,Add/Remove and Sortable JavaScript, jQuery('.repeatable-add').click(function() { \tfield = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true); \tfieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last'); \tjQuery('input', field).val('').attr('name', function(index, name) { \t\treturn name.replace(/(\\d+)/, function(fullMatch, n) { \t\t\treturn Number(n) + 1; \t\t}); \t}) \tfield.insertAfter(fieldLocation, jQuery(this).closest('td')) \treturn false; }); jQuery('.repeatable-remove').click(function(){ \tjQuery(this).parent().remove(); \treturn false; }); \t jQuery('.custom_repeatable). sortable ({uklarhed: 0,6, tilbage: det er rigtigt, markør: "gå", klare: ","}), kan du tilføje dette javascript til sædvane, er du allerede har skabt i de sidste skridt.den første funktion, ser ud til at tilføje knap og tilføjer en ny række tomme område, til udgangen af den liste over felter.det er der generelt, så du kan få så mange af disse gentages områder, som du har brug for.,, "område" er et klonet udgave af det sidste felt row "fieldlocation" minder manuskriptet, hvor afslutningen på listen, finder den input i "område", og resten er det værdi til tom og der tilsættes 1 til numeriske heltal, vi kan bruge til at redde de data, som en vifte, tilføje område efter fieldlocation, den næste funktion giver hver fjerne knap evne til at fjerne den række, når vi er sammen. endelig har vi fastsat lister er sortable og fastlægge klare, så du kan slæbe - og det rækker.der er ingen grund til at enqueue den jquery ui sortable samspil, for det er allerede brugt på den klippe efter side. skabe området system (»mærket« = > "repeterbarhed",'desc = > en beskrivelse af området. "'id = > $præfiks.'repeatable,'type = >" repeterbarhed "), der er ikke noget særligt ved dette område i blandt os.However, you could get pretty crazy here and add options for what kind of fields are used in the repeatable list., //repeatable case 'repeatable': \techo '<a class="repeatable-add button" href="#">+</a> \t\t\t<ul id="'.$field['id'].'-repeatable" class="custom_repeatable">'; \t$i = 0; \tif ($meta) { \t\tforeach($meta as $row) { \t\t\techo '<li><span class="sort hndle">