Widgets do WordPress: Refatoração, Parte 12
No que diz respeito à refatoração do WordPress Widget Boilerplate – especialmente considerando o quão longe chegamos desde que o projeto começou há oito anos – fizemos muito trabalho.
Nós o trouxemos para um padrão muito mais moderno e estamos tornando muito mais fácil trabalhar com ele, de modo que construir widgets futuros deve ser mais fácil. E isso não é apenas do padrão do clichê, mas de um padrão orientado a objetos para que a manutenção e a qualidade do código sejam maiores.
No último post, encerramos grande parte do trabalho da área de administração e estamos prontos para começar nosso trabalho de código para o front-end.
Nós dissemos:
Em seguida, veremos a renderização de conteúdo no front-end. Estamos chegando ao fim da refatoração do Boilerplate, mas há um pouco mais a fazer antes de estarmos prontos para merge-lo no branch master da base de código.
Então, neste post, vamos pegar lá. Agora, se você está acompanhando até este ponto, deve ter tudo o que precisa do branch de desenvolvimento.
Se não, certifique-se de puxá-lo, pois é aí que vamos pegar no restante do post.
The WordPress Widget Boilerplate: Refatorando Parte 12
Agora, quando se trata do front-end, é fácil pensar no front-end como qualquer coisa que o usuário vê diante dele, independentemente de estar na área administrativa ou não.
No entanto, esta série deixou claro que estamos dividindo o que o usuário vê entre a área administrativa e a área pública do site.
Então o que vamos fazer é trabalhar na área do código que renderiza informações para o usuário na área pública do site. Vamos começar simplesmente lendo as informações e exibindo-as.
Então, na próxima postagem, veremos como trabalhar com lógica condicional em relação a algumas das opções para ver se há algo que precisamos fazer.
Dito isso, vamos para o código.
Sobre os dados que exibiremos
Lembre-se, o widget, neste momento, tem três coisas que influenciam sua exibição:
- o título do widget,
- o conteúdo do widget,
- uma alternância sobre se devemos ou não exibir o título
A terceira opção é principalmente mostrar como usar um tipo diferente de elemento. Porque, tecnicamente, se não quiséssemos mostrar o título do widget, não colocaríamos nada no widget.
Mas acho que ajuda a mostrar o uso de diferentes tipos de elementos e seus valores de maneira prática (ou semi-prática).
De qualquer forma, com isso dito, sabemos que para cada instância do widget, os dados são armazenados com o título, conteúdo e nome de título de exibição e IDs fornecidos pelo WordPress.
Assim, usaremos aqueles em nosso código front-end para exibir os valores.
Preparando as funções de exibição
Normalmente, a função de widget é responsável por exibir a saída do widget. Mas uma das coisas que estamos tentando fazer é separar as preocupações do nosso widget em um conjunto mais focado de classes e funções.
A primeira coisa que queremos fazer é escrever uma classe WidgetDisplay que será responsável por, como é evidente, exibir o conteúdo do widget.
Por enquanto, isso incluirá incondicionalmente o título, o conteúdo e o valor de incluir ou não o título. O WordPress também disponibiliza certos conteúdos, como marcação, que devem aparecer antes e depois do widget, então vamos incluir isso também.
Mas primeiro, vamos apagar a classe :
<?php
namespace WordPressWidgetBoilerplateWordPress;
class WidgetDisplay
{
private $widgetSlug;
public function __construct(string $widgetSlug)
{
$this->widgetSlug = $widgetSlug;
}
public function show($args, $instance)
{
// More to come
}
}
Depois disso, precisamos ter certeza de que estamos escrevendo para as outras classes também. Primeiro, vamos incluí -lo em nossa classe Widget :
<?php
public function widget($args, $instance)
{
return $this->widgetDisplay->show($args, $instance);
}E então vamos adicioná-lo à classe WidgetAdmin (já que é onde residem as principais funções da API do Widget – ele apenas delega a responsabilidade à classe apropriada):
<?php
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
$this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());
$this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());
}Neste ponto, ainda não estamos exibindo nada. Estamos perto e vamos focar nisso em breve.
Exibindo os dados
Supondo que você possa adicionar o código acima sem erros, é hora de exibir o conteúdo do widget.
Podemos fazer isso de várias maneiras, desde um simples var_dump até realmente trabalhar para exibir o conteúdo de uma maneira mais amigável. E eu sou muito mais fã deste último.
Então vamos fazer isso.
Na função show da sua classe WidgetDisplay, adicione o seguinte código :
<?php
public function show($args, $instance)
{
include_once 'Views/Widget.php';
}E então a visualização do modelo pode ser tão simples quanto isto :
<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']; ?>-->Isso garantirá que a marcação adequada para todo o conteúdo anterior ao widget, o conteúdo do widget e o conteúdo sejam renderizados corretamente.
Novamente, lembre-se de que estamos exibindo alguns conteúdos que não estarão na versão final, mas estamos chegando perto e abordaremos isso no próximo post.
Eu recomendo brincar com a opção Exibir título para ver como ele é renderizado no front-end, considerando a marcação que fornecemos.
Por enquanto, a saída do widget deve ser algo assim:
Mas isso é tudo que há para cobrir neste post.
Na refatoração final
A última coisa que vamos ver depois disso é reforçar um pouco da lógica condicional junto com uma palavra sobre cache de dados (já que já estamos fazendo um pouco disso em posts anteriores).
Por enquanto, fique à vontade para brincar com o que temos aqui junto com o código que não incluímos (como o que pode ser exibido antes ou depois do widget.
Eles foram deliberadamente deixados de fora deste exemplo, mas nem sempre podem ser deixados de fora, dependendo do trabalho que você está fazendo.