Jeśli chodzi o refaktoryzację WordPress Widget Boilerplate – zwłaszcza biorąc pod uwagę, jak daleko zaszliśmy od początku projektu osiem lat temu – wykonaliśmy dużo pracy.
Podnieśliśmy go do znacznie bardziej nowoczesnego standardu i znacznie ułatwiamy pracę z nim, dzięki czemu tworzenie przyszłych widżetów powinno być łatwiejsze. I to nie tylko ze standardu wzorcowego, ale ze standardu zorientowanego obiektowo, dzięki czemu obsługa i jakość kodu jest wyższa.
W ostatnim poście zakończyliśmy większość pracy w obszarze administracyjnym i jesteśmy gotowi do rozpoczęcia pracy nad kodem dla front-endu.
Powiedzieliśmy:
Następnie przyjrzymy się renderowaniu treści na interfejsie użytkownika. Zbliżamy się do końca refaktoryzacji Boilerplate, ale jest jeszcze trochę do zrobienia, zanim będziemy gotowi do scalenia go z główną gałęzią bazy kodu.
Więc w tym poście zamierzamy tam odebrać. Teraz, jeśli podążałeś do tego momentu, powinieneś mieć wszystko, czego potrzebujesz z gałęzi deweloperskiej.
Jeśli nie, pamiętaj, aby go wyciągnąć, ponieważ to właśnie tam zamierzamy odebrać w pozostałej części posta.
WordPress Widget Boilerplate: Refaktoryzacja Część 12
Teraz, jeśli chodzi o front-end, łatwo jest myśleć o nim jako o wszystkim, co użytkownik widzi przed sobą, niezależnie od tego, czy znajduje się w obszarze administracyjnym, czy nie.
Jednak z tej serii jasno wynika, że dzielimy to, co widzi użytkownik, między obszar administracyjny i publiczny obszar witryny.
Zamierzamy więc pracować nad obszarem kodu, który renderuje informacje dla użytkownika w publicznym obszarze witryny. Zaczniemy od prostego przeczytania informacji i wyświetlenia ich.
Następnie w następnym poście przyjrzymy się pracy z logiką warunkową w odniesieniu do niektórych opcji, aby sprawdzić, czy jest coś, co musimy zrobić.
Powiedziawszy to, przejdźmy do kodu.
O danych, które będziemy wyświetlać
Pamiętaj, że w tym momencie widżet ma trzy rzeczy, które wpływają na jego wyświetlanie:
- tytuł widżetu,
- zawartość widżetu,
- przełącznik określający, czy powinniśmy wyświetlać tytuł
Trzecia opcja to przede wszystkim pokazanie, jak używać innego typu elementu. Ponieważ, technicznie rzecz biorąc, jeśli nie chcielibyśmy pokazywać tytułu widżetu, po prostu nie umieścilibyśmy niczego w widżecie.
Ale myślę, że pomaga pokazać, jak używać różnych typów elementów i ich wartości w praktyczny (lub półpraktyczny) sposób.
W każdym razie, mając to na uwadze, wiemy, że dla każdego wystąpienia widżetu dane są przechowywane wraz z tytułem, treścią oraz nazwą wyświetlanego tytułu i identyfikatorami dostarczonymi przez WordPress.
W związku z tym będziemy używać ich w naszym kodzie frontonu do wyświetlania wartości.
Przygotowanie funkcji wyświetlania
Zazwyczaj funkcja widżetu odpowiada za wyświetlanie danych wyjściowych widżetu. Ale jedną z rzeczy, które staraliśmy się zrobić, jest oddzielenie problemów naszego widżetu na bardziej skoncentrowany zestaw klas i funkcji.
Pierwszą rzeczą, którą chcemy zrobić, to napisać klasę WidgetDisplay, która będzie odpowiedzialna za, jak na pewno widać, wyświetlanie zawartości widżetu.
Na razie będzie to bezwarunkowo zawierać tytuł, treść i wartość, czy tytuł ma być uwzględniony. WordPress udostępnia również pewne treści, takie jak znaczniki, które powinny pojawiać się przed widżetem i po widżecie, więc upewnimy się, że również je uwzględnimy.
Ale najpierw po prostu odetnijmy klasę :
<?php
namespace WordPressWidgetBoilerplateWordPress;
class WidgetDisplay
{
private $widgetSlug;
public function __construct(string $widgetSlug)
{
$this->widgetSlug = $widgetSlug;
}
public function show($args, $instance)
{
// More to come
}
}
Następnie musimy się upewnić, że zapisujemy to również innym klasom. Najpierw upewnimy się, że umieścimy go w naszej klasie Widget :
<?php
public function widget($args, $instance)
{
return $this->widgetDisplay->show($args, $instance);
}A potem dodamy go do klasy WidgetAdmin (ponieważ tutaj znajdują się podstawowe funkcje Widget API – po prostu deleguje odpowiedzialność do odpowiedniej klasy):
<?php
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
$this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());
$this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());
}W tej chwili nie wyświetlamy jeszcze niczego. Jesteśmy blisko i wkrótce się na tym skupimy.
Wyświetlanie danych
Zakładając, że jesteś w stanie dodać powyższy kod bez błędów, czas wyświetlić zawartość widżetu.
Możemy to zrobić na wiele sposobów, od prostego var_dump do rzeczywistej pracy nad wyświetlaniem treści w bardziej przyjazny dla użytkownika sposób. A ja jestem o wiele bardziej fanem tego drugiego.
Więc zróbmy to.
W funkcji show swojej klasy WidgetDisplay dodaj następujący kod :
<?php
public function show($args, $instance)
{
include_once 'Views/Widget.php';
}A potem widok szablonu może być tak prosty jak ten :
<div id="<?php echo $args['id']; ?>">
<h3 class="widget-title"><?php echo $instance['title']; ?></h3>
<p><?php echo $instance['content']; ?></p>
<pre><?php echo $instance['display-title']; ?></pre>
</div><!-- #<?php echo $args['id']; ?>-->Zapewni to prawidłowe renderowanie wszystkich treści poprzedzających widżet, treści widżetu i treści.
Ponownie, pamiętaj, że wyświetlamy niektóre treści, które nie będą w ostatecznej wersji tego, ale jesteśmy blisko i zajmiemy się tym w następnym poście.
Polecam bawić się opcją Wyświetl tytuł, aby zobaczyć, jak renderuje się na interfejsie użytkownika, biorąc pod uwagę dostarczone przez nas znaczniki.
Na razie wyjście widżetu powinno wyglądać mniej więcej tak:
Ale to wszystko, co można omówić w tym poście.
Do ostatecznego refaktora
Ostatnią rzeczą, na którą spojrzymy po tym, jest zaostrzenie niektórych logiki warunkowej wraz ze słowem o buforowaniu danych (ponieważ robiliśmy już trochę tego we wcześniejszych postach).
Na razie jednak możesz swobodnie bawić się tym, co mamy tutaj, wraz z kodem, którego nie uwzględniliśmy (na przykład tym, co może być wyświetlane przed lub po widżecie.
Zostały one celowo pominięte w tym przykładzie, ale nie zawsze mogą zostać pominięte w zależności od pracy, którą wykonujesz.