Cum să creați un widget WordPress personalizat

Doriți să vă creați propriile widget-uri personalizate în WordPress? Widget-urile vă permit să adăugați elemente care nu conțin conținut într-o bară laterală sau în orice zonă pregătită pentru widget-uri a site-ului dvs. web.


Puteți utiliza widgeturi pentru a adăuga bannere, reclame, formulare de înscriere la newsletter și alte elemente pe site-ul dvs. web.

În acest articol, vă vom arăta cum puteți crea un widget WordPress personalizat, pas cu pas.

Crearea unui widget WordPress personalizat

Notă: Acest tutorial este destinat utilizatorilor de bricolaj WordPress care învață dezvoltarea și codarea WordPress.

Ce este un widget WordPress?

Widgeturile WordPress conțin bucăți de cod pe care le puteți adăuga la barele laterale ale site-ului sau la zonele pregătite pentru widget-uri.

Gândiți-vă la ele ca la module pe care le puteți adăuga pentru a adăuga diferite elemente folosind o interfață simplă de drag and drop.

În mod implicit, WordPress vine cu un set standard de widget-uri pe care le puteți folosi cu orice temă WordPress. Consultați ghidul pentru începători despre cum să adăugați și să folosiți widget-uri în WordPress.

Adăugarea de widgeturi în WordPress

WordPress permite, de asemenea, dezvoltatorilor să își creeze propriile widget-uri personalizate.

Multe teme și plugin-uri premium WordPress sunt dotate cu propriile widget-uri personalizate pe care le puteți adăuga la barele laterale.

De exemplu, puteți adăuga un formular de contact, un formular de autentificare personalizat sau o galerie foto într-o bară laterală fără a scrie cod.

Acestea fiind spuse, să vedem cum să creați cu ușurință propriile dvs. widget-uri personalizate în WordPress.

Tutorial video

Abonați-vă la WPBeginner

Dacă preferați instrucțiunile scrise, atunci vă rugăm să continuați să citiți.

Crearea unui widget personalizat în WordPress

Dacă înveți codarea WordPress, atunci vei avea nevoie de un mediu de dezvoltare locală. Puteți instala WordPress pe computer (Mac sau Windows).

Există mai multe moduri de a adăuga codul dvs. widget personalizat în WordPress.

În mod ideal, puteți crea un plugin specific site-ului și lipiți codul widget-ului acolo.

De asemenea, puteți lipi codul în fișierul funcției.php al temei. Cu toate acestea, acesta va fi disponibil numai atunci când această temă specială este activă.

Un alt instrument pe care îl puteți utiliza este pluginul Cod fragmente care vă permite să adăugați cu ușurință cod personalizat pe site-ul dvs. WordPress.

În acest tutorial, vom crea un widget simplu care salută doar vizitatorii. Scopul aici este să vă familiarizați cu clasa de widget WordPress.

Să începem.

Crearea unui widget WordPress de bază

WordPress vine cu o clasă de widget WordPress încorporată. Fiecare nou widget WordPress extinde clasa de widget WordPress.

Există 18 metode menționate în manualul dezvoltatorului WordPress, care pot fi utilizate cu clasa WP Widget.

Cu toate acestea, de dragul acestui tutorial, ne vom concentra pe următoarele metode.

  • __construct (): Aceasta este partea în care creăm ID-ul, titlul și descrierea widget-ului.
  • widget: Aici definim ieșirea generată de widget.
  • formular: Această parte a codului este locul în care creăm formularul cu opțiuni de widget pentru backend.
  • actualizare: Aceasta este partea în care salvăm opțiunile de widget în baza de date.

Să studiem următorul cod în care am folosit aceste patru metode în cadrul clasei WP_Widget.

