Prylar, Mobiler, Appnedladdningar, Android Apps recensioner

Hur man skapar en anpassad WordPress-widget

Vill du skapa dina egna WordPress-widgetar? Widgets lÄter dig lÀgga till objekt som inte innehÄller innehÄll i en sidofÀlt eller i nÄgot widget-klara omrÄde pÄ din webbplats.

Du kan anvÀnda widgetar för att lÀgga till banners, meddelanden, prenumerationsformulÀr för nyhetsbrev och andra element pÄ din webbplats.

I den hÀr artikeln visar vi dig hur du skapar en anpassad WordPress-widget, steg för steg.

Skapa en anpassad WordPress-widget

Notera: Denna handledning Àr för WordPress DIY-anvÀndare som lÀr sig WordPress utveckling och kodning.

Vad Àr en WordPress-widget?

WordPress-widgetar innehÄller kodutdrag som du kan lÀgga till barras sidor av din webbplats eller widget-klara omrÄden.

TÀnk pÄ dem som moduler som du kan anvÀnda för att lÀgga till olika element genom att anvÀnda ett enkelt dra och slÀpp-grÀnssnitt.

Som standard kommer WordPress med en standarduppsÀttning av widgets som du kan anvÀnda med vilket WordPress-tema som helst. Kolla in vÄr nybörjarguide om hur du lÀgger till och anvÀnder widgets i WordPress.

LĂ€gg till widgetar i WordPress

WordPress tillÄter ocksÄ utvecklare att skapa sina egna egna widgetar.

MÄnga premium WordPress-teman och plugins har sina egna anpassade widgetar som du kan lÀgga till i dina barras lateral.

Till exempel kan du lÀgga till ett kontaktformulÀr, anpassat inloggningsformulÀr eller fotogalleri i en sidofÀlt utan att skriva nÄgon kod.

Med det sagt, lÄt oss titta pÄ hur du enkelt kan skapa dina egna WordPress-widgetar.

Video-tutorial

Prenumerera pÄ WPBeginner

Om du föredrar skriftliga instruktioner, fortsÀtt att lÀsa.

Skapa en anpassad widget i WordPress

Om du lÀr dig WordPress-kodning behöver du en lokal utvecklingsmiljö. Du kan installera WordPress pÄ din dator (Mac eller Windows).

Det finns flera sÀtt att lÀgga till din anpassade WordPress-widgetkod.

Helst kan du skapa en platsspecifik plugin och klistra in din widgetkod dÀr.

Du kan ocksÄ klistra in koden i ditt temas funktioner.php-fil. Det kommer emellertid endast att finnas tillgÀngligt nÀr det specifika temat Àr aktivt.

Ett annat verktyg du kan anvÀnda Àr kodavsnittet plugin som gör att du enkelt kan lÀgga till anpassad kod till din WordPress-webbplats.

I denna handledning skapar vi en enkel widget som helt enkelt vÀlkomnar besökare. MÄlet hÀr Àr att bekanta sig med WordPress-widgetsklassen.

LÄt oss börja.

Skapa en grundlÀggande WordPress-widget

WordPress kommer med en inbyggd WordPress Widget-klass. Varje ny WordPress-widget utvidgar WordPress-widgetsklassen.

Det finns 18 metoder som nÀmns i utvecklarhandboken för WordPress som kan anvÀndas med WP Widget-klassen.

För denna tutorial kommer vi dock att fokusera pÄ följande metoder.

__construct (): detta Àr den del dÀr vi skapar widget-id, titel och beskrivning. widget: det Àr hÀr vi definierar resultatet som genereras av widgeten. form: Denna del av koden Àr dÀr vi skapar formulÀret med widgetalternativ för backend. uppdatering: det hÀr Àr den del dÀr vi sparar widgetalternativen i databasen.

LÄt oss studera följande kod dÀr vi har anvÀnt dessa fyra metoder inom klassen WP_Widget.

