Share
Am ajuns la ultimul articol al seriei. În ultimul post, am aruncat o privire asupra introducerii validării, dezinfectării și a câtorva elemente de bază de intrare pe care le putem profita de la crearea paginilor de opțiuni.
În acest articol, vom examina ultimul set de trei opțiuni și cum să le cuplam până la partea din față a temei.
Înainte de a începe: Ca și în ultimele câteva, acest articol presupune că ați urmat împreună cu restul seriei, aveți o copie de lucru a exemplului de cod instalat și acum sunteți relativ familiarizați cu opțiunile de setări API și opțiunile de temă. Dacă nu sunteți sigur cu privire la oricare dintre cele de mai sus, vă recomandăm să citiți restul articolelor înainte de a vă scufunda în acest post.
La începutul acestei serii, am adăugat casetele de selectare. Am putea să ne întoarcem și să le revedem, dar să ținem cont de ceea ce am făcut până acum și să introducem noi opțiuni. Odată ce terminăm, puteți revedea codul pe care l-am adăugat la începutul seriei pentru examinare.
Mai întâi, să introducem elementul casetei de selectare la sandbox_theme_initialize_input_examples funcţie:
Accentsconagua
add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Apoi, trebuie să mergem mai departe și să definim apelul pe care l-am specificat mai sus. Adăugați următoarea funcție la proiectul dvs.:
funcția sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = '„; $ html. = '„; echo $ html; // end sandbox_checkbox_element_callback Vom revizui această funcție momentan, dar mai întâi observați că am adăugat un element de etichetare de lângă caseta de selectare. Căsuțele de bifare au adesea un element asociat cu acestea, care permit și posibilitatea de a fi apăsat pentru a declanșa caseta de selectare. Acest lucru facilitează accesul utilizatorilor la o opțiune fără a fi nevoie să faceți clic cu precizie în caseta de selectare.
Pentru a asocia o etichetă cu o casetă de selectare, trebuie să oferiți etichetei pentru atribui valoarea ID-ul atributul casetei de selectare la care este legat. Destul de ușor, corect?
Acum, reîmprospătați pagina de opțiuni și ar trebui să vedeți elementul nou vizibil pe pagina opțiunilor. Dar, deocamdată, nu salvează sau nu recuperează o valoare. În primul rând, să introducem a valoare atribut pe caseta de selectare. Aceasta este oarecum arbitrară, dar este o practică obișnuită de a da unui element verificat o valoare de "1." Să facem asta acum:
$ html = '„;
Apoi, să gândim exact ce trebuie să se întâmple când salvăm o valoare. Ideal:
Relativ clară, nu? Mai degrabă decât citirea opțiunii, configurarea unei condiționări și verificarea prezenței sau absenței unei valori, putem profita de WordPress " verificat funcţie.
Funcția acceptă trei argumente, dintre care numai primul este necesar:
verifica = „verificat“ la browserDeci, să ne actualizăm codul pentru a utiliza această funcție:
$ html = '„;
Actualizați pagina și verificați opțiunea, salvați și repetați.
Dacă oricare dintre acestea pare puțin confuză, revedeți articolul precedent în care acoperim semnificațiile fiecărui atribut pe un element de opțiune.
În cele din urmă, să actualizăm capătul din față al temei pentru a verifica această opțiune și a redacta un șir de text bazat pe dacă opțiunea a fost verificată. Reamintim că atunci când am creat elementul, i-am dat valoarea "1“. Aceasta înseamnă că atunci când caseta de selectare este bifată și serializată, aceasta va menține o valoare de una. Pur și simplu, trebuie să scriem o condiție care verifică valoarea opțiunii și apoi redă textul în mod corespunzător. În index.php, adăugați acest bloc de cod:
Caseta de selectare a fost verificată.
Caseta de selectare nu a fost verificată.
Acum, reveniți la pagina de setări, comutați bifând caseta de selectare și actualizați pagina.
După cum sa menționat la începutul acestei secțiuni, examinați opțiunile de afișare pe care le-am introdus mai devreme în această serie și vedeți dacă este mult mai clară acum când am examinat modul de introducere și gestionare a elementelor de casetă.
Butoanele radio sunt elemente care sunt utile în grupuri - la urma urmei, nu veți folosi niciodată un singur buton radio. Lucrul cu elementele radio este că ele oferă o modalitate de a permite utilizatorilor să aleagă unul dintr-un set de opțiuni reciproc exclusive.
Pentru un motiv sau altul, butoanele radio sunt adesea o provocare pentru dezvoltatorii WordPress. Sperăm că vom reuși să facem cât mai ușor posibil să intrăm în proiectele noastre. Ca și în restul exemplelor din această serie, detaliați ce vom face:
Se pare destul de clar - să mergem mai departe și să adăugăm elementul de câmp la pagina noastră de opțiuni:
add_settings_field ("Elementele butonului radio", "Elementele butonului radio", "sandbox_radio_element_callback", "sandbox_theme_input_examples", "input_examples_section"); Și să implementăm apelul elementului radio. Mai întâi, vom specifica codul, apoi îl vom examina:
funcția sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = '„; $ html. = '„; $ html. = '„; $ html. = '„; echo $ html; // end sandbox_radio_element_callback Primul lucru pe care trebuie să-l observați atunci când lucrați cu butoane radio este că o fac nu urmați exemplele tipice despre modul de setare ID-ul și Nume atribute. Observați că ID-ul atributul este unic și nu are nicio legătură cu restul atributelor elementului. De asemenea, observați că eticheta asociată a fiecărui element folosește ID-ul pentru că este pentru atribut. Aceasta leagă eticheta de butonul radio, astfel încât utilizatorii să poată da clic pe etichetă pentru a selecta elementul radio.
Apoi, observați că Nume atributele sunt aceleași pentru fiecare element radio, dar valorile sunt diferite. Acest lucru face ca butoanele radio să se excludă reciproc - fiecare element radio trebuie să aibă același lucru Nume dar valorile trebuie să fie unice.
În cele din urmă, putem seta o condiție pe pagina de pornire, verificând valoarea elementului. În tema ta functions.php, adăugați următorul bloc de cod:
A fost selectată prima opțiune.
A fost selectată a doua opțiune.
Încărcați pagina principală a temei, comutați opțiunile și actualizați. Ar trebui să vedeți cele două propoziții în funcție de valoarea elementelor de opțiune.
Ultimul element pe care îl vom examina este elementul selectat. Acest element oferă utilizatorilor un meniu derulant de opțiuni din care puteți alege. Să planificăm exact ceea ce trebuie să introducem pentru acest element:
În acest moment din serie, acest lucru ar trebui să fie destul de rutină. Să începem - în primul rând, vom introduce câmpul de setări:
add_settings_field ('Select Element', 'Select Element', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Apoi, vom defini funcția de apel invers. Examinați codul și apoi îl vom discuta după exemplul următor:
funcția sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = '„; echo $ html; // end sandbox_radio_element_callback Mai întâi, reîmprospătați pagina de opțiuni pentru a vă asigura că elementul selectat apare. Presupunând că o face, să examinăm codul de mai sus.
Atunci când definim elementul selectat, i-am dat un mesaj ID-ul atributul și a Nume atribuiți mult ca și noi cu restul elementelor pe care le-am demonstrat. Apoi, fiecare opțiune are o valoare unică și un text care corespunde valorii. Deși nu trebuie să faceți acest lucru, mi-a fost de obicei util să lucrați în proiectele mele. În cele din urmă, am profitat de selectat ajutor pe care WordPress îl oferă. Acest lucru este la fel ca verificat funcția pe care am utilizat-o în exemplul anterior, cu excepția faptului că este îndreptată spre opțiunile selectate.
Ultimul pas va fi actualizarea capătului din față al temei, astfel încât să verifice valoarea elementului selectat după ce a fost salvat. Adăugați următorul bloc de cod la dvs. index.php:
Nu afișați niciodată acest lucru. Oarecum ironic să arătați asta chiar.
Uneori afișează asta.
Afișați întotdeauna acest lucru.
Revizuiți pagina de pornire a temei, modificați opțiunile și apoi reîmprospătați pagina - ar trebui să observați actualizarea textului pe baza opțiunii pe care ați selectat-o.
Cu asta, ajungem în cele din urmă la sfârșitul acestei serii. API-ul Settings (Setări) este o caracteristică puternică a WordPress și ne oferă posibilitatea de a implementa pagini de opțiuni bine concepute și securizate, dar trebuie să le folosim în mod corespunzător. Din păcate, aceasta este probabil una dintre cele mai ignorate caracteristici ale platformei de către mulți dezvoltatori.
În cele din urmă, obiectivul meu a fost să ajung dezvoltatorii prin API chiar de la începutul înțelegerii de ce este important, a setărilor, a paginilor de meniu, a navigării cu file și a modului de lucru cu fiecare tip de element.
În cele din urmă, rețineți că puteți găsi codul exemplu pe GitHub. Pe măsură ce continuați să lucrați cu API-ul pentru setări sau găsiți o caracteristică neclară, vă rugăm să contribuiți. Mi-ar plăcea pentru această serie și exemplul codului să continue să furnizeze o sursă de educație pentru comunitatea WordPress.
verificatselectat