WordPress Gallery Shortcode En omfattande översikt

Om du inte har haft chansen att använda WordPress Gallery Shortcode tidigare, kommer det här att bli en bra utgångspunkt för dig. För andra som har använt det kommer vi att täcka vissa funktioner i den kortnummer som du kanske inte har övervägt än. I den här handledningen kommer vi att täcka en specifik WordPress-kortkod, [galleri] och olika sätt att använda den.

---

Introduktion

WordPress har små kodsekvenser, kallade kortkoder, som kan användas i inlägg, sidor och posttyper. WordPress har många kortkoder, som kan läggas till med hjälp av shortcode API, som omfattas här. Dessa kortnummer, placerade i innehållsredigeringsområdet eller placerade i en temafil, är anslutna till funktioner som körs när innehållet eller inlägget laddas. WordPress-kortkoder är flexibla, vilket gör att du kan ange alternativ som anpassar hur kortkoden fungerar.

Idag kommer vi att gå över kortkoden [galleri], men du kan också läsa på våra andra inläggsposter för att använda kortkod i WordPress:

• Komma igång med WordPress-kortkoder
• Snabbtips: Använda kortkoder i temat utveckling
• Snabbtips: Förbättra kortnummer med funktionen has_shortcode ()
• Använda kortkoder för att påskynda inlägg med populära tjänster

---

Grundläggande användning

För att komma igång med [gallery] shortcode gå till Posts avsnitt och lägg till en ny post som vi kommer att kalla "Galleri inlägg". I redigeringsområdet placerar du kortkoden [galleri] (i antingen visuell / HTML-vy). Därefter trycker du på Publicera / Uppdatera.

Sidan kommer att uppdateras och om du klickar på den visuella redigeraren kommer du nu att se en streckad ruta med en bildikon i mitten. Om du klickar på rutan visas i övre vänstra hörnet en annan bildikon. Klicka på den ikonen och ett dialogfönster kommer att dyka upp. I det här dialogfönstret kan du ladda upp och bifoga bilder till posten. Fortsätt och dra och släpp dina bilder i droppområdet eller tryck på Välj filer och välj de foton du vill ladda upp.

När du har laddat upp bilderna vill du trycka på "Spara alla ändringar". Det tar dig till fliken "Galleri" i samma dialogfönster. Du kommer att se miniatyrbilder av alla bilder du just laddat upp samt vissa inställningar. Titta runt, ändra några inställningar för att se de olika alternativen. Justera nu gallerikolumnerna till 5 och tryck sedan på "Uppdatera gallerinställningar".

Fortsätt nu och tryck på Visa inlägg. Du kommer se posten med ett galler galler med bilder, med 5 kolumner. Om du klickar på en bild tar det dig till bildbilagor.

---

Gallery Shortcode Output

Nu när vi ser att kortkatalogen [gallery] fungerar, låt oss gå vidare och kolla källkoden och se vad som utmatas.

Vad du ser ovan är den första delen av koden WordPress genererar automatiskt per [gallery] shortcode.The CSS utmatas automatiskt för varje [galleri] kortnummer som används. Det finns standardelement och klasser för varje galleri och varje element som omsluter en bild. Om du hade ett andra galleri på sidan skulle det vara # gallery-2 ...

Nedan är resten av koden, HTML som genereras av galleriet. Du kan se galleriet är inslaget i a div och varje bild och bildtext är också inslagna i element.

 
 
 
  
 
 Nätt text 
 
  
 
 bär! 
 
  
 
 Quad i floden 
 
  
 
 Lagra 
 
 
 

---

Kortnummeralternativ

Nu när vi fick en smak av den grundläggande användningen av gallerikortet, låt oss kolla in alla olika alternativ för att anpassa [galleri] -utmatningen. Alternativen [gallery] shortcode inkluderar kolonner, id, storlek, länk, inkludera, utesluta, sortera efter, ordning, itemtag, icontag, och captiontag.

kolonner

[gallerikolumner = "2"]

Om du går tillbaka till HTML-fliken i postredigeraren ser du kortkoden säger [gallerikolumner = "5"]. När vi justerade kolumninställningarna i galleri-gränssnittet passerade de dessa inställningar i kortkoden. Nu istället för att använda grafiska gränssnittet, låt oss manuellt ange inställningarna via kortkoden. Låt oss ändra kolumnerna = "5" till kolumner = "2". Nu går du Visa post - du kan se att det finns ett galler av galleribilderna, och istället för 5 bilder per kolumn finns det 2. Låt oss se källan igen på "Galleri Post" och se vilka WordPress-utdata. Strax före galleriet i källan kan vi se CSS - märk skillnaden från föregående CSS-utgång? Den här CSS genereras automatiskt av [gallery] shortcode. Om du ändrar kolumnerna märker du hur CSS ändras.

 # gallery-1 .gallery-item float: left; marginal-topp: 10px; text-align: center; bredd: 50%; 

CSS justerar väsentligen bredden till 100 / $ kolumner, $ kolumner är antingen 3 som standard eller ett nummer som vi anger i kortkoden .

id

[Galleri]

