Tipos de publicaciones de WordPress: la guía completa

Publicado: 2021-02-16

Si eres el tipo de desarrollador de WordPress que se preocupa mucho por el diseño y la organización, es hora de comprender completamente los tipos de publicaciones de WordPress.

Como bien sabes, no todos los sitios de WordPress son simples blogs. A menudo, los desarrolladores requieren más que las páginas y publicaciones simples y estándar. Deben poder agregar tipos de contenido completamente nuevos.

Pero, ¿cuál es la mejor manera de romper el techo de cristal del diseño y desarrollo de WordPress, sin dejar de ofrecer al usuario una gran experiencia de usuario?

La respuesta se encuentra en los tipos de publicaciones de WordPress y en los tipos de publicaciones personalizadas de WordPress.

Al aprender, comprender e implementar todo el potencial de los tipos de publicaciones de WordPress, convertirá su área de administración en un lugar emocionante, organizado y personalizado que es suyo.

Los tipos de publicaciones de WordPress permiten a los diseñadores organizar fácilmente el contenido al permitir la creación de nuevos depósitos para colocar sus tipos de contenido únicos.

Pero, ¿qué significa eso exactamente y por dónde empezar?

¿Qué puede hacer el uso de los tipos de publicaciones personalizadas de WordPress para la UX general de su sitio?

Vamos a averiguar.

¿Qué son los tipos de publicaciones de WordPress?

En la escala más básica, un tipo de publicación de WordPress funciona como las publicaciones y páginas familiares en su área de administración.

De forma predeterminada, el núcleo de WordPress alberga varios tipos de contenido diferentes que se dividen en tipos de publicaciones. Uno de estos tipos de contenido se llama publicación. Sin embargo, este es solo uno de los muchos tipos de publicaciones estándar en WordPress.

Cuando usa el núcleo de WordPress, vendrá automáticamente con los siguientes tipos de publicaciones, que se almacenan en la tabla wp_posts de su base de datos de WordPress:

  • Paginas
  • Publicaciones
  • Revisiones
  • Archivos adjuntos
  • CSS personalizado
  • Menús de navegación
  • Conjuntos de cambios

Cada uno de estos tipos de publicaciones tiene campos de título y editor, tal como está acostumbrado a las páginas y publicaciones normales.

Y cuando cree un tipo de publicación personalizada, que le mostraremos en esta guía, aparecerá dentro de su menú de administración de WordPress al igual que los tipos de publicación estándar de WordPress.

Una vez que haya implementado un tipo de publicación personalizada de WordPress, podrá agregarle contenido tal como lo hace cuando agrega un nuevo contenido de blog a la sección de publicaciones.

Sin embargo, con los tipos de publicaciones de WordPress, puede hacer que estos tipos de publicaciones hagan mucho más que las publicaciones y páginas estándar. También puede personalizar cómo la interfaz de su sitio muestra el contenido de su tipo de publicación a los usuarios del sitio.

Un nuevo tipo de publicación puede ser lo que quieras. Dependiendo del tema de su sitio, podrían ser cosas como:

  • Casas
  • Reseñas
  • Estudios de caso
  • Películas
  • Citas de inspiración
  • Etc.

La funcionalidad de tipo de publicación de WordPress hace posible cualquier nuevo tipo de contenido.

Por supuesto, hay complementos que lo ayudan a crear tipos de publicaciones de WordPress. Pero es posible que no necesariamente desee que un complemento tenga tanto control sobre el diseño y la funcionalidad de su sitio.

Si desea un control total sobre su diseño y UX, la mejor opción es codificar sus propios tipos de publicaciones personalizadas.

Sugeriremos un complemento más adelante en esta guía para aquellos de ustedes que prefieran esa opción para crear tipos de publicaciones personalizadas de WordPress.

Pero la mejor manera de registrarse, agregar o crear un tipo de publicación de WordPress es codificarlo directamente en el tema de su sitio. Esto se hace utilizando la función de tipo de publicación de registro de WordPress.

Al usar esta función, puede agregar contenido a su nuevo depósito de tipo de publicación inmediatamente y hacer que se muestre en su sitio.

Aún mejor, solo requerirá agregar cinco líneas de código para comenzar.

Una mirada a los tipos de publicaciones personalizadas de WordPress

Ahora que tiene un conocimiento básico de los tipos de publicaciones de WordPress y los tipos de publicaciones personalizadas, es hora de ensuciarse un poco las manos.

