Codul Shortcode al Galeriei WordPress o prezentare generală cuprinzătoare

Dacă nu ați avut ocazia să utilizați codul Shortcode pentru galeria WordPress în trecut, acesta va fi un excelent punct de pornire pentru dvs. Pentru alții care l-au folosit, vom acoperi câteva trăsături ale codului scurt pe care probabil că nu le-ați considerat încă. În acest tutorial vom acoperi un scurtcod de WordPress specific, [galerie] și diferitele modalități de utilizare a acestuia.

---

Introducere

WordPress are fragmente mici de cod, numite numerele scurte, care pot fi folosite în Mesaje, Pagini și Tipuri de postări. WordPress are multe coduri scurte, care pot fi adăugate la utilizarea API-ului shortcode, acoperit aici. Aceste coduri scurte, plasate în zona editorului de conținut sau plasate într-un fișier tematic, sunt conectate la funcțiile care se execută atunci când conținutul sau mesajul este încărcat. Codurile scurte WordPress sunt flexibile, adesea vă permit să specificați opțiuni care personalizează modul în care funcționează codul scurt.

Astăzi vom trece peste codul [galerie] în mod specific, dar puteți, de asemenea, să citiți celelalte postări de intro la utilizarea codurilor scurte în WordPress:

• Noțiuni de bază cu WordPress Shortcodes
• Sfat rapid: Utilizarea scurtăturilor în dezvoltarea temelor
• Sfat rapid: Îmbunătățirea codurilor scurte cu funcția has_shortcode ()
• Utilizarea codurilor scurte pentru a accelera înregistrarea cu servicii populare

---

Utilizare de bază

Pentru a începe cu codul scurt [galerie], mergeți la secțiunea Mesaje și adăugați o postare nouă, pe care o vom numi "Postare în galerie". În zona editorului plasați codul [galerie] (în vizualizarea Visual / HTML). După aceea, apăsați pe Publicare / Actualizare.

Pagina va fi actualizată, iar dacă faceți clic pe fila spre editorul vizual veți vedea acum o casetă întreruptă cu o pictogramă de fotografiere în mijloc. Dacă faceți clic pe casetă, în colțul din stânga sus veți vedea o altă pictogramă de imagine. Faceți clic pe acea pictogramă și va apărea o fereastră de dialog. Această fereastră de dialog vă va permite să încărcați și să atașați imagini la postare. Mergeți mai departe și trageți și plasați imaginile în regiunea drop-down sau apăsați Selectați fișiere și alegeți fotografiile pe care doriți să le încărcați.

După ce încărcați imaginile pe care doriți să le apăsați pe "Salvați toate modificările". Acest lucru vă va aduce la fila "Galerie" în aceeași fereastră de dialog. Veți vedea miniaturi ale tuturor imaginilor pe care tocmai le-ați încărcat, precum și unele setări. Uită-te în jur, modificați unele setări pentru a vedea diferitele opțiuni. Acum ajustați coloanele Galerie la 5 și apoi apăsați pe "Actualizare setări galerie".

Acum mergeți mai departe și apăsați View Post. Veți vedea postarea cu o grilă de imagini cu 5 coloane. Dacă faceți clic pe o imagine, aceasta vă va duce la postul de atașament imagine.

---

Galerie de ieșire coduri scurte

Acum, când vedem că codul scurt [galerie] funcționează, hai să mergem înainte și să verificăm codul sursă și să vedem ce se emite.

Ceea ce vedeți mai sus este prima parte a codului WordPress generează automat pe [galeria] shortcode. CSS este afișat automat pentru fiecare cod [shortcut] care este utilizat. Există elemente și clase implicite pentru fiecare galerie și fiecare element care înfășoară o imagine. Dacă ai avea oa doua galerie pe pagină, ar fi ouput # gallery-2 ...

