Tipos de publicaciones personalizadas de WordPress: llevándolo más lejos

En nuestra serie sobre tipos de publicaciones personalizadas de WordPress, hasta ahora hemos analizado la creación de un tipo de publicación personalizada utilizando un complemento y cómo crear un tipo de publicación personalizada manualmente escribiendo sus propios fragmentos de código personalizados. También analizamos cómo podría aplicar alguna configuración básica a sus tipos de publicaciones para que pueda manejarlas más fácilmente desde su administrador de WordPress. Si no has consultado estos artículos, ¡asegúrate de echar un vistazo!

En este artículo, vamos a dar un paso más allá al desarrollar nuestros tipos de publicaciones personalizadas creados anteriormente para ampliar su funcionalidad y facilidad de uso en nuestro sitio web. Si desea continuar, deberá crear los tipos de publicaciones personalizadas que creamos en nuestro artículo 'Crear tipos de publicaciones personalizadas de WordPress manualmente', así que asegúrese de haberlo hecho primero para que la siguiente información tenga sentido.

¡Empecemos!

Mostrar tipos de publicaciones personalizadas en cualquier lugar

Como habrás visto, creamos previamente un tipo de publicación personalizada para mostrar recetas en nuestro sitio web. Este es un ejemplo perfecto de una situación en la que los tipos de publicaciones personalizadas son una forma increíblemente útil de ampliar la funcionalidad de nuestro sitio web.

En nuestro ejemplo, pudimos mostrar nuestras publicaciones de Recetas al agregarlas al menú principal de nuestro sitio web. También configuramos una vista de archivo que enumeraba todas nuestras publicaciones relacionadas con Recetas. Estas son excelentes opciones para mostrar nuestros nuevos tipos de publicaciones personalizadas, pero ¿qué sucede cuando queremos mostrar este contenido en otro lugar de nuestro sitio web?

Uso de la función WP_Query para mostrar tipos de publicaciones personalizadas

Para mostrar nuestras nuevas publicaciones de Recetas en ubicaciones de nuestra elección en nuestro sitio web, usaremos la función WP_Query . En sus argumentos podemos encontrar post_types que se usarán en esta instancia ya que define qué tipos de publicaciones queremos consultar. Junto con esto, orderby los parámetros de publish y orden porque queremos mostrar las publicaciones de Recetas que tienen un estado publicado y ordenarlas por fecha descendente para mostrar primero la más reciente.

Imaginemos que queremos mostrar una lista de nuestras publicaciones de recetas en el pie de página de nuestro sitio web arriba de la información de derechos de autor. Para hacer esto, usaremos un fragmento de código que, en nuestro caso, debe insertarse en el archivo singular.php debajo del inicio del elemento <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

Estamos utilizando el tema predeterminado actual de WordPress Twenty Twenty en este ejemplo. Si usa un tema que no sea Twenty Twenty, debe editar el archivo que contiene el contenido del pie de página para su tema.

Con el código agregado, podemos abrir nuestro sitio web y deberíamos ver nuestras publicaciones de Recetas en nuestro pie de página.

El diseño y la apariencia de estas publicaciones en su pie de página se pueden diseñar para que se vean como desea usar CSS. El mejor lugar para agregar cualquier CSS es el archivo style.css que se encuentra debajo de la carpeta principal de su tema. Tenemos algunos CSS posibles que tal vez quieras usar a continuación.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Una vez que se haya guardado este CSS y se haya actualizado la página, debería ver el diseño de sus publicaciones de Recetas en el pie de página alterado para verse así:

La importancia de restablecer el bucle

Es posible que haya notado que después de definir los argumentos necesarios en el código, un ciclo de publicación comienza y termina con la función wp_reset_postdata() . El uso de esta función es muy importante y he aquí por qué.

Cuando WordPress crea un diseño de página, utiliza una variable global $post que funciona bien si solo hay un bucle en la página. Ahora que agregamos nuestro bucle personalizado, básicamente anulamos la variable global $post y, a menos que le digamos a WordPress que el bucle se restablece, se reanudará desde allí utilizando el tipo de publicación personalizada que definimos en nuestro bucle.

Veamos cómo funciona esto en la práctica haciendo eco del título de la publicación en el código anterior de esta manera:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Ahora, si actualizamos nuestra página en la interfaz de nuestro sitio web, vemos el título 'Publicación 1' debajo de nuestras recetas recientes.