Para comenzar, siga estos pasos para crear un nuevo tipo de publicación:

  1. Inicie sesión en su área de administración.
  2. Abra su editor de código y el archivo functions.php de su tema.
  3. Agregue las cinco líneas de código que se muestran a continuación en la parte superior del archivo functions.php.
  4. Actualiza el navegador.
  5. Verifique el menú de administración de WordPress en Comentarios para el nuevo elemento de menú de tipo de publicación.
  6. Limpia tus enlaces permanentes.

Aquí está el código para agregar: 

<?php 
  add_action( 'init', function() {
    $label = 'Books';
    $type = 'book';
    register_post_type( $type, [ 'public' => true, 'label' => $label ] );
  });

Ahora debería tener un nuevo tipo de publicación.

Pero, ¿qué puedes hacer realmente con el nuevo tipo de publicación?

El poder de los tipos de publicaciones de WordPress y los tipos de publicaciones personalizadas de WordPress

Para profundizar realmente en los tipos de publicaciones, trabajemos con un ejemplo específico de creación de un nuevo sitio web de cartera que debe presentar una lista de estudios de casos.

Para ello, registraremos un nuevo tipo de publicación para gestionar cada uno de los casos de estudio.

Usando el tema predeterminado de Twenty Twenty WordPress, comenzaremos agregando nuestro tipo de publicación de estudio en el tema.

Primero, abra el archivo functions.php del tema Twenty Twenty en su editor de código. Aquí es donde escribirás tu código de tipo de publicación.

El nuevo tipo de publicación debe registrarse en la parte superior del archivo functions.php. Esto se hace con un gancho init WordPress usando add_action (). Cuando usa la función para register_post_type para agregar el tipo de publicación, no funcionará correctamente sin el gancho de inicio.

Luego, comience con tres argumentos para register_post_type:

  1. Público: esto significa configurar el tipo de publicación para que todos puedan acceder a ella.
  2. Descripción: no se usa mucho, pero es bueno tenerlo.
  3. Etiqueta: este es un argumento que ampliaremos un poco más adelante. 
<?php 
  add_action( 'init', function() {
    $type = 'study';
    $label = 'Studies';
    $arguments = [
        'public' => true, // Allow access to post type
        'description' => 'Case studies for portfolio.', // Add a description
        'label' => $label // Set the primary label
    ];
    register_post_type( $type, $arguments);
  });

Asegúrese de eliminar sus enlaces permanentes cada vez que complete un cambio.

Personalización de etiquetas de tipo de publicación

WordPress, de forma predeterminada, etiquetará el nuevo tipo de publicación como Publicar en todo el área de administración de su sitio. Pero es posible que desee que las etiquetas se marquen como el nuevo tipo de publicación llamada Estudio, no Publicación.

Para anular las etiquetas predeterminadas del tipo de publicación, deberá llamarlas manualmente.

Para configurar correctamente las etiquetas, cree una nueva función que compile etiquetas sin saturar su código de registro de tipo de publicación.

Simplemente agregue la siguiente función a su tema para que pueda usarse dentro del proceso de registro del tipo de publicación: 

<?php 
  function xcompile_post_type_labels($singular = 'Post', $plural = 'Posts') {
    $p_lower = strtolower($plural);
    $s_lower = strtolower($singular);

    return [
      'name' => $plural,
      'singular_name' => $singular,
      'add_new_item' => "New $singular",
      'edit_item' => "Edit $singular",
      'view_item' => "View $singular",
      'view_items' => "View $plural",
      'search_items' => "Search $plural",
      'not_found' => "No $p_lower found",
      'not_found_in_trash' => "No $p_lower found in trash",
      'parent_item_colon' => "Parent $singular",
      'all_items' => "All $plural",
      'archives' => "$singular Archives",
      'attributes' => "$singular Attributes",
      'insert_into_item' => "Insert into $s_lower",
      'uploaded_to_this_item' => "Uploaded to this $s_lower",
    ];
  }

Luego, en el código de registro, deberá llamar a la función que acabamos de crear, xcompile_post_type_labels (). Úselo para sus etiquetas, luego verifique su área de administración. 

<?php 
  add_action( 'init', function() {
    $type = 'study';

    // Call the function and save it to $labels
    $labels = xcompile_post_type_labels('Study', 'Studies');

    $arguments = [
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'labels' => $labels // Changed to labels
    ];
    register_post_type( $type, $arguments);
  });

¿Cómo va todo hasta ahora?

