{"id":232083,"date":"2023-01-06T12:29:00","date_gmt":"2023-01-06T09:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232083"},"modified":"2022-11-10T07:32:04","modified_gmt":"2022-11-10T04:32:04","slug":"adicionar-uma-visualizacao-personalizada-a-tela-de-todas-as-postagens","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionar-uma-visualizacao-personalizada-a-tela-de-todas-as-postagens\/","title":{"rendered":"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens"},"content":{"rendered":"\n<p><strong>TL;DR<\/strong>: Vou trabalhar em uma s\u00e9rie que analisa como realizar uma tarefa \u00fatil com taxonomias, categorias prov\u00e1veis, e ent\u00e3o refator\u00e1-la em um plug-in orientado a objetos que servir\u00e1 como um plug-in utilit\u00e1rio para taxonomias, em geral .<\/p>\n<hr \/>\n<h3>Uma Breve Hist\u00f3ria das Postagens OOP<\/h3>\n<p>Algum tempo atr\u00e1s, fiz <a href=\"https:\/\/tommcfarlin.com\/tag\/oop-fundamentals\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uma longa s\u00e9rie<\/a> sobre os princ\u00edpios da programa\u00e7\u00e3o orientada a objetos (e tentei compartilhar uma boa quantidade de como alcan\u00e7ar certas coisas dentro do contexto do WordPress).<\/p>\n<p>Eu tamb\u00e9m escrevi v\u00e1rios artigos sobre todo o paradigma ao longo dos anos para aqueles que est\u00e3o interessados \u200b\u200bem atualizar <a href=\"https:\/\/tommcfarlin.com\/tag\/object-oriented-programming\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alguns desses artigos<\/a>.<\/p>\n<p>E eu seria negligente se n\u00e3o compartilhasse que <a href=\"https:\/\/twitter.com\/twigpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">um bom amigo<\/a> meu literalmente escreveu um <a href=\"https:\/\/tommcfarlin.com\/object-oriented-programming-using-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">livro sobre o assunto<\/a> tamb\u00e9m.<\/p>\n<p>E assim, como estive pensando em v\u00e1rios t\u00f3picos para escrever (depois de ter um per\u00edodo de tempo reconhecidamente mais longo do que o planejado), pensei que poderia valer a pena falar sobre coisas pr\u00e1ticas que podemos fazer com APIs e ganchos normais e, em seguida, refatore isso em um tipo de plugin utilit\u00e1rio.<\/p>\n<h2>Adicionar uma visualiza\u00e7\u00e3o personalizada<\/h2>\n<p>Para o prop\u00f3sito do trabalho que vou compartilhar nesta demonstra\u00e7\u00e3o, estou usando o seguinte:<\/p>\n<ul>\n<li><a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Local por Flywheel<\/a> com um <code>https:\/\/sandbox.local<\/code>dom\u00ednio<\/li>\n<li><a href=\"https:\/\/www.tableplus.io\/download\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TablePlus<\/a> para acesso ao banco de dados<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">C\u00f3digo do Visual Studio<\/a> como meu IDE<\/li>\n<li>E os <a href=\"https:\/\/github.com\/WebDevStudios\/php-coding-standards\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">padr\u00f5es de codifica\u00e7\u00e3o PHP do WDS<\/a> para todo o PHP que voc\u00ea ver\u00e1.<\/li>\n<\/ul>\n<p>Se voc\u00ea quiser acompanhar o que estou acontecendo, use todos os itens acima (n\u00e3o sei se compartilharei tudo, mas se voc\u00ea vir capturas de tela e trechos de c\u00f3digo, saber\u00e1 de onde vem ).<\/p>\n<p>Com isso, aqui est\u00e1 uma pequena digress\u00e3o <code>views<\/code>no WordPress (e n\u00e3o \u00e9 como Views no sentido de <a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">MVC<\/a> ou <a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93viewmodel\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">MVVM<\/a> ).<\/p>\n<h3>Visualiza\u00e7\u00f5es do WordPress<\/h3>\n<p>No momento da reda\u00e7\u00e3o deste artigo, n\u00e3o parece haver uma declara\u00e7\u00e3o clara e concisa sobre o que \u00e9 uma vis\u00e3o do WordPress. Em termos de gancho dispon\u00edvel, temos <code>views_edit-post<\/code>.<\/p>\n<p>Ent\u00e3o, se pegarmos esse gancho em particular e o que ele faz, talvez algo assim seja suficiente:<\/p>\n<p>Uma visualiza\u00e7\u00e3o do WordPress \u00e9 uma p\u00e1gina onde podemos visualizar todas as postagens que est\u00e3o em conformidade com um conjunto de crit\u00e9rios especificados.<\/p>\n<p>Fora da caixa, esse crit\u00e9rio geralmente inclui postagens como:<\/p>\n<ul>\n<li>Publicados,<\/li>\n<li>Rascunhos,<\/li>\n<li>Lixo,<\/li>\n<li>Agendado,<\/li>\n<li>E assim por diante.<\/li>\n<\/ul>\n<p>Mas e se voc\u00ea tiver outro post que tenha outros crit\u00e9rios pelos quais deseja filtrar? Claro, voc\u00ea pode filtrar pela caixa suspensa que est\u00e1 presente na tela (digamos, por categoria), e tudo bem, mas e se voc\u00ea quiser usar um crit\u00e9rio personalizado para [qualquer motivo]?<\/p>\n<p>Por exemplo, e se voc\u00ea n\u00e3o quiser clicar em um determinado elemento, filtrar e visualizar as postagens? Em vez disso, voc\u00ea deseja ver um link para os crit\u00e9rios, o n\u00famero de postagens que atendem aos crit\u00e9rios e depois filtrar por eles?<\/p>\n<p>\u00c9 aqui que a capacidade de editar visualiza\u00e7\u00f5es entra em jogo.<\/p>\n<p>E para os prop\u00f3sitos deste post, vou abordar como introduzir uma nova \u00e2ncora no topo da p\u00e1gina que listar\u00e1 o n\u00famero de posts para uma categoria espec\u00edfica.<\/p>\n<h3>Qual \u00e9 a nossa vis\u00e3o?<\/h3>\n<p>Nesse caso, usaremos Sem categoria porque uma instala\u00e7\u00e3o padr\u00e3o j\u00e1 possui uma postagem sem categoria dispon\u00edvel e podemos ajustar facilmente algumas altera\u00e7\u00f5es em torno disso.<\/p>\n<p>Para fazer isso, vamos escrever um <code>mu-plugin<\/code>para que ele seja colocado no <code>mu-plugins<\/code>diret\u00f3rio. Se sua instala\u00e7\u00e3o n\u00e3o tiver um, adicione o diret\u00f3rio e adicione <code>add-custom-view.php<\/code>ao diret\u00f3rio:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de802d2a6.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de802d2a6.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>A partir da\u00ed, o arquivo de plug-in inicial pode ser algo assim:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de83d7406.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de83d7406.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>Inicialmente, estamos fazendo o seguinte:<\/p>\n<ol>\n<li>Definindo um namespace,<\/li>\n<li>Adicionando um filtro,<\/li>\n<li>Em seguida, configurando a fun\u00e7\u00e3o que aceitar\u00e1 o conjunto padr\u00e3o de <code>$views<\/code>e retornar\u00e1 o array de <code>$views<\/code>depois que eles forem alterados.<\/li>\n<\/ol>\n<p>Ent\u00e3o, o que precisamos fazer a partir daqui?<\/p>\n<h3>O conjunto de requisitos<\/h3>\n<p>Para alcan\u00e7ar o que desejamos, precisamos ser capazes de:<\/p>\n<ul>\n<li>Especifique o nome da categoria,<\/li>\n<li>Adicione o link para a categoria junto com o n\u00famero de postagens com essa categoria na lista de visualiza\u00e7\u00f5es,<\/li>\n<li>A capacidade de determinar se estamos na p\u00e1gina da categoria para estilizar corretamente a lista<\/li>\n<li>A capacidade de filtrar por tipo de postagem,<\/li>\n<li>E uma forma de testar.<\/li>\n<\/ul>\n<p>Todos os itens acima ser\u00e3o abordados no c\u00f3digo posteriormente neste artigo, mas a quinta etapa exige que voc\u00ea crie manualmente uma categoria para que possamos testar facilmente se o restante do c\u00f3digo est\u00e1 funcionando.<\/p>\n<p>Ent\u00e3o v\u00e1 em frente e fa\u00e7a isso. A categoria pode ser nomeada qualquer coisa (eu usei Categoria de Amostra). Uma vez feito, vamos escrever o c\u00f3digo do resto do plugin.<\/p>\n<h4>Determinar nossa vis\u00e3o<\/h4>\n<p>Primeiro, vou compartilhar uma fun\u00e7\u00e3o que determinar\u00e1 em qual p\u00e1gina estamos e far\u00e1 uma das duas coisas:<\/p>\n<ul>\n<li>Se estivermos em uma p\u00e1gina que tenha o mesmo par\u00e2metro de string de consulta para o ID de nossa categoria, fornecerei um nome de classe; caso contr\u00e1rio, retornaremos uma string vazia.<\/li>\n<\/ul>\n<p>Para isso, a fun\u00e7\u00e3o deve:<\/p>\n<ol>\n<li>Aceite um nome de categoria,<\/li>\n<li>Inicialize uma vari\u00e1vel para atributos,<\/li>\n<li>Compare as vari\u00e1veis \u200b\u200bda string de consulta<\/li>\n<li>Determine se o nome da categoria e o ID da categoria s\u00e3o iguais,<\/li>\n<li>E retorne o valor adequado, se n\u00e3o.<\/li>\n<\/ol>\n<p>Esta \u00e9 a apar\u00eancia da minha fun\u00e7\u00e3o:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8684cf5.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8684cf5.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>Isso tamb\u00e9m pode ser simplificado com um operador tern\u00e1rio, mas para mant\u00ea-lo o mais leg\u00edvel poss\u00edvel, estou deixando-o como est\u00e1 por enquanto.<\/p>\n<h4>Determine o nome da categoria<\/h4>\n<p>Esse recurso espec\u00edfico \u00e9 realmente muito f\u00e1cil e, embora estejamos acostumados a receber informa\u00e7\u00f5es dos usu\u00e1rios em grande parte do que fazemos, vamos codificar esse valor.<\/p>\n<p>Para fazer isso, vamos simplesmente armazenar isso em uma vari\u00e1vel que \u00e9 passada pelo resto do c\u00f3digo.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8963b8b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8963b8b.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>Voc\u00ea viu a vari\u00e1vel anteriormente passada para a fun\u00e7\u00e3o acima e ver\u00e1 isso usado na vers\u00e3o final do c\u00f3digo-fonte tamb\u00e9m.<\/p>\n<h4>Recuperar resultados de postagens com a categoria<\/h4>\n<p>Para isso, precisamos fazer duas coisas:<\/p>\n<ol>\n<li>Recupere todos os <code>object_id<\/code>registros que possuem o ID desta categoria,<\/li>\n<li>Filtre o conte\u00fado que n\u00e3o \u00e9 para essas postagens.<\/li>\n<\/ol>\n<p>H\u00e1 algumas coisas que quero mencionar aqui: Primeiro, usaremos a <code>get_cat_ID<\/code>fun\u00e7\u00e3o que o WordPress fornece. Isso recupera o ID da categoria com base no nome de entrada.<\/p>\n<p>Em segundo lugar, estou usando duas fun\u00e7\u00f5es \u2013 uma das quais \u00e9 um loop \u2013 para examinar o status de postagem de um elemento. Esta n\u00e3o \u00e9 a maneira mais eficiente de fazer isso. Em vez disso, poder\u00edamos usar uma consulta mais elegante para recuperar apenas as postagens; no entanto, a primeira itera\u00e7\u00e3o disso destina-se a mostrar n\u00e3o apenas como fazer isso desde o in\u00edcio, mas tamb\u00e9m para um p\u00fablico que pode n\u00e3o estar t\u00e3o confort\u00e1vel com outros aspectos da escrita de c\u00f3digo.<\/p>\n<p>Com isso, veja como obtemos todos os registros no WordPress que est\u00e3o marcados como Sem categoria.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8c7738c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8c7738c.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>E com isso, pegamos os resultados e os enviamos para esta fun\u00e7\u00e3o que retornar\u00e1 a quantidade de elementos que s\u00e3o apenas posts.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8fa1d77.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de8fa1d77.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>Com isso, temos a maior parte do que precisamos para come\u00e7ar a montar nossa \u00e2ncora de vis\u00e3o.<\/p>\n<h4>Gerar uma \u00e2ncora de visualiza\u00e7\u00e3o<\/h4>\n<p>Agora que temos todas as fun\u00e7\u00f5es necess\u00e1rias para gerar uma \u00e2ncora de visualiza\u00e7\u00e3o, precisamos junt\u00e1-las no lugar de <code>sprintf<\/code>formata\u00e7\u00e3o segura de strings.<\/p>\n<p>O objetivo \u00e9 gerar uma \u00e2ncora que:<\/p>\n<ul>\n<li>Parece com o resto das \u00e2ncoras,<\/li>\n<li>Mostra o n\u00famero de postagens,<\/li>\n<li>Fica em negrito sempre que voc\u00ea est\u00e1 visualizando essas postagens.<\/li>\n<\/ul>\n<p>Para fazer isso, precisamos construir o link e adicionar os argumentos de string de consulta apropriados. Isso significa que vamos configurar um link para <code>edit.php<\/code>com argumentos para:<\/p>\n<ul>\n<li>o ID da categoria,<\/li>\n<li>o tipo de postagem de postagem,<\/li>\n<li>e todas as postagens que possuem essa categoria.<\/li>\n<\/ul>\n<p>Em seguida, precisaremos incluir:<\/p>\n<ul>\n<li>quaisquer atributos para estilizar o link,<\/li>\n<li>o nome da categoria,<\/li>\n<li>e apenas o conte\u00fado do post <code>post_type<\/code>.<\/li>\n<\/ul>\n<p>Para isso, podemos usar a seguinte fun\u00e7\u00e3o:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de92c2f38.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-158448-61e6de92c2f38.png\" alt=\"Adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 tela de todas as postagens\" ><\/a><\/p>\n<p>Isso faz v\u00e1rias coisas:<\/p>\n<ol>\n<li>Aceita a matriz padr\u00e3o <code>$views<\/code>do WordPress,<\/li>\n<li>Adiciona nossa \u00e2ncora personalizada conforme descrito acima,<\/li>\n<li>Empurra-o para a <code>$views<\/code>matriz,<\/li>\n<li>Retorna ao WordPress para renderizar.<\/li>\n<\/ol>\n<p>E \u00e9 isso!<\/p>\n<h4>Testando<\/h4>\n<p>Para testar isso, carregue seu navegador e voc\u00ea dever\u00e1 ver um novo link Sem categoria ao lado do restante das \u00e2ncoras, como Todos, Publicado, Meu, Lixo, Agendado, etc.<\/p>\n<p>Depois disso, altere uma categoria de postagens e remova Sem categoria e, em seguida, revisite ou atualize a p\u00e1gina Todas as postagens e voc\u00ea ver\u00e1 que o link est\u00e1 ativo e com estilo, dependendo de como voc\u00ea o est\u00e1 visualizando, e inclui o n\u00famero de postagens categorizadas como tal, tamb\u00e9m.<\/p>\n<h2>Agora, para o GitHub<\/h2>\n<p>Carreguei <a href=\"https:\/\/github.com\/tommcfarlin\/add-custom-view\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a primeira itera\u00e7\u00e3o deste plugin no GitHub<\/a> para que voc\u00ea possa baix\u00e1-lo e coloc\u00e1-lo em seu <code>mu-plugins<\/code>diret\u00f3rio para teste.<\/p>\n<p>Nos pr\u00f3ximos posts, eu gostaria de come\u00e7ar mudando isso para um paradigma orientado a objetos, ent\u00e3o essas s\u00e3o as mudan\u00e7as que est\u00e3o chegando ao plugin e o conte\u00fado que vem em posts futuros.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Com este mu-plugin, demonstro como adicionar uma visualiza\u00e7\u00e3o personalizada \u00e0 p\u00e1gina WordPress All Posts com base em uma categoria especificada.<\/p>\n","protected":false},"author":1,"featured_media":158449,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,837,806,846,867],"tags":[1170],"class_list":["post-232083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-guia-para-iniciantes","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232083"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/158449"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}