Som standard drar gallerikortet galleriet i samband med det aktuella post-id. Men om du anger ID kan du dra bilder från ett annat inlägg. För att testa detta kan du lägga till ett nytt inlägg och kalla det andra sidan. Fortsätt och ladda upp några olika bilder till Annan sida och tryck på Publicera. Sedan letar du efter posten i webbläsarens URL-adress.

Kom ihåg det numret och gå sedan tillbaka till Gallery Shortcode-posten och lägg till gallerikortet [galleri] (använd nummer-id från det andra inlägget i stället för 99). Uppdatera Gallery Shortcode-posten och gå sedan Visa post. Lägg märke till hur det nu finns två gallerier, en med bilder från "Gallery Shortcode" -posten och de andra bilderna är från "Annan sida". Du kan också justera alternativen på kortkoden, byta kolumner, beställa osv.

storlek

[gallery size = "large"]

Standardstorleken för galleribilderna är miniatyrbild. Andra alternativ inkluderar "miniatyr", "medium", "stor" och "full". "Stora storlekar är bara storleken på bilden. Om vi ​​ändrar inställningen till storlek =" stor "kommer WordPress att mata ut bilden och skära / skala den till de tillhörande dimensionerna. Standard "stor" storlek för WordPress är Max Bredd 1024 och Maxhöjd 1024, så bilderna ska skalas och beskäras för att passa den storleken. (sidotikett, bilder kan skräddarsy beskäras i WordPress som du vilja.)

* Sidnot, dina bilder kommer att vara snedställda om de är mycket större än den angivna storleken.

sortera efter

[galleri orderby = "menu_order"]

Som standard beställs bilderna med menynorder (som jag rekommenderar starkt att du lämnar) andra alternativ inkluderar "ID", "titel" - order efter titel. , "datum" - order efter datum bild uppladdades, "modifierad" - beställa senast datum bilden uppdaterades eller ändrats & 'RAND' - beställa objekt slumpmässigt.

ordning

[galleri order = "ASC"]

När du har ställt in 'orderby' kan du ställa in 'ASC' eller 'DESC' (använd inte om 'orderby' inte är inställt eller inställt är inställt på 'menu_order'). Så till exempel, om du vill att bilderna ska listas alfabetiskt bakåt (Z-A) med bildtitel så kontrollerar du orderby = "title" och anger också order = "DESC" (standard är ASC). [galleri orderby = "title" order = "DESC"]

länk

[gallerilänk = "fil"]

Som standard länkar galleri bilderna till bilagans sida för varje bild. Så med andra ord går varje bild till i huvudsak ett enda inlägg, med bilden. Om du vill länka till källan till bilden (my-image-name.jpg) kan du skicka in [gallerilänk = "fil"].

inkludera

[galleriet inkluderar = "23,39,45"]

Ibland kan du bara inkludera mycket specifika bilder. Du kan göra det genom att använda inkluderingsalternativet, [galleriet inkluderar = "23,39,45"] (23,39,45 är ett exempel, använd ID: er som matchar dina bilder) Du skickar in ID för varje bild du vill ha associerad. För att hitta ID: erna på bilderna, gå till Media> Library och klicka sedan på var och en av de bilder du vill ha.

I webbläsarens webbläsare letar du efter wp-admin / media.php? Attachment_id = och skriv sedan ner och använd det numret i gallerikortet efter det format som visas ovan.

utesluta

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

Detta alternativ är ganska mycket exakt vad det låter. Om du följer anvisningarna för inkludera, hitta ID-erna för bilderna du INTE vill ha i galleriet. När du har hittat bilderna som du inte vill inkludera (titta bara på bilder du inte vill ha som är bifogade till inlägget) [galleri utesluter = "21,32,43"]. Observera att om du använder inkludera och utesluta kommer internet att bryta! Okej inte riktigt, men det kommer inte fungera! Det kommer att ignorera exkludera och använda endast inkludera.

itemtag, icontag, captiontag

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

Dessa alternativ kan faktiskt ändra HTML-elementen som WordPress utmatar med gallerikortet. Standardalternativetiketterna är följande: dl ", icontag =" dt ", captiontag =" dd ". I huvudsak är standardgalleri-kortkoden för dessa alternativ [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Säg att vi ville ändra HTML-taggarna, vi kunde enkelt passera i det element vi föredrar att använda, så vi kunde använda något liknande [gallery itemtag = "section" icontag = "div" captiontag = "figur"]. Prova dessa alternativ och du kan se skillnaden i produktionen.

 
 
  
 
 Nätt text 
 
  
 
 bär! 

 
  
 
 Quad i floden 
 
  
 
 Lagra 

 
 

---

Theming Gallery

Om du skapar eller anpassar ett tema finns det några primära klasser du vill se efter. Det här är klasser som galleriet producerar i HTML, varje gång en [galleri] kortnummer används.

Galleriomslag

"Gallery Wrap" wraps varje förekomst av [gallery] shortcode. Det betyder att om du använder kortkoden [galleri] tre gånger kommer den här omslutningen att finnas i källkoden tre gånger. Varje gång [galleriet] används i ett inlägg ökas utgångs-id.