{"id":233785,"date":"2023-02-23T19:25:00","date_gmt":"2023-02-23T16:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233785"},"modified":"2022-11-11T12:23:54","modified_gmt":"2022-11-11T09:23:54","slug":"handledning-skapa-en-mikrodatawidget-foer-ditt-foeretag-i-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/handledning-skapa-en-mikrodatawidget-foer-ditt-foeretag-i-wordpress\/","title":{"rendered":"Handledning: Skapa en mikrodatawidget f\u00f6r ditt f\u00f6retag i WordPress"},"content":{"rendered":"\n<p>I den h\u00e4r handledningen l\u00e4r vi oss hur du skapar en anpassad widget som matar ut din f\u00f6retagsinformation, s\u00e5som dess officiella namn, adress, telefonnummer och e-post. Men vi tar det ett steg l\u00e4ngre genom att mata ut det med <a href=\"https:\/\/schema.org\/docs\/gs.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mikrodata<\/a> eller schemamarkering, vilket g\u00f6r att s\u00f6kmotorer kan f\u00f6rst\u00e5 ditt inneh\u00e5ll.<\/p>\n<p>Widgets \u00e4r dynamiska block som kan placeras i tillg\u00e4ngliga omr\u00e5den i ditt tema. Vanligtvis skulle ditt tema ha minst en sidof\u00e4lt och ett eller flera omr\u00e5den i sidfoten. Att ha din f\u00f6retagsinformation som en widget i sidfoten \u00e4r vanligt och ganska smart \u2013 eftersom sidfoten visas p\u00e5 alla sidor p\u00e5 din webbplats.<\/p>\n<p>Mikrodata \u00e4r ytterligare HTML-attribut som f\u00f6rklarar vad en specifik HTML-tagg inneh\u00e5ller s\u00e5 att en maskin kan f\u00f6rst\u00e5 vad de \u00e4r (t.ex. f\u00f6retagsnamn, telefonnummer, f\u00f6retagsadress, f\u00f6retags e-postadress, etc). Detta g\u00f6r det m\u00f6jligt f\u00f6r s\u00f6kmotorer som Google att extrahera information om ditt f\u00f6retag fr\u00e5n din HTML.<\/p>\n<h2>Vad vi kommer att skapa<\/h2>\n<p>V\u00e5r widget kommer att mata ut information med hj\u00e4lp av Microdata-schema <a href=\"https:\/\/schema.org\/LocalBusiness\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">LocalBusiness<\/a> som \u00e4r perfekt f\u00f6r en organisation eller ett f\u00f6retag. Det \u00e4r helt upp till dig vilka egenskaper du vill skriva ut, klicka bara p\u00e5 l\u00e4nken ovan f\u00f6r att l\u00e4sa alla m\u00f6jliga egenskaper inom LocalBusiness (inklusive \u00e4rvda). Ditt f\u00f6retag eller ditt land kanske f\u00f6redrar annan typ av information.<\/p>\n<p>Denna handlednings widget kommer att mata ut f\u00f6ljande valfria information:<\/p>\n<ul>\n<li>F\u00f6retagsnamn (mikrodataegenskap: <code>legalName<\/code>)<\/li>\n<li>Moms-ID eller organisationsnummer (mikrodataegenskap: <code>vatID<\/code>)<\/li>\n<li>Postadress (mikrodatatagg: <code>PostalAddress<\/code>med egenskaper f\u00f6r <code>streetAddress<\/code>, <code>postalCode<\/code>, och <code>addressLocality<\/code>)<\/li>\n<li>F\u00f6retagets e-postadress (Microdata-egenskap: <code>email<\/code>)<\/li>\n<li>Telefonnummer (mikrodataegenskap: <code>telephone<\/code>)<\/li>\n<\/ul>\n<p>Den h\u00e4r handledningen guidar dig inte genom stilen av widgeten, eftersom den borde vara ganska enkel. I frontend kommer v\u00e5r widget att se ut som en vanlig textwidget. Men naturligtvis, under huven, har den schemamarkering som hj\u00e4lper Google.<\/p>\n<h2>Grunderna f\u00f6r att skapa en anpassad widget<\/h2>\n<p>Du kan l\u00e4gga din kod i dina teman <code>functions.php<\/code>eller skapa ett anpassat plugin. Kom bara ih\u00e5g att om du beh\u00e5ller den i ett plugin, kommer du att f\u00f6rlora widgeten n\u00e4r du avaktiverar plugin; och om du h\u00e5ller den i temat kommer du att f\u00f6rlora widgeten om du byter till ett annat tema. I det h\u00e4r exemplet l\u00e4gger jag till koden i temats <code>functions.php<\/code>.<\/p>\n<p>Att skapa en widget g\u00f6rs med objektorienterad PHP-kod. Du skriver en PHP-klass som ut\u00f6kar WordPress widgetklass och initierar den genom att anropa <code>register_widget()<\/code>och ange ditt klassnamn. I den h\u00e4r handledningen har jag d\u00f6pt min widgetklass till <code>LocalBusiness<\/code>.<\/p>\n<p>L\u00e5t oss b\u00f6rja med att anropa <code>register_widget()<\/code>en funktion som \u00e4r kopplad till \u00e5tg\u00e4rden <code>widgets_init<\/code>.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});<\/code><\/pre>\n<p>L\u00e5t oss snabbt se \u00f6ver skelettet av en anpassad widgetklass:<\/p>\n<pre><code>class LocalBusiness extends WP_Widget {\n\u00a0\n    \/\/ Initialize your widget in the class constructor\n    public function __construct() { }\n\u00a0\n    \/\/ Responsible for outputting the widget in frontend\n    public function widget($args, $instance) { }\n\u00a0\n    \/\/ Responsible for outputting the widget settings in admin\n    public function form($instance) { }\n\u00a0\n    \/\/ Responsible for saving settings in admin\n    public function update($new_instance, $old_instance) { }\n}<\/code><\/pre>\n<p>Som du kan se ovanifr\u00e5n beh\u00f6ver du fyra funktioner i din klass. L\u00e5t oss g\u00e5 igenom varje funktion en efter en och fylla i dem.<\/p>\n<h2>Bygga en LocalBusiness Microdata Widget<\/h2>\n<p>Den mest logiska platsen att b\u00f6rja \u00e4r i konstruktorn, som ansvarar f\u00f6r att st\u00e4lla in din widget.<\/p>\n<h3>Funktionen __construct()<\/h3>\n<p>Inuti konstruktorn m\u00e5ste du st\u00e4lla in n\u00e5gra variabler, s\u00e5som widgetens namn, och anropa f\u00f6r\u00e4lderns konstruktorfunktion (f\u00f6r\u00e4lderklassen \u00e4r den du ut\u00f6kar; <code>WP_Widget<\/code>). L\u00e4s mer om <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/__construct\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00f6jliga alternativ i constructor h\u00e4r<\/a>. Jag kommer att tillhandah\u00e5lla ett bas-ID, en titel och en beskrivning, s\u00e5 h\u00e4r:<\/p>\n<pre><code>\/\/ Initialize your widget in the class constructor\npublic function __construct() {\n    $widget_ops = [\n        'description' =&gt; __('Outputs business information with Microdata', 'txtdomain')\n    ];\n    parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);\n}<\/code><\/pre>\n<p>Du kan g\u00f6ra mer i <code>__construct<\/code>metoden, som att l\u00e4gga skript i k\u00f6 eller definiera fler widgetinst\u00e4llningar. Men ovanst\u00e5ende brukar r\u00e4cka i de flesta fall.<\/p>\n<h3>Form()-funktionen<\/h3>\n<p>N\u00e4sta steg \u00e4r att bygga alla inst\u00e4llningar och indata som din widget accepterar i admin. F\u00f6r att mata ut inst\u00e4llningar till Widget admin anv\u00e4nder vi funktionen <code>form()<\/code>som ger dig en parameter; en array som inneh\u00e5ller alla dina eventuellt sparade widgetalternativ. Det \u00e4r viktigt att du matar ut motsvarande sparade inst\u00e4llning i alla dina ing\u00e5ngar s\u00e5 att data beh\u00e5lls. (Vi ska titta p\u00e5 hur du sparar inst\u00e4llningarna i n\u00e4sta steg).<\/p>\n<p>Det finns mycket att h\u00e5lla reda p\u00e5 i formul\u00e4rfunktionen, s\u00e5 l\u00e5t oss bara l\u00e4gga till en input, f\u00f6r det juridiska namnet, f\u00f6rst och se till att vi f\u00f6rst\u00e5r vad vi beh\u00f6ver g\u00f6ra:<\/p>\n<pre><code>\/\/ Responsible for outputting the widget settings in admin\npublic function form($instance) { \n    ?&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input \n            type=\"text\" \n            class=\"widefat\" \n            id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\"\n            name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\"\n            value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\"\n        \/&gt;\n    &lt;\/p&gt;\n    &lt;?php\n}<\/code><\/pre>\n<p>F\u00f6rst och fr\u00e4mst matar ovanst\u00e5ende kod ut n\u00e5gra HTML-omslag och klasser i den form som WordPress matar ut sina widgetformul\u00e4r \u2013 vi g\u00f6r detta s\u00e5 att formul\u00e4ret ser snyggt ut.<\/p>\n<p>Det finns tv\u00e5 funktioner du beh\u00f6ver f\u00f6r att bekanta dig med; <code>get_field_id()<\/code>och <code>get_field_name()<\/code>och de b\u00e5da \u00e4r funktioner inom <code>WP_Widget<\/code>(vilket \u00e4r anledningen till att du anropar &quot; <code>$this-&gt;<\/code>&quot; framf\u00f6r \u2013 medan <code>$this<\/code>h\u00e4nvisar till klassens instans). Funktionerna returnerar ett angivet f\u00e4lts ID respektive namn f\u00f6r anv\u00e4ndning i dina indata <code>id<\/code>och <code>name<\/code>attribut. Det \u00e4r mycket viktigt. f\u00f6r att inte gl\u00f6mma att l\u00e4gga till ett <code>name<\/code>attribut p\u00e5 din inmatning, annars kommer du aldrig att f\u00e5 tag i dess v\u00e4rde n\u00e4r du sparar.<\/p>\n<p>Och slutligen matar vi ut det nuvarande sparade v\u00e4rdet <code>value<\/code>f\u00f6r v\u00e5r inmatning genom att referera till det godk\u00e4nda argumentet <code>$instance<\/code>. Utan att g\u00f6ra detta f\u00f6r ditt v\u00e4rde, kommer indata aldrig att fyllas med vad som helst som sparats i databasen, och kommer att visas tomt varje g\u00e5ng, vilket kan f\u00f6rvirra anv\u00e4ndare.<\/p>\n<p>Om du vill ha olika formul\u00e4rinmatningar, s\u00e5som kryssrutor eller rullgardinsmenyer, b\u00f6r du enkelt kunna l\u00e4gga till dem enligt reglerna som n\u00e4mns ovan. L\u00e5t oss l\u00e4gga till resten av v\u00e5ra widgetinst\u00e4llningar. De \u00e4r alla textinmatningar, s\u00e5 det \u00e4r samma kod som upprepas ovan, f\u00f6rutom deras f\u00e4lt-ID. V\u00e5r <code>form()<\/code>metod slutar med att se ut s\u00e5 h\u00e4r:<\/p>\n<pre><code>\/\/ Responsible for outputting the widget settings in admin\npublic function form($instance) { \n    ?&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('vat_id'); ?&gt;\"&gt;&lt;?php _e('Vat ID\/Organization number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('vat_id')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('vat_id')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['vat_id']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('street_address'); ?&gt;\"&gt;&lt;?php _e('Street address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('street_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('street_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['street_address']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_code'); ?&gt;\"&gt;&lt;?php _e('Postal code:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_code')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_code')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_code']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_city'); ?&gt;\"&gt;&lt;?php _e('City:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_city')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_city')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_city']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('email_address'); ?&gt;\"&gt;&lt;?php _e('E-mail address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('email_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('email_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['email_address']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('phone_number'); ?&gt;\"&gt;&lt;?php _e('Phone number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('phone_number')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('phone_number')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['phone_number']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;?php\n}<\/code><\/pre>\n<p>Om du l\u00e4gger till din widget i ett tillg\u00e4ngligt widgetomr\u00e5de b\u00f6r det se ut s\u00e5 h\u00e4r:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152019-61e4d2d64b664.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152019-61e4d2d64b664.png\" alt=\"Handledning: Skapa en mikrodatawidget f\u00f6r ditt f\u00f6retag i WordPress\" ><\/a><\/p>\n<h3>Update()-funktionen<\/h3>\n<p>Funktionen <code>update()<\/code>ansvarar f\u00f6r att faktiskt spara dina inmatade v\u00e4rden i admin. Tyv\u00e4rr g\u00f6r WordPress inte detta automatiskt \u00e5t dig. I denna funktion finns tv\u00e5 parametrar; brukar heta <code>$new_instance<\/code>och <code>$old_instance<\/code>. Inuti den f\u00f6rsta parametern, <code>$new_instance<\/code>, hittar du alla v\u00e4rden som skickades in, och inom den andra, <code>$old_instance<\/code>, hittar du de v\u00e4rden som f\u00f6r n\u00e4rvarande \u00e4r sparade i databasen. Detta g\u00f6r att du kan g\u00f6ra n\u00e5gra smarta j\u00e4mf\u00f6relser om det beh\u00f6vs.<\/p>\n<p>Vanligtvis skulle du helt enkelt bara skapa en ny upps\u00e4ttning av alla dina widgetinst\u00e4llningar och spara allt som \u00e4r inst\u00e4llt inuti <code>$new_instance<\/code>. Vi tar hand om en del sanering ocks\u00e5. Slutligen returnerar vi helt enkelt den h\u00e4r arrayen, som talar om f\u00f6r WordPress vad som ska sparas.<\/p>\n<pre><code>\/\/ Responsible for saving settings in admin\npublic function update($new_instance, $old_instance) {\n    $instance = [];\n    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';\n    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';\n    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';\n    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';\n    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';\n    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';\n    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';\n    return $instance;\n}<\/code><\/pre>\n<p>Du kan nu testa din widget om du vill och kontrollera att dina inmatade v\u00e4rden sparas. Och om du kommer ih\u00e5g att st\u00e4lla in <code>value<\/code>attributet korrekt i <code>form()<\/code>, n\u00e4r du sparar och trycker p\u00e5 uppdatera, b\u00f6r v\u00e4rdena beh\u00e5llas. Bra! Nu till det sista, och visserligen roligaste, steget \u2013 att mata ut frontend-biten.<\/p>\n<h3>Widget()-funktionen<\/h3>\n<p>Funktionen <code>widget()<\/code>ansvarar f\u00f6r att mata ut din widget i frontend. Vi f\u00e5r tv\u00e5 argument till funktionen; f\u00f6r det f\u00f6rsta en array med lite anv\u00e4ndbar information som temats definierade widgetomr\u00e5des-omslag, och f\u00f6r det andra dina sparade widgetinst\u00e4llningsv\u00e4rden.<\/p>\n<p>Utdata fr\u00e5n din widget b\u00f6r alltid b\u00f6rja med eko <code>$args['before_widget']<\/code>och alltid sluta med eko <code>$args['after_widget']<\/code>. Detta ser till att din widget lindas in i samma korrekta widget-HTML-omslag som definieras av temat. L\u00e4ngs samma sp\u00e5r kan du eka <code>$args['before_title']<\/code>och <code>$args['after_title']<\/code>f\u00f6r att mata ut korrekta HTML-omslag runt widgettiteln. Vi har inte en faktisk widgettitel i sig, men vi kommer att sl\u00e5 in det juridiska f\u00f6retagets namn som en widgettitel.<\/p>\n<p>Annars f\u00e5r du tag i dina sparade v\u00e4rden genom att referera till det andra argumentet, <code>$instance<\/code>, med dina nyckelnamn inst\u00e4llda i <code>form()<\/code>och <code>update()<\/code>. Det \u00e4r bra att bara mata ut de inst\u00e4llningar som st\u00e4llts in \u2013 och ignorera de tomma.<\/p>\n<p>Eftersom vi ocks\u00e5 matar ut mikrodata m\u00e5ste vi l\u00e4gga till motsvarande egenskaper enligt reglerna f\u00f6r schema.org.<\/p>\n<p>Det \u00e4r helt upp till dig hur du vill mata ut din widget; du kanske \u00f6verv\u00e4ger att l\u00e4gga till fler HTML-omslag f\u00f6r enklare styling.<\/p>\n<pre><code>\/\/ Responsible for outputting the widget in frontend\npublic function widget($args, $instance) {\n    echo $args['before_widget'];\n\u00a0\n    ?&gt;&lt;div itemscope itemtype=\"https:\/\/schema.org\/LocalBusiness\"&gt;&lt;?php\n\u00a0\n    if (!empty($instance['legal_name'])) {\n        echo $args['before_title'];\n        ?&gt;&lt;span itemprop=\"legalName\"&gt;&lt;?php echo $instance['legal_name']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n        echo $args['after_title'];\n    }\n\u00a0\n    if (!empty($instance['vat_id'])) {\n        ?&gt;&lt;span itemprop=\"vatID\" class=\"business-vatid\"&gt;&lt;?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?&gt;&lt;\/span&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['street_address'])) {\n        ?&gt;&lt;div itemprop=\"address\" itemscope itemtype=\"https:\/\/schema.org\/PostalAddress\" class=\"business-address\"&gt;&lt;?php\n\u00a0\n            ?&gt;&lt;span itemprop=\"streetAddress\"&gt;&lt;?php echo $instance['street_address']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n            if (!empty($instance['postal_code'])) {\n                ?&gt;&lt;span itemprop=\"postalCode\"&gt;&lt;?php echo $instance['postal_code']; ?&gt;&lt;\/span&gt;&lt;?php\n            }\n            if (!empty($instance['postal_city'])) {\n                ?&gt;&lt;span itemprop=\"addressLocality\"&gt;&lt;?php echo $instance['postal_city']; ?&gt;&lt;\/span&gt;&lt;?php\n            }               \n\u00a0\n        ?&gt;&lt;\/div&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['email_address'])) {\n        ?&gt;&lt;a href=\"mailto:&lt;?php echo $instance['email_address']; ?&gt;\" title=\"&lt;?php _e('Send email', 'txtdomain'); ?&gt;\" class=\"business-email\"&gt;\n            &lt;span itemprop=\"email\"&gt;&lt;?php echo $instance['email_address']; ?&gt;&lt;\/span&gt;\n        &lt;\/a&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['phone_number'])) {\n        ?&gt;&lt;a href=\"tel:&lt;?php echo $instance['phone_number']; ?&gt;\" title=\"&lt;?php _e('Call us', 'txtdomain'); ?&gt;\" class=\"business-phone\"&gt;\n            &lt;span itemprop=\"telephone\"&gt;&lt;?php echo $instance['phone_number']; ?&gt;&lt;\/span&gt;\n        &lt;\/a&gt;&lt;?php\n    }\n\u00a0\n    ?&gt;&lt;\/div&gt;&lt;?php\n\u00a0\n    echo $args['after_widget'];\n}<\/code><\/pre>\n<p>Anpassa resultatet, l\u00e4gg till lite styling och det \u00e4r allt!<\/p>\n<p>FYI: Din widget kommer att f\u00e5 omslagsklassens namn &quot; <code>widget_&lt;base ID&gt;<\/code>&quot; (bas-ID \u00e4r vad du angav i constructor). I v\u00e5rt fall kommer v\u00e5r widget att f\u00e5 klassen &quot; <code>widget_local_business<\/code>&#8221;. Detta kan hj\u00e4lpa dig att l\u00e4gga till lite riktad styling.<\/p>\n<h2>Avslutning och slutlig kod<\/h2>\n<p>I den h\u00e4r handledningen l\u00e4rde vi oss hur man skapar en anpassad widget och hur man renderar en mikrodataformaterad utdata fr\u00e5n dess inst\u00e4llningar. Du b\u00f6r kunna skapa dina egna widgets genom att f\u00f6lja grunderna i en widgetklass!<\/p>\n<p>F\u00f6r referens, h\u00e4r \u00e4r hela koden, allt tillsammans.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});\n\u00a0\nclass LocalBusiness extends WP_Widget {\n\u00a0\n    \/\/ Initialize your widget in the class constructor\n    public function __construct() {\n        $widget_ops = [\n            'description' =&gt; __('Outputs business information with Microdata', 'txtdomain')\n        ];\n        parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);\n    }\n\u00a0\n    \/\/ Responsible for outputting the widget in frontend\n    public function widget($args, $instance) {\n        echo $args['before_widget'];\n\u00a0\n        ?&gt;&lt;div itemscope itemtype=\"https:\/\/schema.org\/LocalBusiness\"&gt;&lt;?php\n\u00a0\n        if (!empty($instance['legal_name'])) {\n            echo $args['before_title'];\n            ?&gt;&lt;span itemprop=\"legalName\"&gt;&lt;?php echo $instance['legal_name']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n            echo $args['after_title'];\n        }\n\u00a0\n        if (!empty($instance['vat_id'])) {\n            ?&gt;&lt;span itemprop=\"vatID\" class=\"business-vatid\"&gt;&lt;?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?&gt;&lt;\/span&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['street_address'])) {\n            ?&gt;&lt;div itemprop=\"address\" itemscope itemtype=\"https:\/\/schema.org\/PostalAddress\" class=\"business-address\"&gt;&lt;?php\n\u00a0\n                ?&gt;&lt;span itemprop=\"streetAddress\"&gt;&lt;?php echo $instance['street_address']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n                if (!empty($instance['postal_code'])) {\n                    ?&gt;&lt;span itemprop=\"postalCode\"&gt;&lt;?php echo $instance['postal_code']; ?&gt;&lt;\/span&gt;&lt;?php\n                }\n                if (!empty($instance['postal_city'])) {\n                    ?&gt;&lt;span itemprop=\"addressLocality\"&gt;&lt;?php echo $instance['postal_city']; ?&gt;&lt;\/span&gt;&lt;?php\n                }               \n\u00a0\n            ?&gt;&lt;\/div&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['email_address'])) {\n            ?&gt;&lt;a href=\"mailto:&lt;?php echo $instance['email_address']; ?&gt;\" title=\"&lt;?php _e('Send email', 'txtdomain'); ?&gt;\" class=\"business-email\"&gt;\n                &lt;span itemprop=\"email\"&gt;&lt;?php echo $instance['email_address']; ?&gt;&lt;\/span&gt;\n            &lt;\/a&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['phone_number'])) {\n            ?&gt;&lt;a href=\"tel:&lt;?php echo $instance['phone_number']; ?&gt;\" title=\"&lt;?php _e('Call us', 'txtdomain'); ?&gt;\" class=\"business-phone\"&gt;\n                &lt;span itemprop=\"telephone\"&gt;&lt;?php echo $instance['phone_number']; ?&gt;&lt;\/span&gt;\n            &lt;\/a&gt;&lt;?php\n        }\n        ?&gt;&lt;\/div&gt;&lt;?php\n\u00a0\n        echo $args['after_widget'];\n    }\n\u00a0\n    \/\/ Responsible for outputting the widget settings in admin\n    public function form($instance) { \n        ?&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('vat_id'); ?&gt;\"&gt;&lt;?php _e('Vat ID\/Organization number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('vat_id')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('vat_id')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['vat_id']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('street_address'); ?&gt;\"&gt;&lt;?php _e('Street address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('street_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('street_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['street_address']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_code'); ?&gt;\"&gt;&lt;?php _e('Postal code:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_code')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_code')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_code']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_city'); ?&gt;\"&gt;&lt;?php _e('City:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_city')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_city')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_city']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('email_address'); ?&gt;\"&gt;&lt;?php _e('E-mail address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('email_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('email_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['email_address']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('phone_number'); ?&gt;\"&gt;&lt;?php _e('Phone number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('phone_number')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('phone_number')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['phone_number']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;?php\n    }\n\u00a0\n    \/\/ Responsible for saving settings in admin\n    public function update($new_instance, $old_instance) {\n        $instance = [];\n        $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';\n        $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';\n        $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';\n        $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';\n        $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';\n        $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';\n        $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';\n        return $instance;\n    }\n}<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Den h\u00e4r handledningen g\u00e5r igenom hur man skapar en anpassad widget som matar ut aff\u00e4rsinformation med mikrodataschemamarkering f\u00f6r LocalBusiness.<\/p>\n","protected":false},"author":1,"featured_media":223853,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[987,932,588,516,978,838,848,991,999,901,1110,506,1002,1010,614,509,724,515,868],"tags":[1173],"class_list":["post-233785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-affaer","category-aemnen","category-code","category-software-entwicklung","category-geschaeft","category-guide-foer-nyboerjare","category-handledningar","category-inhaltsvermarktung","category-innehallsmarknadsforing","category-koda","category-n-a","category-ratgeber-fuer-anfaenger","category-seo-2","category-seo-10","category-themen","category-tutorials","category-utvecklaren","category-wordpress","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233785"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223853"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}