Cum să adăugați cu ușurință filtre de postare pe site-ul dvs. WordPress

O solicitare frecventă pe care o întâlnesc este capacitatea de a permite utilizatorilor să filtreze sau să sorteze postările de pe front-end-ul site-ului lor.

Poate că utilizatorii doresc să vadă postările în ordine alfabetică sau poate să vadă doar acele postări cu miniaturi? Acest lucru are deja sens pentru postările obișnuite, dar poate fi și mai semnificativ în cazul produselor, fotografiilor sau a altor tipuri de conținut.

În proiectul WordPress de weekend de astăzi, vă voi oferi o scurtă descriere a modului în care puteți implementa o funcție ca aceasta în tema Twenty Fifteen. Haideti sa crapam!

• Crearea unei teme pentru copii
• Crearea controalelor
• Modificarea interogării
• Forme mai inteligente
• Comportamentul WordPress
• Concluzie

Crearea unei teme pentru copii

Ca întotdeauna, aveți nevoie de o temă pentru copii. Avem un ghid pentru temele pentru copii chiar aici pe WPMU DEV, vă recomand să citiți asta dacă nu sunteți familiarizat cu temele pentru copii.

Crearea controalelor

Să adăugăm trei comenzi: una pentru ordonarea postărilor, una pentru setarea direcției de sortare și una pentru afișarea numai a postărilor cu miniaturi.

Primul pas este să copiați index.php al temei părinte în tema noastră copil.

Deschideți fișierul index.php din tema copilului și inserați următorul cod HTML sub containerul principal (care ar trebui să fie pe linia 20):

Și iată cum arată pe front-end:

După cum puteți vedea, ne lipsește puțin stil. Să rezolvăm asta adăugând câteva stiluri la foaia de stil:

O reacție pe care o aud frecvent de la nou-veniți la programare este: „De unde a știut că acestea sunt stilurile care îl vor face să se integreze în tema?”

Soluția este destul de simplă: trișez. Folosesc instrumentele pentru dezvoltatori din Chrome pentru a inspecta elementele obișnuite ale articolului. În acest caz, mi-a permis să văd cum elementele își obțin umbra casetei și marginile lor și pur și simplu am aplicat aceste reguli propriului meu element.

Modificarea interogării

Să selectăm „ordonare după titlu”, „crescător” și „postări cu miniaturi” și să trimitem formularul. De fapt, ar trebui să vedeți o schimbare fără a face nimic codului.

Pentru a vedea de ce, să inspectăm adresa URL. Ar trebui sa fie cam asa:

 http://yourdomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

Informațiile pot fi rechemate în scripturile noastre PHP folosind variabila $_GET . WordPress știe deja ce înseamnă parametrii order și orderby și îi folosește în interogarea implicită. Ca urmare, dacă avem nevoie doar de comandă și direcția comenzii, am terminat.

Este grozav, dar din nou, de unde am știut asta? Aș fi putut folosi „order_by” ca parametru în loc de „orderby”. În acest caz, WordPress nu reia intențiile noastre. Am aruncat o privire la documentația WP_Query din WordPress Codex, unde există o mulțime de parametri, mulți dintre care pot fi utilizați în URL-uri.

Acum, să implementăm parametrul nostru post miniatura. O postare are o miniatură dacă are metadate cu cheia _thumbnail_id asociată cu ea. Va trebui să ne modificăm interogarea pentru a ne asigura că acest lucru este luat în considerare. Să facem asta acum cu query_posts() .

Lipiți următorul cod deasupra funcției get_header() din partea de sus a fișierului:

Îmbinăm parametrii interogării inițiale cu propriul nostru parametru nou, ceea ce duce la un set diferit de postări. Formularul nostru funcționează acum, dar nu își amintește selecțiile noastre. Să rezolvăm asta prin rescrierea formularului nostru și folosind ceva PHP.

Forme mai inteligente

Pe lângă listarea tuturor opțiunilor comenzii după selector, avem nevoie de o modalitate de a indica care dintre ele este selectată. Dacă ar fi să facem asta fără o buclă, ar arăta cam așa:

Înțelegi ceva din asta? Nu te învinovăţesc! În cadrul fiecărei opțiuni, verificăm dacă valoarea selectată în prezent este egală cu valoarea opțiunii. Dacă este, scoatem proprietatea selectată. Să facem asta mult mai curat cu o buclă:

Acesta este puțin mai lung, dar numai pentru că avem trei opțiuni. Acesta este un format mult mai bun pentru gestionarea oricărui tip de selecție. Să extindem asta la întreaga formă:

Totul este gata. Formularul ar trebui să-și amintească acum selecțiile noastre bazate pe variabilele $_GET din URL.

Comportamentul WordPress

Vă amintiți cum am menționat că știu să folosesc „order” și „orderby” pentru că m-am uitat la documentația WP_Query? Aceasta este o practică bună, dar poate duce la rezultate neașteptate. Găsiți slug-ul unei categorii pe care o aveți, spuneți că această categorie este „wordpress”.

Acum utilizați următoarea adresă URL: http://yourwebsite.com/?category_name=wordpress. Ar trebui să vedeți arhiva categoriei dvs., listând toate postările dvs. WordPress. Este foarte bine, dar avem două probleme:

Dacă aveți permalinkuri destul de activate (ceea ce ar trebui), pagina a fost redirecționată către o nouă adresă URL, cel mai probabil http://yourwebsite.com/category/wordpress. Filtrele noastre nu vor fi vizibile deoarece fișierul archive.php gestionează această vizualizare, nu index.php . În plus, numele categoriei noastre nu este transmis ca parametru URL, așa că va trebui să folosim niște trucuri suplimentare pentru ca filtrele noastre să funcționeze.

Modul de comandă rapidă de a face acest lucru este de a nu folosi în mod deliberat aceiași parametri pe care îi folosește WordPress. Puteți trece numele categoriei folosind parametrul catname din adresa URL, deoarece WordPress nu va prelua acest lucru. Puteți apoi introduce acest lucru la interogare folosind numele corect al parametrului. Ceva de genul:

Alternativa ar fi să folosim o funcție în loc de a ne scoate formularul în index.php așa cum este. Ar trebui să detectați categoria din interogarea WordPress în sine și să afișați selecția curentă pe baza acesteia.

Concluzie

Adăugarea propriilor filtre nu este deloc dificilă, dar necesită un pic de lăutari. În cazul nostru, poate doriți să vă asigurați că paginarea este eliminată atunci când comanda este setată la aleatoriu. Ar putea fi înlocuit cu un buton „afișează mai multă aleatorie”, care pur și simplu reîncarcă pagina.

Sperăm că acest articol v-a oferit elementele de bază despre cum puteți realiza acest lucru pentru dvs. și veți putea construi filtrele de care aveți nevoie.

• proiecte wordpress de weekend