Jeśli chodzi o refaktoryzację WordPress Widget Boilerplate, jesteśmy w dobrym miejscu. Wykonano dużo pracy, aby wprowadzanie nowych klas, funkcji i funkcjonalności było znacznie prostsze.
I nie tylko to: powinno być łatwiej śledzić.
Dzięki pracy w ostatnim poście mamy dużo pracy do zbudowania – mianowicie podstawowy interfejs administracyjny.
Wreszcie ostatni post mówił:
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.
I właśnie to zajmiemy się w tym artykule. W szczególności przyjrzymy się oczyszczaniu i serializacji danych, a także pobieraniu danych zapisanych w widżecie.
WordPress Widget Boilerplate: Refaktoryzacja Część 10
Refaktoryzacja interfejsu użytkownika
Zanim przejdziemy do serializacji, musimy wykonać niewielką pracę w naszym widoku administracyjnym. Przypomnij sobie z poprzednich postów z serii, że zbudowaliśmy formularz, który akceptuje:
- tytuł,
- trochę treści,
- i pole wyboru.
Wyświetla się to dobrze, ale wyklucza niektóre kluczowe funkcje interfejsu Widgets API. Mianowicie musimy upewnić się, że poprawnie nazywamy nasze elementy za pomocą następujących funkcji:
A potem napiszemy naszą funkcję o nazwie po prostu get, którą wyjaśnię za chwilę.
Powyższe funkcje są niezbędne, ponieważ pomagają WordPressowi śledzić, ile wystąpień widżetu jest używanych i które z nich edytuje użytkownik. Innymi słowy, dużo funkcjonalności dostajemy za darmo.
Zanim pokażę kod, chcę krótko omówić przeznaczenie funkcji get, którą zamierzamy wprowadzić. Krótko mówiąc, jest to sposób, w jaki możemy przekazać klucz (jak w kluczu w parze klucz/wartość) do funkcji, a następnie łatwo pobrać dla nas wartość, tak aby nasz interfejs był tak czysty, jak to możliwe.
Tak więc najpierw metoda get :
<?php
/**
* If the value for the key exists in the current instance of the widget, then it will
* retrieve it. Otherwise, it will return an empty value.
*
* @param string $key the used to identify the value of the widget.
* @param array $instance the options for the instance of this widget
*/
protected function get($key, $instance)
{
return empty($instance[$key])? '': $instance[$key];
}Należy zauważyć, że ta metoda akceptuje nie tylko klucz dla odczytanej wartości, ale także tablicę odwołującą się do instancji tablicy.
A teraz zrefaktoryzowany interfejs użytkownika :
<?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.
*/
?>
<div class="widget-content">
<p>
<input
type="text"
id="<?php echo esc_attr($this->get_field_id('title')); ?>"
name="<?php echo esc_attr($this->get_field_name('title')); ?>"
value="<?php echo $this->get('title', $instance) ?>"
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
id="<?php echo esc_attr($this->get_field_id('content')); ?>"
name="<?php echo esc_attr($this->get_field_name('content')); ?>"
placeholder="Widget Content"
style="width:100%;"><?php echo $this->get('content', $instance) ?></textarea>
</p>
<p>
<input
type="checkbox"
value="on"
name="<?php echo esc_attr($this->get_field_name('display-title')); ?>"
id="<?php echo esc_attr($this->get_field_id('display-title')); ?>"
<?php checked('on', $this->get('display-title', $instance), true); ?>
class="checkbox"
/>
<label for="<?php echo esc_attr($this->get_field_id('display-title')); ?>">Display Title?</label>
</p>
</div><!-- .widget-content -->
Ale to wciąż powoduje brak funkcjonalności i pozostawia nam pracę do wykonania. Mianowicie musimy oczyścić dane i przekazać je z powrotem do WordPressa, aby zapisywał dane.
Sanityzacja i serializacja
Na potrzeby naszego przykładu będziemy bardzo surowi w tym, na co pozwalamy. Mianowicie zamierzamy wspierać tylko podstawowy tekst i zamierzamy agresywnie usuwać wszystko.
Oznacza to, że nie pozwolimy na znaczniki ani nic podobnego. Zamiast tego usuniemy wszystko, co nie jest tekstem podstawowym. Możemy go trochę udekorować, gdy przyjdzie czas na wyświetlenie go na froncie, ale zostawiamy to do odpowiedniego postu.
W tym celu użyjemy następujących funkcji:
Przypomnijmy, że w naszym widgecie mamy dwa pola – tytuł i treść. W zależności od typu widżetu, który tworzysz, możesz potrzebować tylko jednej klasy lub funkcji do oczyszczenia danych. W innych sytuacjach możesz potrzebować czegoś bardziej złożonego.
Miej to na uwadze, przechodząc przez ten kod, ponieważ nie będzie to rozwiązanie uniwersalne. Zamiast tego będzie specjalnie do tego.
W każdym razie, aby oczyścić dane, napiszemy klasę specjalnie do tego celu, a następnie udostępnimy ją naszej klasie WidgetAdmin.
Oto cała klasa wraz z opisem do naśladowania:
<?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;
/**
* Santiizes and saves the data for the widget.
*/
class WidgetSerializer
{
/**
* Updates the values of the widget. Sanitizes the information before saving it.
*
* @param array $newInstance the array of new options to save
*/
public function update($newInstance)
{
$instance = [];
foreach ($newInstance as $key => $value) {
$instance[$key] = strip_tags(
stripslashes($value)
);
}
return $instance;
}
}
Klasa powinna być prosta. Pobiera przychodzące wartości widżetu, oczyszcza je, a następnie zwraca nową tablicę, która ma zostać przekazana z powrotem do WordPressa.
Jest jednak pewien haczyk. Ta klasa musi być właściwością głównej klasy Widget, która została pokazana w ostatnim poście.
Po drugie, metoda aktualizacji, która jest częścią API Widgets, będzie wywoływać tę klasę. Nie jest konieczne przekazywanie zmiennej $oldInstance do serializatora, ale jest to wymagane w przypadku metody aktualizacji.
Oto klasa Widget w obecnej formie :
<?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;
use WP_Widget;
class Widget extends WP_Widget
{
/**
* @var string unique identifier for your widget
*/
protected $widgetSlug;
/**
* Initializes the plugin by setting its properties and calling the parent class with the description.
*
* @param string $widgetSlug unique identifier for your widget
* @param WidgetSerializer $widgetSerializer the class responsible for saving widget options
*/
public function __construct($widgetSlug)
{
$this->widgetSlug = $widgetSlug;
parent::__construct(
$this->getWidgetSlug(),
__('Widget Name', $this->getWidgetSlug()),
[
'classname' => $this->getWidgetSlug().'-class',
'description' => __('Short description of the widget goes here.', $this->getWidgetSlug()),
]
);
}
/**
* Return the widget slug.
*
* @return string slug variable
*/
public function getWidgetSlug()
{
return $this->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';
}
/**
* Updates the values of the widget. Uses the serialization class to sanitize the
* information before saving it.
*
* @param array $newInstance the values to be sanitized and saved
* @param array $oldInstance the values that were originally saved
*/
public function update($newInstance, $oldInstance)
{
return $this->widgetSerializer->update($newInstance, $oldInstance);
}
/**
* If the value for the key exists in the current instance of the widget, then it will
* retrieve it. Otherwise, it will return an empty value.
*
* @param string $key the used to identify the value of the widget
* @param array $instance the options for the instance of this widget
*/
protected function get($key, $instance)
{
return empty($instance[$key])? '': $instance[$key];
}
}
Ale jeśli odświeżysz stronę, możesz zauważyć, że oczyszczanie i serializacja nie działają podczas pobierania danych. I tym zajmiemy się w następnym poście.
Pobieranie danych
Zauważ, że chociaż funkcjonalność wydaje się niekompletna (ponieważ nieoczyszczone dane są nadal wyświetlane), skupiamy się na upewnieniu się, że piszemy klasy ze spójnością, odpowiedzialnością i nie są ściśle powiązane.
W następnym poście zajmiemy się tym nieco bardziej. Więc przestudiuj powyższy kod, zaimplementuj go, jeśli to właśnie robiłeś, a od tego przejdziemy w następnym poście.