Cum se creează o pagină de setări în WordPress

Publicat: 2020-06-25

Dacă creați un plugin WordPress, s-ar putea să vă întrebați cum să creați o pagină de setări pentru acesta. Oferă WordPress un fel de mecanism „standard” pentru asta? Există instrumente sau cadre noi cu care să creați pagini de setări moderne? Este o idee bună să creați o pagină de setări? Ei bine, astăzi vom vorbi despre toate acestea și am să vă răspund la întrebări.

Decizii, nu Opțiuni

WordPress este o platformă care are ca scop democratizarea web-ului. Această afirmație, care sună foarte frumos, dar în același timp este foarte abstractă, este un mod de a spune „dorim ca oricine să poată folosi WordPress”. Și, crezi sau nu, paginile de setări pot fi și, de fapt, în multe cazuri sunt, o barieră pentru asta. Nu mă crezi? Ei bine, WordPress însuși spune asta:

Atunci când luăm decizii, aceștia sunt utilizatorii pe care îi luăm în considerare mai întâi. Un exemplu excelent al acestei considerații sunt opțiunile software. De fiecare dată când oferiți unui utilizator o opțiune, îi cereți să ia o decizie. Când unui utilizator nu îi pasă sau nu înțelege opțiunea, aceasta duce în cele din urmă la frustrare. În calitate de dezvoltatori, credem uneori că oferirea de opțiuni pentru orice este un lucru bun, nu puteți avea niciodată prea multe opțiuni, nu? În cele din urmă, aceste alegeri ajung să fie cele tehnice, alegeri în care utilizatorul final obișnuit nu are niciun interes. Este datoria noastră ca dezvoltatori să luăm decizii inteligente de design și să evităm să punem greutatea alegerilor tehnice asupra utilizatorilor noștri finali.

Filosofia WordPress

Deci, înainte de a crea o pagină de setări, gândiți-vă cu atenție la opțiunile pe care doriți să le oferiți utilizatorilor dvs., de ce doriți ca aceștia să aibă acces la acele opțiuni și dacă este necesar sau util să faceți acest lucru.

Filtrele ca alternativă

Chiar dacă știu că nu trebuie să ofer prea multe opțiuni utilizatorilor mei, trebuie să mărturisesc că, ca dezvoltator, nu îmi este întotdeauna ușor să iau o decizie în loc să ofer o opțiune. Sunt momente când vreau ca utilizatorii mei să aibă posibilitatea de a alege , deși sunt conștient de faptul că opțiunile pe care le expun sunt complexe. Deci ce fac în aceste cazuri? Urmează recomandarea WordPress și îmi limitez utilizatorii avansați?

Din fericire, WordPress oferă o soluție perfectă pentru această dilemă: filtre . Când proiectați un plugin și doriți ca utilizatorii dvs. (avansați) să poată ajusta comportamentul acestuia, nu creați o pagină de setări sau ceva de genul acesta. În schimb, faceți pluginul dvs. personalizabil prin mecanismul de filtrare al WordPress.

Dacă utilizați filtre, majoritatea utilizatorilor dvs. se vor bucura de un comportament implicit („decizii”, vă amintiți?), deoarece vor folosi pluginul cu valorile implicite stabilite în filtrele dvs., în timp ce utilizatorii avansați vor avea posibilitatea de a le modifica. decizii prin cârlige (și așa ai și „opțiuni”). Cel mai bun din ambele lumi!

Setări WordPress

Ok, acum că suntem conștienți de importanța luării deciziilor pentru utilizatorii noștri și am văzut cum să ocolim această limitare (dacă este necesar) prin filtre, este timpul să vedem cum putem crea o pagină de setări în WordPress. Pentru că, da: există momente în care chiar trebuie să oferim utilizatorilor noștri opțiunea de a lua decizii în funcție de preferințele lor.

Setări API în WordPress

API-ul Setări a fost adăugat în versiunea WordPress 2.7. Acesta este un set de funcții care standardizează crearea paginilor de setări, permițându-vă să definiți ce opțiuni sunt disponibile, care va fi interfața cu utilizatorul pentru editarea fiecărei opțiuni (în esență, câmpurile dintr-un formular) și cum să validați, salvați , și să le recupereze valorile.

