WordPress Gallery Shortcode En omfattende oversikt

Hvis du ikke har hatt muligheten til å bruke WordPress Gallery Shortcode i fortiden, vil dette være et flott utgangspunkt for deg. For andre som har brukt det, skal vi dekke noen funksjoner av kortnummeret som du kanskje ikke har vurdert ennå. I denne opplæringen vil vi dekke en bestemt WordPress-kortkode, [galleri] og de forskjellige måtene å bruke den.

---

Introduksjon

WordPress har små kodestykker, kalt kortkoder, som kan brukes i innlegg, sider og posttyper. WordPress har mange kortkoder, som kan legges til ved hjelp av shortcode API, dekket her. Disse kortkodene, plassert i innholdsredigeringsområdet eller plassert i en temafil, er koblet til funksjoner som kjører når innholdet eller innlegget er lastet inn. WordPress-kortkoder er fleksible, og lar deg ofte angi alternativer som tilpasser måten kortnummeret fungerer på.

I dag skal vi gå over [gallery] shortcode spesifikt, men du kan også lese opp på våre andre intro innlegg til shortcode bruk i WordPress:

• Komme i gang med WordPress-kortkoder
• Rask tips: Bruke kortkoder i temautvikling
• Rask Tips: Forbedre kortnummer med funksjonen has_shortcode ()
• Bruke kortkoder for å øke utskrift med populære tjenester

---

Grunnleggende bruk

For å komme i gang med [gallery] shortcode gå til Posts section og legg til et nytt innlegg som vi vil ringe "Gallery Post". I redigeringsområdet plasserer du kortkoden [galleri] (i enten visuell / HTML-visning). Deretter trykker du Publiser / oppdater.

Siden blir oppdatert, og hvis du klikker på den visuelle editoren, vil du nå se en stiplet boks med et bildeikon i midten. Hvis du klikker på boksen, vises i øverste venstre hjørne et annet bildeikon. Klikk på det ikonet og et dialogvindu vil dukke opp. Dette dialogvinduet lar deg laste opp og legge ved bilder til innlegget. Fortsett, og dra og slipp bildene dine i drop-regionen eller trykk Velg filer og velg bildene du vil laste opp.

Etter at du har lastet opp bildene, vil du trykke på "Lagre alle endringer". Det vil bringe deg til "Galleri" -fanen i det samme dialogvinduet. Du vil se miniatyrbilder av alle bildene du nettopp lastet opp, samt noen innstillinger. Se deg rundt, endre noen innstillinger for å se de forskjellige alternativene. Juster nå Gallery-kolonnene til 5 og trykk deretter på "Oppdater galleriinnstillinger".

Gå nå og trykk på Vis innlegg. Du vil se innlegget med et galleri av bilder, med 5 kolonner. Hvis du klikker på et bilde, vil det ta deg til bildevedlegget.

---

Gallery Shortcode Output

Nå som vi ser at kortkoden [galleri] virker, la oss gå videre og sjekke ut kildekoden og se hva som blir sendt ut.

Hva du ser over er den første delen av koden WordPress genererer automatisk per [gallery] shortcode.The CSS blir automatisk utgitt for hver [gallery] shortcode som brukes. Det er standardelementer og klasser for hvert galleri, og hvert element innpakker et bilde. Hvis du hadde et annet galleri på siden, ville det være noe # galleri-2 ...

Nedenfor er resten av koden, HTML generert av galleriet. Du kan se galleriet er pakket inn i a div og hvert bilde og bildetekst er også pakket inn i elementer.

 
 
 
  
 
 Pen tekst 
 
  
 
 bær! 
 
  
 
 Quad i elven 
 
  
 
 butikk 
 
 
 

---

Kortnummeralternativer

Nå som vi fikk en smak av den grunnleggende bruken av gallerikortkoden, la oss sjekke ut alle de forskjellige alternativene for å tilpasse [galleri] -utgangen. [Gallery] shortcode-alternativene inkluderer kolonner, id, størrelse, link, inkludere, utelukke, rekkefølge etter, rekkefølge, itemtag, icontag, og captiontag.

kolonner

[gallerikolonner = "2"]

Hvis du går tilbake til HTML-fanen i postredigereren, vil du se kortnummeret, sier [gallerikolonner = "5"]. Når vi justerte kolonneinnstillingene i galleri-grensesnittet, passerte de disse innstillingene til kortnummeret. Nå, i stedet for å bruke grafisk grensesnitt, la oss manuelt angi innstillingene via kortnummeret. La oss endre kolumner = "5" til kolumner = "2". Nå går Vis post - du kan se at det er et rutenett på galleribilder, og i stedet for 5 bilder per kolonne, er det 2. La oss se kilden igjen på "Galleri Post" og se hvilke WordPress-utganger. Like før galleriet i kilden kan vi se CSS - merk forskjellen fra forrige CSS-utgang? Denne CSS genereres automatisk av [gallery] shortcode. Hvis du endrer kolonnene, vil du legge merke til hvordan CSS endres.

 # gallery-1 .gallery-item float: left; margin-topp: 10px; tekst-align: center; bredde: 50%; 

CSS justerer i hovedsak bredden til 100 / $ kolonner, $ kolonner er enten 3 som standard eller et nummer som vi spesifiserer i shortcode .

id

[galleri]

