WordPress-widgets: Refactoring, del 9
Även om det sista inlägget i den här refactoring-serien inte var otroligt långt, tycker jag att det var lite tätt. Det vill säga att det krävdes en hel del arbete för att få koden på en plats som vi lättare kan arbeta med den.
Men det är bara det: Allt arbete vi gjorde borde göra det lättare att gå vidare med resten av koden vi behöver skriva.
Och för att se till att vi drar nytta av det arbete och grunden vi har lagt hittills, kommer vi att avsluta serien med en uppsättning kortare, mer fokuserade artiklar som borde ta kortare tid att läsa, implementera och förstå vad vi gör med koden.
WordPress Widget Boilerplate: Refactoring del 9
Minns från förra inlägget:
Därefter fortsätter vi att bygga ut funktionalitet för det administrativa området för widgeten. Efter det kommer vi att rikta vår uppmärksamhet mot den offentliga sidan av widgeten samt serialiseringsfunktionalitet.
Och detta gör oss redo för exakt vart vi är på väg i det här inlägget. Vi kommer nämligen att skriva ett administrativt gränssnitt som låter oss:
- definiera en titel för widgeten,
- definiera textinnehåll för widgeten,
- och växla om vi vill visa titeln eller inte.
Det är inte tänkt att vara innovativt och det är inte heller tänkt att vara den typ av widget som någon annan kanske vill sälja. Istället är det tänkt att visa hur vi kan ta det vi har för att skapa något som liknar det vi redan har sett i WordPress och hur vi använder solida programmeringsmetoder.
Användargränssnittet: Ett första pass
Efter vårt arbete förra gången har vi en widget som visas i det administrativa området för WordPress och den kan till och med flyttas till en sidofält eller annat widgetiserat område; men det gör faktiskt ingenting.
För nu, låt oss gå vidare och lägga till tre element till användargränssnittet:
- lägg till en textinmatning för titeln på widgeten,
- inkludera ett textområdeselement för att visa vad som kan vara ett textstycke,
- och slutligen, lägg till en kryssruta för att växla titelinformationen.
För att göra detta måste vi redigera en fil i katalogen Views . Vi kommer nämligen att uppdatera filen Admin.php. Vi börjar med elementen exakt efter behov utan ovidkommande uppmärkning.
<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>Det kommer inte att ge mycket att titta på i front-end än, men det kommer oss närmare dit vi vill vara.
En klass för administratörer
Därefter vill vi se till att vi håller oss konsekventa med att upprätthålla en hög nivå av sammanhållning med våra klasser. Det betyder att vi inte behöver en enda klass för att göra allt för administration, visning och allt annat arbete som krävs av WordPress API.
För det ändamålet skapar vi en andra klass som heter WidgetAdmin i WordPress – katalogen och namnutrymmet.
I den här filen kommer vi att inkludera följande 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';
}
}
Sedan, i den ursprungliga koden för att instansiera vår widget, kommer vi att ändra den här raden :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new Widget('widget-name'));
}För att se ut så här :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new WidgetAdmin('widget-name'));
}Under de kommande artiklarna kommer detta att fortsätta att utvecklas, men som du kan se ser vi till att vi har en enda basklass av funktionalitet för att prata med WordPress och en klass specifikt för att rendera den administrativa formen.
Användargränssnittet: Ett andra pass
Slutligen, låt oss rensa upp formuläret så att det har lite mer solid UX som smälter in väl med WordPress administrationsområdet som helhet.
<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>Och uppdatera den så att den ser ut så här :
<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 -->Förutsatt att allt gick bra bör du nu se något som ser ut så här:
Och det är där vi ska sluta med de administrativa funktionerna för det här inlägget. Kom ihåg att du också kan spåra allt detta i utvecklargrenen på GitHub.
Sanering och serialisering
I nästa inlägg kommer vi att titta på vad som är nödvändigt för att sanera och serialisera (eller rengöra och spara) innehållet i vår widget.
Vi kommer också att se till att vi visar informationen i det administrativa området efter att informationen har sparats och hämtats.
Äntligen kommer arvet och klasssammanhållningen att fortsätta att utvecklas, men fokusera nu på det som tas upp i det här inlägget och sedan fortsätter vi i nästa artikel.