// Creating the widget 
 class wpb_widget extends WP_Widget {
 
 // The construct part  
 function __construct() {
 
 }
  
 // Creating widget front-end
 public function widget( $args, $instance ) {
 
 }
          
 // Creating widget Backend 
 public function form( $instance ) {
 
 }
      
 // Updating widget replacing old instances with new
 public function update( $new_instance, $old_instance ) {
 
 }
 
 // Class wpb_widget ends here
 } 
 
 

Den sista delen av koden Àr dÀr vi faktiskt kommer att registrera widgeten och ladda den i WordPress.

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

LÄt oss nu sÀtta ihop allt detta för att skapa en grundlÀggande WordPress-widget.

Du kan kopiera och klistra in följande kod i din anpassade plugin eller tematets features.php-fil.

 
 // Skapa widgeten
 klass wpb_widget utökar WP_Widget {
  
 funktion __construct () {
 förÀlder :: __ konstruera (
  
 // Bas-ID för din widget
 'Wpb_widget',
  
 // Widgetnamn kommer att visas i UI
 __ ('WPBeginner Widget', 'wpb_widget_domain'),
  
 // Widgetbeskrivning
 array ('description' => __ ('Exempelwidget baserat pÄ WPBeginner Tutorial', 'wpb_widget_domain'),)
 );
 }
  
 // Skapa front-end widget
  
 widget för offentlig funktion ($ args, $ instans) {
 $ title = Apply_filters ('widget_title', $ instans ('title'));
  
 // Argument före och efter widgetar definieras av teman
 echo $ args ('före_widget');
 if (! tom ($ title))
 echo $ args ('före_titel'). $ titel. $ args ('after_title');
  
 // Det Àr hÀr du kör koden och visar utdata
 echo __ ('Hej, vÀrlden!', 'wpb_widget_domain');
 echo $ args ('after_widget');
 }
          
 // Backend-widget
 allmÀn funktionsformulÀr ($ instans) {
 if (isset ($ instans ('titel'))) {
 $ title = $ instans ('title');
 }
 annars {
 $ title = __ ('Ny titel', 'wpb_widget_domain');
 }
 // admin form widget
 ?>
 
  

NÀr du har lagt till koden bör du gÄ till Utseende »Widgets sida. Du kommer att mÀrka den nya WPBeginner-widgeten i listan över tillgÀngliga widgetar. Du mÄste dra och slÀppa denna widget pÄ en sidofÀlt.

Demo widget

Denna widget har bara ett formulÀrfÀlt att fylla, du kan lÀgga till din text och klicka pÄ spara-knappen för att lagra dina Àndringar.

Du kan nu besöka deras webbplats för att se den i aktion.

Hur man skapar en anpassad WordPress-widget 1

LĂ„t oss nu studera koden igen.

Vi registrerar först "wpb_widget" och laddar vÄr anpassade widget. Efter det definierar vi vad den widgeten gör och hur man ska visa widget-backend.

Slutligen definierar vi hur vi ska hantera de Àndringar som gjorts i widgeten.

Nu Àr det nÄgra saker du kanske vill frÄga. Till exempel, vad Àr wpb_text_domain för?

WordPress anvÀnder gettext för att hantera översÀttning och lokalisering. Denna wpb_text_domain och __e berÀttar för gettext för att göra en strÀng tillgÀnglig för översÀttning. Se hur du hittar WordPress-tema för översÀttningsklara.

Om du skapar en anpassad widget för ditt tema kan du ersÀtta wpb_text_domain med ditt temas textdomÀn.

Vi hoppas att den hÀr artikeln har hjÀlpt dig att lÀra dig hur du enkelt skapar en anpassad WordPress-widget. Du kan ocksÄ se vÄr lista över de mest anvÀndbara WordPress-widgetarna för din webbplats.

Om du gillade den hÀr artikeln, prenumerera pÄ vÄr kanal YouTube för att titta pÄ WordPress sjÀlvstudievideo. Du kan ocksÄ hitta oss pÄ Twitter och Facebook.