✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.
ArendajaÄriKood

Õpetus: looge WordPressis oma ettevõtte jaoks mikroandmete vidin

20
Sisu
Mida me loome
Kohandatud vidina loomise põhitõed
LocalBusinessi mikroandmete vidina loomine
Funktsioon __construct().
Funktsioon form().
Update() funktsioon
Funktsioon vidin().
Kokkuvõte ja lõplik kood

Selles õpetuses õpime, kuidas luua kohandatud vidinat, mis väljastab teie ettevõtteteavet, nagu ametlik nimi, aadress, telefoninumber ja e-posti aadress. Kuid me astume selle sammu edasi, väljastades selle mikroandmete või skeemi märgistusega, mis võimaldab otsingumootoritel teie sisu mõista.

Vidinad on dünaamilised plokid, mida saab paigutada teie teema saadaolevatesse piirkondadesse. Tavaliselt on teie teemal vähemalt üks külgriba ja jaluses üks või mitu ala. Ettevõtteteabe lisamine jaluses vidinana on tavaline ja üsna nutikas – kuna jalus kuvatakse teie saidi kõigil lehtedel.

Mikroandmed on täiendavad HTML-i atribuudid, mis selgitavad, mida konkreetne HTML-märgend sisaldab, et masin saaks aru, mis need on (nt ettevõtte nimi, telefoninumber, ettevõtte aadress, ettevõtte e-posti aadress jne). See võimaldab otsingumootoritel, nagu Google, teie HTML-ist teavet teie ettevõtte kohta eraldada.

Mida me loome

Meie vidin väljastab teavet mikroandmete skeemi LocalBusiness abil, mis sobib suurepäraselt organisatsiooni või ettevõtte jaoks. See, milliseid atribuute soovite väljastada, on täielikult teie otsustada. Klõpsake ülaloleval lingil, et lugeda kõiki LocalBusinessi võimalikke atribuute (kaasa arvatud päritud). Teie ettevõte või riik võib eelistada teist tüüpi teavet.

Selle õpetuse vidin väljastab järgmise valikulise teabe:

  • Ettevõtte nimi (mikroandmete atribuut: legalName)
  • Käibemaksu ID või organisatsiooni number (Mikroandmete atribuut: vatID)
  • Postiaadress (mikroandmete silt: PostalAddressatribuutidega streetAddress, postalCode, ja addressLocality)
  • Ettevõtte e-posti aadress (Mikroandmete vara: email)
  • Telefoninumber (mikroandmete atribuut: telephone)

See õpetus ei juhenda teid vidina kujundamisel, kuna see peaks olema üsna lihtne. Esiküljel näeb meie vidin välja nagu tavaline tekstividin. Kuid loomulikult on sellel kapoti all skeemi märgistus, mis aitab Google’it.

Kohandatud vidina loomise põhitõed

Saate oma koodi lisada oma teemasse functions.phpvõi luua kohandatud pistikprogrammi. Pidage meeles, et kui hoiate selle pistikprogrammis, kaotate pistikprogrammi desaktiveerimisel vidina; ja samamoodi selle teemas hoidmine kaotab vidina, kui lülitute teisele teemale. Selles näites lisan koodi teemasse functions.php.

Vidina loomine toimub objektorienteeritud PHP koodiga. Kirjutate PHP-klassi, mis laiendab WordPressi vidinaklassi, ja lähtestate selle, helistades register_widget()ja sisestades oma klassi nime. Selles õpetuses olen andnud oma vidinaklassile nime LocalBusiness.

Alustuseks kutsume register_widget()välja toiminguga ühendatud funktsiooni widgets_init.

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

Vaatame kiiresti üle kohandatud vidinaklassi skelett:

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) { }
}

Nagu ülalt näha, vajate oma klassis nelja funktsiooni. Vaatame iga funktsiooni ükshaaval läbi ja täidame need.

LocalBusinessi mikroandmete vidina loomine

Kõige loogilisem koht alustamiseks on konstruktoris, mis vastutab sinu vidina seadistamise eest.

Funktsioon __construct().

Konstruktoris peate seadistama mõned muutujad, näiteks vidina nime, ja kutsuma esile vanema konstruktorifunktsiooni (ülemklass on see, mida laiendate; WP_Widget). Konstruktoris võimalike valikute kohta loe lähemalt siit. Esitan baas-ID, pealkirja ja kirjelduse, näiteks:

