Em seguida, veremos a renderiza\u00e7\u00e3o de conte\u00fado no front-end. Estamos chegando ao fim da refatora\u00e7\u00e3o do Boilerplate, mas h\u00e1 um pouco mais a fazer antes de estarmos prontos para merge-lo no branch master da base de c\u00f3digo.<\/p>\n<\/blockquote>\n
Ent\u00e3o, neste post, vamos pegar l\u00e1. Agora, se voc\u00ea est\u00e1 acompanhando at\u00e9 este ponto, deve ter tudo o que precisa do branch de desenvolvimento.<\/p>\n
Se n\u00e3o, certifique-se de pux\u00e1-lo, pois \u00e9 a\u00ed que vamos pegar no restante do post.<\/p>\n
The WordPress Widget Boilerplate: Refatorando Parte 12<\/h2>\n
Agora, quando se trata do front-end, \u00e9 f\u00e1cil pensar no front-end como qualquer coisa que o usu\u00e1rio v\u00ea diante dele, independentemente de estar na \u00e1rea administrativa ou n\u00e3o.<\/p>\n
No entanto, esta s\u00e9rie deixou claro que estamos dividindo o que o usu\u00e1rio v\u00ea entre a \u00e1rea administrativa e a \u00e1rea p\u00fablica do site.<\/p>\n
Ent\u00e3o o que vamos fazer \u00e9 trabalhar na \u00e1rea do c\u00f3digo que renderiza informa\u00e7\u00f5es para o usu\u00e1rio na \u00e1rea p\u00fablica do site. Vamos come\u00e7ar simplesmente lendo as informa\u00e7\u00f5es e exibindo-as.<\/p>\n
Ent\u00e3o, na pr\u00f3xima postagem, veremos como trabalhar com l\u00f3gica condicional em rela\u00e7\u00e3o a algumas das op\u00e7\u00f5es para ver se h\u00e1 algo que precisamos fazer.<\/p>\n
Dito isso, vamos para o c\u00f3digo.<\/p>\n
Sobre os dados que exibiremos<\/h3>\n
Lembre-se, o widget, neste momento, tem tr\u00eas coisas que influenciam sua exibi\u00e7\u00e3o:<\/p>\n
- \n
- o t\u00edtulo do widget,<\/li>\n
- o conte\u00fado do widget,<\/li>\n
- uma altern\u00e2ncia sobre se devemos ou n\u00e3o exibir o t\u00edtulo<\/li>\n<\/ol>\n
A terceira op\u00e7\u00e3o \u00e9 principalmente mostrar como usar um tipo diferente de elemento. Porque, tecnicamente, se n\u00e3o quis\u00e9ssemos mostrar o t\u00edtulo do widget, n\u00e3o colocar\u00edamos nada no widget.<\/p>\n
Mas acho que ajuda a mostrar o uso de diferentes tipos de elementos e seus valores de maneira pr\u00e1tica (ou semi-pr\u00e1tica).<\/p>\n
De qualquer forma, com isso dito, sabemos que para cada inst\u00e2ncia do widget, os dados s\u00e3o armazenados com o t\u00edtulo<\/strong>, conte\u00fado<\/strong> e\u00a0 nome de t\u00edtulo de exibi\u00e7\u00e3o<\/strong> e IDs fornecidos pelo WordPress.<\/p>\n
Assim, usaremos aqueles em nosso c\u00f3digo front-end para exibir os valores.<\/p>\n
Preparando as fun\u00e7\u00f5es de exibi\u00e7\u00e3o<\/h3>\n
Normalmente, a\u00a0 fun\u00e7\u00e3o de widget<\/strong> \u00e9 respons\u00e1vel por exibir a sa\u00edda do widget. Mas uma das coisas que estamos tentando fazer \u00e9 separar as preocupa\u00e7\u00f5es do nosso widget em um conjunto mais focado de classes e fun\u00e7\u00f5es.<\/p>\n
A primeira coisa que queremos fazer \u00e9 escrever uma\u00a0 classe WidgetDisplay<\/strong> que ser\u00e1 respons\u00e1vel por, como \u00e9 evidente, exibir o conte\u00fado do widget.<\/p>\n
Por enquanto, isso incluir\u00e1 incondicionalmente o t\u00edtulo, o conte\u00fado e o valor de incluir ou n\u00e3o o t\u00edtulo. O WordPress tamb\u00e9m disponibiliza certos conte\u00fados, como marca\u00e7\u00e3o, que devem aparecer antes e depois do widget, ent\u00e3o vamos incluir isso tamb\u00e9m.<\/p>\n
Mas primeiro, vamos apagar a classe<\/a> :<\/p>\n
<?php\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\nclass WidgetDisplay\n{\n private $widgetSlug;\n\n public function __construct(string $widgetSlug)\n {\n $this->widgetSlug = $widgetSlug;\n }\n\n public function show($args, $instance)\n {\n \/\/ More to come\n }\n}\n<\/code><\/pre>\nDepois disso, precisamos ter certeza de que estamos escrevendo para as outras classes tamb\u00e9m. Primeiro, vamos inclu\u00ed -lo em nossa classe Widget<\/a> :<\/p>\n
<?php\npublic function widget($args, $instance)\n{\n return $this->widgetDisplay->show($args, $instance);\n}<\/code><\/pre>\nE ent\u00e3o vamos adicion\u00e1-lo \u00e0 classe WidgetAdmin<\/a> (j\u00e1 que \u00e9 onde residem as principais fun\u00e7\u00f5es da API do Widget \u2013 ele apenas delega a responsabilidade \u00e0 classe apropriada):<\/p>\n
<?php\n\npublic function __construct($widgetSlug)\n{\n parent::__construct($widgetSlug);\n $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());\n $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());\n}<\/code><\/pre>\nNeste ponto, ainda n\u00e3o estamos exibindo nada. Estamos perto e vamos focar nisso em breve.<\/p>\n
Exibindo os dados<\/h3>\n
Supondo que voc\u00ea possa adicionar o c\u00f3digo acima sem erros, \u00e9 hora de exibir o conte\u00fado do widget.<\/p>\n
Podemos fazer isso de v\u00e1rias maneiras, desde um simples var_dump<\/strong> at\u00e9 realmente trabalhar para exibir o conte\u00fado de uma maneira mais amig\u00e1vel. E eu sou muito mais f\u00e3 deste \u00faltimo.<\/p>\n
Ent\u00e3o vamos fazer isso.<\/p>\n
Na\u00a0 fun\u00e7\u00e3o show<\/strong> da sua\u00a0 classe WidgetDisplay<\/strong>, adicione o seguinte c\u00f3digo<\/a> :<\/p>\n
<?php\npublic function show($args, $instance)\n{\n include_once 'Views\/Widget.php';\n}<\/code><\/pre>\n
![\"Widgets](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160763-61e7125f80aab.png\")
<\/a><\/p>\n