Handledning: Skapa en mikrodatawidget för ditt företag i WordPress

I den här handledningen lär vi oss hur du skapar en anpassad widget som matar ut din företagsinformation, såsom dess officiella namn, adress, telefonnummer och e-post. Men vi tar det ett steg längre genom att mata ut det med mikrodata eller schemamarkering, vilket gör att sökmotorer kan förstå ditt innehåll.

Widgets är dynamiska block som kan placeras i tillgängliga områden i ditt tema. Vanligtvis skulle ditt tema ha minst en sidofält och ett eller flera områden i sidfoten. Att ha din företagsinformation som en widget i sidfoten är vanligt och ganska smart – eftersom sidfoten visas på alla sidor på din webbplats.

Mikrodata är ytterligare HTML-attribut som förklarar vad en specifik HTML-tagg innehåller så att en maskin kan förstå vad de är (t.ex. företagsnamn, telefonnummer, företagsadress, företags e-postadress, etc). Detta gör det möjligt för sökmotorer som Google att extrahera information om ditt företag från din HTML.

Vad vi kommer att skapa

Vår widget kommer att mata ut information med hjälp av Microdata-schema LocalBusiness som är perfekt för en organisation eller ett företag. Det är helt upp till dig vilka egenskaper du vill skriva ut, klicka bara på länken ovan för att läsa alla möjliga egenskaper inom LocalBusiness (inklusive ärvda). Ditt företag eller ditt land kanske föredrar annan typ av information.

Denna handlednings widget kommer att mata ut följande valfria information:

• Företagsnamn (mikrodataegenskap: legalName)
• Moms-ID eller organisationsnummer (mikrodataegenskap: vatID)
• Postadress (mikrodatatagg: PostalAddressmed egenskaper för streetAddress, postalCode, och addressLocality)
• Företagets e-postadress (Microdata-egenskap: email)
• Telefonnummer (mikrodataegenskap: telephone)

Den här handledningen guidar dig inte genom stilen av widgeten, eftersom den borde vara ganska enkel. I frontend kommer vår widget att se ut som en vanlig textwidget. Men naturligtvis, under huven, har den schemamarkering som hjälper Google.

Grunderna för att skapa en anpassad widget

Du kan lägga din kod i dina teman functions.phpeller skapa ett anpassat plugin. Kom bara ihåg att om du behåller den i ett plugin, kommer du att förlora widgeten när du avaktiverar plugin; och om du håller den i temat kommer du att förlora widgeten om du byter till ett annat tema. I det här exemplet lägger jag till koden i temats functions.php.

Att skapa en widget görs med objektorienterad PHP-kod. Du skriver en PHP-klass som utökar WordPress widgetklass och initierar den genom att anropa register_widget()och ange ditt klassnamn. I den här handledningen har jag döpt min widgetklass till LocalBusiness.

Låt oss börja med att anropa register_widget()en funktion som är kopplad till åtgärden widgets_init.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});

Låt oss snabbt se över skelettet av en anpassad widgetklass:

class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() { }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) { }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) { }
}

Som du kan se ovanifrån behöver du fyra funktioner i din klass. Låt oss gå igenom varje funktion en efter en och fylla i dem.

Bygga en LocalBusiness Microdata Widget

Den mest logiska platsen att börja är i konstruktorn, som ansvarar för att ställa in din widget.

Funktionen __construct()

Inuti konstruktorn måste du ställa in några variabler, såsom widgetens namn, och anropa förälderns konstruktorfunktion (förälderklassen är den du utökar; WP_Widget). Läs mer om möjliga alternativ i constructor här. Jag kommer att tillhandahålla ett bas-ID, en titel och en beskrivning, så här:

Du kan göra mer i __constructmetoden, som att lägga skript i kö eller definiera fler widgetinställningar. Men ovanstående brukar räcka i de flesta fall.

Form()-funktionen

Nästa steg är att bygga alla inställningar och indata som din widget accepterar i admin. För att mata ut inställningar till Widget admin använder vi funktionen form()som ger dig en parameter; en array som innehåller alla dina eventuellt sparade widgetalternativ. Det är viktigt att du matar ut motsvarande sparade inställning i alla dina ingångar så att data behålls. (Vi ska titta på hur du sparar inställningarna i nästa steg).

Det finns mycket att hålla reda på i formulärfunktionen, så låt oss bara lägga till en input, för det juridiska namnet, först och se till att vi förstår vad vi behöver göra:

