, hvordan man skaber et øjeblik image galleri stik af for wordpress,,,,, andel,,,,,,,, 12,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, lære at skabe en enkel, der automatisk genereres image galleri stik af med virksomhed beskrevet navigation til wordpress.resultatet er en enkel, attraktive galleri med virksomhed beskrevet navigation, der er skabt, automatisk, når du uploade billeder til en stilling eller side.ingen særlige miljøer, ingen muligheder for at forme, nr. ring til at hoppe igennem –, det virker!,,, indledning, her er en forsmag på, hvad vi vil skabe:, ved hjælp af øjeblikkelig galleri for wordpress, før vi kommer til kode, lad os se, hvor nemt det galleri er at bruge.for dem af jer, der bare vil have koden og bruge dette afsnit vil vise dig, hvordan man gør det. for dem, der ønsker at lære, hvordan man skaber et galleri, er det godt at få en fornemmelse af, hvordan det fungerer, inden vi begynder at kodning.så, lad os tjekke det ud!, øjeblikkelig loge: 2-minute quick - start - guide, 1.start med en simpel, blank post eller side i wordpress.- "upload /stik medier" knappen., 2.næste, upload nogle billeder til post - eller side.bare træk og slip din billeder ind i boksen., 3.når dine billeder færdige uploader, får du en liste over de billeder, og deres egenskaber.du kan slæbe og smid billeder at ændre dem på skærmen.øjeblikkelig galleri respekterer menuen, så de, der er oprettet i wordpress medier browser, så en omlægning af de billeder her, vil ændre dem på tilhørerpladserne.,, 4.hvis du ønsker at ændre egenskaber i det billede, som f.eks. afsnit, post eller beskrivelse, så kan du gøre, som du normalt ville gøre.i sin nuværende form, øjeblikkelig loge viser billedet afsnit i tilhørerlogen i mellem de vigtigste image og thumbnails. hvorfor har titlen, og ikke andre oplysninger?som du kan se fra det billede, wordpress automatisk udfylder de afsnit af billedet (ved hjælp af billedet er filnavn), så snart du får det.i overensstemmelse med det tema, at øjeblikkelig galleri, som hurtigt og let som muligt, ville jeg bruge det område, der wordpress udfylder automatisk., 5.endelig, gå tilbage til din post eller side og komme ind på [instant_gallery], shortcode i det område.- red, og så gå på din side.det er det!,, så det er alt der er til det.formålet med øjeblikkelig galleri er at være den hurtigste og letteste måde at skabe et billede galleri af uploader billeder til en stilling eller side i wordpress.hvis du tror, det vil være nyttigt for dig, så gå og tag filer og have det sjovt!vil du være med til at skabe en enkel wordpress image gallerier på et øjeblik.lad os se på det færdige produkt:,, hvis du er interesseret i at lære, hvordan man øjeblikkelig galleri blev oprettet, enten for at forbedre deres færdigheder som kaffe, eller at bygge på øjeblikkelig galleri og gøre det bedre, så vær venlig at læse videre.,, at øjeblikkelig galleri, som i de fleste wordpress projekter, vi vil bruge: css, folkesundhedsprogrammet og en smule javascript at opnå vores mål. vi vil gå frem på følgende måde:,, html, – begynde med - og fylde den med statisk indhold, wordpress /folkesundhedsprogrammet, – dynamisk fylde vores forhøjelse med indhold, javascript, – anvende opførsel at udveksle billeder, css, – afslutte se og føle med css,, 1. trin af avancen, tillægget for vores galleri er meget enkel.vi har bare en vigtigste indeholder elementer, der omfatter hele galleri (,&#øjeblikkelig galleri,), de primære indhold panel, der indeholder vores vigtigste image og dens titel (,&#ig vigtigste,), og derefter virksomhed beskrevet navigation område (,&#ig tommelfingre). < div id = "øjeblikkelig galleri" > <!- store udstillingsareal. > < div id = "ig vigtigste" > <!- vigtigste "helt" billede... > < img id = "ig helt" src = "http://placehold.it/600x300" /> <!- billede titel. > < p id = "ig titel" > afsnit går her < /p > <!- tæt på de vigtigste udstillingsareal. > < /div > <!- åben den virksomhed beskrevet navigation. > < ul id = "ig tommelfingre" > <!- nu, for hver af de virksomhed beskrevet billeder, etiket li - med en id af den pågældende virksomhed beskrevet nummer... > < li id = "ig-thumb-1" > <!- eller en virksomhed beskrevet mellemstore version af billedet... > < img klasse = "tommelen" src = "http://placehold.it/150x150" /> < /li > < li id = "ig-thumb-2" > < img klasse = "tommelen" src = "http://placehold.it/150x150" /> < /li > < li id = "ig-thumb-3" > < img klasse = "tommelen" src = "http://placehold.it/150x150" /> < /li > <!- luk virksomhed beskrevet navigation liste - > < /ul > <!- tæt på hele galleri - > < /div >, vores navigation er en unordered liste og hver liste punkt indeholder en virksomhed beskrevet billede. for enkelhed, vi vil bare bruge tre indikation af en art thumbnails i statisk html version.i det næste afsnit vil vi bruge php at dynamisk skaber så mange thumbnails, som vi har brug for. hvis vi tjekker vores markup nu, får vi noget, der ligner dette (viser bare to thumbnails at holde billedstørrelse):,, så det er den grundlæggende oveni.ikke så spændende, men enkle, rene html er grundlaget for alt, hvad vi gør på internettet, så det er værd at tage sig tid til at gøre det rigtige.,, trin 2, den wordpress og folkesundhedsprogrammet, lad os komme ind i wordpress del af tutor.dette er måske den mest spændende del for dig wptuts + læsere. lad os begynde at tænke som om, hvad vi ønsker at opnå.målet er at have et billede, der automatisk genereres fra tilhørerlogen billeder, som er overført til en given stilling eller side. med henblik på at opnå det, vi har brug for at vide følgende:,, hvad post eller side er vi på?er der nogen billeder, der er knyttet til denne side?så lad os få dem, og nogle oplysninger om dem. så for det første billede, vi vil vise det i tilhørerlogen, sammen med en forklaring eller beskrivende tekst. så for alle de billeder (herunder den første) billeder, vi vil se dem som thumbnails under tribunen. det første billede, bør også fremhæves, at vise, at det på nuværende tidspunkt er udvalgt., med det generelle koncept for øje, lad os se tillægget kode fra trin 1, nu infunderet med wordpress og php - kode, vi er nødt til at få de oplysninger, vi ønsker.der er en hel del foregår her, så lad os bryde det ned i mindre dele, der er i overensstemmelse med ovenstående liste.,, skridt 2.1: forberede de spørgsmål, ------------------------------------------------- //////////////////------------------------------------------------- forberede spørgsmål globale $post. $args = system ('post_parent = > $post - > id, //for den nuværende stilling'post_type = > »tillæg, //få alle post - beslag'post_mime_type = > "ry" //kun tage billeder'order = > asc) //- listen i rækkefølge'orderby = > "menu_order, //over dem i deres menu for'numberposts = > - 1 //viser alle de bilag,'post_status = > null, //for post etatus); her vi gør to ting: først har vi oprettet global post - variabel ($post), så vi kan få adgang til de relevante data om vores post. det andet, vi har nedsat en række argumenter ($args,), der definerer, hvilke oplysninger der vil have fat i.vi skal specielt komme, billeder, der er knyttet til den nuværende stilling.vi vil også få dem alle, og bringe dem i samme rækkefølge, som de er anført i wordpress loge. se bemærkninger i kode snippet over at se, hvilke strækninger svarer til hvilke parametre.,, skridt 2.2: hente billederne, //få poster, der matcher vores forespørgsel og i dette tilfælde, billeder, der er knyttet til de nuværende stilling.$) = get_posts ($args); //hvis nogen billeder er knyttet til denne post, er følgende: hvis ($)) (//sæt disken, så vi kan holde styr på, hvilket billede vi er på.- grev = 0; //vi loop gennem alle de billeder, som vi fandt for hvert ($) som $tillæg) {, her bruger vi den wordpress get_posts funktion for at få fat i de billeder, der matcher vores kriterier, som er fastlagt i args dollars.vi er så gemme resultaterne i en variabel, $beslag,., vi ser efter, om $beslag, eksisterer.hvis denne variabel er tom (som det vil være tilfældet, når din post eller side har ingen billeder, der er knyttet til det), er yderligere kode vil henrette.hvis $beslag, har indhold, så går vi videre til næste skridt. vi aktivere et simpelt imod variabel, så vi kan holde styr på hvilket billede vi er på.det gør vi, fordi der er visse ting, vi vil produktionen kun første gang gennem vores loop (f.eks. de vigtigste galleri -).det giver os også et middel til at tildele unikke id - kort til hver virksomhed beskrevet i sejlads, hvis vi vil have, så åbner vi løkken, der vil gå gennem hver af vores billeder.,, skridt 2.3: vigtigste pantryområde, //--------------------------------------------------------- //output - de vigtigste beholdere og første store billede; //det er ting vi vil kun have effekt på én gang.////////--------------------------------------------------------- hvis ($tæller = = 0) {?> <!- hele galleri beholder (omfatter thumbnails). > < div id = "øjeblikkelig galleri" > <!- store udstillingsareal. > < div id = "ig vigtigste" > <!- sæt parametre for det image, vi skal til at vise.- > <?php $default_attr = system ('id = > "ig helt",'alt = > beklædning (strip_tags (get_post_meta ($attachment_id, _wp_attachment_image_alt, sande)),'title = > beklædning (strip_tags ($tillæg - > post_title)).> <!- display - det første billede, tillæg, som det store billede i de vigtigste galleri område - > <?php echo wp_get_attachment_image ($tillæg - > id, fuldt ud, falske $default_attr)?> <!- billede titel. > < p id = "ig titel" > <!- har de afsnit af dette billede under image - > <?php echo $tillæg - > post_title;?> < /p > <!- tæt på de vigtigste udstillingsareal. > < /div > <!- åben den virksomhed beskrevet navigation. > < ul id = "ig tommelfingre" > <!- den blok af ting, som vi kun kan for det første billede... > <?folkesundhedsprogrammet)?>, her bruger vi vores kritiske variabel for at afgøre, hvor mange gange, vi har været igennem vores loop.hvis det er første gang, $mod, vil være lig nul, og den blok af kode ovenfor, vil blive henrettet.denne kodeks indeholder de vigtigste strukturelle elementer i tilhørerlogen og befolker de vigtigste image del med den første store billede.det skal kun ske én gang.for de efterfølgende rejser gennem løkken, $mod, vil være større end nul, og denne blok af kode bliver sprunget over. okay, hvad der virkelig foregår der?vi har allerede set på http: //del i trin 1, så lad os fokusere på på den kode, der findes i de vigtigste galleri område. <!- sæt parametre for det image, vi skal til at vise.- > <?php $default_attr = system ('id = > "ig helt",'alt = > beklædning (strip_tags (get_post_meta ($attachment_id, _wp_attachment_image_alt, sande)),'title = > beklædning (strip_tags ($tillæg - > post_title)).> <!- display - det første billede, tillæg, som det store billede i de vigtigste galleri område - > <?php echo wp_get_attachment_image ($tillæg - > id, fuldt ud, falske $default_attr)?> <!- billede titel. > < p id = "ig titel" > <!- har de afsnit af dette billede under de vigtigste image - > <?php echo $tillæg - > post_title;?> < /p > i første afsnit, vi definerer en række parametre, som vi gjorde i skridt 2.1.denne gang, men i stedet for parametre for en forespørgsel, vi fastlægger parametre for en wordpress funktion, wp_get_attachment_image,. denne funktion tager den nuværende tillæg (det nuværende billede), returnerer den, fuld, størrelse af billedet (i modsætning til en mindre størrelse, f.eks. virksomhed beskrevet; det kommer vi til senere) og gælder attributter til det billede, der svarer til de argumenterhttp: //defineret i $default_attr, vifte."alt" og "titel" hundetegn på billedet er defineret som de forventer, og det billede er givet et id - kort,&#ig helt, så vi kan nemt mål med css. endelig har vi udskriftsbillede, afsnit igen, denne gang med titlen, der er gengivet nedenfor image.ved misligholdelse, wordpress sæt billedet afsnit at være lig med, filnavn, af uploadet billedet.så, når du bruger denne teknik, enten (1) sørge for, at de filenames af de billeder, du uploade er noget, du vil gerne have anbragt på dine lysbilleder, (2) redigere afsnit inden for de billeder, når du sender dem eller (3) fremsætte bemærkninger til denne del af kodeksen, så den titel er ikke udviser i diasshowet overhovedet.,, skridt 2.4: virksomhed beskrevet navigation, <!- åben den virksomhed beskrevet navigation. > < ul id = "ig tommelfingre" > <!- den blok af ting, som vi kun kan for det første billede... > <?folkesundhedsprogrammet)?> <!- nu, for hver af de virksomhed beskrevet billeder, etiket li - med en id af den pågældende virksomhed beskrevet nummer... > < li id = "ig tommelfinger - <?php echo $tæller + 1?> "> <?folkesundhedsprogrammet aspektet om ($tæller = = 0) (//, hvis dette er den første virksomhed beskrevet, tilføje en klasse udvalgt til det, så det vil blive fremhævet $thumb_attr = system ('class = > tommeltot udvalgt ");} andre (//for alle andre thumbnails, bare tilføje grundlæggende kategori af tommelfinger" $thumb_attr = system ('class = > "tommelen");}?> <!- eller en virksomhed beskrevet mellemstore version af det image, som vi har de attributter, der er defineret ovenfor - > <?php echo wp_get_attachment_image ($tillæg - > id, virksomhed beskrevet, falske $thumb_attr)?> < /li > <!- forøgelse af tælleren, så vi kan holde styr på, hvor vi er på virksomhed beskrevet - > <?php $tæller = $tæller + 1}.> <!- luk virksomhed beskrevet navigation liste - > < /ul > <!- tæt på hele galleri - > < /div > <?folkesundhedsprogrammet)?>, lad os tage et nærmere kig på virksomhed beskrevet navigation.på toppen af denne blok af kode vi har gentaget den åbning af,&#ig tommelfingre, liste for at hjælpe du tilpasse dig i koden.med udgangspunkt i tankerne, lad os se på den faktiske liste over poster sig selv. du vil se, at vi bruger en lille stump af høreværn til produktion, $tæller, variable, plus en, til at give hver liste på sin egen entydigt id. det vil give os en større grad af kontrol over listen poster med css, skal vi have det.vi bruger $tæller + 1, så vi behøver ikke at starte ved nul. i listen i punkt, der er betinget af en erklæring om, at kontrol, en gang mere, som gennemløb af løkken, vi er på.som vi har gjort det et par gange, før vi sætter et system, men denne gang er det en attribut med virksomhed beskrevet billeder.forskellen er, at vi her sætter lidt forskellige parametre for system afhængigt af, om vi er på den første tur gennem løkken eller ej. vi altid give virksomhed beskrevet en klasse "tommelen", men på den første tur gennem løkken vi også give den første virksomhed beskrevet en klasse "udvalgt".dette er noget, som vi skal målet med css senere for at sikre en sammenhængende brugeroplevelse. når $thumb_attr, attributter er klar, vi bruger, wp_get_attachment_image, igen til output - billedet.den vigtigste ting at bemærke dette, er, at vi tager det, virksomhed beskrevet, version af det billede, i stedet for fuld, størrelse af det billede, som vi tog over. så, da vi er ved udgangen af vores loop, vi forøgelse af vores strid og begynde her.når vi har opbrugt alle vores image, bånd, vi lander for enden af loop.når det sker, er vi tæt på den unordered liste, så hele galleri container, og så vores php betinget erklæringer.,, skridt 2.5: tilføje shortcode, det er fedt er kodet vores image tilhørerlogen, men det er endnu bedre, hvis vi kan vise vores image galleri.på dette punkt, at vi stadig ikke har nogen måde at vise output på en wordpress post eller side.vi ordner det nu, og heldigvis er dette skridt er let.//////////------------------------------------------------- skabe shortcode for øjeblikkelig galleri //------------------------------------------------- add_shortcode ('instant_gallery "," instant_gallery), det føles godt at have en god hurtigt vinder efter den store blokke af kode fra trin 4.her er vi bare om et meget enkelt shortcode, så vil vi være i stand til at tilføje galleri til vores wordpress stillinger eller sider. det er vores opgave, kaldet ", instant_gallery, som defineret ovenfor, og skaber en ny shortcode med samme navn.vi kan indsætte galleri i vores stillinger eller sider ved hjælp af shortcode [instant_gallery]. der er masser af dybdegående artikler om shortcodes derude, herunder nogle gode her på wptuts +.hvis du er ny shortcodes, her er nogle gode udgangspunkter:,, at komme i gang med at wordpress shortcodes, wordpress shortcodes: på den rigtige måde, hurtigt tip: ved hjælp af shortcodes i tema, udvikling, wordpress shortcode api, skridt 2.6: samle vores tanker, puha!okay, det er koden til galleriet.den kode, vi har skrevet, vil få en liste over image bånd fra den nuværende wordpress post eller side og så automatisk skaber et galleri i henhold til den forhøjelse, vi gav.den shortcode og giver os en bekvem måde at indsætte vores gallerier i vores stillinger eller sider, hvis vi sender nogle fantastiske billeder af søheste og brandmænd og tjek vores resultater, her er, hvad vi har på dette punkt:,, fra en wordpress synspunkt, vi har gjort, hvad vi skal gøre.uden javascript, men tilhørerlogen vil ikke gøre noget.uden forskning, det vil ikke se godt ud, enten.så lad os tage et øjeblik til at tænke over det, vi har gjort hidtil, og så vil vi gå videre til næste trin, hvor vi kan gøre vores galleri kom til live!,, trin 3 javascript, som man kunne forvente, øjeblikkelig galleri er baseret på magi jquery for at nå det grundlæggende niveau af interaktivitet, der kræver det.der er faktisk to dele til dette.den første er ved at jquery bibliotek i vores tema korrekt, og den anden er den faktiske jquery kodeks, som vil skabe den adfærd, vi har brug for (dvs. at udveksle billeder og image titler, når en virksomhed beskrevet er faldet). begge disse dele giver en god mulighed for at ansætte en vis indsigt og wordpress bedste praksis, så hvis du er nye, til at arbejde sammen med jquery i forbindelse med wordpress, særlig opmærksomhed.,, trin 3.1: ved hjælp af enqueue manuskript til last jquery i wordpress, som du måske ved, jquery (såvel som mange andre javascript biblioteker) fyldt med wordpress.for nemheds skyld vil vi bruge den version af jquery indgår med wordpress for eksempel. det er en god mulighed for at anvende de wordpress, wp_enqueue_script, funktion.dette er den "rigtige" måde at laste manuskripter i wordpress.det sikrer, at manuskriptet er lastet på rette sted og tid, som wordpress udfører, og at interessekonflikter undgås.,, wp_enqueue_script, funktion, kan være forvirrende, men heldigvis er der masser af gode artikler om det derude.her er nogle nyttige ressourcer, wp_enqueue_script:,, hvordan til at omfatte javascript og css i din wordpress temaer og plugins, bruger google var vært for javascript biblioteker (stadig den rette vej) (ajourført december 2011) //////////////////------------------------------------------------- enqueue jquery ------------------------------------------------- funktion wptuts_enqueue_jquery() {wp_enqueue_script ('jquery)} //kun tilføje javascript, hvis vi ikke er på skærmen add_action admin ("wp_enqueue_scripts", "wptuts_enqueue_jquery" 11), bemærker, at vi tillægger denne funktion til wordpress hook ", wp_enqueue_scripts," som byrder, alle de manuskripter, der er blevet enqueued af ", wp_enqueue_script".subtil forskel der, men det er vigtigt!her er en vigtig bemærkning om, wp_enqueue_scripts fra wp codex:,,,, wp_enqueue_scripts, hook (i stedet for den lokalitet klo, som mange artikler reference), at registreringen af de alternative jquery på admin sider, hvilket vil medføre efterfølgende redigering af (bl.a.) pause efter opgraderinger ofte.,,,, trin 3.2: ved hjælp af jquery at bringe øjeblikkelig galleri til liv, kan vi nu gå videre til jquery kode, at beføjelser udveksling af billeder og titler.vi har kun brug for et par linjer kode, til at opnå dette.nogle af dem, der er velbevandret i jquery kan også være i stand til at foreslå nogle mere effektive måder til at få jobbet gjort.som vi gjorde med wordpress kode i trin 2, lad os gå gennem det begrebsmæssigt, før vi kommer ind i koden.når vi klik på en virksomhed beskrevet, vi vil have et par ting:,, først og fremmest vil vi udskifter de eksisterende image i de vigtigste helten holdning for et stort billede – den, der svarer til den virksomhed beskrevet vi klikkede på.,,,, vi ønsker at erstatte titlen det gamle billede med den, der svarer til den nye image.vi vil gøre dette ved at drage fordel af de wordpress fil at ordning.vi vil tale om, hvordan vi skal gøre det på bare et øjeblik.,, tredje, ønsker vi at fremhæve virksomhed beskrevet, der svarer til vores store billede på et givet tidspunkt.som vi så i går 2.4 ovenfor, den måde, vi siger at dette er en klasse af "udvalgt" af den nuværende virksomhed beskrevet. og endelig, når et nyt image er valgt, vi fjerner den klasse af "udvalgt" fra alle, billeder, og så lægger det tilbage igen til den nyligt valgte virksomhed beskrevet.,, så med disse vigtige foranstaltninger i tankerne, lad os se, hvordan det ser ud i jquery: ////////////////------------------------------------------------- aktivere øjeblikkelig galleri //------------------------------------------------- funktion activate_instant_gallery() {?> \t\t<script> \t\t\t//Wrap the jQuery code in the generic function to allow use of \t\t\t//the $ shortcut in WordPress's no-conflict jQuery environment \t\t\t( function ($) { \t\t\t\t$('#ig-thumbs').delegate('img','click', function(){\t\t//When someone clicks on a thumbnail \t\t\t\t\t$('#ig-hero').attr('src',$(this).attr('src').replace('-150x150',''));\t//Replace the Full Sized version of selected image \t\t\t\t\t$('#ig-thumbs li img').removeClass("selected");\t\t//Remove "selected" class from all thumbnails \t\t\t\t\t$(this).addClass("selected");\t\t\t\t\t\t//Add "selected" class to selected thumbnail \t\t\t\t\t$('#ig-title').html($(this).attr('alt'));\t\t\t//Replace the Title with Title selected image\t\t\t\t \t\t\t\t}); \t\t\t})(jQuery); \t\t</script > <?php} //klo i fod så galleri bliver aktiv efter side belastninger add_action ('wp_footer,'activate_instant_gallery)?> heldigvis, jquery kode er relativt enkel, og svarer nøje til vores kugle liste over nødvendige handlinger over., koden er meget veldokumenteret, så hvis du ikke forstår en linje, bemærkninger bør hjælpe.men lad os nedbryde jquery, linje for linje (bortset fra de generiske "indpakning funktion", (funktion ($) {}), som vi vil komme ind på om et øjeblik.,, den linje, der begynder, $('# ig tommelfingre). delegerede, der definerer anvendelsesområdet for vores funktion.det er, når en klik på et billede objekt (img) i en beholder med et id - kort,&#ig tommelfingre, gennemføre aktioner inden for funktion. den næste linje, som begynder, $('# ig helt), behandler den faktiske udveksling af vores nuværende billede for det store billede, som svarer til den virksomhed beskrevet, der blev slået.i denne jquery funktion, som var virksomhed beskrevet klikkede omtales som "det", fordi det er genstand for aktionen "klik"; det er ting, der var faldet på og udløste funktion. metoden til gennemførelse af billedet swap - udnytter den wordpress fil at ordning.for eksempel: når du sender et billede til mit image. jpg,, wordpress vil skabe flere forskellige størrelser på det billede.en automatisk skabt størrelse vil blive en "virksomhed beskrevet" størrelse, som standard, en 150x150 square dukkede ud af deres oprindelige billede.wordpress vil nævne denne sag, my-image-150x150 jpg,.det tilføjer blot en "- 150x150" i slutningen af deres filnavn, før sagen udvidelse., så hvis vi ønsker at erstatte en virksomhed beskrevet version af et billede med fuld størelse version af det billede, så vi skal bare fjerne "- 150x150" fra filnavn.det er, hvad vores jquery gør at udveksle billeder. hvis vi ønsker at erstatte den med en anden virksomhed beskrevet omfanget af billede, men ikke fuldstørrelse image, er vi nødt til at vide, at andre dimensioner af størrelse, og så kunne vi skifte dimensioner.hvis vi f.eks. ville skifte ud, my-image-150x150.jpg, for en mellemstor billede af 600x300, så ville vi bruge jquery kode for swap "- 150x150" med en "- 600x300", og vi vil stå tilbage med, my-image-600x300 jpg,., dernæst med den linje, som begynder, $('# ig tommelfingre li img' er), vi fjerner css klasse "udvalgt" fra alle de thumbnails, og så den linje under det tilføjer klasse "udvalgt" til "det". det er det billede, som var klikkede. endelig med den linje, som begynder $('# ig titel "), skifter vi titlen på det gamle billede med den nye image.dette er indholdet af et, der indeholder element med et id,&#ig titel, trin 3.3: ved hjælp af jquery i forbindelse med wordpress, nu da vi udfører alle disse operationer inden for rammerne af wordpress, bør vi være opmærksomme på en vigtig detalje om, hvordan wordpress belastninger, wordpress løber jquery jquery. "ingen konflikt mode" for at undgå konflikter med andre javascript biblioteker.i praksis betyder det, at det er nyttigt, $, skyder genvej, der almindeligvis anvendes i jquery virker ikke i wordpress ved misligholdelse. heldigvis er dette emne er blevet drøftet indgående.hvis du er interesseret i at vide mere om årsagerne til det, chris coyier har en stor artikel om at grave i wordpress, der omhandler netop dette spørgsmål.ved anvendelsen af denne artikel, skal vi bare pakke vores jquery funktion i en generisk funktion at gøre brug af de $, genvej i vores kode snippet. endelig tilføjer vi denne kodeks med indbygget i wordpress klo – wp_footer – at laste manuskriptet korrekt, og kun efter resten af side har ladt. med jquery på plads, lad os se, hvad vi har nu.nu er vores galleri er interaktive og trykke på en af de thumbnails korrekt erstatter de vigtigste image og tilsvarende titel.for eksempel billede nedenfor, kan man se, at vi har klikket på den anden virksomhed beskrevet, og både de vigtigste image og dens titel er blevet erstattet, som vi havde forventet.,, så det virker, men det ser ikke så godt ud.heldigvis kan vi få ryddet lidt op med nogle grundlæggende ccs.og det er netop, hvad vi skal gøre i det næste trin, trin 4 css skridt 4.1: css for øjeblikkelig galleri, er det nu endelig tid til at stil vores skabelse og få det til at se ud som et virkeligt billede galleri.da de vigtigste fokus i denne forelæsning var på wordpress og jquery funktionalitet, har jeg holdt css for dette galleri meget enkelt.her er css kode for galleriet: /* øjeblikkelig galleri * /&#øjeblikkelig galleri {overløb: skjulte; display: blok; bredde: 100% margen nederst: 1.5em;} /* store udstillingsareal * /&#ig vigtigste (bredde: 100%}&#ig helt {}&#ig titel {margen top: 1.5em; margen nederst: 1.5em; linje højde: 1.5em;} /* thumbnails * /&#ig tommelfingre {overløb: skjulte; margen: 0}&#ig tommelfingre li {margen: 1.5em; margen nederst: 1.5em; flyde: venstre display: blok; markør: pointer.}&#ig tommelfingre img (bredde: 75px; /* vælge at ændre virksomhed beskrevet bredde * /højde: 75px; /* vælge at ændre virksomhed beskrevet højde * /polstring: 1px; grænse: 1px fast&#ddd;}&#ig- tommelfingre li img: den,&#ig tommelfingre li img.selected {grænse: 1px fast&#aaa.vigtige;}, er der intet, der er alt for kompliceret, om vores forskning.bare de grundlæggende politiske og styles er nødvendig for at skabe den loge.hvis du ønsker at ændre css for at gøre din loge lidt mere fantasi, jeg har givet alle de politiske, du skal gøre det. en ting at bemærke, er, at jeg har begrænset antallet af thumbnails til 75x75 i stedet for 150x150 størrelse, hvor vi fandt dem i wordpress.den 150x150 størrelse er lidt for stor til min smag. - jeg kan godt lide mindre thumbnails, så du kan passe mere på galleriet.hvis du ønsker at anvende en anden størrelse, alt du skal gøre er at ændre bredde og højde af virksomhed beskrevet billeder på to linjer er markeret på css.,, skridt 4.2: ved hjælp af enqueue stil at laste css i wordpress, hvad der måske er mere interessant end css i sig selv er den måde, som vi bruger til at lade den.vi kunne gøre en simpel forbindelse mærke det i vores hoved med, wp_head klo, men der er en bedre vej. under en antydning af, enqueue_script, funktion, som vi plejede at laste jquery, vi kan bruge en tilsvarende funktion, wp_enqueue_style, lige vores stil blad.som med enqueue_script, her er den foretrukne måde at lade stylesheets inden for wordpress.det er godt at øve disse teknikker med simple projekter som dette, fordi det giver dem mulighed for at fokusere på at forstå den teknik, og hvorfor det fungerer uden at bekymre sig om debugging - massive mængder af koden.der er en vis tilfredshed i noget enkelt meget godt!////////////---------------------------------------------------------------------- import stylesheet ---------------------------------------------------------------------- funktion add_stylesheets() (//ændre denne vej at lade din egen skik stylesheet $css_path = wp_plugin_url. "/øjeblikkelig galleri /øjeblikkelig galleri. css; //registre, din stylesheet wp_register_style ('instantgallerystyles, $css_path); //belastninger, din stylesheet wp_enqueue_style (' instantgallerystyles)} //kun tilføje stylesheet, hvis vi ikke er på skærmen, hvis (admin.is_admin()) add_action ('wp_enqueue_scripts "," add_stylesheets), så det er, hvordan du bruger, wp_enqueue_style,.meget lig, enqueue_script,.du vil se, at der er en anden kommandoen her. så, wp_register_style,.denne funktion blot registrerer en css fil med wordpress til senere brug, wp_enqueue_style,., nu vores image galleri endelig ser lige så godt ud som det fungerer!,, alle sammen, se det færdige produkt:,, det ser meget enkelt, og det er præcis, hvad vi vil have.formålet med dette galleri er at være den enkleste, den hurtigste vej til automatisk skaber et billede af billeder, overført til en wordpress tilhørerlogen efter side, intet mere., i er velkomne til at tjekke en levende demo øjeblikkelig galleri for wordpress på min personlige websted. de udfyldte kode er for lang tid at vise her fuldt ud, så er i velkomne til at downloade kilde filer (øverst i artikel) og se alt på din egen, afslutning vi har lige skabt et øjeblik image galleri med virksomhed beskrevet navigation til wordpress!i hele denne lektion, jeg har gjort mit bedste for at indarbejde god praksis om alt fra klart avance, semantisk css, og selv den måde, stylesheets og javascript er lastet.hvis du spillede og arbejdet gennem foranstaltninger, så håber jeg, du har lært en ny teknik, eller to.hvis du er her bare for det færdige kode, jeg håber, du finder det nyttigt, og at man kan bruge det tillidsfuldt og med viden om, at du bruger en simpel kode, der blev gjort med kærlighed.