// Initialize your widget in the class constructor
public function __construct() {
    $widget_ops = [
        'description' => __('Outputs business information with Microdata', 'txtdomain')
    ];
    parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);
}

Meetodis saate teha rohkem __construct, näiteks panna skripte järjekorda või määrata rohkem vidina sätteid. Kuid ülaltoodust enamasti enamikul juhtudel piisab.

Funktsioon form().

Järgmine samm on luua kõik seaded ja sisendid, mida teie vidin administraatoris aktsepteerib. Seadete väljastamiseks vidina administraatorile kasutame funktsiooni, form()mis annab teile ühe parameetri; massiiv, mis sisaldab kõiki teie võimalikke salvestatud vidinavalikuid. Andmete säilitamiseks on oluline, et väljastaksite kõigis sisendites vastavad salvestatud sätted. (Järgmises etapis vaatame, kuidas sätteid salvestada).

Vormifunktsioonis on palju jälgimist, seega lisame kõigepealt juriidilise nime jaoks ühe sisendi ja veenduge, et mõistame, mida peame tegema.

// Responsible for outputting the widget settings in admin
public function form($instance) { 
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
        <input 
            type="text" 
            class="widefat" 
            id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>"
            name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>"
            value="<?php echo esc_attr($instance['legal_name']); ?>"
        />
    </p>
    <?php
}

Esiteks väljastab ülaltoodud kood mõned HTML-i ümbrised ja klassid kujul, nagu WordPress väljastab nende vidinavormid – teeme seda nii, et vorm näeks kena välja.

Peate tutvuma kahe funktsiooniga; get_field_id()ja get_field_name()ja need mõlemad on funktsioonid sees WP_Widget(sellepärast kutsute " $this->" ees – samas kui $thissee viitab klassi eksemplarile). Funktsioonid tagastavad vastavalt antud välja ID ja nime, mida kasutatakse teie sisendis idja nameatribuutides. See on väga oluline et ärge unustage nameoma sisendile atribuuti lisada, vastasel juhul ei saa te salvestamisel kunagi selle väärtust kätte.

Ja lõpuks väljastame praeguse salvestatud väärtuse valuemeie sisendiks, viidates läbitud argumendile $instance. Kui seda oma väärtuse nimel ei tee, ei täideta sisendit kunagi andmebaasi salvestatuga ja see kuvatakse iga kord tühjana, mis võib kasutajaid segadusse ajada.

Kui soovite erinevaid vormisisendeid, näiteks märkeruudud või rippmenüüd, peaksite saama need hõlpsalt lisada, järgides ülalmainitud reegleid. Lisame ülejäänud vidina seaded. Need on kõik tekstisisendid, nii et see on sama kood, mida korrati ülal, välja arvatud nende väljade ID-d. Meie form()meetod näeb välja selline:

// Responsible for outputting the widget settings in admin
public function form($instance) { 
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>" name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>" value="<?php echo esc_attr($instance['legal_name']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('vat_id'); ?>"><?php _e('Vat ID/Organization number:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('vat_id')); ?>" name="<?php echo esc_attr($this->get_field_name('vat_id')); ?>" value="<?php echo esc_attr($instance['vat_id']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('street_address'); ?>"><?php _e('Street address:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('street_address')); ?>" name="<?php echo esc_attr($this->get_field_name('street_address')); ?>" value="<?php echo esc_attr($instance['street_address']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('postal_code'); ?>"><?php _e('Postal code:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_code')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_code')); ?>" value="<?php echo esc_attr($instance['postal_code']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('postal_city'); ?>"><?php _e('City:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_city')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_city')); ?>" value="<?php echo esc_attr($instance['postal_city']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('email_address'); ?>"><?php _e('E-mail address:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('email_address')); ?>" name="<?php echo esc_attr($this->get_field_name('email_address')); ?>" value="<?php echo esc_attr($instance['email_address']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('phone_number'); ?>"><?php _e('Phone number:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('phone_number')); ?>" name="<?php echo esc_attr($this->get_field_name('phone_number')); ?>" value="<?php echo esc_attr($instance['phone_number']); ?>" />
    </p>
    <?php
}

Kui lisate oma vidina saadaolevasse vidinaalasse, peaks see välja nägema järgmine:

Õpetus: looge WordPressis oma ettevõtte jaoks mikroandmete vidin

Update() funktsioon

Funktsioon update()vastutab teie sisestatud väärtuste tegeliku salvestamise eest administraatorisse. Kahjuks ei tee WordPress seda teie eest automaatselt. Selles funktsioonis on kaks parameetrit; tavaliselt nimega $new_instanceja $old_instance. Esimese parameetri seest $new_instanceleiate kõik esitatud väärtused ja teisest $old_instanceparameetrist leiate väärtused, mis on hetkel andmebaasi salvestatud. See võimaldab teil vajadusel teha nutikaid võrdlusi.

Tavaliselt teete lihtsalt kõigist oma vidina seadetest uue massiivi ja salvestate kõik, mis sees on $new_instance. Hoolitseme ka desinfitseerimise eest. Lõpuks tagastame lihtsalt selle massiivi, mis ütleb WordPressile, mida salvestada.

// 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;
}