Cred că cel mai bun mod de a învăța este prin exemple, așa că haideți să creăm prima noastră pagină de setări folosind API-ul de setări pas cu pas.

Crearea unei noi pagini de setări

Primul lucru pe care trebuie să-l faceți pentru a crea o pagină de setări este (surpriză, surpriză!) să creați o pagină pentru afișarea setărilor. Pentru a face acest lucru, pur și simplu utilizați funcția add_options_page în timpul acțiunii admin_menu și înregistrați pagina:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

După cum puteți vedea, singurul lucru pe care îl facem cu această funcție este să înregistrăm o pagină nouă care va apărea sub meniul Setări WordPress, cu titlul ei, numele din meniu, permisiunile pe care trebuie să le aibă utilizatorul pentru a o putea accesa , și os pornit. Ultimul argument, nelio_render_settings_page , este numele funcției care se va ocupa de redarea paginii respective:

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

Pagina de setări în sine este relativ ușor de creat. Trebuie doar să adăugăm un form al cărui conținut va fi generat semi-automat de WordPress. Pe de o parte, invocăm funcția settings_fields , care practic adaugă un nonce în formular pentru a o face „sigură”. Apoi, îi cerem lui WordPress să redeze toate setările pe care le-am creat pentru plugin-ul nostru folosind funcția do_settings_sections . Și, în sfârșit, pur și simplu adăugăm butonul pentru a trimite formularul.

Setări reale în pagina noastră de setări

În continuare, trebuie să înregistrăm fiecare dintre opțiunile care vor face parte din pagina noastră de setări. Pentru a face acest lucru, vom folosi două funcții: register_setting , care ne permite să indicăm numele cu care vom salva setările în baza de date și add_settings_field , care adaugă fiecare opțiune individuală:

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

Fragmentul de cod anterior are câteva lucruri care merită o atenție specială. Pe de o parte, rețineți că funcția register_setting are ca al treilea argument: nelio_validate_example_plugin_settings . Acesta este numele funcției de apel invers care va fi apelată pentru a valida valorile pe care utilizatorul le-a selectat (rețineți că întotdeauna trebuie să validați și să vă dezinfectați câmpurile formularului). Această funcție este cam așa:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

unde preluăm fiecare câmp trimis de la $input și îl igienizăm în $output , astfel încât să știm sigur că, orice ar fi salvam în baza de date, este valid și corect.

Al doilea lucru pe care am vrut să vă concentrez este faptul că fiecare dintre câmpurile pe care le definim include și o referință de funcție care spune WordPress cum ar trebui redat fiecare câmp. De exemplu, apelurile înapoi ale câmpurilor din exemplul nostru ar putea fi cam așa:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

În esență, toate aceste apeluri inverse fac este să recupereze valoarea curentă a câmpului pe care ar trebui să-l redate (cu get_option ) și să redea HTML-ul care va permite utilizatorului să seteze o valoare sau alta (în acest exemplu, un câmp de input de tastați text sau number ).

Care este rezultatul final, te întrebi? Acest:

Exemplu de pagină simplă de setări.
Exemplu de pagină simplă de setări.

Gânduri finale

După cum puteți vedea, crearea unei pagini de setări este relativ simplă. Personal nu-mi place foarte mult întregul proces, deoarece este destul de repetitiv și trebuie să scriem din nou și din nou același cod standard... dar este ușor, totuși.

WP Settings API
Generatorul de coduri API WP Settings vă permite să creați cu ușurință scheletul paginii dvs. de setări.

Pentru a simplifica și mai mult acest proces, totuși, există niște generatoare de cod online cu care, printr-o interfață simplă de utilizator, puteți defini diferitele câmpuri pe care le doriți în pagina de setări. Câteva exemple sunt:

  • WP Settings API
  • Generator de pagini WordPressOption

Și, desigur, există întotdeauna posibilitatea de a crea o pagină de setări folosind tehnologii precum React... dar aceasta este o poveste pentru o altă perioadă, nu crezi?

Imagine prezentată de Rima Kruciene pe Unsplash.