forståelse af, hvordan wordpress billeder arbejde (for bedre deres design)

, forståelse af, hvordan wordpress billeder arbejde (for bedre deres design),,,,, 67,,,,,,,, 26,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,,,,, hvad du vil lave,,, en af de største udfordringer, vi står over for i dag, er korrekt håndtering af web - udviklere billeder til deres design.vi står over for problemer, som ser billedet ordentligt for skærmen, det er at blive set på, under hensyntagen til brugernes download - hastigheder, om udstyret er nethinden (eller i almindelighed en super høj opløsning skærme), og mere til. , heldigvis, < billede > element for nylig blev accepteret - , som vil blive gennemført af store browsere, men der er stadig meget at gøre.heldigvis er den måde, wordpress håndtag billeder gør det meget lettere. , hvordan medierne uploaderen fungerer, lad os gå gennem en hurtig lynkursus i at bruge medierne uploaderen.det er tilgængeligt i wordpress administration af flere områder, herunder stillinger, sider, sædvane efter typer, der støtter den (generelt redaktør) og media - menu. , den eneste forskelle mellem medierne menu, og resten er det et billede vil være direkte forbundet med post eller side, hvis det er overført fra redaktør. ,,,,, engang et billede bliver uploadet, wordpress vil uden at skabe op til 4 størrelser: , virksomhed beskrevet (150x150), medium (maks. 300 x 300 max), stor (640 max x 640 max), fuld (den oprindelige størrelse af billedet). , kan du også tilføje dit eget billede størrelse ved hjælp af den funktion, , add_image_size(),.for eksempel, hvis vi ønsker at tilføje et billede af et produkt, der er 700px bred af 450px højt, vi ville gøre. ,,, add_image_size ("produkt img ', 700, 450, falske), det siger wordpress for at skabe et nyt image ved navn" produkt img' med vores specificeret dimensioner.det sidste argument om, hvorvidt image skal være dyrket. , når der, falske, image vil blive ændret tilsvarende uden afgrøder; når der rigtigt, image vil blive berørt, enten fra sider eller toppen /bunden.vær forsigtig med den her, fordi resultaterne varierer fra billede for billede. , indsættelse af et billede, der er to måder at indsætte et billede i et post - eller side: den første er igennem medierne uploaderen, som ses her: ,,,,, anden måde ved hjælp af en var image.du kan sætte var billeder ved at tilføje denne kodeks til temaet er, functions.php, fil, eller et sted i nærheden af begyndelsen af deres plugins: , hvis (function_exists ('add_theme_support')) (add_theme_support ("post - thumbnails)}, det vil tilføje en" ry "kasse var til alle poster. sider og custom post - typer, der støtter den. du kan også sende et andet argument, der er et system af, hvad der burde være en var image. , for eksempel, hvis du bare vil stillinger til støtte for viste billeder: , hvis (function_exists ('add_theme_support')) (add_theme_support (" post - thumbnails, system ('post)}, det sidste skridt er, at denne kodeks i løkken af din model, hvor du vil have det billede, at dukke op: , hvis (has_post_thumbnail()) (the_post_thumbnail ('large)}, argument accepteres, er navnet på den billedstørrelse du vil bruge.ved misligholdelse, er det efter virksomhed beskrevet.når du har det, du vil tilføje din var image via denne rubrik: ,,,,, endelig, hvis du lægger en række billeder til den samme stilling eller side, du kan indsætte dem som et galleri med [galleri], shortcode, som de kan læse mere om her. , forbedringer i 3.9. med wordpress 3.9 rulning, og med det, nogle virkelig søde forbedringer til billeder og galleriet. bortset fra forbedringer i den visuelle redaktør, som evnen til at slæbe - og billeder, add_image_size(), er ved at blive et nyt argument, at præcisere, hvorvidt til afgrøde på sider eller top /bunden. , hvad er alt dette har at gøre med der?godt, du spurgte. , fungere som løftestang for medierne uploaderen, grundlag af, < billede > element er, at vi som web - udviklere levere flere eksemplarer af et billede vises på bestemte grænseværdier, dvs. image-small.jpg for smartphones og image-full.jpg, for store skærme. , i øjeblikket, at dette element er accepteret, men stadig et par måneder bliver integreret i browsere.There is another option, however. ,,picturefill.js,,There is a JavaScript file created by the Filament Group called picturefill.js, which emulates the same function as the ,<picture>, element. ,,The syntax looks like this: ,, <!- på indholdet af ikke - er - browsere.samme img src - som det oprindelige, ubegrænset kilde element.- > < noscript > < img src = "små jpg" alat = "en kæmpe sten ansigt på bayon tempel i angkor thom, cambodja" > < /noscript > ,, bemærker, at der er en data src, indrejse for hvert billede, som vi ønsker at anvende, samt tilhørende minimale breakpoint for at vise, at image.det er værd at bemærke, at der ikke er grænser for antallet af billeder /breakpoints, du kan få. ,, det er for øjeblikket et stort set accepteret måde at opnå samme virkning som den, < billede > element.jeg kan forestille mig, at det nu bliver rullet ud til browsere, den rigtige måde at kode responderende billeder vil blive:, < billede >, - > picturefill.js - >, < noscript >,. ,, det vil give os mulighed for at anvende de seneste og største html i moderne browsere med rette fallbacks på plads (yay gradvis forbedring.. , med picturefill.js, og flere billeder, som medierne uploaderen skaber, kan vi skabe en automatisk proces for deres billeder på wordpress drevet lokaliteter. ,, at det alt sammen nu, der er ingen måde at wordpress gør det natively. jeg forestiller mig, at det vil ændre sig, når, og det billede er > element bliver rullet ud (helle for indgivelse af det centrale:).det betyder ikke, at vi kan gøre et par ting selv at automatisere processen.i dette afsnit vil vi komme ind på nogle muligheder. , note: , vil de bemærke, at jeg er ved hjælp af præfikset, jlc_, på mine funktioner.jeg anbefaler, at du bruger dig til at forebygge konflikter med andre temaer, og plugins. ,,, der erstatter viste billeder, den første brik i dette puslespil, og den mest ligetil, er at erstatte de viste billeder med, picturefill.js, oveni. , kan dette opnås med filter, post_thumbnail_html,,, vil skifte misligholdelse tillæg for vores.den første ting, vi skal gøre, er enqueue, picturefill.js, (som kan ske, functions.php, eller i din stik af): , fungerer jlc_script() {wp_register_script ('picturefill, get_stylesheet_directory_uri(). "/er /picturefill. j 'er "); wp_enqueue_script (' picturefill)} add_action ('wp_enqueue_scripts", "jlc_script), være sikker på, at ændre den vej her til, hvor dit, picturefill.js, fil.når den er på plads, er det på tide at tilføje vores udskiftning funktion:,, funktion jlc_get_featured_image ($: $støtte = falske) ($størrelser = system ("virksomhed beskrevet", "middel", "stor", "fuld"); $img = " $ct = 0 $støtte = (!- støtte).get_post_thumbnail_id(): $støtte; for hvert ($størrelser som $størrelse) ($url = wp_get_attachment_image_src ($støtte, $størrelse) $bredde = ($e < 7 ($størrelser) - 1).($url [1] * 0, 66): ($bredde /66) + 25 $img. = 0)."databærere =" (min bredde: ".$bredde.'px) "> ": "> " $e +;} $url = wp_get_attachment_image_src ($støtte, $størrelse [1]); $img. = < noscript > < img src = ". $url [0]." "alt =". get_the_title(). "" > < /noscript > « tilbage $img;}, er der en række opgaver, der udføres her: , har vi en lang række hvert billede størrelse, vi ønsker at indgå (navn).du kan tilføje eller fjerne her, som du vil, har vi oprettet, picturefill.js, tillæg, vi loop gennem nettet, at url for hver størrelse og lægge det som en tilgang til vores picturefill.js element, der omfatter nogle matematik for at finde ud af, hvor de breakpoints forekommer baseret på billedet størrelser for brugere uden javascript vi tilbage til mellemstore image, det næste skridt er at tilføje vores filter, som du kan tilføje lige under funktion: ,, add_filter ('post_thumbnail_html "," jlc_get_featured_image), nu vores opgave, jlc_get_featured_image(), vil blive anvendt til post_thumbnail produktion i stedet for misligholdelse af avancen.,, jeg har pakket alt dette i en enkelt stik af ringede, der figurerer image.du kan downloade fra github.,, andre metoder, som de kan forestille dem, er en indviklet sag, håndtering af billeder, når det kommer til deres design.den funktion, vil kun fungere med vises billeder, ikke alle billeder i avisen.mens der findes metoder til at gøre dette, herunder det stik af, mine undersøgelser har vist resultater og målestoksfejl. , kan du også bruge en shortcode ved en url eller et billede id - kort for at skabe den kode, som så: [jlc_picturefill_image støtte = x].desværre uden omfattende kodning, vil det slå brug af medierne uploaderen at indsætte billeder til stillingen.med hiv og smid funktionalitet i 3.9, kan det forårsage endnu flere konflikter. ,, hvis du er interesseret i denne metode, i min bog, , fleksible udformning med wordpress, , går jeg meget mere indgående om dette, og wordpress billeder i almindelighed.,, konklusion i denne artikel, vi så ret meget på, hvordan wordpress tager billeder og redegjorde for, en måde at integrere, picturefill.js i en brugervenlig og mere effektiv manor. , er det vigtigt at vide, at dette er et område, der har interesse i konstant udvikling.bedre metoder, som begynder at udvikle sig, og jeg er spændt på at se, hvad de (forhåbentlig nær fremtid både deres billeder) og wordpress.,

Final product image

Previous:at genskabe den rører vandet, som ses på google, design

Next Page:midler til at få dig op at køre i node. er