Nüüd saate oma vidinat soovi korral testida ja kontrollida, kas teie sisestatud väärtusi salvestatakse. Ja kui mäletate valueatribuuti õigesti määrama form(), kui salvestate ja vajutate värskendamisnuppu, peaksid väärtused säilima. Suurepärane! Nüüd viimase ja kindlasti kõige lõbusama sammu juurde – esiosa biti väljastamine.

Funktsioon vidin().

Funktsioon widget()vastutab teie vidina väljastamise eest kasutajaliideses. Funktsioonile saame kaks argumenti; esiteks massiiv kasuliku teabega, nagu näiteks teema määratletud vidinaala ümbrised, ja teiseks teie salvestatud vidina seadistuste väärtused.

Teie vidina väljund peaks alati algama kajaga $args['before_widget']ja lõppema kajaga $args['after_widget']. See tagab, et teie vidin on ümbritsetud samade õigete vidinate HTML-i ümbristega, nagu on määratletud teemaga. Samade radade ääres saate vidina pealkirja ümber kajada $args['before_title']ja väljastada õiged HTML-mähised. $args['after_title']Meil ei ole tegelikku vidina pealkirja, kuid me muudame ettevõtte juriidilise nime vidina pealkirjaks.

Vastasel juhul saate oma salvestatud väärtused kätte, viidates teisele argumendile, võtmenimede järgi $instance, mis on määratud form()ja update(). Hea tava on väljastada ainult määratud sätted – ja ignoreerida tühje.

Kuna me väljastame ka mikroandmeid, peame vastavalt schema.org reegleid lisama vastavad omadused.

See, kuidas soovite oma vidinat väljastada, on täielikult teie otsustada; võiksite stiilimise hõlbustamiseks tõenäoliselt kaaluda rohkemate HTML-i ümbriste lisamist.

// Responsible for outputting the widget in frontend
public function widget($args, $instance) {
    echo $args['before_widget'];
 
    ?><div itemscope itemtype="https://schema.org/LocalBusiness"><?php
 
    if (!empty($instance['legal_name'])) {
        echo $args['before_title'];
        ?><span itemprop="legalName"><?php echo $instance['legal_name']; ?></span><?php
 
        echo $args['after_title'];
    }
 
    if (!empty($instance['vat_id'])) {
        ?><span itemprop="vatID" class="business-vatid"><?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?></span><?php
    }
 
    if (!empty($instance['street_address'])) {
        ?><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="business-address"><?php
 
            ?><span itemprop="streetAddress"><?php echo $instance['street_address']; ?></span><?php
 
            if (!empty($instance['postal_code'])) {
                ?><span itemprop="postalCode"><?php echo $instance['postal_code']; ?></span><?php
            }
            if (!empty($instance['postal_city'])) {
                ?><span itemprop="addressLocality"><?php echo $instance['postal_city']; ?></span><?php
            }               
 
        ?></div><?php
    }
 
    if (!empty($instance['email_address'])) {
        ?><a href="mailto:<?php echo $instance['email_address']; ?>" title="<?php _e('Send email', 'txtdomain'); ?>" class="business-email">
            <span itemprop="email"><?php echo $instance['email_address']; ?></span>
        </a><?php
    }
 
    if (!empty($instance['phone_number'])) {
        ?><a href="tel:<?php echo $instance['phone_number']; ?>" title="<?php _e('Call us', 'txtdomain'); ?>" class="business-phone">
            <span itemprop="telephone"><?php echo $instance['phone_number']; ?></span>
        </a><?php
    }
 
    ?></div><?php
 
    echo $args['after_widget'];
}

