Kiedy usiadłem, żeby zacząć ten post, planowałem napisać coś o wiele bardziej zaangażowanego niż to, czym zamierzam się podzielić. Początkowo chciałem przejść przez jedną z dwóch rzeczy:
- Kompletny przewodnik po konfigurowaniu środowiska programistycznego,
- Integracja narzędzi jakości kodu z PhpStorm
Pierwszym z nich byłoby skupienie się na wielu innych rzeczach, o których mówiłem, powiązanie ich wszystkich razem i posiadanie ostatecznego odniesienia. Ale to jest coś, na co chciałbym poświęcić trochę czasu, aby upewnić się, że jest zrobione dobrze.
Drugi to taki, który uważam za ważny, ale jestem w fazie przejściowej z niektórymi moimi własnymi narzędziami. Dopóki tego nie zrobię, wolałbym o tym nie pisać.
Mimo to zawsze jest coś do ukrycia, prawda? Więc dzisiaj zdecydowałem się na coś prostszego: rozbicie użycia klas, szablonów i podszablonów we wtyczkach WordPress na prostym przykładzie.
Klasy, szablony i części w WordPress
W przypadku tego konkretnego tematu, natychmiastowe pytanie, które może przyjść do głowy, jest proste: po co zawracać sobie głowę mówieniem o tym?
Ponieważ jest rok 2018 i wciąż widzimy mieszankę PHP, CSS, znaczników i JavaScript w jednym pliku. Nie chodzi o to, aby uderzać w inne technologie, które domyślnie to robią (takie jak React). Mówię konkretnie o wtyczkach do WordPressa i pisaniu możliwego do utrzymania kodu w taki sposób, aby [oczywiście] był łatwy w utrzymaniu, pisaniu i czytaniu.
Praktyczny przykład
Załóżmy, że pracujesz nad stroną podmenu dotyczącą czegoś, co ma się pojawić w menu niestandardowym. Rejestrujesz swoją stronę za pomocą API WordPress:
<?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')
);
}
Ale kiedy konfigurujesz funkcję wywołania zwrotnego do wyświetlania strony, nie używasz tej funkcji do mieszania wszystkich różnych języków. Zamiast tego używasz go do dołączenia pliku.
<?php
public function display()
{
include_once $this->pluginPath. 'views/acme-settings.php';
}
Zauważ, że w powyższym pliku odwołuję się do właściwości $this->pluginPath. Jest to ustawiane w konstruktorze klasy, dzięki czemu mogę łatwo uzyskać dostęp do katalogu głównego wtyczki.
Zresztą, jak może wyglądać ten plik?
Szablon i częściowe
W tym przypadku zakładam, że Twój szablon ma dostarczyć informacji użytkownikowi i będzie prosić o jego wprowadzenie. Część będzie odpowiedzialna za wyświetlanie użytkownikowi komunikatu o sukcesie, błędzie lub ostrzeżenie.
Szablon
Aby było to proste, staram się, aby zarówno szablon, jak i podszablony były jak najszczuplejsze. W tym przypadku załóżmy, że wyrenderujemy stronę, poprosimy użytkownika o zapisanie wartości, a jeśli wartość zostanie pomyślnie zapisana (i dlatego istnieje w tabeli wp_options ), wyświetlimy komunikat o powodzeniu.
To znaczy:
- szablon wyświetli tytuł strony, informacje, dane wejściowe i przycisk zapisu,
- w razie potrzeby częściowy wyświetli komunikat o powodzeniu.
Spójrz na kod szablonu poniżej:
<?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>
Zauważ, że tak, ma wejście, przycisk zapisywania i jednorazowy, z których wszystkie są ważne (ale wykraczają poza zakres tego postu) do zapisywania informacji.
Ale zauważ, że ma funkcję pomocniczą, której używam do sprawdzania obecności pomyślnego zapisywania informacji. Ta funkcja znajduje się w tej samej klasie, która odpowiada za renderowanie szablonu.
Częściowy
Wygląda to mniej więcej tak:
<?php
public function showSuccessMessage()
{
return (false !== get_option('acme_custom_setting'));
}
Wynikowa częściowa jest bardzo prosta:
<?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>
Oczywiście twoja implementacja funkcji może się różnić. Celem nie jest pokazanie, jak zaimplementować funkcję, ale jak wykorzystać funkcję do sprawdzania informacji w celu wyświetlenia części.
Jest więcej (ale nie tutaj)
Może to jest coś, co należy umieścić na początku artykułu.
Szczerze mówiąc, myślę, że jest to jedna z tych rzeczy, w których niektórzy mogą uznać, że bardziej pomocne może być zobaczenie tego od samego początku (ale potem brak kontekstu kodu), a inni uznają to za bardziej przydatne na końcu, ponieważ widzą, jak to wszystko pasuje razem.
Niezależnie od tego mam nadzieję, że ostatecznie wyjaśni to, jak to wszystko do siebie pasuje.
Co więcej, jest dużo miejsca na takie rzeczy, które można dostosować, takie jak:
- sprawdzenie, czy użytkownik ma uprawnienia do zapisywania,
- weryfikacja wartości nonce,
- sanityzacja i walidacja danych,
- określić, co stanowi sukces, ostrzeżenia i błędy.
Ale jeśli mam omówić wszystkie powyższe, patrzymy na wyjątkowo długi post lub długą serię postów. To nie jest coś, przeciwko czemu jestem przeciwny, ale jest to również coś, czego teraz nie robię, jest warte wysiłku w tym momencie.
Nigdy nie wahaj się przekazać opinii. Ale w międzyczasie mam nadzieję, że to wszystko pomoże ci stworzyć fundament, na którym możesz budować podczas pracy nad następnym projektem.