Em seguida, continuaremos desenvolvendo a funcionalidade para a \u00e1rea administrativa do widget. Depois disso, voltaremos nossa aten\u00e7\u00e3o para o lado p\u00fablico do widget, bem como para a funcionalidade de serializa\u00e7\u00e3o.<\/p>\n<\/blockquote>\n
E isso nos prepara exatamente para onde estamos indo neste post em particular. Ou seja, vamos escrever um front-end administrativo que nos permite:<\/p>\n
- \n
- definir um t\u00edtulo para o widget,<\/li>\n
- definir o conte\u00fado de texto para o widget,<\/li>\n
- e alternar se queremos ou n\u00e3o mostrar o t\u00edtulo.<\/li>\n<\/ul>\n
N\u00e3o \u00e9 para ser inovador nem para ser o tipo de widget que qualquer outra pessoa pode querer vender. Em vez disso, pretende mostrar como podemos usar o que temos para criar algo semelhante ao que j\u00e1 vimos no WordPress e como empregamos pr\u00e1ticas s\u00f3lidas de programa\u00e7\u00e3o.<\/p>\n
A interface do usu\u00e1rio: uma primeira passagem<\/h3>\n
Depois do nosso \u00faltimo trabalho, temos um widget que aparece na \u00e1rea administrativa do WordPress e pode at\u00e9 ser movido para uma barra lateral ou outra \u00e1rea widgetizada; no entanto, ele realmente n\u00e3o faz nada.<\/p>\n
Por enquanto, vamos adicionar tr\u00eas elementos \u00e0 interface do usu\u00e1rio:<\/p>\n
- \n
- adicione uma entrada de texto para o t\u00edtulo do widget,<\/li>\n
- incluir um elemento textarea para exibir o que pode ser um par\u00e1grafo de texto,<\/li>\n
- e por \u00faltimo, adicione uma caixa de sele\u00e7\u00e3o para alternar as informa\u00e7\u00f5es do t\u00edtulo.<\/li>\n<\/ol>\n
Para fazer isso, precisaremos editar um arquivo no\u00a0 diret\u00f3rio Views<\/strong>. Ou seja, vamos atualizar o\u00a0 arquivo Admin.php<\/strong>. Come\u00e7aremos com os elementos<\/a> exatamente conforme necess\u00e1rio, sem marca\u00e7\u00e3o externa.<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\nAinda n\u00e3o ser\u00e1 muito para se olhar no front-end, mas est\u00e1 nos aproximando de onde queremos estar.<\/p>\n
Uma aula para administradores<\/h3>\n
Em seguida, queremos ter certeza de que estamos mantendo um alto n\u00edvel de coes\u00e3o com nossas classes. Isso significa que n\u00e3o precisamos de uma \u00fanica classe para fazer tudo para administra\u00e7\u00e3o, exibi\u00e7\u00e3o e todos os outros trabalhos exigidos pela API do WordPress.<\/p>\n
Para isso, criaremos uma segunda classe chamada WidgetAdmin<\/strong> no diret\u00f3rio e namespace do WordPress .<\/strong><\/p>\n
Neste arquivo, incluiremos o seguinte c\u00f3digo<\/a> :<\/p>\n
<?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin <tom@tommcfarlin.com>\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\n\/**\n * Manages the administrative functionality of the widget.\n *\/\nclass WidgetAdmin extends Widget\n{\n \/**\n * {@inheritdoc}\n *\/\n public function __construct($widgetSlug)\n {\n parent::__construct($widgetSlug);\n }\n\n \/**\n * Displays the administrative view of the form and includes the options\n * for the instance of the widget as arguments passed into the function.\n *\n * @param array $instance the options for the instance of this widget.\n *\/\n public function form($instance)\n {\n include plugin_dir_path(__FILE__).'Views\/Admin.php';\n }\n}\n<\/code><\/pre>\nEnt\u00e3o, no c\u00f3digo original para instanciar nosso widget, vamos alterar esta linha<\/a> :<\/p>\n
<?php\n\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new Widget('widget-name'));\n}<\/code><\/pre>\nPara ficar assim<\/a> :<\/p>\n
<?php\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new WidgetAdmin('widget-name'));\n}<\/code><\/pre>\nNos pr\u00f3ximos artigos, isso continuar\u00e1 a evoluir, mas, como voc\u00ea pode ver, estamos nos certificando de que temos uma \u00fanica classe base de funcionalidade para conversar com o WordPress e uma classe espec\u00edfica para renderizar o formul\u00e1rio administrativo.<\/p>\n
A interface do usu\u00e1rio: uma segunda passagem<\/h3>\n
Por fim, vamos limpar o formul\u00e1rio para que ele tenha um pouco mais de UX s\u00f3lido que combine bem com a \u00e1rea de administra\u00e7\u00e3o do WordPress como um todo.<\/p>\n
Pegue o seguinte c\u00f3digo<\/a> :<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\n
![\"Widgets](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160909-61e71613309d7.png\")
<\/a><\/p>\n