Kohandage väljundit, lisage stiili ja ongi kõik!

Teadmiseks: teie vidin saab ümbrisklassi nime ” widget_<base ID>" (baas-ID on see, mille esitasite konstruktoris). Meie puhul saab meie vidin klassi " widget_local_business". See võib aidata teil lisada sihitud stiili.

Kokkuvõte ja lõplik kood

Selles õpetuses õppisime, kuidas luua kohandatud vidinat ja kuidas renderdada selle seadetest mikroandmete vormingus väljundit. Peaksite saama luua oma vidinaid, järgides vidinaklassi põhitõdesid!

Viitamiseks siin on täielik kood, kõik koos.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});
 
class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() {
        $widget_ops = [
            'description' => __('Outputs business information with Microdata', 'txtdomain')
        ];
        parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);
    }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) {
        echo $args['before_widget'];
 
        ?><div itemscope itemtype="https://schema.org/LocalBusiness"><?php
 
        if (!empty($instance['legal_name'])) {
            echo $args['before_title'];
            ?><span itemprop="legalName"><?php echo $instance['legal_name']; ?></span><?php
 
            echo $args['after_title'];
        }
 
        if (!empty($instance['vat_id'])) {
            ?><span itemprop="vatID" class="business-vatid"><?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?></span><?php
        }
 
        if (!empty($instance['street_address'])) {
            ?><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="business-address"><?php
 
                ?><span itemprop="streetAddress"><?php echo $instance['street_address']; ?></span><?php
 
                if (!empty($instance['postal_code'])) {
                    ?><span itemprop="postalCode"><?php echo $instance['postal_code']; ?></span><?php
                }
                if (!empty($instance['postal_city'])) {
                    ?><span itemprop="addressLocality"><?php echo $instance['postal_city']; ?></span><?php
                }               
 
            ?></div><?php
        }
 
        if (!empty($instance['email_address'])) {
            ?><a href="mailto:<?php echo $instance['email_address']; ?>" title="<?php _e('Send email', 'txtdomain'); ?>" class="business-email">
                <span itemprop="email"><?php echo $instance['email_address']; ?></span>
            </a><?php
        }
 
        if (!empty($instance['phone_number'])) {
            ?><a href="tel:<?php echo $instance['phone_number']; ?>" title="<?php _e('Call us', 'txtdomain'); ?>" class="business-phone">
                <span itemprop="telephone"><?php echo $instance['phone_number']; ?></span>
            </a><?php
        }
        ?></div><?php
 
        echo $args['after_widget'];
    }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { 
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>" name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>" value="<?php echo esc_attr($instance['legal_name']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('vat_id'); ?>"><?php _e('Vat ID/Organization number:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('vat_id')); ?>" name="<?php echo esc_attr($this->get_field_name('vat_id')); ?>" value="<?php echo esc_attr($instance['vat_id']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('street_address'); ?>"><?php _e('Street address:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('street_address')); ?>" name="<?php echo esc_attr($this->get_field_name('street_address')); ?>" value="<?php echo esc_attr($instance['street_address']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('postal_code'); ?>"><?php _e('Postal code:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_code')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_code')); ?>" value="<?php echo esc_attr($instance['postal_code']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('postal_city'); ?>"><?php _e('City:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_city')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_city')); ?>" value="<?php echo esc_attr($instance['postal_city']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('email_address'); ?>"><?php _e('E-mail address:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('email_address')); ?>" name="<?php echo esc_attr($this->get_field_name('email_address')); ?>" value="<?php echo esc_attr($instance['email_address']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('phone_number'); ?>"><?php _e('Phone number:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('phone_number')); ?>" name="<?php echo esc_attr($this->get_field_name('phone_number')); ?>" value="<?php echo esc_attr($instance['phone_number']); ?>" />
        </p>
        <?php
    }
 
    // 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;
    }
}

Sulle võib ka meeldida Veel autorilt

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem