WordPress este un sistem uimitor de gestionare a conținutului, cu multe funcții excelente, cum ar fi widget-urile. În acest tutorial, vă voi explica cum să vă creați propriile widgeturi într-un mic plugin. Această postare va acoperi câteva puncte suplimentare pe care trebuie să le înțelegeți înainte de a crea widget-ul în sine. Începem!


Pasul 1: Creați pluginul dvs. Widget

Recent am creat un plugin numit „Freelancer Widgets Bundle” și unii oameni m-au întrebat cum să creez un astfel de plugin, așa că am decis să scriu acest post. Primul pas este crearea pluginului. Și după cum veți vedea, nu este cea mai grea parte. Un plugin este un cod suplimentar adăugat la WordPress odată ce îl activezi. WordPress creează o buclă printr-un folder pentru a prelua toate pluginurile disponibile și a le enumera în back office. Pentru a vă crea pluginul, veți avea nevoie de un editor precum Coda (Mac) sau Dreamweaver (PC și Mac). Îți recomand să creezi pluginul într-o instalare locală a WordPress, făcând-o pe un server live poate cauza probleme când faci o eroare. Așadar, vă rugăm, așteptați să testați pluginul nostru înainte de a-l pune pe gazduire.

Deschideți acum folderul wp-content / plugins. Aici veți adăuga pluginul. Creați un nou director și numiți-l „widget-plugin” (de fapt, acest nume poate fi orice doriți). Chiar dacă pluginul nostru va avea doar un singur fișier, este întotdeauna mai bine să utilizați un folder pentru fiecare plugin. În directorul dvs., creați un nou fișier numit „widget-plugin.php” (acest nume poate fi schimbat și) și deschideți-l. Acum suntem pe cale să adăugăm primele noastre linii de cod. Definiția unui plugin sub WordPress respectă câteva reguli pe care le puteți citi aici pe codex. Iată cum definește WordPress un plugin:

Deci, trebuie să modificăm acest cod pentru ca acesta să se potrivească nevoilor noastre:

Salvați fișierul. Adăugând doar cod la fișierul nostru widget-plugin.php am creat un plugin! Ei bine, deocamdată pluginul nu face nimic, dar WordPress îl recunoaște. Pentru a vă asigura că este cazul, mergeți la administrația dvs. și accesați meniul „Pluginuri”. Dacă pluginul dvs. apare în lista de pluginuri sunteți bun, altfel asigurați-vă că ați urmat instrucțiunile mele și încercați din nou. Acum puteți activa pluginul.

Pasul 2: Creați Widget

Acum vom crea în sine widgetul. Acest widget va fi o clasă PHP care va extinde clasa principală WordPress WP_Widget. Practic, widget-ul nostru va fi definit astfel:

// Clasa widget
clasa My_Custom_Widget se extinde WP_Widget {

// Constructor principal
public function __construct () {
/ * ... * /
}

// Formularul widget (pentru backend)
formular funcție publică ($ instanță) {
/ * ... * /
}

// Actualizați setările widget-urilor
actualizare funcție publică ($ new_instance, $ old_instance) {
/ * ... * /
}

// Afișați widgetul
widget pentru funcția publică ($ args, $ instanță) {
/ * ... * /
}

}

// Înregistrați widgetul
function my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Acest cod oferă WordPress toate informațiile de care sistemul are nevoie pentru a putea folosi widgetul:

  1. constructor, pentru a iniția widgetul
  2.  forma () funcție pentru a crea formularul de widget în administrație
  3. funcția de actualizare (), pentru a salva datele widget în timpul ediției
  4. Si funcție widget () pentru a afișa conținutul widget-ului pe front-end

1 - Constructorul

Constructorul este partea de cod care definește numele widget-ului și argumentele principale, mai jos este un exemplu despre cum poate arăta.

// Constructor principal
public function __construct () {
părinte :: __ construct (
'My_custom_widget',
__ („Widget-ul meu personalizat”, „text_domain”),
array (
'customize_selective_refresh' => true,
)
);
}

Vă rugăm să nu utilizați __ () în jurul numelui widget, această funcție este folosită de WordPress pentru traducere. Vă recomand într-adevăr să folosiți întotdeauna aceste funcții, pentru a vă transforma tema pe deplin. Iar utilizarea parametrului „personaliza_selective_refresh” permite actualizarea widgetului Aspect> Personalizare atunci când editați widget-ul, în loc să reîmprospătați întreaga pagină, doar widget-ul este actualizat atunci când faceți modificări.

2 - Funcția form ()

Această funcție este cea care creează setările formei de widget în zona de administrare WordPress (fie la Aspect> Widgets sau Aspect> Personalizare> Widgets). Aceasta înseamnă că veți introduce datele dvs. pentru a fi afișate pe site-ul web. Așa că voi explica cum puteți adăuga câmpuri de text, zone de text, selectați casete și casete de selectare la setările formularului dvs. de widget.