// Crearea widget-ului
class wpb_widget extinde WP_Widget {

// Partea constructivă
function __construct () {

}

// Crearea widget-ului front-end
widget pentru funcția publică ($ args, $ instanță) {

}

// Crearea widgetului Backend
formular funcție publică ($ instanță) {

}

// Actualizarea widget-ului înlocuind instanțele vechi cu cele noi
actualizare funcție publică ($ new_instance, $ old_instance) {

}

// Clasa wpb_widget se încheie aici
}

Ultima bucată a codului este aceea în care vom înregistra efectiv widgetul și îl vom încărca în WordPress.

function wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Acum, să punem toate acestea la punct pentru a crea un widget WordPress de bază.

Puteți copia și lipi codul următor în fișierul personalizat sau fișierul theme.php.

// Crearea widget-ului
class wpb_widget extinde WP_Widget {

function __construct () {
părinte :: __ construct (

// ID de bază al widgetului
‘Wpb_widget’,

// Numele widgetului va apărea în UI
__ (‘Widget WPBeginner’, ‘wpb_widget_domain’),

// Descrierea widget-ului
tablou („descriere” => __ (‘Widget de exemplu bazat pe tutorialul WPBeginner’, ‘wpb_widget_domain’),)
);
}

// Crearea widget-ului front-end

widget pentru funcția publică ($ args, $ instanță) {
$ title = apply_filters (‘widget_title’, $ instanță [‘title’]);

// argumentele widget înainte și după sunt definite de teme
ecou $ args [‘before_widget’];
if (! goală ($ title))
ecou $ args [‘înainte_titlu’]. $ titlu. $ args [ ‘after_title’];

// Acesta este locul în care rulați codul și afișați ieșirea
echo __ (‘Bună ziua, lume!’, ‘wpb_widget_domain’);
ecou $ args [‘after_widget’];
}

// Widget Backend
formular funcție publică ($ instanță) {
if (isset ($ instanță [‘title’])) {
$ title = $ instanță [‘title’];
}
altfel {
$ title = __ (‘Titlu nou’, ‘wpb_widget_domain’);
}
// Formular de administrare widget
?>

<?php _e (‘Titlu:’); ?>

<?php
}

// Actualizarea widget-ului înlocuind instanțele vechi cu cele noi
actualizare funcție publică ($ new_instance, $ old_instance) {
$ instanță = array ();
$ instance [‘title’] = (! goală ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
returnare $ instanta;
}

// Clasa wpb_widget se încheie aici
}

// Înregistrați și încărcați widgetul
function wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

După adăugarea codului la care trebuie să vă îndreptați Aspect »Widgets pagină. Veți observa noul widget WPBeginner din lista de widget-uri disponibile. Trebuie să trageți și să fixați acest widget într-o bară laterală.

Widget demonstrativ

Acest widget are un singur câmp de formular de completat, puteți adăuga textul dvs. și faceți clic pe butonul Salvare pentru a stoca modificările.

Acum puteți vizita site-ul dvs. web pentru ao vedea în acțiune.

Vizualizarea widgetului personalizat

Acum să studiem din nou codul.

Mai întâi am înregistrat „wpb_widget” și am încărcat widget-ul personalizat. După aceea, am definit ce face acel widget și cum să afișăm back-end-ul widget-ului.

În cele din urmă, am definit modul de gestionare a modificărilor aduse widget-ului.

Acum există câteva lucruri pe care poate doriți să le întrebați. De exemplu, care este scopul wpb_text_domain?

WordPress folosește gettext pentru a gestiona traducerea și localizarea. Acest wpb_text_domain și __e spune gettext pentru a face un șir disponibil pentru traducere. Vedeți cum puteți găsi teme WordPress gata de traducere.

Dacă creați un widget personalizat pentru tema dvs., atunci puteți înlocui wpb_text_domain cu domeniul de text al temei dvs..

Sperăm că acest articol te-a ajutat să înveți cum să creezi cu ușurință un widget WordPress personalizat. De asemenea, poate doriți să vedeți lista noastră cu cele mai utile widget-uri WordPress pentru site-ul dvs..

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