Widgeturile vă permit să adăugați elemente non-conținut într-o bară laterală sau în orice zonă pregătită pentru widget-uri pe site-ul dvs. WordPress. Le puteți folosi pentru a adăuga bannere, reclame, formulare de înscriere la newsletter și alte elemente pe site-ul dvs. web.
Puteți crea, de asemenea, un widget personalizat pentru a încorpora funcții unice cu o notă personalizată, cum ar fi fluxuri de social media, postări recente sau etichete HTML.
La WPBeginner, folosim widgeturi personalizate pentru a afișa diferite tipuri de conținut în bara laterală a site-ului nostru. Și în acest articol, vă vom arăta cum să creați un widget WordPress personalizat, pas cu pas.
Notă: Acest tutorial este pentru utilizatorii WordPress DIY care învață dezvoltarea și codarea WordPress.
Ce este un widget WordPress?
Widgeturile WordPress conțin fragmente de cod pe care le puteți adăuga în barele laterale ale site-ului dvs. sau în zonele pregătite pentru widgeturi.
Gândiți-vă la ele ca la module pe care le puteți folosi pentru a adăuga diferite elemente și funcționalități pe site-ul dvs.
În mod implicit, WordPress vine cu un set standard de widgeturi pe care le puteți utiliza cu orice temă WordPress. Pentru mai multe detalii, consultați ghidul nostru pentru începători despre cum să adăugați și să utilizați widgeturi în WordPress.
WordPress permite, de asemenea, dezvoltatorilor să creeze propriile widgeturi personalizate.
Multe teme WordPress și pluginuri premium vin cu propriile widgeturi personalizate pe care le poți adăuga în barele laterale.
De exemplu, poți adăuga un formular de contact, un formular de autentificare personalizat, o galerie foto, un formular de înscriere pentru o listă de email și multe altele într-o bară laterală fără a scrie cod.
Acestea fiind spuse, să vedem cum puteți crea cu ușurință propriile widget-uri personalizate în WordPress.
Înainte de a crea un widget personalizat în WordPress
Dacă înveți codificare WordPress, vei avea nevoie de un mediu de dezvoltare local. Acesta îți oferă libertatea de a învăța și de a testa lucruri fără grija că site-ul tău este live.
Puteți instala WordPress local pe Mac folosind MAMP sau pe Windows folosind WAMP.
Dacă aveți deja un site live, îl puteți muta pe un server local. Pentru mai multe detalii, consultați ghidul nostru despre cum să mutați un site WordPress live pe un server local.
După aceea, există mai multe moduri de a adăuga codul widgetului dvs. personalizat în WordPress.
Ideal, puteți crea un plugin specific site-ului și să lipiți codul widget-ului acolo. Acest lucru vă permite să adăugați cod la WordPress care nu depinde de tema dvs. WordPress.
Puteți, de asemenea, să lipiți codul în fișierul functions.php al temei dvs. functions.php. Cu toate acestea, va fi disponibil doar atunci când acea temă particulară este activă.
Un alt instrument pe care îl puteți folosi este pluginul WPCode, care vă permite să adăugați cu ușurință cod personalizat pe site-ul dvs. web.
În acest tutorial, vom crea un widget simplu care doar salută vizitatorii. Scopul aici este să te familiarizezi cu clasa de widgeturi WordPress.
Gata? Să începem.
Crearea unui widget WordPress de bază
WordPress vine cu o clasă de widgeturi WordPress încorporată. Fiecare widget WordPress nou extinde clasa de widgeturi WordPress.
Există 19 metode menționate în manualul dezvoltatorilor 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 widget-ului, titlul și descrierea.
- widget: Aici definim ieșirea generată de widget.
- formular : Această parte a codului este unde creăm formularul cu opțiuni de widget pentru backend.
- actualizare: Aceasta este partea în care salvăm opțiunile widget-ului în baza de date.
Pentru a crea un widget personalizat, puteți copia și lipi următorul fragment de cod în fișierul functions.php sau în WPCode (recomandat):
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</label>
<input
class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>"
/>
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Cel mai simplu mod de a adăuga cod personalizat pe site-ul dvs. WordPress este utilizând WPCode. Este cel mai bun plugin de fragmente de cod care ajută la gestionarea și inserarea fragmentelor de cod pe site-ul dvs. fără a risca să stricați ceva.
Mai întâi, va trebui să instalați și să activați pluginul WPCode pe site-ul dvs. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.
După activare, poți accesa Code Snippets » + Add Snippet din panoul de administrare WordPress. De aici, selectează opțiunea ‘Add Your Custom Code (New Snippet)’.
După aceea, poți lipi codul widgetului personalizat în zona Code Preview.
De asemenea, va trebui să faceți clic pe meniul derulant „Tip cod” și să selectați opțiunea „Fragment PHP”.
Apoi, puteți derula în jos și selecta metoda de inserare pentru codul dvs.
WPCode vă permite să alegeți unde să rulați codul. Pentru acest tutorial, puteți utiliza opțiunile implicite și să-l rulați peste tot.
Odată ce ați terminat, puteți derula înapoi în partea de sus pentru a salva fragmentul.
Pentru a activa fragmentul, pur și simplu faceți clic pe comutatorul la „Activ”.
Pentru a afla mai multe, vă rugăm să consultați ghidul nostru despre cum să adăugați cod personalizat pe site-ul dvs. WordPress.
După adăugarea codului în WordPress, trebuie să accesați pagina Aparență » Widget-uri din panoul de administrare WordPress.
Apoi, faceți clic pe pictograma de adăugare bloc „Plus”, căutați „WPBeginner Widget” și selectați noul widget.
Acest widget are un singur câmp de completat.
Puteți adăuga textul dvs. și faceți clic pe butonul „Actualizare” pentru a salva modificările.
Acum, puteți vizita site-ul dvs. WordPress pentru a vedea widget-ul personalizat în acțiune.
Iată un exemplu despre cum arată pe site-ul nostru demo.
Adăugarea unui widget personalizat în editorul clasic WordPress
Dacă folosiți editorul clasic de widgeturi pentru a adăuga widgeturi noi pe site-ul dvs., atunci procesul va fi similar.
Va exista un nou widget numit „WPBeginner Widget” în lista de widgeturi disponibile. Trebuie să trageți și să plasați acest widget în bara laterală.
Apoi, introdu un titlu și apasă pe „Salvează” pentru a salva setările widget-ului tău.
Noul dvs. widget personalizat va fi acum activ pe site-ul dvs.
Acum, să studiem din nou codul.
Mai întâi, am înregistrat „wpb_widget” și am încărcat widget-ul nostru personalizat. După aceea, am definit ce face acel widget și cum să afișăm backend-ul widget-ului.
În cele din urmă, am definit cum să gestionăm modificările aduse widgetului.
Acum, există câteva lucruri pe care ați putea dori să le întrebați. De exemplu, care este scopul `textdomain`?
WordPress folosește ‘gettext’ pentru a gestiona traducerea și localizarea. Acest textdomain și _e spun lui ‘gettext’ să facă un șir de caractere disponibil pentru traducere. Pentru a afla mai multe, consultă ghidul nostru despre cum poți găsi teme WordPress pregătite pentru traducere.
Dacă creați un widget personalizat pentru tema dvs., atunci puteți înlocui `textdomain` cu text domain-ul temei dvs.
Alternativ, puteți utiliza un plugin de traducere WordPress pentru a traduce WordPress cu ușurință și a crea un site WordPress multilingv.
Bonus: Adăugați stiluri personalizate la widgeturile dvs. WordPress
Odată ce ați creat un widget WordPress, puteți adăuga și stiluri personalizate la acesta. Acest lucru poate îmbunătăți aspectul site-ului dvs., menține coerența și atrage atenția asupra informațiilor importante.
Pentru a face acest lucru, vizitează pagina Aspect » Widget-uri și adaugă widget-ul pe care dorești să îl personalizezi. Vei vedea acum câteva opțiuni pentru a-i schimba culorile și tipografia în panoul bloc din dreapta.
Cu toate acestea, dacă widget-ul nu afișează acea opțiune, atunci îl puteți personaliza adăugând clase CSS după extinderea tab-ului „Avansat”.
Acum, puteți adăuga CSS personalizat temei dvs. WordPress vizând acea clasă CSS particulară.
Pentru aceasta, accesați pagina Aspect » Personalizare și comutați la fila CSS suplimentar. Aici veți vedea o previzualizare a site-ului dvs. web cu o casetă pentru a adăuga regulile CSS.
Acum puteți utiliza CSS personalizat pentru a personaliza aspectul widget-ului dvs. Pentru detalii, consultați tutorialul nostru despre cum să adăugați stiluri personalizate la widget-urile dvs. WordPress.
Sperăm că acest articol v-a ajutat să învățați cum să creați cu ușurință un widget WordPress personalizat. De asemenea, ați putea dori să consultați ghidul nostru despre cum să dezactivați blocurile de widgeturi în WordPress și tutorialul nostru despre cum să eliminați widgeturile inactive în WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Dan
Șirul „wpb_text_domain” nu se găsește în codul exemplu. Presupun că codul exemplu a fost actualizat, iar textul articolului nu a fost?
De asemenea, pentru a confirma, este „wpb_text_domain” de fapt „web_widget_domain” din codul exemplu?
Vă mulțumesc anticipat pentru orice feedback.
Suport WPBeginner
Vă mulțumim că ați atras atenția asupra acestui aspect, vom actualiza acest articol și vom clarifica mai bine.
Admin
marwan
Salut,
Pot pune codul ca o clasă separată .php și nu în functions.php
Karel Hanton
Mulțumesc pentru tutorialul excelent. Am adăugat codul în plugin-ul meu de test și funcționează perfect așa cum a fost descris – văd Widget-ul în lista Aparență » Widget-uri și îl pot adăuga în Bara Laterală.
Dar nu văd noul Widget în lista editorului de pagină. Am omis ceva, este necesară o altă înregistrare sau setări?
Mulțumesc din nou pentru ajutor.
Aldo
Acesta este acum afișat ca un „Widget Legacy” în Wordpress. Există o nouă modalitate de a crea widgeturi?
JP
acest lucru este grozav, exemplul simplu de copiere și lipire a fost exact ceea ce căutam. Mulțumesc!
Suport WPBeginner
You’re welcome
Admin
Banu
Am creat un plugin CRUD și trebuie să îl folosesc într-o pagină, mă puteți ghida cum să folosesc acel plugin într-o pagină?
Suport WPBeginner
Ar depinde de modul în care ați configurat pluginul; pentru a-l avea pe o singură pagină, ați putea fie să folosiți un shortcode pentru afișarea pe front-end, fie să explorați API-ul de opțiuni dacă doriți să-l afișați în partea de administrare a unui site.
Admin
Kishan
Cum pot crea mai mult de 1 widget personalizat?
Și, de asemenea, cum pot seta alte câmpuri precum radio, checkbox, dropdown, text în widget?
Suport WPBeginner
Va trebui să înlocuiți wpb_widget cu ceea ce doriți să se numească noul dvs. widget, iar apoi codul va depinde de ceea ce doriți în mod specific să adăugați. Dacă aruncați o privire la WordPress codex, puteți vedea diferitele coduri disponibile.
Admin
Carmen
Salut!
În prezent, dezvolt un plugin și trebuie să creez un widget pentru a permite utilizatorului să adauge o funcționalitate specifică pe site-ul său.
Am copiat codul widget-ului dvs. într-un fișier și am salvat fișierul în directorul plugin-ului meu. Am folosit add_action și do_action în fișierul principal al plugin-ului meu pentru a-l încărca, dar tot nu funcționează. Mă puteți ajuta, vă rog?
Mulțumesc!
Suport WPBeginner
Din păcate, acest lucru ar depinde în mare măsură de modul în care este configurat plugin-ul dvs., ați putea dori să vă asigurați că ambele secțiuni ale acestui cod sunt încărcate pentru ca widget-ul să fie adăugat și afișat
Admin
Maximilian K.
O întrebare scurtă, ce se întâmplă dacă vreau să creez widget-uri în care pot plasa și alte widget-uri? Cum ar fi coloane bootstrap goale 6-3-3 de exemplu și în fiecare coloană pot plasa apoi widget-uri precum imagine, text, cele mai recente postări etc.
Există o comandă / cuvânt cheie pentru a semnala că există loc pentru alte widget-uri în acest widget…
pentru că sunt cam confuz în legătură cu tema mea creată și cum funcționează WP… vedeți, sunt un începător ^^
Am plasat deja informații generale precum titlul paginii, am creat zone de widget în subsolul meu, astfel încât să pot plasa meniuri, linkuri conexe etc. pe ele. A funcționat.
Dar acum sunt confuz cum pot să-mi realizez conținutul în WordPress așa cum l-am proiectat înainte. Poate câteva cuvinte cheie sunt utile pentru a citi mai multe despre ele.
Suport WPBeginner
Acest lucru ar necesita mai multă personalizare decât abordăm în acest articol, ați putea fi nevoit să căutați cum să creați o bară laterală pentru codul pe care îl puteți utiliza: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Admin
Lars
Tutorial grozav! A funcționat perfect.
Suport WPBeginner
Glad our tutorial could help
Admin
Watson Anikwai
Cum obții un câmp de tip postare personalizat din baza de date wp și îl folosești într-un widget pentru a-l afișa pe frontend?
vicky
nu pot adăuga două widgeturi personalizate.. al doilea widget nu apare....
ce ar trebui să fac???.. vă rog ajutați-mă
Ahad Bhatti
Foarte de înțeles și util. Vă mulțumesc.
Belitza Gomez
Salut, aș dori să știu unde pot găsi în widget-urile disponibile meniul „custom menu”. Nu apare și nu am reușit să adaug o pagină în footer prin acest widget.
mulțumesc pentru ajutor!!!!
Samdoxer
salut, cum aș putea afișa un logo în locul textului. ar fi suficient să înlocuiesc URL-ul logo-ului cu textul.
Mulțumesc anticipat.
Suport WPBeginner
Vă rugăm să consultați setările temei sau să vizitați pagina Aspect » Customizer din zona de administrare. Acolo veți găsi o opțiune pentru a încărca imaginea logo-ului dvs.
Admin
Gary Foster
Ce a apărut mai întâi, widget-ul sau aplicația?
Un widget trebuie înregistrat? Dacă da, cum, vă rog?
Cum îți protejezi cel mai bine ideea de widget sau aplicație?
Mulțumesc tuturor
shelley
Aceste instrucțiuni au funcționat superb pentru crearea widgetului meu personalizat. Nu pot, totuși, să-mi dau seama cum să schimb dimensiunea fontului la 60px. Am reușit să adaug CSS în opțiunile temei Divi care a centrat textul și a adăugat o bordură. Dar cum schimb stilul fontului, vă rog? Adăugarea „font-size:60px” nu funcționează. Vreau ca fontul să fie mare, ca un tagline care rulează pe pagină. Mulțumesc.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Mulțumesc mult pentru tutorialele tale
Luigi Briganti
Salut! Sper că mă puteți ajuta.
Am creat un tip de postare personalizat care afișează orarul unui magazin. Desigur, puteți crea oricâte orare doriți, dar necesitatea mea este să afișez un anumit orar în bara laterală a site-ului web.
În acest scop, am creat un widget care parcurge postările din orarul afișând doar 1 (și anume prima, deoarece am ordonat în ASC). Aceasta este o soluție temporară, doar pentru a vedea dacă widget-ul funcționează și, de fapt, funcționează.
Ceea ce vreau să fac cu adevărat este să afișez în backend o listă derulantă cu toate postările aparținând tipului de postare „orar” pentru a putea alege pe cea de care am nevoie atunci când am nevoie și să o afișez în frontend. Cum pot face acest lucru?
Mulțumesc dacă puteți/vreți să ajutați.
Anees Ijaz
Mulțumesc, omule, pentru că mi-ai salvat timpul ..
Kevin
Îmi place acest post, m-a ajutat de multe ori! Mulțumesc!