Hur man skapar en widget-plugin för WordPress

WordPress är ett fantastiskt innehållshanteringssystem med många fantastiska funktioner som widgetar. I den här tutorialen ska jag förklara hur du skapar dina egna widgetar i en liten plugin. Det här inlägget kommer att täcka några extra poäng som du måste förstå innan du skapar själva widgeten. Nu kör vi!


Steg 1: Skapa din widget-plugin

Jag skapade nyligen ett plugin som heter “Freelancer Widgets Bundle”, och vissa frågade mig hur jag skulle skapa ett sådant plugin, så jag bestämde mig för att skriva det här inlägget. Det första steget är skapandet av plugin. Och som ni ser är det inte den svåraste delen. En plugin är en extra kod som läggs till WordPress när du aktiverar den. WordPress skapar en loop genom en mapp för att hämta alla tillgängliga plugins och lista dem på back office. För att skapa din plugin behöver du en redaktör som Coda (Mac) eller Dreamweaver (PC & Mac). Jag rekommenderar att du skapar din plugin i en lokal installation av WordPress, att göra det på en live-server kan orsaka problem om du gör ett fel. Så snälla, vänta med att testa vår plugin innan du lägger den till din webbhotell.

Öppna nu mappen wp-content / plugins. Här kommer du att lägga till din plugin. Skapa en ny katalog och kalla den “widget-plugin” (det här namnet kan faktiskt vara vad du vill). Även om vår plugin bara har en enda fil är det alltid bättre att använda en mapp för varje plugin. Skapa en ny fil som heter “widget-plugin.php” i din katalog (detta namn kan också ändras) och öppna det. Vi håller på att lägga till våra första kodrader. Definitionen av ett plugin under WordPress följer några regler som du kan läsa här på codex. Så här definierar WordPress ett plugin:

Så vi måste ändra den här koden så att den passar våra behov:

Spara din fil. Genom att bara lägga till kod i vår widget-plugin.php-fil har vi skapat ett plugin! Tja, för tillfället gör inte plugin något, men WordPress känner igen det. För att se till att det är fallet, gå till din administration och gå under "Plugins" -menyn. Om din plugin visas i pluginlistan är du bra, annars se till att du följde mina instruktioner och försök igen. Du kan nu aktivera plugin.

Steg 2: Skapa widgeten

Vi ska nu skapa själva widgeten. Den här widgeten kommer att vara en PHP-klass som utvidgar kärnkraften i WordPress WP_Widget. I princip definieras vår widget på detta sätt:

// Widget-klassen
klass My_Custom_Widget utökar WP_Widget {

// Huvudkonstruktör
public function __construct () {
/ * ... * /
}

// widgetformuläret (för backend)
allmän funktionsformulär ($ instans) {
/ * ... * /
}

// Uppdatera widgetinställningar
offentlig funktionsuppdatering ($ new_instance, $ old_instance) {
/ * ... * /
}

// Visa widgeten
widget för offentlig funktion ($ args, $ instans) {
/ * ... * /
}

}

// Registrera widgeten
funktion my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Den här koden ger WordPress all information som systemet behöver för att kunna använda widgeten:

  1. De konstruktör, för att initiera widgeten
  2. De form () -funktion för att skapa widgetformuläret i administrationen
  3. De uppdatering () -funktion, för att spara widgetdata under utgåvan
  4. Och den widget () -funktion för att visa widget-innehållet i front-end

1 - Konstruktören

Konstruktören är den koddel som definierar widgetnamnet och huvudargumenten nedan är ett exempel på hur det kan se ut.

// Huvudkonstruktör
public function __construct () {
förälder :: __ konstruktion (
'My_custom_widget',
__ ('My Custom Widget', 'text_domain'),
array (
'customize_selective_refresh' => sant,
)
);
}

Snälla använd inte __ () runt widgetnamnet, den här funktionen används av WordPress för översättning. Jag rekommenderar verkligen att du alltid använder dessa funktioner, för att göra ditt tema helt översättbart. Och användningen av parametern "anpassa_selektiv_refresh" gör det möjligt att uppdatera widgeten under Utseende> Anpassa när du redigerar widgeten så istället för att uppdatera hela sidan uppdateras bara widgeten när du gör ändringar.

2 - Form () -funktionen

Denna funktion är den som skapar widgetformulärinställningarna i WordPress-adminområdet (antingen under Utseende> Widgets eller Utseende> Anpassa> Widgets). Det här är om du anger dina uppgifter som ska visas på webbplatsen. Så jag förklarar hur du kan lägga till textfält, textområden, markera rutor och kryssrutor i widgetformulärinställningarna.