Icono de menú y posición para tipos de publicaciones personalizadas de WordPress

Desde que se introdujeron los WP Dashicons, se ha vuelto muy fácil agregar íconos de menú a los tipos de publicaciones.

Para lograr esto, primero establezca el argumento menu_icon en un nombre Dashicon. Para este ejemplo, usaremos el ícono del escritorio de la computadora usando value dashicons-desktop. 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    $arguments = [
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop', // Set icon
      'labels' => $labels
    ];
    register_post_type( $type, $arguments);
  });

Ahora, si desea cambiar la ubicación del elemento del menú, use el argumento menu_position. Este argumento tomará un valor que comienza con 0 y termina con 100. El valor elegido incluirá un elemento de menú más alto o más bajo en la base del menú, con un valor 0 en la parte superior y 100 en la parte inferior.

Ahora, deberíamos agregar una imagen destacada al nuevo tipo de publicación.

Cómo habilitar y deshabilitar la imagen destacada, el título y el editor

Para agregar o cambiar los campos del formulario de administración predeterminados para su tipo de publicación, como los campos Imagen destacada, Título y Editor, use un argumento de soporte establecido.

Hay muchas opciones que puede activar y desactivar utilizando el argumento de soporte de tipo de publicación. Son:

  • Campo de título
  • Editor
  • Cuadro de autor
  • Miniatura (imagen destacada)
  • Extracto
  • Trackbacks
  • Campos Personalizados
  • Comentarios
  • Revisiones
  • Atributos de página
  • Post-formatos

Para su nuevo tipo de publicación de estudio, puede anular las opciones predeterminadas de WordPress y agregar su propia imagen destacada aplicando la opción de miniatura.

Antes de hacer esto, asegúrese de haber habilitado la compatibilidad con temas para las miniaturas posteriores. Esto se hace usando la función add-theme-support.

Solo requiere unas pocas líneas de código adicionales para usar la función de soporte y habilitará la imagen destacada. 

<?php 
  // Add theme support for featured image / thumbnails
  add_theme_support('post-thumbnails');

  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'supports' => $supports, // Apply supports
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

No muchos diseñadores o desarrolladores de WordPress profundizan tanto en los tipos de publicaciones personalizadas de WordPress. Ahora es un buen momento para darse una palmadita en la espalda.

La jerarquía de los tipos de publicaciones personalizadas de WordPress

Si bien las publicaciones de WordPress no pueden tener publicaciones secundarias, las páginas sí. Un hijo de una página se considera una subpágina.

Si lo desea, puede hacer que los tipos de publicaciones personalizadas de WordPress usen una jerarquía como Pages mediante el uso del argumento jerárquico.

Para nuestro ejemplo de tipo de publicación de Estudios, no necesariamente necesitaríamos esto. Pero si lo necesita para su proyecto específico, este es el código que debe usar: 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'hierarchical' => false, // Do not use hierarchy
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Cómo habilitar la API REST para un nuevo tipo de publicación

La API REST cambió WordPress para siempre. Como tal, querrá que su nuevo tipo de publicación pueda acceder a todas las funciones más nuevas de WordPress, como Gutenberg.

Habilitar la API REST para los nuevos tipos de publicaciones personalizadas de WordPress es tan simple como establecer el argumento show_in_rest en verdadero.

Cuando la API REST está habilitada, su nuevo tipo de publicación comenzará a usar Gutenberg (si también es compatible con el editor). 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'show_in_rest' => true, // Enable the REST API
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Cuando habilita la API REST en WordPress, también podrá acceder al nuevo tipo de publicación como un objeto JSON a través de puntos finales específicos de WordPress.

Para ver el punto final para el tipo de publicación REST, use este / wp-json / wp / v2 / study.

Para cambiar el nombre base del tipo de publicación en la URL a estudios en lugar de estudiar, use el argumento rest_base. 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'rest_base' => 'studies', // Change the REST base
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Y así, la API está configurada y Gutenberg está habilitado en el tipo de publicación.

Cómo agregar Gutenberg a los tipos de publicaciones personalizadas de WordPress

Recuerde, Gutenberg no se puede habilitar para tipos de publicaciones personalizadas a menos que sea compatible con el editor y tenga habilitada la API REST.

Una vez habilitado, para agregar Gutenberg a su tipo de publicación, debemos olvidarnos de nuestro tipo de publicación de Estudio por un segundo y crear un nuevo tipo de publicación que llamaremos Artículo.

Usaremos el tipo de publicación Artículo para habilitar Gutenberg. 