Esto tiene sentido porque restablecemos el ciclo original con wp_reset_postdata(); función.

Ahora, comente wp_reset_postdata(); de su código. Notarás que the_title(); el código hará eco del título 'Receta 1' en lugar de 'Publicación 1'.

Tipos de publicaciones personalizadas: gestión adicional

Para personalizar aún más el comportamiento y la apariencia de nuestras publicaciones personalizadas, veremos algunas opciones que se pueden agregar como una extensión del código que usamos en nuestro artículo anterior para registrar nuestro tipo de publicación de 'recetas'.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Vamos a añadir algunos argumentos más para:

1. Cambiar el slug de URL de las recetas Tipo de publicación personalizada
2. Cambiar la posición del menú de administración del tipo de publicación personalizada
3. Cambiar el icono del menú

Cambiar el slug de URL de tipo de publicación personalizada

Si creamos una publicación de recetas y la nombramos 'Receta 1', la URL predeterminada de la publicación 'Receta 1' sería algo así como https://mycompanyname.com/recipes/recipe-1/ siempre que los enlaces permanentes estén configurados en ' Nombre de la publicación' en nuestra configuración de enlaces permanentes.

Si desea cambiar la forma en que aparece el tipo de publicación personalizada de recetas en la URL, puede usar el argumento de rewrite con su clave slug .

Como notamos en la URL, si se omite este argumento, el valor predeterminado sería la etiqueta "recetas" del tipo de publicación personalizada. Si queremos cambiar esto a my-home-recipes por ejemplo, tenemos que sobrescribirlo editando nuestro fragmento de código para que se vea así:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Ahora, si guarda los enlaces permanentes (descarga el caché de enlaces permanentes) y ve su receta nuevamente, su URL debe ser https://mycompanyname.com/my-home-recipes/recipe-1/

Tenga en cuenta que si cambia el slug, también tendrá que cambiar la URL del archivo de /recipes/ a /my-home-recipes/ en la página del menú principal.

Cambiar el posicionamiento del menú de tipos de publicaciones personalizadas

Si desea mover el menú Recetas a una posición diferente, puede usar el menu_position de esta manera:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Los valores que puede utilizar para este argumento son:

0: en la parte superior
5: debajo de las publicaciones
10: debajo de los medios
15: debajo de los enlaces
20: debajo de las páginas
25: debajo de los comentarios
60: debajo del primer espacio en el menú
65: debajo de los complementos
70: debajo de los usuarios
75 : abajo Herramientas
80: debajo de la configuración
100: debajo del segundo espacio en el menú

La siguiente captura de pantalla muestra la posición del menú cuando se ha agregado el menu_position 5 al argumento posición_del_menú.

Cambiar el icono de menú de tipo de publicación personalizada

Actualmente, el menú Recetas usa el ícono de publicaciones predeterminado. Sería un buen toque que tuviera su propio ícono único. Para lograr esto, podemos usar el argumento menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Para mostrar su propio ícono, puede insertar la URL completa de la ubicación de su ícono de menú (como se muestra en el código anterior) o usar la biblioteca de WordPress Dashicons agregando el nombre de la clase del ícono. Puedes ver los iconos con las clases correspondientes aquí.

Si, por ejemplo, elige el ícono de comida, lo agregaría a su código como este 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

El resultado final debería ser que el ícono que elijas aparezca en tu menú de Publicaciones personalizadas... ¡lo que ayudará a que tu Publicación personalizada se sienta, bueno, verdaderamente personalizada!

Otras lecturas

Crear tipos de publicaciones personalizadas de WordPress usando un complemento
Crear tipos de publicaciones personalizadas de WordPress manualmente
¡Cree tipos de publicaciones personalizadas de WordPress usando su propio complemento!

Conclusión

Esperamos que estos consejos realmente lo ayuden en su búsqueda para crear sus propios tipos de publicaciones personalizadas y, al hacerlo, le permitan mejorar aún más las funciones y el uso de su sitio web de WordPress. Al igual que con toda la codificación, es mejor tomarse un tiempo para jugar y ver cómo su nuevo código impacta en su sitio web. Construir sobre estos cimientos le permitirá abordar proyectos aún más complejos en los que se necesita una gran personalización.