Chociaż ostatni post w tej serii refaktoryzacji nie był niesamowicie długi, myślę, że był trochę gęsty. Oznacza to, że uzyskanie kodu w miejscu, w którym łatwiej nam będzie z nim pracować, wymagało sporo pracy.
Ale to tylko tyle: cała praca, którą wykonaliśmy, powinna ułatwić przejście do przodu z resztą kodu, który musimy napisać.
Aby mieć pewność, że korzystamy z dotychczasowej pracy i fundamentów, dopełnimy serię krótszymi, bardziej szczegółowymi artykułami, których przeczytanie i wdrożenie powinno zająć mniej czasu i zrozum, co robimy z kodem.
Szablon WordPress Widget: Refaktoryzacja, część 9
Przypomnijmy z ostatniego posta:
Następnie będziemy kontynuować tworzenie funkcjonalności obszaru administracyjnego widżetu. Następnie zwrócimy uwagę na publiczną stronę widżetu oraz na funkcję serializacji.
A to ustawia nas dokładnie w tym, dokąd zmierzamy w tym konkretnym poście. Mianowicie napiszemy front-end administracyjny, który pozwoli nam:
- zdefiniować tytuł widżetu,
- zdefiniować treść tekstową widżetu,
- i przełącz, czy chcemy pokazać tytuł.
Nie ma być innowacyjny ani nie ma być rodzajem widżetu, który ktokolwiek inny może chcieć sprzedawać. Zamiast tego ma pokazać, jak możemy z tego, co mamy, stworzyć coś podobnego do tego, co widzieliśmy już w WordPressie i jak stosujemy solidne praktyki programistyczne.
Interfejs użytkownika: pierwsze przejście
Po naszej ostatniej pracy mamy widżet, który pojawia się w obszarze administracyjnym WordPressa i można go nawet przenieść do paska bocznego lub innego widżetowanego obszaru; jednak tak naprawdę nic nie robi.
Na razie śmiało dodajmy do interfejsu użytkownika trzy elementy:
- dodać tekst w tytule widżetu,
- zawierać element textarea do wyświetlania tego, co może być akapitem tekstu,
- i na koniec dodaj pole wyboru, aby przełączać informacje o tytule.
Aby to zrobić, musimy edytować plik w katalogu Views. Mianowicie będziemy aktualizować plik Admin.php. Zaczniemy od elementów dokładnie tak, jak są potrzebne, bez zbędnych znaczników.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>Nie będzie to jeszcze wiele do oglądania na froncie, ale zbliża nas do miejsca, w którym chcemy być.
Klasa dla administratorów
Następnie chcemy się upewnić, że pozostajemy konsekwentni w utrzymywaniu wysokiego poziomu spójności z naszymi klasami. Oznacza to, że nie potrzebujemy jednej klasy do wykonania wszystkiego w celu administrowania, wyświetlania i wszystkich innych prac wymaganych przez API WordPress.
W tym celu utworzymy drugą klasę o nazwie WidgetAdmin w katalogu i przestrzeni nazw WordPressa .
W tym pliku umieścimy następujący kod :
<?php
/*
* This file is part of WordPress Widget Boilerplate
* (c) Tom McFarlin <tom@tommcfarlin.com>
*
* This source file is subject to the GPL license that is bundled
* with this source code in the file LICENSE.
*/
namespace WordPressWidgetBoilerplateWordPress;
/**
* Manages the administrative functionality of the widget.
*/
class WidgetAdmin extends Widget
{
/**
* {@inheritdoc}
*/
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
}
/**
* Displays the administrative view of the form and includes the options
* for the instance of the widget as arguments passed into the function.
*
* @param array $instance the options for the instance of this widget.
*/
public function form($instance)
{
include plugin_dir_path(__FILE__).'Views/Admin.php';
}
}
Następnie w oryginalnym kodzie tworzenia instancji naszego widżetu zmienimy tę linię :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new Widget('widget-name'));
}Aby wyglądać tak :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new WidgetAdmin('widget-name'));
}W ciągu kilku następnych artykułów będzie to ewoluować, ale jak widać, upewniamy się, że mamy jedną podstawową klasę funkcjonalności do komunikacji z WordPressem i klasę specjalnie do renderowania formularza administracyjnego.
Interfejs użytkownika: drugie przejście
Na koniec oczyśćmy formularz, aby miał trochę więcej solidnego UX, który dobrze komponuje się z obszarem administracyjnym WordPressa jako całości.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>I zaktualizuj go tak, aby wyglądał tak :
<div class="widget-content">
<p>
<input
type="text"
name="widget-title"
value=""
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
name="widget-content"
placeholder="Widget Content"
style="width:100%;"></textarea>
</p>
<p>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
class="checkbox"
/>
<label for="widget-title-enabled">Display Title?</label>
</p>
</div><!-- .widget-content -->Zakładając, że wszystko poszło dobrze, powinieneś teraz zobaczyć coś, co wygląda tak:
I na tym zatrzymamy się z funkcjami administracyjnymi tego posta. Pamiętaj, że możesz to wszystko śledzić również w gałęzi deweloperskiej na GitHub.
Odkażanie i serializacja
W następnym poście przyjrzymy się, co jest niezbędne do oczyszczenia i serializacji (lub oczyszczenia i zapisania) zawartości naszego widżetu.
Upewnimy się również, że wyświetlamy informacje w obszarze administracyjnym po zapisaniu i pobraniu informacji.
Wreszcie, dziedziczenie i spójność klasowa będą nadal ewoluować, ale na razie skup się na tym, co jest omówione w tym poście, a następnie będziemy kontynuować w następnym artykule.