Työskentely luokkien, mallien ja osien kanssa WordPressissä

Kun aloin aloittaa tämän postauksen, aioin kirjoittaa jotain paljon enemmän mukana kuin mitä aion jakaa. Aluksi halusin käydä läpi yhden kahdesta asiasta:

• Täydellinen opas kehitysympäristön luomiseen,
• Koodilaatutyökalujen integrointi PhpStormiin

Ensimmäinen olisi keskittyä moniin muihin asioihin, joista olen puhunut, sitoa ne kaikki yhteen ja saada lopullinen viittaus. Mutta tämä on asia, jonka kokoamiseen haluan käyttää aikaa varmistaakseni, että se tehdään oikein.

Toinen on mielestäni tärkeä, mutta olen hieman siirtymävaiheessa joidenkin omien työkalujeni kanssa. Ennen kuin se on tehty, en mieluummin kirjoita siitä.

Silti aina on jotain peitettävää, eikö niin? Joten tänään olen valinnut jotain yksinkertaisempaa: luokkien, mallien ja osien käytön erittely WordPress-laajennuksissa yksinkertaisen esimerkin avulla.

Luokat, mallit ja osat WordPressissä

Tämän nimenomaisen aiheen kohdalla mieleen jäävä välitön kysymys on yksinkertainen: Miksi vaivautua puhumaan tästä?

Koska on vuosi 2018 ja näemme edelleen karkean yhdistelmän PHP:tä, CSS:ää, merkintöjä ja JavaScriptiä yhdessä tiedostossa. Tämä ei koske muita tekniikoita, jotka tekevät tämän oletuksena (kuten React). Puhun erityisesti WordPress-laajennuksista ja ylläpidettävän koodin kirjoittamisesta siten, että sitä on [ilmeisesti] helppo ylläpitää, kirjoittaa ja lukea.

Käytännön esimerkki

Oletetaan, että työskentelet alivalikkosivulla jotain, joka tulee näkyviin mukautetun valikon alle. Rekisteröi sivusi WordPress API:lla:

<?php

public function addMenuPage()
{
    add_menu_page(
      'Acme Menu',
      'Acme Menu',
      'manage_options',
      'acme-custom-menu',
      array($this, 'display'),
      'dashicons-dashboard',
      30
    );

    add_submenu_page(
      'acme-custom-menu',
      'Acme Menu',
      'Acme Menu',
      'Acme Menu',
      'acme-custom-menu',
      array($this, 'display')
    );
}

Mutta kun asetat takaisinsoittotoiminnon sivun näyttämiseen, et käytä toimintoa kaikkien eri kielten sekoittamiseen. Sen sijaan käytät sitä tiedoston sisällyttämiseen.

<?php

public function display()
{
    include_once $this->pluginPath. 'views/acme-settings.php';
}

Huomaa, että yllä olevassa tiedostossa viittaan ominaisuuteen $this->pluginPath. Tämä on asetettu luokan rakentajaan, jotta voin helposti käyttää laajennuksen juurta.

Joka tapauksessa, miltä tämä tiedosto voi näyttää?

Malli ja osittainen

Tässä tapauksessa oletan, että mallisi on se, joka antaa tietoja käyttäjälle ja pyytää hänen syötteitään. Osapuoli on vastuussa onnistumis-, virhe- tai varoitusviestin näyttämisestä käyttäjälle.

Malli

Yksinkertaisuuden vuoksi pidän sekä mallin että osan mahdollisimman ohuena. Tässä tapauksessa oletetaan, että aiomme hahmontaa sivun, pyydämme käyttäjää tallentamaan arvon, ja jos arvo tallentuu onnistuneesti (ja on siten wp_options – taulukossa), näytämme onnistumisviestin.

Tämä tarkoittaa:

• mallissa näkyy sivun otsikko, tiedot, syöttö ja tallennuspainike,
• osa näyttää onnistumisviestin tarvittaessa.

Katso alla olevan mallin koodia:

<?php
/**
 * Renders the settings page for the plugin.
 */
?>
<div class="wrap">
    <h1 class="wp-heading-inline"><?php echo get_admin_page_title(); ?></h1>
    <?php if ($this->showSuccessMessage()) { ?>
      <?php include_once 'partials/settings-saved.php'; ?>
    ?>
    <div id="acme-settings-schedule">
        <form id="acme-form" method="post" action="<?php echo esc_html(admin_url('admin-post.php')); ?>"">
            <!-- This is where your settings go. -->
            <p>
                <?php
                submit_button(
                    'Save',
                    'primary',
                    'acme-save-settings',
                    false
                );
                wp_nonce_field(
                    'acme-save',
                    'acme-save-nonce'
                );
                ?>
            </p>
        </form>
    </div>
</div>

Huomaa, että kyllä, siinä on syöttö, tallennuspainike ja ei mitään, jotka kaikki ovat tärkeitä (mutta tämän viestin ulkopuolella) tietojen tallentamiseksi.

Mutta huomaa myös, että siinä on aputoiminto, jonka avulla tarkistan onnistuneesti tallennettujen tietojen olemassaolon. Tämä funktio sijaitsee samassa luokassa, joka vastaa mallin hahmontamisesta.

Osittainen

Se näyttää jotakuinkin tältä:

<?php

public function showSuccessMessage()
{
  return (false !== get_option('acme_custom_setting'));
}

Ja tuloksena oleva osa on hyvin yksinkertainen:

<?php
/**
 * Renders the success message if the option has been properly saved.
 */
?>

<div class="notice-success notice is-dismissible">
    <p>Your settings have been successfully saved.</p>
    <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
    </button>
</div>

Tietenkin toiminnon toteutus voi vaihdella. Tarkoituksena ei ole niinkään näyttää kuinka toiminto toteutetaan, vaan kuinka hyödyntää toimintoa tietojen tarkistamiseen osittaisen näyttämistä varten.

Siellä on enemmän (mutta ei täällä)

Ehkä tämä on jotain, joka pitäisi sijoittaa artikkelin alkuun.

Ollakseni rehellinen, mielestäni se on yksi niistä asioista, joissa joidenkin voi olla hyödyllisempää nähdä se alusta alkaen (mutta sitten puuttuu koodin konteksti) ja toisten mielestä se on hyödyllisempää lopussa, koska he näkevät, kuinka se kaikki sopii yhdessä.

Siitä huolimatta toivon, että se antaa lopulta selvyyden siitä, kuinka tämä kaikki sopii yhteen.

Lisäksi paikoissa on paljon tilaa mukautetuille asioille, kuten:

• tarkistamalla, että käyttäjällä on tallennusoikeus,
• tarkistamalla nonce-arvon,
• tietojen desinfiointi ja validointi,
• määrittää onnistumisen, varoitukset ja virheet.

Mutta jos haluan kattaa kaikki edellä mainitut, tarkastelemme poikkeuksellisen pitkää viestiä tai pitkää viestisarjaa. En vastusta sitä, mutta se on myös jotain, jota en nyt, on vaivan arvoinen tässä vaiheessa.

Älä koskaan epäröi antaa palautetta. Mutta sillä välin toivon, että tämä kaikki auttaa antamaan sinulle perustan, jolle voit rakentaa seuraavan projektin parissa.