{"id":231693,"date":"2023-01-06T12:25:00","date_gmt":"2023-01-06T09:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231693"},"modified":"2022-12-25T21:37:49","modified_gmt":"2022-12-25T18:37:49","slug":"agregar-una-vista-personalizada-a-la-pantalla-todas-las-publicaciones","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregar-una-vista-personalizada-a-la-pantalla-todas-las-publicaciones\/","title":{"rendered":"Agregar una vista personalizada a la pantalla Todas las publicaciones"},"content":{"rendered":"\n<p><strong>TL; DR<\/strong>: voy a estar trabajando en una serie que analiza c\u00f3mo lograr una tarea \u00fatil con taxonom\u00edas, categor\u00edas probables, luego refactorizarlo en un complemento orientado a objetos que servir\u00e1 como un complemento de utilidad para taxonom\u00edas, en general .<\/p>\n<hr \/>\n<h3>Una breve historia de las publicaciones OOP<\/h3>\n<p>Hace alg\u00fan tiempo, hice <a href=\"https:\/\/tommcfarlin.com\/tag\/oop-fundamentals\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">una larga serie<\/a> sobre los principios de la programaci\u00f3n orientada a objetos (y trat\u00e9 de compartir una cantidad decente de c\u00f3mo lograr ciertas cosas dentro del contexto de WordPress).<\/p>\n<p>Tambi\u00e9n he escrito un mont\u00f3n de art\u00edculos sobre todo el paradigma a lo largo de los a\u00f1os para aquellos que est\u00e9n interesados \u200b\u200ben ponerse al d\u00eda con <a href=\"https:\/\/tommcfarlin.com\/tag\/object-oriented-programming\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algunos de esos art\u00edculos<\/a>.<\/p>\n<p>Y ser\u00eda negligente si no compartiera que <a href=\"https:\/\/twitter.com\/twigpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un buen amigo<\/a> m\u00edo tambi\u00e9n ha escrito literalmente un <a href=\"https:\/\/tommcfarlin.com\/object-oriented-programming-using-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">libro sobre el tema<\/a>.<\/p>\n<p>Y por lo tanto, como he estado pensando en varios temas sobre los que escribir (despu\u00e9s de tomarme un per\u00edodo de tiempo libre m\u00e1s largo de lo que hab\u00eda planeado), pens\u00e9 que podr\u00eda valer la pena hablar sobre cosas pr\u00e1cticas que podemos hacer con API y enlaces normales y luego refactorizar eso en un tipo de complemento de utilidad.<\/p>\n<h2>Agregar una vista personalizada<\/h2>\n<p>Para el prop\u00f3sito del trabajo que voy a compartir en esta demostraci\u00f3n, estoy usando lo siguiente:<\/p>\n<ul>\n<li><a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Local por Flywheel<\/a> con un <code>https:\/\/sandbox.local<\/code>dominio<\/li>\n<li><a href=\"https:\/\/www.tableplus.io\/download\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TablePlus<\/a> para el acceso a la base de datos<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Visual Studio Code<\/a> como mi IDE<\/li>\n<li>Y los <a href=\"https:\/\/github.com\/WebDevStudios\/php-coding-standards\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">est\u00e1ndares de codificaci\u00f3n PHP de WDS<\/a> para todo el PHP que ver\u00e1.<\/li>\n<\/ul>\n<p>Si desea seguir lo que estoy haciendo, use todo lo anterior (no s\u00e9 si compartir\u00e9 todo, pero si ve capturas de pantalla y fragmentos de c\u00f3digo, sabr\u00e1 de d\u00f3nde proviene ).<\/p>\n<p>Con eso, aqu\u00ed hay una breve digresi\u00f3n sobre <code>views<\/code>WordPress (y no es como Vistas en el 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> o <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>Vistas de WordPress<\/h3>\n<p>En el momento de escribir este art\u00edculo, no parece haber una declaraci\u00f3n clara y concisa sobre qu\u00e9 es una vista de WordPress. En cuanto al gancho disponible, tenemos <code>views_edit-post<\/code>.<\/p>\n<p>Entonces, si tomamos ese gancho en particular y lo que hace, tal vez algo como esto ser\u00eda suficiente:<\/p>\n<p>Una vista de WordPress es una p\u00e1gina donde podemos ver todas las publicaciones que se ajustan a un conjunto de criterios espec\u00edficos.<\/p>\n<p>Fuera de la caja, este criterio generalmente incluye publicaciones como:<\/p>\n<ul>\n<li>Publicado,<\/li>\n<li>Borradores,<\/li>\n<li>Basura,<\/li>\n<li>Programado,<\/li>\n<li>Y as\u00ed.<\/li>\n<\/ul>\n<p>Pero, \u00bfqu\u00e9 sucede si tiene otra publicaci\u00f3n que tiene otros criterios por los que desea filtrar? Claro, puede filtrar por el cuadro desplegable que est\u00e1 presente en la pantalla (por ejemplo, por categor\u00eda), y eso est\u00e1 bien, pero \u00bfqu\u00e9 sucede si desea usar un criterio personalizado para [cualquier motivo dado]?<\/p>\n<p>Por ejemplo, \u00bfqu\u00e9 sucede si no desea tener que hacer clic en un determinado elemento, luego filtrar y luego ver las publicaciones? En su lugar, \u00bfdesea ver un enlace a los criterios, la cantidad de publicaciones que se ajustan a los criterios y luego filtrar por ellos?<\/p>\n<p>Aqu\u00ed es donde entra en juego la capacidad de editar vistas.<\/p>\n<p>Y para los prop\u00f3sitos de esta publicaci\u00f3n, voy a cubrir c\u00f3mo introducir un nuevo ancla en la parte superior de la p\u00e1gina que enumerar\u00e1 la cantidad de publicaciones para una categor\u00eda espec\u00edfica.<\/p>\n<h3>\u00bfCu\u00e1l es nuestra opini\u00f3n?<\/h3>\n<p>En este caso, usaremos Sin categorizar porque una instalaci\u00f3n predeterminada ya tiene una publicaci\u00f3n sin categorizar disponible y podemos modificar f\u00e1cilmente ciertos cambios al respecto.<\/p>\n<p>Para hacer esto, vamos a escribir un correo electr\u00f3nico <code>mu-plugin<\/code>para que se coloque en el <code>mu-plugins<\/code>directorio. Si su instalaci\u00f3n no tiene uno, agregue el directorio y luego agregue <code>add-custom-view.php<\/code>al directorio:<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>A partir de ah\u00ed, el archivo de complemento inicial puede verse as\u00ed:<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Inicialmente, estamos haciendo lo siguiente:<\/p>\n<ol>\n<li>Establecer un espacio de nombres,<\/li>\n<li>Agregando un filtro,<\/li>\n<li>Luego, configure la funci\u00f3n que aceptar\u00e1 el conjunto predeterminado de <code>$views<\/code>y devolver\u00e1 la matriz de <code>$views<\/code>despu\u00e9s de que se hayan modificado.<\/li>\n<\/ol>\n<p>Entonces, \u00bfqu\u00e9 tenemos que hacer desde aqu\u00ed?<\/p>\n<h3>El conjunto de requisitos<\/h3>\n<p>Para lograr lo que queremos, necesitamos ser capaces de:<\/p>\n<ul>\n<li>Especifique el nombre de la categor\u00eda,<\/li>\n<li>Agregue el enlace a la categor\u00eda junto con la cantidad de publicaciones con esa categor\u00eda a la lista de vistas,<\/li>\n<li>La capacidad de determinar si estamos en la p\u00e1gina de categor\u00eda para dise\u00f1ar correctamente la lista<\/li>\n<li>La capacidad de filtrar por tipo de publicaci\u00f3n,<\/li>\n<li>Y una forma de probarlo.<\/li>\n<\/ul>\n<p>Todo lo anterior se cubrir\u00e1 en el c\u00f3digo m\u00e1s adelante en el art\u00edculo, pero el quinto paso requiere que cree manualmente una categor\u00eda para que podamos probar f\u00e1cilmente si el resto del c\u00f3digo funciona.<\/p>\n<p>As\u00ed que adelante y haz eso. La categor\u00eda puede tener cualquier nombre (utilic\u00e9 Categor\u00eda de muestra). Una vez hecho esto, escribamos el c\u00f3digo del resto del complemento.<\/p>\n<h4>Determinar nuestra vista<\/h4>\n<p>Primero, voy a compartir una funci\u00f3n que determinar\u00e1 en qu\u00e9 p\u00e1gina estamos y har\u00e1 una de dos cosas:<\/p>\n<ul>\n<li>Si estamos en una p\u00e1gina que tiene el mismo par\u00e1metro de cadena de consulta para el ID de nuestra categor\u00eda, proporcionar\u00e9 un nombre de clase; de lo contrario, devolveremos una cadena vac\u00eda.<\/li>\n<\/ul>\n<p>Para hacer esto, la funci\u00f3n debe:<\/p>\n<ol>\n<li>Aceptar un nombre de categor\u00eda,<\/li>\n<li>Inicializar una variable para atributos,<\/li>\n<li>Comparar las variables de cadena de consulta<\/li>\n<li>Determine si el nombre de la categor\u00eda y el ID de la categor\u00eda son iguales,<\/li>\n<li>Y devolver el valor adecuado, si no.<\/li>\n<\/ol>\n<p>As\u00ed es como se ve mi funci\u00f3n:<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Esto tambi\u00e9n podr\u00eda simplificarse con un operador ternario, pero para mantenerlo lo m\u00e1s legible posible, lo dejo como est\u00e1 por ahora.<\/p>\n<h4>Determinar el nombre de la categor\u00eda<\/h4>\n<p>Esta caracter\u00edstica en particular es realmente f\u00e1cil y, aunque estamos acostumbrados a recibir comentarios de los usuarios en gran parte de lo que hacemos, vamos a codificar este valor.<\/p>\n<p>Para hacer esto, simplemente almacenaremos esto en una variable que se pasa al resto del 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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Viste la variable pasada previamente a la funci\u00f3n anterior y ver\u00e1s que tambi\u00e9n se usa en la versi\u00f3n final del c\u00f3digo fuente.<\/p>\n<h4>Recuperar resultados de publicaciones con la categor\u00eda<\/h4>\n<p>Para ello, tenemos que hacer dos cosas:<\/p>\n<ol>\n<li>Recuperar todos los <code>object_id<\/code>registros que tienen el ID de esta categor\u00eda,<\/li>\n<li>Filtre el contenido que no es para estas publicaciones.<\/li>\n<\/ol>\n<p>Hay un par de cosas que quiero mencionar aqu\u00ed: Primero, usaremos la <code>get_cat_ID<\/code>funci\u00f3n que proporciona WordPress. Esto recupera el ID de la categor\u00eda en funci\u00f3n del nombre entrante.<\/p>\n<p>En segundo lugar, estoy usando dos funciones, una de las cuales es un bucle, para examinar el estado de publicaci\u00f3n de un elemento. Esta no es la manera m\u00e1s eficiente de hacer esto. En cambio, podr\u00edamos usar una consulta m\u00e1s elegante para recuperar solo publicaciones; sin embargo, la primera iteraci\u00f3n de esto est\u00e1 destinada a mostrar no solo c\u00f3mo hacer esto desde cero, sino tambi\u00e9n para una audiencia que puede no estar tan c\u00f3moda con otros aspectos de la escritura de c\u00f3digo.<\/p>\n<p>Con eso, as\u00ed es como obtenemos todos los registros en WordPress que est\u00e1n marcados como Sin categor\u00eda.<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Y con eso, tomamos los resultados y los enviamos a esta funci\u00f3n que devolver\u00e1 la cantidad de elementos que son solo publicaciones.<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Con eso, tenemos la mayor parte de lo que necesitamos para comenzar a armar nuestro ancla de vista.<\/p>\n<h4>Generar un ancla de vista<\/h4>\n<p>Ahora que tenemos todas las funciones necesarias para generar un ancla de vista, debemos juntarlas en lugar de <code>sprintf<\/code>para un formato de cadena seguro.<\/p>\n<p>El objetivo es generar un ancla que:<\/p>\n<ul>\n<li>Se parece al resto de las anclas,<\/li>\n<li>Muestra el n\u00famero de publicaciones,<\/li>\n<li>Est\u00e1 en negrita cada vez que est\u00e1s viendo dichas publicaciones.<\/li>\n<\/ul>\n<p>Para hacer esto, necesitamos crear el enlace y agregar los argumentos de cadena de consulta adecuados. Esto significa que configuraremos un enlace <code>edit.php<\/code>con argumentos para:<\/p>\n<ul>\n<li>el ID de la categor\u00eda,<\/li>\n<li>el tipo de publicaci\u00f3n de la publicaci\u00f3n,<\/li>\n<li>y todas las publicaciones que tienen esta categor\u00eda.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, tendremos que incluir:<\/p>\n<ul>\n<li>cualquier atributo para dise\u00f1ar el enlace,<\/li>\n<li>el nombre de la categor\u00eda,<\/li>\n<li>y solo el contenido de la publicaci\u00f3n <code>post_type<\/code>.<\/li>\n<\/ul>\n<p>Para ello, podemos utilizar la siguiente funci\u00f3n:<\/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=\"Agregar una vista personalizada a la pantalla Todas las publicaciones\" ><\/a><\/p>\n<p>Esto hace varias cosas:<\/p>\n<ol>\n<li>Acepta la matriz est\u00e1ndar de <code>$views<\/code>WordPress,<\/li>\n<li>Agrega nuestro ancla personalizada como se describe anteriormente,<\/li>\n<li>Lo empuja en la <code>$views<\/code>matriz,<\/li>\n<li>Lo devuelve a WordPress para renderizar.<\/li>\n<\/ol>\n<p>\u00a1Y eso es!<\/p>\n<h4>probandolo<\/h4>\n<p>Para probar esto, cargue su navegador y deber\u00eda ver un nuevo enlace Sin categor\u00eda junto al resto de los anclajes, como Todos, Publicado, M\u00edo, Papelera, Programado, etc.<\/p>\n<p>Despu\u00e9s de eso, cambie una categor\u00eda de publicaciones y elimine Sin categorizar, luego vuelva a visitar o actualice la p\u00e1gina Todas las publicaciones y ver\u00e1 que el enlace est\u00e1 activo y con estilo, seg\u00fan c\u00f3mo lo est\u00e9 viendo, e incluye la cantidad de publicaciones que est\u00e1n categorizadas. como tal, tambi\u00e9n.<\/p>\n<h2>Ahora, a GitHub<\/h2>\n<p>Cargu\u00e9 <a href=\"https:\/\/github.com\/tommcfarlin\/add-custom-view\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la primera iteraci\u00f3n de este complemento en GitHub<\/a> para que pueda descargarlo y colocarlo en su <code>mu-plugins<\/code>directorio para probarlo.<\/p>\n<p>En las pr\u00f3ximas publicaciones, me gustar\u00eda comenzar cambiando esto a un paradigma orientado a objetos, de modo que esos sean los cambios que se realizar\u00e1n en el complemento y el contenido que se incluir\u00e1 en futuras publicaciones.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con este mu-plugin, demuestro c\u00f3mo agregar una vista personalizada a la p\u00e1gina de Todas las publicaciones de WordPress en funci\u00f3n de una categor\u00eda espec\u00edfica.<\/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":[892,831,800,840,861],"tags":[1172],"class_list":["post-231693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-guia-para-principiantes","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=231693"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/158449"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=231693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=231693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=231693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}