Mai jos este restul codului, codul HTML generat de galerie. Puteți vedea că galeria este învelită într-un div și fiecare imagine și subtitrare sunt înfășurate și în elemente.

 
 
 
  
 
 Text destul 
 
  
 
 Fructe de padure! 
 
  
 
 Quad în râu 
 
  
 
 Magazin 
 
 
 

---

Shortcode Opțiuni

Acum, când avem un gust al utilizării de bază a codului scurt al galeriei, să examinăm toate opțiunile diferite pentru personalizarea ieșirii [galeriei]. Opțiunile [galerie] includ coduri scurte coloane, id, mărimea, legătură, include, exclude, orderby, Ordin, itemtag, icontag, și captiontag.

coloane

[galerii coloane = "2"]

Dacă vă întoarceți la fila HTML din editorul postului veți vedea codul scurt indicat [coloane galerii = "5"]. Când am ajustat setările coloanei în interfața galeriei, au trecut aceste setări în codul scurt. Acum, în loc să folosim interfața grafică, să specificăm manual setările prin codul scurt. Să schimbăm colums = "5" în colums = "2". Acum mergeți View Post - puteți observa că există o rețea a imaginilor galeriei și în loc de 5 imagini pe coloană, este 2. Să vedem sursa din nou în "Galerie Post" și să vedem ce ieșiri WordPress. Chiar înainte de galeria din sursă putem vedea CSS - observați diferența față de ieșirea CSS anterioară? Acest CSS este generat automat de codul [gallery] shortcode. Dacă modificați coloanele, veți observa cum se schimbă CSS.

 # gallery-1 .gallery-item float: left; margin-top: 10px; text-align: centru; lățime: 50%; 

CSS ajustează în mod esențial coloanele de lățime la 100 / $, coloanele $ fiind fie 3 în mod prestabilit, fie un număr pe care îl specificăm în codul scurt .

id

[Galerie]

În mod prestabilit, shortcode-ul galeriei trage galeria asociată cu ID-ul postului curent. Cu toate acestea, dacă specificați ID, puteți trage imagini dintr-un alt post. Pentru a testa aceasta, permiteți adăugarea unei postări noi și denumirea acesteia Alte pagini. Mergeți mai departe și încărcați câteva fotografii în altă pagină și apăsați pe Publish (Publicare). Apoi, în adresa URL a browserului, căutați post =.

Amintiți-vă acest număr și apoi reveniți la postarea Galeriei scurte Galerie și apoi adăugați galeria scurtcale [galerie] (utilizați numărul id din celălalt post în loc de 99). Actualizați postarea Galeriei scurte Galerie și apoi mergeți la Vizualizare Mesaj. Observați cum există acum două galerii, una cu imagini din postul "Galerie scurte" și celelalte imagini sunt din "Pagina de alta". De asemenea, puteți ajusta opțiunile de pe codul scurt, schimbând coloanele, ordinea etc..

mărimea

[galerie mărime = "mare"]

Dimensiunea implicită pentru imaginile galeriei este miniatură. Alte opțiuni includ "miniatură", "mediu", "mare" și "plin". "miniatură", "mediu", "dimensiuni mari sunt specificate în Setări WordPress> Media.Mărimea completă este pur și simplu dimensiunea completă a imaginii.Dacă vom schimba settign la dimensiune =" mare ", atunci WordPress va scoate imaginea și cultura / dimensiunea implicită "mare" pentru WordPress este Max Width 1024 & Max Height 1024, astfel încât imaginile vor fi scalate și decupate pentru a se potrivi acelei dimensiuni. (nota laterală, imaginile pot fi personalizate tăiate în WordPress așa cum vrei.)

* Notă laterală, imaginile dvs. vor fi șterse dacă sunt mult mai mari decât dimensiunea specificată.

orderby

[ordinea galeriei = "meniu_confirmație"]

În mod prestabilit, imaginile sunt ordonate după 'menu_order' (pe care am recomandat-o să le lăsați) alte opțiuni includ 'ID', 'title' - ordonează după titlu. , 'data' - ordinea după data a fost încărcată, 'modificată' - ordinea după data ultimei zile a fost actualizată sau modificată & 'RAND' - ordonați articole aleatoriu.

