Atunci când dezvolți un site pe wordpress pentru o firmă de producție una din cerințele de bază este să listezi produsele firmei. Această listare se poate face în două moduri:
- folosind elementele de formatare HTML existente în editorul vizual din WordPress
- folosind pluginuri
În acest tutorial mă voi prezenta o metodă de listare produse folosind pluginul „Advanced Custom Fields” împreună cu add-on-ul „Repeater Field„.
Advanced Custom Field este un excelent plugin ce permite construirea de formulare online complexe printre care enumăr: formular de contact, formular de sugestii sau reclamații, formular de înscriere la conferințe și evenimente în general, formular de download, formular de chestionar online și altele.
Add-on-ul Repeater Field permite crearea unui câmp repetitiv. Acest tip de câmp poate conține subcâmpuri și permite adăugarea de noi informații de același tip în formularul proiectat. În cazul prezentat permite adăugarea într-o listă formatată a noi și noi produse. Singura restricție este că într-un câmp de tip repeater nu se pot pune alte câmpuri de tip repeater.
Având instalat pluginul și licența pentru add-on introdusă trecem direct la crearea câmpurilor. La accesarea pluginului avem fereastra din imaginea de mai jos:
Titlul formularului este orientativ. E bine să fie un titlu cât mai explicit pentru a regăsi cu ușurință formularul în lista de formulare. I-am dat numele de „Portofoliu de lucrari”. Formularul va fi proiectat în prima parte a formularului evidențiată în următoarea imagine.
Crearea unui formular online pe WordPress
Pentru crearea formularului pașii sunt următorii:
1. Adăugăm un nou câmp folosind butonul Add Field
2. Noul câmp va fi numit „Proiect” și vom selecta să fie de tip repeater din meniul derulant Field Type.
3. După selectare formularul de creare se va modifica.Va apare un nou formular ce conține viitoarele câmpuri repetitive.
4. Câmpurile pe care vrem să le repetăm vor fi: imagine, titlu și link. Imaginile vor fi afișate, titlurile vor fi folosite pentru a descrie imaginea (alt pe imagine și title pe link) iar linkul va fi url-ul paginii cu detaliile proiectului (sau produsului). În imaginea de mai jos se vede câmpul de imagine setat, restul sunt la fel cu următoarele observații:
– imagine este de tip „Image” și la „return value” setăm „Image URL” (pentru a ne returna valoare url-ului și nu id-ul imaginii)
– titlu și link vor fi de tip „Text”
5. În câmpul „Button Label” voi scrie un text cât mai explicativ „Adaugă un nou proiect” sau produs sau orice altceva. În final salvăm și avem imaginea următoare:
6. Câteva cuvinte despre câmpurile din formular:
– field label este câmpul care conține numele formularului
– field name este numele formularului așa cum va fi folosit in cod, el nu trebuie să conțină spații sau alte carctere în afara de liniuțe și underline, daca field label conține mai multe cuvinte în field name spațiile vor fi înlocuite cu liniuțe
– field type este tipul câmpului
– field instructions poate conține instrucțiunile de folosire a formularului (dacă sunt necesare instrucțiuni suplimentare, de genul tipul imaginii, sau cum se completează corect urle-ul paginii țintă sau orice alt tip de instrucțiune utilă pentru client)
– requered? daca da, câmpul devine obligatoriu, dacă nu se poate salva pagina și fără completarea câmpului
– minimum row și maximum row se folosesc în asociere cu Layout -> row
– layout-ul poate fi de tip table caz în care un set de câmpuri se listează pe un singur rând fiecare nouă înregistrare generând un nou rând (util la un număr de câmpuri / înregistrare mic) și de tip row în care fiecare câmp se pune pe o linie nouă (greu de utilizat în orice situație)
– button label este textul care se va afișa pe butonul de adăugare nou produs, proiect în general o nouă înregistrare
7. Salvăm formularul, închidem câmpurile (Close Field) și trecem la setările finale: Location și Options.
8. Location ne permite să creem reguli de afișare. Formularul poate apare în orice pagină sau post, în anumite tipuri de posturi sau pagini sau se pot combina.
Options permite următoarele:
– Order No. să setăm ordinea formularelor în pagină, dacă avem mai multe formulare
– Position permite afișarea formularului fie Normal (în zona principală) și sidebar
– Hide on screen permite ascunderea diverselor opțiuni din pagina unde punem formularul
9. Pentru formularul creat voi avea nevoie de următoarele setări:
– să apară doar în pagina cu template-ul Portofoliu
– pagina nu va avea content și nici comentarii
– poziția va fi cea normală, în zona principală
Setările se văd în imagine următoare:
10. Update și gata formularul. Creem acum o pagină nouă numită Portofoliu, selectăm template-ul Portofoliu și vom avea formularul afișat și necompletat, ca în imaginea următoare:
11. Punem câteva lucrări și publicăm. Momentan pe partea publică nu va apare nimic. Afișarea o voi detalia în următorul tutorial.