// widgetformuläret (för backend)
allmän funktionsformulär ($ instans) {

// Ställ in widgetinställningar
$ standard = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analysera aktuella inställningar med standardvärden
extrahera (wp_parse_args ((array) $ instans, $ standard)); ?>


/>

Den här koden lägger helt enkelt till 5 fält till widgeten (Titel, text, textområde, markera och kryssruta). Så först definierar du standardvärdena för din widget, sedan analyserar nästa funktion de aktuella inställningarna som definierats / sparas för din widget med standardvärdena (så alla inställningar som inte finns skulle återgå till standard, som när du först lägger till en widget till din sidofält). Och sist är html för varje fält. Lägg märke till användningen av esc_attr () när du lägger till formulärfält, detta görs av säkerhetsskäl. När du ekar en användardefinierad variabel på din webbplats bör du se till att den först saneras.

3 - Funktionen uppdatering ()

Uppdateringen () -funktionen är verkligen enkel. Eftersom WordPress-kärnutvecklare lagt till ett riktigt kraftfullt widgets-API behöver vi bara lägga till den här koden för att uppdatera varje fält:

// Uppdatera widgetinställningar
offentlig funktionsuppdatering ($ new_instance, $ old_instance) {
$ instans = $ old_instance;
$ instans ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instans ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instans ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instans ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falsk;
$ instans ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
returnera $ instans;
}

Som du kan se allt vi behöver göra är att kontrollera för varje inställning och om den inte är tom, spara den i databasen. Lägg märke till användningen av funktionerna wp_strip_all_tags () och wp_kses_post (), dessa används för att desinficera data innan de läggs till i databasen. När du sätter in något användarinlämnat innehåll i en databas måste du se till att det inte har någon skadlig kod. Den första funktionen wp_strip_all_tags tar bort allt utom bastext så att du kan använda den för alla fält där slutvärdet är en sträng och den andra funktionen wp_kses_post () är samma funktion som används för postinnehållet och den tar bort alla taggar förutom grundläggande html-liknande länkar , spann, div, bilder osv.

4 - Funktionen widget ()

Funktionen widget () är den som kommer att mata ut innehållet på webbplatsen. Det är vad dina besökare kommer att se. Denna funktion kan anpassas för att inkludera CSS-klasser och specifika taggar som passar perfekt till din temadisplay. Här är koden (vänligen inte att den här koden lätt kan ändras för att passa dina behov):

// Visa widgeten
widget för offentlig funktion ($ args, $ instans) {

extrakt ($ args);

// Kontrollera widgetalternativen
$ title = isset ($ instans ['title'])? applic_filters ('widget_title', $ instans ['title']): '';
$ text = isset ($ instans ['text'])? $ instans ['text']: '';
$ textarea = isset ($ instans ['textarea'])? $ instans ['textarea']: '';
$ select = isset ($ instans ['select'])? $ instans ['select']: '';
$ kryssruta =! tom ($ instans ['kryssruta'))? $ instans ['kryssruta']: falsk;

// WordPress core innan_widget hook (inkludera alltid)
echo $ before_widget;

// Visa widgeten
echo '
'; // Visa widget-titel om den är definierad if ($ title) { echo $ before_title. $ titel. $ After_title; } // Visa textfält if ($ text) { echo '

'. $ text. '

'; } // Visa textfält if ($ textarea) { echo '

'. $ textarea. '

'; } // Visa valfält if ($ select) { echo '

'. $ välj. '

'; } // Visa något om kryssrutan är sant if (kryssrutan $) { echo '

Något fantastiskt

'; } echo '
'; // WordPress core after_widget hook (inkludera alltid) echo $ after_widget; }

Den här koden är inte komplex, allt du behöver komma ihåg är att kontrollera om en variabel är inställd, om du inte gör det och om du vill skriva ut den får du ett felmeddelande.

Komplett kod för widget-plugin

Om du nu har följt korrekt bör ditt plugin nu fungera fullt ut och du kan anpassa det efter dina behov. Om du inte har följt guiden eller vill dubbelkontrollera koden kan du besöka Github-sidan för att se hela koden.

Visa fullständig kod på Github

Slutsats

Vi såg att det är väldigt intressant att skapa en widget inuti ett plugin, nu måste du veta hur du skapar en enkel plugin som innehåller en widget med olika fälttyper och du lärde dig att gå lite längre med avancerade tekniker för att anpassa widgeten. Grattis, du gjorde ett fantastiskt jobb!

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