Klasside, mallide ja osadega töötamine WordPressis

Viimati uuendatud nov. 9, 2022

Sisu

Kui ma seda postitust alustama istusin, plaanisin kirjutada midagi palju kaasahaaravamat, kui seda, mida ma jagan. Esialgu tahtsin läbi käia ühe kahest asjast:

Arenduskeskkonna seadistamise täielik juhend,
Koodikvaliteedi tööriistade integreerimine PhpStormi

Esimene oleks keskendumine paljudele muudele asjadele, millest olen rääkinud, siduda need kõik kokku ja omada lõplikku viidet. Kuid see on midagi, mille kokkupanekuks tahan aega võtta, et veenduda, et see on õigesti tehtud.

Teine on minu arvates oluline, kuid olen mõne oma tööriistaga üleminekufaasis. Kuni see pole tehtud, ma pigem ei kirjuta sellest.

Siiski on alati midagi katta, eks? Nii et täna valisin midagi lihtsamat: klasside, mallide ja osade kasutamise jaotamine WordPressi pistikprogrammides lihtsa näite abil.

Klassid, mallid ja osad WordPressis

Selle konkreetse teema puhul võib kohe pähe tulla lihtne küsimus: miks sellest rääkida?

Kuna on aasta 2018 ja me näeme endiselt ühes failis PHP, CSS-i, märgistuse ja JavaScripti jämedat segu. See ei puuduta teisi tehnoloogiaid, mis seda vaikimisi teevad (nt React). Ma räägin konkreetselt WordPressi pistikprogrammidest ja hooldatava koodi kirjutamisest nii, et seda oleks [ilmselt] lihtne hooldada, kirjutada ja lugeda.

Praktiline näide

Oletame, et töötate alammenüü lehel millegi jaoks, mis kuvatakse kohandatud menüü all. Registreerite oma lehe WordPressi API abil:

<?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')
    );
}

Kuid kui seadistate lehe kuvamiseks tagasihelistamise funktsiooni, ei kasuta te seda funktsiooni erinevate keelte segamiseks. Selle asemel kasutate seda faili kaasamiseks.

<?php

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

Pange tähele, et ülaltoodud failis viitan atribuudile $this->pluginPath. See on seatud klassi konstruktoris, et saaksin hõlpsasti juurde pääseda pistikprogrammi juurtele.

Igatahes, milline see fail välja näeb?

Mall ja osaline

Sel juhul eeldan, et teie mall on see, mis annab kasutajale teavet ja taotleb nende sisestust. Osaline vastutab kasutajale edu-, vea- või hoiatusteate kuvamise eest.

Mall

Lihtsuse huvides hoian nii malli kui ka osa võimalikult lahjana. Sel juhul oletame, et renderdame lehe, palume kasutajal väärtus salvestada ja kui väärtus õnnestub salvestada (ja on seega tabelis wp_options olemas ), kuvame õnnestumisteate.

See tähendab:

mall kuvab lehe pealkirja, teabe, sisendi ja salvestamisnupu,
osaline kuvab vajadusel eduteate.

Vaadake alloleva malli koodi:

<?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>

Pange tähele, et jah, sellel on sisend, salvestamisnupp ja mitte midagi, mis kõik on teabe salvestamiseks olulised (kuid väljaspool selle postituse ulatust).

Kuid pange tähele ka seda, et sellel on abifunktsioon, mida kasutan edukalt salvestatud teabe olemasolu kontrollimiseks. See funktsioon asub samas klassis, mis vastutab malli renderdamise eest.

Osaline

See näeb välja umbes selline:

<?php

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

Ja saadud osa on väga lihtne:

<?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>

Muidugi võib teie funktsiooni rakendamine erineda. Eesmärk ei ole niivõrd näidata, kuidas funktsiooni rakendada, vaid kuidas kasutada funktsiooni teabe kontrollimiseks osalise kuvamiseks.

Seal on rohkem (aga mitte siin)

Võib-olla tuleks see panna artikli algusesse.

Kui aus olla, siis ma arvan, et see on üks neist asjadest, mille puhul mõnel võib olla kasulikum seda algusest peale näha (aga siis puudub koodi kontekst) ja teiste jaoks on see lõpus kasulikum, sest nad näevad, kuidas see kõik sobib. koos.

Sellest hoolimata loodan, et see annab lõpuks selguse, kuidas see kõik kokku sobib.

Lisaks on kohtades palju ruumi asjade kohandamiseks, näiteks:

kontrollides, kas kasutajal on salvestamise luba,
mitte-väärtuse kontrollimine,
andmete desinfitseerimine ja kinnitamine,
määrake kindlaks, mis on edu, hoiatused ja vead.

Aga kui ma tahan kõike eelnevat käsitleda, siis vaatame erakordselt pikka postitust või pikka postituste seeriat. Ma ei ole selle vastu, kuid see on ka midagi, mida ma praegu ei tee, on praegu pingutust väärt.

Ärge kunagi kõhelge tagasiside andmisest. Seniks aga loodan, et see kõik annab teile aluse, millele järgmise projekti kallal töötades ehitada.

: tommcfarlin.com