Som standard trekker gallerikortet galleriet i tilknytning til gjeldende post-ID. Men hvis du angir ID, kan du trekke bilder fra et annet innlegg. For å teste dette kan du legge til et nytt innlegg og ringe det til annen side. Gå videre og last opp noen forskjellige bilder til Øvrig side og trykk Publiser. Deretter opp i nettleserens nettadresse, se etter post =.

Husk det nummeret og deretter gå tilbake til Gallery Shortcode post, og legg deretter til galleriet kortkoden [galleri] (bruk tallet ID fra det andre innlegget i stedet for 99). Oppdater Gallery Shortcode-innlegget, og velg deretter Vis innlegg. Legg merke til hvordan det nå er to gallerier, ett med bilder fra "Gallery Shortcode" -posten og de andre bildene er fra "Andre sider". Du kan også justere alternativene på kortnummeret, endre kolonner, bestille osv.

størrelse

[gallery size = "large"]

Standardstørrelsen for galleribildene er miniatyrbildet. Andre alternativer inkluderer "miniatyr", "medium", "stor" og "full". "Small", "medium", "Stor størrelse er spesifisert under WordPress Settings> Media. Full størrelse er bare full størrelse på bildet. Hvis vi endrer settign til size =" large ", vil WordPress sende ut bildet og beskjære / skala den til de tilknyttede dimensjonene. Standard "stor" størrelse for WordPress er maks. bredde 1024 og maks. høyde 1024, slik at bildene skaleres og beskjæres for å passe den størrelsen. (side notat, bilder kan tilpasses beskåret i WordPress slik du ønsker.)

* Side notat, bildene dine vil bli skjev hvis de er mye større enn den angitte størrelsen.

rekkefølge etter

[gallery orderby = "menu_order"]

Som standard er bildene bestilt av 'menu_order' (som jeg anbefaler deg å legge igjen) andre alternativer inkluderer 'ID', 'title' - rekkefølge etter tittel. , 'dato' - rekkefølge etter dato bildet ble lastet opp, 'endret' - rekkefølge etter siste dato bildet ble oppdatert eller endret & 'RAND' - ordreelementer tilfeldig.

rekkefølge

[gallery order = "ASC"]

Etter at du har satt 'ordreby', kan du stille 'ASC' eller 'DESC' (ikke bruk hvis 'orderby' ikke er satt eller sett er satt til 'menu_order'). For eksempel, hvis du vil at bildene skal listes alfabetisk bakover (Z-A) etter bilde tittel, kontrollerer du orderby = "title" og angir deretter rekkefølgen = "DESC" (standard er ASC). [galleri orderby = "title" order = "DESC"]

link

[gallerielink = "fil"]

Som standard kobler galleri-bildene hver sammen til vedleggssiden til hvert bilde. Så med andre ord går hvert bilde til stort sett et enkelt innlegg, med bildet. Hvis du vil koble til kilden til bildet (my-image-name.jpg) kan du passere inn [gallerielink = "fil"].

inkludere

[galleri inkluderer = "23,39,45"]

Noen ganger kan det være lurt å ta med bare svært spesifikke bilder. Du kan gjøre det ved å bruke inkluderingsalternativet, [galleri inkluderer = "23,39,45"] (23,39,45 er et eksempel, bruk ID-er som samsvarer med bildene dine) Du sender inn ID-en til hvert bilde du vil ha tilknyttet. For å finne IDene til bildene, gå til Media> Library og klikk deretter på hver av bildene du vil ha.

I nettleserens URL-bar ser du etter wp-admin / media.php? Attachment_id = og skriv deretter ned og bruk det nummeret i gallerikortkoden etter formatet som er vist ovenfor.

utelukke

[galleri ekskluderer = "21,32,43"]

Dette alternativet er ganske mye akkurat det det høres ut. Hvis du følger instruksjonene for inkludere, finn ID-ene av bildene du IKKE vil i galleriet. Etter at du har funnet bildene du ikke vil ha inkludert (bare se etter bilder du ikke vil ha som er knyttet til innlegget) [galleri ekskluderer = "21,32,43"]. Vær oppmerksom på at hvis du bruker inkluderer og ekskluderer internett vil bryte! Ok ikke egentlig, men det vil ikke fungere! Det vil ignorere ekskluderingen og bare bruke inkluderingen.

itemtag, icontag, captiontag

[gallery itemtag = "section" icontag = "div" captiontag = "figure"]

Disse alternativene kan faktisk endre HTML-elementene som WordPress utdataer med galleriet kortnummer. Standardalternativetikettene er som følger: dl ", icontag =" dt ", captiontag =" dd ". I utgangspunktet er standardgalleriets kortkode for disse alternativene [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Si at vi ønsket å endre HTML-kodene, vi kunne enkelt passere i elementet vi helst ville bruke, så vi kunne bruke noe som [gallery itemtag = "section" icontag = "div" captiontag = "figure"]. Prøv disse alternativene, og du kan se forskjellen i produksjonen.

 
 
  
 
 Pen tekst 
 
  
 
 bær! 

 
  
 
 Quad i elven 
 
  
 
 butikk 

 
 

---

Theming Gallery

Hvis du lager eller tilpasser et tema, er det noen primærklasser du vil se etter. Dette er klasser som galleriet utgir i HTML, hver gang en [gallery] shortcode brukes.

Gallery Wrap

"Gallery Wrap" wraps hver forekomst av [gallery] shortcode. Det betyr at hvis du bruker [galleri] kortnummer tre ganger, vil denne pakken eksistere i kildekoden tre ganger. Hver gang [galleriet] brukes i et innlegg, økes utgangs-ID-en.