Först och främst matar ovanstående kod ut några HTML-omslag och klasser i den form som WordPress matar ut sina widgetformulär – vi gör detta så att formuläret ser snyggt ut.

Det finns två funktioner du behöver för att bekanta dig med; get_field_id()och get_field_name()och de båda är funktioner inom WP_Widget(vilket är anledningen till att du anropar " $this->" framför – medan $thishänvisar till klassens instans). Funktionerna returnerar ett angivet fälts ID respektive namn för användning i dina indata idoch nameattribut. Det är mycket viktigt. för att inte glömma att lägga till ett nameattribut på din inmatning, annars kommer du aldrig att få tag i dess värde när du sparar.

Och slutligen matar vi ut det nuvarande sparade värdet valueför vår inmatning genom att referera till det godkända argumentet $instance. Utan att göra detta för ditt värde, kommer indata aldrig att fyllas med vad som helst som sparats i databasen, och kommer att visas tomt varje gång, vilket kan förvirra användare.

Om du vill ha olika formulärinmatningar, såsom kryssrutor eller rullgardinsmenyer, bör du enkelt kunna lägga till dem enligt reglerna som nämns ovan. Låt oss lägga till resten av våra widgetinställningar. De är alla textinmatningar, så det är samma kod som upprepas ovan, förutom deras fält-ID. Vår form()metod slutar med att se ut så här:

Om du lägger till din widget i ett tillgängligt widgetområde bör det se ut så här:

Update()-funktionen

Funktionen update()ansvarar för att faktiskt spara dina inmatade värden i admin. Tyvärr gör WordPress inte detta automatiskt åt dig. I denna funktion finns två parametrar; brukar heta $new_instanceoch $old_instance. Inuti den första parametern, $new_instance, hittar du alla värden som skickades in, och inom den andra, $old_instance, hittar du de värden som för närvarande är sparade i databasen. Detta gör att du kan göra några smarta jämförelser om det behövs.

Vanligtvis skulle du helt enkelt bara skapa en ny uppsättning av alla dina widgetinställningar och spara allt som är inställt inuti $new_instance. Vi tar hand om en del sanering också. Slutligen returnerar vi helt enkelt den här arrayen, som talar om för WordPress vad som ska sparas.

// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
    return $instance;
}

Du kan nu testa din widget om du vill och kontrollera att dina inmatade värden sparas. Och om du kommer ihåg att ställa in valueattributet korrekt i form(), när du sparar och trycker på uppdatera, bör värdena behållas. Bra! Nu till det sista, och visserligen roligaste, steget – att mata ut frontend-biten.

Widget()-funktionen

Funktionen widget()ansvarar för att mata ut din widget i frontend. Vi får två argument till funktionen; för det första en array med lite användbar information som temats definierade widgetområdes-omslag, och för det andra dina sparade widgetinställningsvärden.

Utdata från din widget bör alltid börja med eko $args['before_widget']och alltid sluta med eko $args['after_widget']. Detta ser till att din widget lindas in i samma korrekta widget-HTML-omslag som definieras av temat. Längs samma spår kan du eka $args['before_title']och $args['after_title']för att mata ut korrekta HTML-omslag runt widgettiteln. Vi har inte en faktisk widgettitel i sig, men vi kommer att slå in det juridiska företagets namn som en widgettitel.

Annars får du tag i dina sparade värden genom att referera till det andra argumentet, $instance, med dina nyckelnamn inställda i form()och update(). Det är bra att bara mata ut de inställningar som ställts in – och ignorera de tomma.

Eftersom vi också matar ut mikrodata måste vi lägga till motsvarande egenskaper enligt reglerna för schema.org.

Det är helt upp till dig hur du vill mata ut din widget; du kanske överväger att lägga till fler HTML-omslag för enklare styling.

Anpassa resultatet, lägg till lite styling och det är allt!

FYI: Din widget kommer att få omslagsklassens namn " widget_<base ID>" (bas-ID är vad du angav i constructor). I vårt fall kommer vår widget att få klassen " widget_local_business“. Detta kan hjälpa dig att lägga till lite riktad styling.

Avslutning och slutlig kod

I den här handledningen lärde vi oss hur man skapar en anpassad widget och hur man renderar en mikrodataformaterad utdata från dess inställningar. Du bör kunna skapa dina egna widgets genom att följa grunderna i en widgetklass!

För referens, här är hela koden, allt tillsammans.