Crearea unei teme WordPress din HTML static Adăugarea imaginilor recomandate

Acum ați lucrat printr-un număr de pași pentru a crea o temă WordPress din fișierele HTML statice.

Mai exact, am analizat următoarele aspecte:

• pregătirea marcajului pentru WordPress
• conversia HTML-ului în PHP și împărțirea fișierului în fișiere șablon
• editarea foii de stil și încărcarea temei în WordPress
• adăugând o buclă în fișierul index
• adăugând metaetichetele, wp_head cârlig și titlul și descrierea site-ului în fișierul cu antet
• adăugând un meniu de navigare
• adăugarea de zone widget la antet și bara laterală
• adăugând zone widget, un colofon și wp_footer accesați fișierul subsol
• crearea de fișiere șablon pentru pagini statice
• crearea unui fișier de șablon de arhivă.

Tema dvs. are acum un fișier șablon pentru afișarea paginilor de arhivă, dar în prezent nu afișează imagini în mod corespunzător. În acest tutorial, veți învăța cum să adăugați suportul imaginilor recomandate pentru tema dvs. și cum să le afișați și să le stylizați în șablonul dvs. de arhivă.

Ce ai nevoie

• editorul de cod de alegere
• un browser pentru testarea muncii tale
• o instalare WordPress, fie locală, fie la distanță
• dacă lucrați la nivel local, veți avea nevoie de MAMP, WAMP sau LAMP pentru a permite WordPress să ruleze
• dacă lucrați de la distanță, veți avea nevoie de acces FTP la site-ul dvs., plus un cont de administrator în instalarea dvs. WordPress

Despre imaginile recomandate

Imaginile recomandate sau miniaturile postale reprezintă o caracteristică foarte utilă a aplicației WordPress, care a funcționat încă de la versiunea 2.9. Terminologia care le înconjoară poate fi puțin confuză, așa că voi încerca tot ce pot pentru a le defini aici:

• O imagine miniaturală imagine sau postare este o singură imagine atașată la o postare prin Imagini recomandate metabox pe ecranul de editare a paginilor. Atunci când lucrați cu imaginile prezentate în codul dvs., utilizați în general termenul "imagine specială" (de ex. Atunci când adăugați asistență pentru acestea în tema dvs.) sau "miniatură" (de exemplu, când le afișați în fișierele șablon). Cu toate acestea, ele sunt același lucru.
• Termenul "miniatură" este de asemenea utilizat ca dimensiune a imaginii. În acest fel, puteți afișa orice imagine pe care o încărcați în WordPress în dimensiunea sa "miniatură". Acest lucru se aplică tuturor imaginilor, nu doar imaginilor prezentate. Deci, puteți afișa o miniatură post în miniatură, dimensiune medie, mare sau întreagă.

Este un pic confuz, dar atâta timp cât utilizați codul corect, nu trebuie să mergeți în neregulă.

1. Adăugarea suportului de imagine recomandat pentru tema dvs.

Primul pas este să adăugați suport pentru imaginile recomandate temei dvs. - fără aceasta, nu veți avea acces la metaboxul imaginilor prezentate în ecranul de editare post.

Deschideți tema functions.php fișier și adăugați următoarele în partea de jos, înainte de închidere ?> etichetă:

 funcția wptutsplus_theme_support () add_theme_support ('post-thumbnails');  add_action ('after_setup_theme', 'wptutsplus_theme_support');

Salvați fișierele cu funcții și deschideți ecranul de editare pentru unul dintre postările dvs. Veți vedea că metabox-urile imaginilor prezentate au apărut, așa cum se arată în screenshot.

Acum lucrați prin fiecare post din blog pe rând, adăugând o imagine recomandată fiecăruia și salvând-o. Nu este nevoie să specificați mărimea imaginii pe care o afișați - aceasta se va face în cod.

2. Adăugarea de imagini recomandate în șablonul de arhivă

Următorul pas este să adăugați codul pentru a afișa imaginile prezentate pe pagina dvs. de arhivă. Faceți asta în interiorul Bucla.

Deschide-ți archive.php fișier și găsiți următoarea linie:

Înlocuiți-l cu acesta:

  „>  'stânga', 'alt' => tăiere (strip_tags ($ wp_postmeta -> _wp_attachment_image_alt)))); ?>  

Acest cod face câteva lucruri:

1. Codul verifică dacă postul are o imagine recomandată dacă (has_post_thumbnail ()). Dacă nu este cazul, acesta nu va afișa imaginea recomandată.
2. Apoi, ea închide imaginea într-un link la post permalink, astfel încât vizitatorii pot face clic pe imagine, precum și titlul postului pentru a vedea postul în întregime.
3. În cele din urmă, acesta afișează imaginea recomandată utilizând the_post_thumbnail (). Acest lucru are 'mediu' parametru pentru a spune WordPress pentru a afișa imaginea de dimensiune medie, și o serie de argumente, inclusiv o clasă pentru stil și 'Alt' argument pentru a seta atributul alt pentru imagine.

Salvați acum fișierul de arhivă și vizitați o pagină de arhivă pe site-ul dvs. (nu pagina principală de blog, dar o arhivă de categorii sau similare).

Aceasta arata acum arhiva mea:

Acest lucru are încă nevoie de un pic de stil ca imaginile sunt butted împreună. Deschide-te style.css fișier și adăugați următoarele:

 .arhiva #content articol, .blog #content articol margin-top: 10px; overflow: auto; 

Rețineți că utilizând funcția .Arhiva și .blogul cursuri pe care le vizez etichetă pe pagina principală de blog și pe orice pagină de arhivă. Acum, posturile ar trebui să fie definite mai clar:

3. Adăugarea imaginilor recomandate în fișierul index

Aveți acum un șablon de arhivă care funcționează cu suport pentru imaginile recomandate. Înainte de a termina, totuși, trebuie să copiați același cod la index.php fişier.

Găsiți aceeași linie de cod pe care ați înlocuit-o în archive.php fișier și înlocuiți-l cu exact același cod ca și cum ați adăugat în fișierul de arhivă. Acum salvați fișierul și verificați pagina principală de blog. Acesta va afișa imaginea recomandată pentru fiecare post.

rezumat

Imaginile recomandate reprezintă o modalitate excelentă de a face paginile de arhivă mai vizibile și mai ușor de utilizat. De asemenea, puteți adăuga imagini recomandate altor șabloane, cum ar fi page.php șablon.

În acest caz, este posibil să doriți să setați parametrii în mod diferit, probabil folosind dimensiunea mare a fișierului în loc de mediu și schimbând clasa. De asemenea, eliminați linkul, deoarece vizitatorul se află deja pe singura pagină.

În următoarea și ultima parte a acestei serii vă voi arăta cum să încărcați o temă în depozitul tematic WordPress. Odată ce aveți o temă pe care o simțiți că este suficient de bună pentru alții să o folosească, aceasta este o modalitate excelentă de a contribui la comunitate și de a ajuta alți utilizatori WordPress.

Resurse

• Imagini recomandate
• the_post_thumbnail ()