<?php 
  add_action( 'init', function() {
    $type = 'article';
    $labels = xcompile_post_type_labels('Article', 'Articles');

    $arguments = [
      'rest_base' => 'articles',
      'show_in_rest' => true, // Required for Gutenberg
      'supports' => ['editor'], // Required for Gutenberg
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Notará que los dos argumentos que necesita para agregar Gutenberg son: 

'show_in_rest' => true,
'supports' => ['editor'],

Cómo eliminar Gutenberg de los tipos de publicaciones personalizadas de WordPress

Si desea eliminar Gutenberg de uno de sus tipos de publicaciones, simplemente agregue el gancho de acción use_block_editor_for_post_type en el archivo functions.php de su tema.

Esto se hace con el siguiente código: 

<?php 
add_filter('use_block_editor_for_post_type', function($enabled, $post_type) {

  // List of post types to remove
  $remove_gutenberg_from = ['study'];

  if (in_array($post_type, $remove_gutenberg_from)) {
    return false;
  }

  return $enabled;
  }, 10, 2);

Esto deshabilita por la fuerza a Gutenberg del tipo de publicación.

Tenga en cuenta que no todos los tipos de publicaciones personalizadas de WordPress deben estar habilitados con Gutenberg. Hay ocasiones en las que es posible que desee utilizar el editor clásico de WordPress con tipos de publicaciones.

La función de desactivación de Gutenberg también es útil cuando el tipo de publicación debe ser accesible desde la API REST.

En esos casos, deshabilitar Gutenberg es la dirección en la que querrá ir.

Habilitación de archivos y configuración de la interfaz

Finalmente llegamos al punto en el que es hora de abordar nuestro diseño de front-end de publicaciones personalizadas de WordPress.

Hay tres cosas que deberá hacer cuando desee configurar la lista de contenido de tipo de publicación personalizada de WordPress:

  1. Habilite el argumento has_archive.
  2. Establezca slug de reglas de reescritura en una forma plural de su nombre de tipo de publicación. En el caso del ejemplo de esta guía, sería necesario cambiarlo a "estudios".
  3. Limpia tus enlaces permanentes. 
<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'rewrite' => [ 'slug' => 'studies' ] // Change the archive page URL
      'has_archive' => true, // Enable archive page
      'rest_base' => 'studies',
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Con todo eso en su lugar, es hora de comenzar a diseñar el contenido de su tipo de publicación personalizada. Por ahora, usaremos el tema Twenty Twenty predeterminado. Por supuesto, puede utilizar cualquier tema que desee.

Plantilla de tipo de publicación personalizada de WordPress

Antes de crear la plantilla de nuestro tipo de publicación personalizada, veamos primero la jerarquía de plantillas de WordPress.

Si aún no está familiarizado con la forma en que WordPress trabaja con las plantillas, piense que es similar a la forma en que CSS maneja la especificidad. Si bien no es demasiado importante empantanarse en los detalles, esa simple analogía lo ayudará a comprender mejor la jerarquía de plantillas de WordPress.

Hay dos archivos de plantilla específicos a los que prestar atención dentro de la jerarquía de plantillas para nuestro nuevo tipo de publicación de estudio.

Son:

1. single-study.php - Esto es para la página única cuando un usuario navega a http://yourcoolsite.com/studies/your-cool-study-post para ver un solo estudio.

2. archive-study.php - Esto es para la página de archivo cuando un usuario navega a http://yourcoolsite.com/studies para ver una lista de todos los estudios.

WordPress utilizará, de forma predeterminada, las plantillas single.php y archive.php de su tema para el diseño frontal de tipos de publicaciones personalizadas. Sin embargo, cuando existe una plantilla específica para tipos de publicaciones personalizadas, single-study.php y archive-study.php anularán los valores predeterminados en WordPress.

Única página

Como usamos el tema predeterminado de WordPress Twenty Twenty en esta guía, primero necesitaremos crear el nombre de archivo single-study.php y trabajar con él.

En el archivo de plantilla de tipo de publicación única, agregue este bucle de WordPress: 

<?php
	/**
	 * The template for displaying single posts and pages.
	 *
	 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
	 *
	 * @package WordPress
	 * @subpackage Twenty_Twenty
	 * @since 1.0.0
	 */
	
	get_header();
	?>
	
	<main id="site-content" role="main">
	
	        <?php
	
	        if ( have_posts() ) {
	
	                while ( have_posts() ) {
	                        the_post();
	
	                }
	        }
	
	        ?>
	
	</main><!-- #site-content -->
	
	<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
	
	<?php get_footer(); ?>

Página de archivo

La página de archivo para el tipo de publicación utiliza exactamente el mismo proceso que la página única. La única diferencia es que utilizará la plantilla archive-study.php en lugar de single-study.php.

Para su página de archivo, querrá que se vincule a todos los estudios y solo muestre el título de "Estudio".

Por supuesto, siéntase libre de divertirse con este código: 

<?php
  /*
  Template Name: Archive-Study
  */
  get_header(); ?>

  <div id="container">
  	<div id="content" role="main">

  		<?php the_post(); ?>
  		<h1 class="entry-title"><?php the_title(); ?></h1>
  		
  		<?php get_search_form(); ?>
  		
  		<h2>Archives by Month:</h2>
  		<ul>
  			<?php wp_get_archives('type=monthly'); ?>
  		</ul>
  		
  		<h2>Archives by Subject:</h2>
  		<ul>
  			 <?php wp_list_categories(); ?>
  		</ul>

  	</div><!-- #content -->
  </div><!-- #container -->


  <?php get_footer(); ?>

Ahora que su página de archivo está perfectamente en su lugar, parece que ha terminado. Pero, ¿qué sucede si tiene cien o más estudios de caso?

Cómo modificar la consulta de la página de archivo

Las páginas de archivo solo mostrarán la cantidad de elementos que el administrador especifica en Configuración> Lectura. A menudo, no querrá que se aplique el mismo límite a los tipos de publicaciones personalizadas que a su blog principal o al feed de artículos.

Cuando desee eliminar el límite en su página de archivo, simplemente modifique la consulta principal usando el gancho pre_get_posts.

Una vez que esté enganchado a pre_get_posts, podrá acceder y modificar el objeto principal de WP_Query.

Para enumerar todos los estudios en su página de archivo, deberá:

  1. Utilice el gancho pre_get_posts.
  2. Detecta si el método is_main_query es el que ejecuta la consulta principal.
  3. Detecta si estás en la página de archivo del estudio usando is_post_type_archive.
  4. En la WP_Query principal, establezca posts_per_page en -1. Esto elimina todos los límites de números y enumera todo. 
<?php
  add_action('pre_get_posts', function( WP_Query $query ) {
    if($query->is_main_query() && $query->is_post_type_archive('study')) {
      $query->set('posts_per_page', -1);
    }
  });

Al usar el gancho pre_get_posts, está accediendo directamente a la consulta SQL que WordPress ya está ejecutando. La consulta le da acceso a publicaciones, páginas y sus tipos de publicaciones personalizadas sin escribir ningún SQL.

Eso es siempre una ventaja.

Uso de un complemento para tipos de publicaciones personalizadas de WordPress

Si no eres del tipo que profundiza en el código y prefieres crear y modificar tus tipos de publicaciones personalizadas con un complemento, la IU de tipo de publicación personalizada proporciona una interfaz fácil de usar para registrar y administrar tipos de publicaciones personalizadas (y taxonomías).

El complemento está altamente calificado y está configurado para funcionar con las versiones 5.5 y superiores de WordPress.

Ha sido probado hasta 5.6.

Uso de un generador para tipos de publicaciones personalizadas de WordPress

¿Quiere una forma realmente fácil de obtener su código para tipos de publicaciones personalizadas (o taxonomías)? Consulte GenerateWP. Puede utilizar GenerateWP para crear una amplia gama de código personalizado. También es bastante simple. Simplemente complete el formulario correcto y obtenga el código para copiar / pegar.

Incluso puede ver el seminario web de capacitación sobre tipos de publicaciones personalizadas de hace unos años que incluían GenerateWP. La buena noticia es que los tipos de publicaciones personalizadas han existido durante tanto tiempo que la capacitación sigue siendo relevante.

Los tipos de publicaciones de WordPress son su nuevo mejor amigo

Ya sea que esté trabajando con tipos de publicaciones de WordPress manualmente o con un complemento, es extremadamente importante que su sitio esté equipado con el mejor complemento de copia de seguridad de WordPress disponible.

La edición de código siempre tiene el potencial de causar conflictos que pueden enviar su sitio en una dirección que usted no pretendía.

En esos casos, BackupBuddy e iThemes Security, un poderoso complemento de seguridad de WordPress, vendrán al rescate y lo ayudarán a regresar al trabajo de manera segura.