{"id":233793,"date":"2023-02-23T19:22:00","date_gmt":"2023-02-23T16:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233793"},"modified":"2022-11-11T12:26:58","modified_gmt":"2022-11-11T09:26:58","slug":"opetusohjelma-luo-mikrotietowidget-yrityksellesi-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/opetusohjelma-luo-mikrotietowidget-yrityksellesi-wordpressissae\/","title":{"rendered":"Opetusohjelma: Luo mikrotietowidget yrityksellesi WordPressiss\u00e4"},"content":{"rendered":"\n<p>T\u00e4ss\u00e4 opetusohjelmassa opimme luomaan mukautetun widgetin, joka tulostaa yrityksesi tiedot, kuten sen virallisen nimen, osoitteen, puhelinnumeron ja s\u00e4hk\u00f6postiosoitteen. Mutta viemme sen askeleen pidemm\u00e4lle tuomalla sen <a href=\"https:\/\/schema.org\/docs\/gs.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Microdata-<\/a> tai skeeman merkinn\u00e4n avulla, jonka avulla hakukoneet voivat ymm\u00e4rt\u00e4\u00e4 sis\u00e4lt\u00f6si.<\/p>\n<p>Widgetit ovat dynaamisia lohkoja, jotka voidaan sijoittaa teemasi k\u00e4ytett\u00e4viss\u00e4 oleville alueille. Yleens\u00e4 teemassasi on v\u00e4hint\u00e4\u00e4n yksi sivupalkki ja yksi tai useampi alue alatunnisteessa. Yritystietojen k\u00e4ytt\u00e4minen widgetiss\u00e4 alatunnisteessa on yleist\u00e4 ja varsin \u00e4lyk\u00e4st\u00e4 \u2013 koska alatunniste n\u00e4kyy kaikilla sivustosi sivuilla.<\/p>\n<p>Mikrodata on HTML-lis\u00e4attribuutti, joka selitt\u00e4\u00e4, mit\u00e4 tietty HTML-tunniste sis\u00e4lt\u00e4\u00e4, jotta kone voi ymm\u00e4rt\u00e4\u00e4, mit\u00e4 ne ovat (esim. yrityksen nimi, puhelinnumero, yrityksen osoite, yrityksen s\u00e4hk\u00f6postiosoite jne.). N\u00e4in hakukoneet, kuten Google, voivat poimia tietoja yrityksest\u00e4si HTML-koodistasi.<\/p>\n<h2>Mit\u00e4 luomme<\/h2>\n<p>Widgetimme tulostaa tietoja Microdata-skeeman <a href=\"https:\/\/schema.org\/LocalBusiness\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">LocalBusiness avulla<\/a>, joka on t\u00e4ydellinen organisaatiolle tai yritykselle. On t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, mit\u00e4 ominaisuuksia haluat tulostaa. Napsauta yll\u00e4 olevaa linkki\u00e4 lukeaksesi kaikki mahdolliset kiinteist\u00f6t LocalBusinessissa (mukaan lukien perityt). Yrityksesi tai maasi saattaa haluta toisenlaisia \u200b\u200btietoja.<\/p>\n<p>T\u00e4m\u00e4n opetusohjelman widget tulostaa seuraavat valinnaiset tiedot:<\/p>\n<ul>\n<li>Yrityksen nimi (Mikrodata-ominaisuus: <code>legalName<\/code>)<\/li>\n<li>ALV-tunnus tai organisaation numero (Mikrodata-ominaisuus: <code>vatID<\/code>)<\/li>\n<li>Postiosoite (mikrodatatunniste: <code>PostalAddress<\/code>ominaisuuksilla <code>streetAddress<\/code>, <code>postalCode<\/code>, ja <code>addressLocality<\/code>)<\/li>\n<li>Yrityksen s\u00e4hk\u00f6postiosoite (Mikrodata-omaisuus: <code>email<\/code>)<\/li>\n<li>Puhelinnumero (Mikrodata-ominaisuus: <code>telephone<\/code>)<\/li>\n<\/ul>\n<p>T\u00e4m\u00e4 opetusohjelma ei opasta sinua widgetin muotoilun l\u00e4pi, koska t\u00e4m\u00e4n pit\u00e4isi olla melko suoraviivaista. K\u00e4ytt\u00f6liittym\u00e4ss\u00e4 widgetimme n\u00e4ytt\u00e4\u00e4 tavalliselta tekstiwidgetilt\u00e4. Mutta tietysti konepellin alla siin\u00e4 on mallimerkinn\u00e4t, jotka auttavat Googlea.<\/p>\n<h2>Mukautetun widgetin luomisen perusteet<\/h2>\n<p>Voit lis\u00e4t\u00e4 koodisi teemaasi <code>functions.php<\/code>tai luoda mukautetun laajennuksen. Muista vain, ett\u00e4 jos pid\u00e4t sen laajennuksena, menet\u00e4t widgetin, kun deaktivoit laajennuksen. ja samalla tavalla pit\u00e4m\u00e4ll\u00e4 se teemassa, menet\u00e4t widgetin, jos vaihdat toiseen teemaan. T\u00e4ss\u00e4 esimerkiss\u00e4 lis\u00e4\u00e4n koodin teeman <code>functions.php<\/code>.<\/p>\n<p>Widgetin luominen tehd\u00e4\u00e4n oliopohjaisella PHP-koodilla. Kirjoitat PHP-luokan, joka laajentaa WordPressin widget-luokkaa, ja alustat sen soittamalla <code>register_widget()<\/code>ja antamalla luokkasi nimen. T\u00e4ss\u00e4 opetusohjelmassa olen nimennyt widget-luokanni <code>LocalBusiness<\/code>.<\/p>\n<p>Aloitetaan kutsumalla <code>register_widget()<\/code>toimintoon kytketyn funktion sis\u00e4ll\u00e4 <code>widgets_init<\/code>.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});<\/code><\/pre>\n<p>Katsotaanpa nopeasti mukautetun widget-luokan runkoa:<\/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>Kuten ylh\u00e4\u00e4lt\u00e4 n\u00e4et, tarvitset nelj\u00e4 toimintoa luokassasi. K\u00e4yd\u00e4\u00e4n jokainen funktio yksitellen l\u00e4pi ja t\u00e4yt\u00e4 ne.<\/p>\n<h2>LocalBusiness Microdata Widgetin luominen<\/h2>\n<p>Loogisin paikka aloittaa on rakentaja, joka vastaa widgetin asettamisesta.<\/p>\n<h3>__construct()-funktio<\/h3>\n<p>Konstruktorin sis\u00e4ll\u00e4 sinun on asetettava joitain muuttujia, kuten widgetin nimi, ja kutsuttava yl\u00e4tason konstruktorifunktio (yl\u00e4luokka on se, jota laajennat; <code>WP_Widget<\/code>). Lue lis\u00e4\u00e4 <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/__construct\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">konstruktorin mahdollisista vaihtoehdoista t\u00e4\u00e4lt\u00e4<\/a>. Annan perustunnuksen, otsikon ja kuvauksen, kuten:<\/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>Voit tehd\u00e4 enemm\u00e4n <code>__construct<\/code>menetelm\u00e4ss\u00e4, kuten asettaa komentosarjoja jonoon tai m\u00e4\u00e4ritt\u00e4\u00e4 lis\u00e4\u00e4 widget-asetuksia. Mutta yll\u00e4 oleva riitt\u00e4\u00e4 yleens\u00e4 useimmissa tapauksissa.<\/p>\n<h3>Form()-funktio<\/h3>\n<p>Seuraava vaihe on luoda kaikki asetukset ja sy\u00f6tteet, jotka widget hyv\u00e4ksyy j\u00e4rjestelm\u00e4nvalvojassa. Asetusten tulostamiseen Widget adminille k\u00e4yt\u00e4mme toimintoa, <code>form()<\/code>joka antaa sinulle yhden parametrin; taulukko, joka sis\u00e4lt\u00e4\u00e4 kaikki mahdollisesti tallennetut widget-vaihtoehdot. On t\u00e4rke\u00e4\u00e4, ett\u00e4 tulostat vastaavan tallennetun asetuksen kaikissa sy\u00f6tteiss\u00e4si, jotta tiedot s\u00e4ilyv\u00e4t. (Katsomme, kuinka asetukset tallennetaan seuraavassa vaiheessa).<\/p>\n<p>Lomaketoiminnossa on paljon seurattavaa, joten lis\u00e4t\u00e4\u00e4n ensin yksi sy\u00f6te viralliselle nimelle ja varmista, ett\u00e4 ymm\u00e4rr\u00e4mme, mit\u00e4 meid\u00e4n on teht\u00e4v\u00e4:<\/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>Ensinn\u00e4kin yll\u00e4 oleva koodi tulostaa joitain HTML-k\u00e4\u00e4reit\u00e4 ja -luokkia muodossa, jossa WordPress tulostaa widget-lomakkeensa \u2013 teemme t\u00e4m\u00e4n, jotta lomake n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4.<\/p>\n<p>On kaksi toimintoa, joihin sinun on tutustuttava; <code>get_field_id()<\/code>ja <code>get_field_name()<\/code>ja molemmat ovat sis\u00e4isi\u00e4 funktioita <code>WP_Widget<\/code>(siksi kutsut &quot; <code>$this-&gt;<\/code>&quot; edess\u00e4 \u2013 kun taas <code>$this<\/code>viittaa luokan ilmentym\u00e4\u00e4n). Funktiot palauttavat annetun kent\u00e4n tunnuksen ja nimen, vastaavasti, k\u00e4ytett\u00e4v\u00e4ksi sy\u00f6tteiss\u00e4si <code>id<\/code>ja <code>name<\/code>m\u00e4\u00e4ritteiss\u00e4si. Se on eritt\u00e4in t\u00e4rke\u00e4\u00e4 \u00c4l\u00e4 unohda lis\u00e4t\u00e4 <code>name<\/code>sy\u00f6tteeseen attribuuttia, muuten et saa koskaan k\u00e4siksi sen arvoa tallennettaessa.<\/p>\n<p>Ja lopuksi tulostamme nykyisen tallennetun arvon <code>value<\/code>sy\u00f6tteeseemme viittaamalla ohitettuun argumenttiin <code>$instance<\/code>. Jos teet t\u00e4t\u00e4 oman arvosi vuoksi, sy\u00f6tett\u00e4 ei koskaan t\u00e4ytet\u00e4 tietokantaan tallennetulla tiedolla, ja se n\u00e4kyy tyhj\u00e4n\u00e4 joka kerta, mik\u00e4 voi h\u00e4mment\u00e4\u00e4 k\u00e4ytt\u00e4ji\u00e4.<\/p>\n<p>Jos haluat erilaisia \u200b\u200blomakesy\u00f6tt\u00f6j\u00e4, kuten valintaruutuja tai avattavia valikoita, sinun pit\u00e4isi pysty\u00e4 lis\u00e4\u00e4m\u00e4\u00e4n ne helposti yll\u00e4 mainittujen s\u00e4\u00e4nt\u00f6jen mukaisesti. Lis\u00e4t\u00e4\u00e4n loput widget-asetukset. Ne ovat kaikki tekstinsy\u00f6tt\u00f6j\u00e4, joten se on sama koodi kuin yll\u00e4 toistettu, paitsi niiden kentt\u00e4tunnukset. Menetelm\u00e4mme <code>form()<\/code>n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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>Jos lis\u00e4\u00e4t widgetin k\u00e4ytett\u00e4viss\u00e4 olevaan widget-alueeseen, sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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=\"Opetusohjelma: Luo mikrotietowidget yrityksellesi WordPressiss\u00e4\" ><\/a><\/p>\n<h3>Update()-funktio<\/h3>\n<p>Toiminto <code>update()<\/code>on vastuussa sy\u00f6tettyjen arvojen tallentamisesta j\u00e4rjestelm\u00e4nvalvojaan. Valitettavasti WordPress ei tee t\u00e4t\u00e4 automaattisesti puolestasi. T\u00e4ss\u00e4 funktiossa on kaksi parametria; yleens\u00e4 nimelt\u00e4 <code>$new_instance<\/code>ja <code>$old_instance<\/code>. Ensimm\u00e4isen parametrin <code>$new_instance<\/code>sis\u00e4lt\u00e4 l\u00f6yd\u00e4t kaikki l\u00e4hetetyt arvot ja toisessa parametrissa <code>$old_instance<\/code>arvot, jotka on t\u00e4ll\u00e4 hetkell\u00e4 tallennettu tietokantaan. N\u00e4in voit tarvittaessa tehd\u00e4 \u00e4lykk\u00e4it\u00e4 vertailuja.<\/p>\n<p>Yleens\u00e4 sinun tarvitsee vain tehd\u00e4 uusi joukko widget-asetuksista ja tallentaa kaikki, mit\u00e4 sis\u00e4ll\u00e4 on asetettu <code>$new_instance<\/code>. Hoidamme my\u00f6s jonkin verran desinfiointia. Lopuksi palautamme t\u00e4m\u00e4n taulukon, joka kertoo WordPressille, mit\u00e4 tallentaa.<\/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>Voit nyt testata widgetti\u00e4si, jos haluat, ja tarkistaa, ett\u00e4 sy\u00f6tt\u00e4m\u00e4si arvot tallennetaan. Ja jos muistat asettaa <code>value<\/code>m\u00e4\u00e4ritteen oikein :ss\u00e4 <code>form()<\/code>, kun tallennat ja painat refresh, arvojen pit\u00e4isi s\u00e4ily\u00e4. Loistava! Nyt viimeiseen ja kielt\u00e4m\u00e4tt\u00e4 hauskimpaan vaiheeseen \u2013 frontend-bitin tulostamiseen.<\/p>\n<h3>Widget()-funktio<\/h3>\n<p>Toiminto <code>widget()<\/code>vastaa widgetin tulostamisesta k\u00e4ytt\u00f6liittym\u00e4\u00e4n. Funktiolle saadaan kaksi argumenttia; Ensinn\u00e4kin taulukko, jossa on hy\u00f6dyllist\u00e4 tietoa, kuten teemalle m\u00e4\u00e4ritetyt widget-alueen k\u00e4\u00e4reet, ja toiseksi tallennetut widget-asetusarvot.<\/p>\n<p>Sinun widgetin tulosteen tulee aina alkaa kaikulla <code>$args['before_widget']<\/code>ja aina p\u00e4\u00e4tty\u00e4 kaikuun <code>$args['after_widget']<\/code>. T\u00e4m\u00e4 varmistaa, ett\u00e4 widgettisi k\u00e4\u00e4rit\u00e4\u00e4n samoihin oikeisiin widget-HTML-k\u00e4\u00e4reisiin, jotka teema m\u00e4\u00e4ritt\u00e4\u00e4. Samoja raitoja pitkin voit kaikua <code>$args['before_title']<\/code>ja <code>$args['after_title']<\/code>tulostaa oikeat HTML-k\u00e4\u00e4reet widgetin otsikon ymp\u00e4rille. Meill\u00e4 ei ole varsinaista widgetin otsikkoa, mutta k\u00e4\u00e4rimme yrityksen virallisen nimen widgetin otsikoksi.<\/p>\n<p>Muussa tapauksessa saat tallennetut arvot k\u00e4siksi viittaamalla toiseen argumenttiin, avainnimien avulla <code>$instance<\/code>, jotka on asetettu <code>form()<\/code>ja <code>update()<\/code>. On hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 tulostaa vain m\u00e4\u00e4ritetyt asetukset \u2013 ja j\u00e4tt\u00e4\u00e4 tyhj\u00e4t asetukset huomiotta.<\/p>\n<p>Koska tuotamme my\u00f6s mikrodataa, meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 vastaavat ominaisuudet schema.orgin s\u00e4\u00e4nt\u00f6jen mukaisesti.<\/p>\n<p>On t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, kuinka haluat tulostaa widgetin; saatat ehk\u00e4 harkita HTML-k\u00e4\u00e4reiden lis\u00e4\u00e4mist\u00e4 muotoilun helpottamiseksi.<\/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>Mukauta tulostetta, lis\u00e4\u00e4 tyyli\u00e4 ja se on siin\u00e4!<\/p>\n<p>Tiedoksi: Widgettisi saa rivitysluokan nimen &quot; <code>widget_&lt;base ID&gt;<\/code>&quot; (perustunnus on se, jonka annoit konstruktoriin). Meid\u00e4n tapauksessamme widget saa luokan &quot; <code>widget_local_business<\/code>&quot;. T\u00e4m\u00e4 saattaa auttaa sinua lis\u00e4\u00e4m\u00e4\u00e4n kohdennettua tyyli\u00e4.<\/p>\n<h2>P\u00e4\u00e4t\u00f6s ja lopullinen koodi<\/h2>\n<p>T\u00e4ss\u00e4 opetusohjelmassa opimme luomaan mukautetun widgetin ja kuinka render\u00f6id\u00e4 Microdata-muotoiltu tulos sen asetuksista. Sinun pit\u00e4isi pysty\u00e4 luomaan omia widgetej\u00e4si noudattamalla widget-luokan perusteita!<\/p>\n<p>Viitteeksi t\u00e4ss\u00e4 on koko koodi, kaikki yhdess\u00e4.<\/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\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yd\u00e4\u00e4n l\u00e4pi mukautetun widgetin luominen, joka tulostaa yritystiedot mikrodataskeeman merkinn\u00f6ill\u00e4 LocalBusinessille.<\/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":[927,895,719,982,995,719,895,982,1110,834,843,834,1006,1006,995,927,843,864,864],"tags":[1166],"class_list":["post-233793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aiheita","category-koodi","category-kehittaejae","category-liiketoiminta","category-sisaltomarkkinointi","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-seo-6","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233793"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223853"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}