Ordin

[ordine galerie = "ASC"]

Dupa ce ati setat comanda "orderby" puteti seta 'ASC' sau 'DESC' (nu folositi daca 'orderby' nu este setat sau setat este setat la 'menu_order'). De exemplu, dacă doriți ca imaginile să fie listate în ordine alfabetică înapoi (Z-A) după titlul imaginii, asigurați-vă că ordinea = "titlu" și apoi specificați și ordinea = "DESC". [ordinea galeriei = "titlu" ordine = "DESC"]

legătură

[link link = "fișier"]

Implicit, imaginile galeriei se leagă pe fiecare pagină de atașare a fiecărei imagini. Deci, cu alte cuvinte, fiecare imagine merge în esență într-un singur post, cu imaginea. Dacă doriți să vă conectați la sursa imaginii (my-image-name.jpg), puteți trece [link link = "fișier"].

include

[galerie include = "23,39,45"]

Uneori este posibil să doriți să includeți numai imagini foarte specifice. Puteți face acest lucru utilizând opțiunea de includere, [galerie include = "23,39,45"] (23,39,45 sunt un exemplu, utilizați ID-urile care se potrivesc cu imaginile dvs.). Treceți în ID-ul fiecărei imagini pe care doriți să o asociați. Pentru a găsi ID-ul imaginilor, accesați Media> Library și apoi faceți clic pe fiecare dintre imaginile dorite.

În bara URL a browserului căutați wp-admin / media.php? Attachment_id = și apoi scrieți și utilizați acel număr în galeria scurtă după formatul afișat mai sus.

exclude

[galeria exclude = "21,32,43"]

Această opțiune este destul de mult exact ceea ce pare. Dacă urmați instrucțiunile pentru include, găsiți ID-urile imaginilor pe care le faceți NU vreau în galerie. După ce găsiți imaginile pe care nu doriți să le includeți (căutați numai imaginile pe care nu le doriți, care sunt atașate postului) [galeria exclude = "21,32,43"]. Rețineți că, dacă utilizați includeți și excludeți internetul se va rupe! Bine nu chiar, dar nu va funcționa! Acesta va ignora excluderea și utilizarea numai a includerii.

itemtag, icontag, captiontag

[galerie elementtag = "secțiune" icontag = "div" captiontag = "figură"]

Aceste opțiuni pot schimba efectiv elementele HTML pe care le afișează WordPress cu codul scurt al galeriei. Etichetele implicite ale opțiunii sunt următoarele: dl ", icontag =" dt ", captiontag =" dd ". În esență, codul scurt pentru galeria implicită pentru aceste opțiuni este [galerie elementtag = "dl" icontag = "dt" captiontag = "dd"]. Spunem că am vrut să schimbăm etichetele HTML, am putea trece cu ușurință în elementul pe care l-am prefera folosit, ca să putem folosi ceva asemănător [galerie elementtag = "secțiune" icontag = "div" captiontag = "figură"]. Încercați aceste opțiuni și puteți vedea diferența de ieșire.

 
 
  
 
 Text destul 
 
  
 
 Fructe de padure! 

 
  
 
 Quad în râu 
 
  
 
 Magazin 

 
 

---

Tematica Galeriei

Dacă creați sau personalizați o temă, există câteva clase primare pe care doriți să le căutați. Acestea sunt clasele pe care galeria le emite în HTML, de fiecare dată când este utilizat un scurtcode [gallery].

Galerie Wrap

"Galeria Wrap" împachetează fiecare instanță a codului scurt [gallery]. Aceasta înseamnă că, dacă utilizați codul scurt [galerie] de trei ori, această împachetare va exista în codul sursă de trei ori. De fiecare dată când [galeria] este utilizată într-un post, ID-ul de ieșire este incrementat.