// Formularul widget (pentru backend)
formular funcție publică ($ instanță) {

// Setați valorile prestabilite ale widget-urilor
$ implicit = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analizați setările curente cu valorile implicite
extract (wp_parse_args ((array) $ instanță, $ prestabilit)); ?>


/>

Acest cod este doar adăugarea a 5 câmpuri la widget (titlu, text, text, selectare și casetă de selectare). Deci, mai întâi definiți valorile prestabilite pentru widget-ul dvs., apoi funcția următoare analizează setările curente definite / salvate pentru widget-ul cu valorile implicite (astfel încât orice setări care nu există vor reveni la valoarea implicită, cum ar fi când adăugați pentru prima dată un widget la bara laterală). Și ultima este html pentru fiecare câmp. Observați utilizarea esc_attr () la adăugarea câmpurilor de formular, acest lucru se face din motive de securitate. Ori de câte ori faceți ecou unei variabile definite de utilizator pe site-ul dvs., trebuie să vă asigurați că este prima igienizare.

3 - Funcția de actualizare ()

Funcția de actualizare () este foarte simplă. Întrucât dezvoltatorii de bază ai WordPress au adăugat o API-uri de widget-uri cu adevărat puternică, trebuie doar să adăugăm acest cod pentru a actualiza fiecare câmp:

// Actualizați setările widget-urilor
actualizare funcție publică ($ new_instance, $ old_instance) {
$ instanță = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['caseta de selectare'])? 1: fals;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['selectează']): '';
returnare $ instanta;
}

După cum vedeți, tot ce trebuie să facem este să verificați fiecare setare și dacă nu este gol, salvați-o în baza de date. Observați utilizarea funcțiilor wp_strip_all_tags () și wp_kses_post (), acestea sunt folosite pentru igienizarea datelor înainte de a fi adăugate la baza de date. Ori de câte ori introduceți ORICE utilizator trimis conținut într-o bază de date, trebuie să vă asigurați că acesta nu are niciun cod rău intenționat. Prima funcție wp_strip_all_tags elimină totul, cu excepția textului de bază, astfel încât să îl puteți folosi pentru orice câmpuri în care valoarea finală este un șir, iar a doua funcție wp_kses_post () este aceeași funcție folosită pentru conținutul postării și elimină toate etichetele în afară de html de bază precum link-urile , se întinde, div, imagini etc.

4 - Funcția widget ()

Funcția widget () este cea care va emite conținutul pe site. Este ceea ce vor vedea vizitatorii tăi. Această funcție poate fi personalizată pentru a include clase CSS și etichete specifice pentru a se potrivi perfect cu afișarea temei. Iată codul (vă rugăm să nu puteți modifica acest cod ușor pentru a se potrivi nevoilor dvs.):

// Afișați widgetul
widget pentru funcția publică ($ args, $ instanță) {

extract ($ args);

// Verificați opțiunile de widget
$ title = isset ($ instanță ['titlu'])? apply_filters ('widget_title', $ instanță ['title']): '';
$ text = isset ($ instanță ['text'])? $ instanță ['text']: '';
$ textarea = isset ($ instanță ['textarea'])? $ instanță ['textarea']: '';
$ select = isset ($ instanță ['selectați]])? $ instanță ['selectați]]:' ';
$ caseta =! goală ($ instanță [„caseta de selectare”])? $ instanță [„caseta de selectare”]: fals;

// WordPress core before_widget hook (include mereu)
ecou $ before_widget;

// Afișați widgetul
ecou '
„; // Afișați titlul widget-ului, dacă este definit if ($ title) { ecou $ înainte de_titlu. $ titlu. $ After_title; } // Afișați câmpul de text if ($ text) { ecou '

'. $ text. '

„; } // Afișare câmp textarea if ($ textarea) { ecou '

'. $ textarea. '

„; } // Afișați câmpul de selectare if ($ select) { ecou '

'. $ selectați. '

„; } // Afișați ceva dacă caseta de selectare este adevărată if (caseta $ check) { ecou '

Ceva minunat

„; } ecou '
„; // WordPress core after_widget hook (include mereu) ecou $ after_widget; }

Acest cod nu este complex, tot ce trebuie să vă amintiți este să verificați dacă este setată o variabilă, dacă nu și dacă doriți să o imprimați, veți primi un mesaj de eroare.

Codul complet al widgeturilor

Acum, dacă urmați corect pluginul dvs., acum trebuie să fie complet funcțional și îl puteți personaliza pentru a se potrivi nevoilor dvs. Dacă nu ați urmat ghidul sau nu doriți să verificați dublu codul, puteți vizita pagina Github pentru a vizualiza codul complet.

Vezi codul complet pe Github

Concluzie

Am văzut că crearea unui widget în interiorul unui plugin este foarte interesantă, acum trebuie să știți cum puteți crea un plugin simplu care conține un widget cu diferite tipuri de câmp și ați învățat cum să mergeți un pic mai departe folosind tehnici avansate pentru a personaliza widgetul. Felicitări, ai făcut o treabă uimitoare!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me