Cómo añadir un tipo de entrada personalizado con el tema Astra

El tema Astra es famoso por su flexibilidad. Además, puedes incluso utilizar astra_content_loop() para añadir tu contenido personalizado a cualquier tipo de entrada existente. Pero a veces, necesitas más. Por lo tanto, este documento le mostrará cómo crear un tipo de entrada personalizado que funciona perfectamente con el tema Astra.

Tal vez se pregunte por qué necesita Custom Post Type (CPT). Sencillamente, en algunas situaciones añadir contenido a los tipos de entrada y plantillas existentes no puede proporcionar el resultado necesario. Por lo tanto, usted tiene la opción de añadir un nuevo tipo de entrada y darle forma en función de sus necesidades.

Añadir un tipo de entrada personalizado (CPT)

Añadir CPT a su sitio web puede aportarle muchas ventajas. Por ejemplo, puede añadir un CPT con un diseño y una funcionalidad personalizados que lo hagan adecuado para contenidos no estándar. Además, cada CPT tiene una taxonomía personalizada que puede ayudarte a mejorar la organización de tus contenidos.

Para ilustrarlo, importaremos el archivo "Businessly" Starter Template y cree un CPT adicional llamado Sesiones. 

La plantilla que utilizaremos contiene una página de "Sesiones interactivas". Cada sesión tiene alguna información específica como fechas, anfitrión y ponente. Le mostraremos cómo crear un CPT que contenga estas opciones. Además, configuraremos la página "Sesiones Interactivas" como un archivo para mostrar Sesiones. 

Antes de empezar, asegúrate de que tienes tu tema Astra y tu Astra Tema Infantil conjunto. Además, puede importar el "Businessly" Starter Template a su sitio web. Si necesita ayuda para importar la plantilla, puede consulte este documento.

Ahora, vamos a mostrarle cómo registrar nuestras Sesiones CPT.

Registrar tipo de entrada personalizado

Puedes registrar tus custom post type y darles el nombre que quieras. Además, puedes añadir un número ilimitado de CPT a tu sitio web.

Para registrar un CPT es necesario añadir unas líneas de código al archivo funciones.php de tu tema Astra. El problema con esto es que tus CPTs serán eliminados con cada actualización del tema. Por esta razón, registraremos nuestro CPT en el archivo funciones.php del tema hijo Astra. Para explicarlo, el tema hijo mantendrá a salvo todos nuestros CPTs registrados y otros cambios al actualizar el tema Astra. Si todavía no tienes el tema hijo instalado, consulte este documento para obtener instrucciones sobre cómo hacerlo.

Ahora, para registrar su CPT siga estos pasos:

Primer paso - Inicie sesión en su sitio web y vaya a Panel de control > Apariencia > Editor de archivos de temas. Aquí, en la parte superior derecha de la pantalla, selecciona tu tema Astra Infantil;

Paso 2 - A continuación, en el Archivos temáticos haga clic en el botón funciones.php para abrir el archivo;

Paso 3 - Debajo del código existente en el archivo, añada lo siguiente:

// Custom post type function
function astra_custom_post_types() {
// Basic Session Post Type
register_post_type('session', array(
'public'    =>  true,
'rewrite'   =>  array('slug' => 'sessions'),
'labels'    =>  array(
'name'  =>  'Sessions',
'add_new_item'  =>  'Add New Session',
'edit_item' =>  'Edit Session',
'all_items' =>  'All Sessions',
'sinuglar_name' =>  'Session'
),
));
}
// Hooking up the function to the Astra Theme
add_action('init', 'astra_custom_post_types');

register_post_type es una función de WordPress que se utiliza para registrar tipos de entradas. Para usar esta función, solo tienes que pasarle dos argumentos: nombre de entrada personalizadoy un array de opciones de tipo de entrada. 

Además, puedes ampliar el código como necesites. Por ejemplo, algunos de los argumentos adicionales son:

• Añade el editor de bloques: 'show_in_rest' => true
• Añade el archivo CPT:'has_archive' => true
• Añade funciones al editor de entradas de CPT. En este ejemplo hemos añadido campo de título, editor, extracto, imagen destacada, revisiones y campos personalizados: 'supports' => array('title', 'editor', 'excerpt', 'thumbnail', 'revisions', 'custom-fields')
• dd icono a un elemento del menú de administración (dashicon) para su CPT. En nuestro ejemplo, elegimos un icono de calendario. Puede comprobar el lista de dashicons disponibles y utiliza el que necesites cambiando el nombre del icono: 'menu_icon' => 'dashicons-calendar'

Ahora, nuestro código CPT tiene este aspecto:

// Extended Session Post Type
register_post_type('session', array(
'public'    =>  true,
'has_archive'  =>  true,        
'supports'  =>  array('title', 'editor', 'excerpt', 'thumbnail', 'revisions', 'custom-fields'),
        	'show_in_rest'  =>  true,
'rewrite'   =>  array('slug' => 'sessions'),
'labels'    =>  array(
'name'  =>  'Sessions',
'add_new_item'  =>  'Add New Session',
'edit_item' =>  'Edit Session',
'all_items' =>  'All Sessions',
'sinuglar_name' =>  'Session'
),
'menu_icon' =>  'dashicons-calendar',
));

Además, la lista de etiquetas puede ampliarse si es necesario. Además, puede ampliar el código aún más añadiendo todos sus argumentos utilizando el $args variable. Aquí, usted usaría el siguiente código para registrar su CPT:

register_post_type( 'movies', $args );

Puede encontrar más detalles y la lista completa de opciones CPT disponibles aquí.

Ahora ha registrado su nuevo CPT y observará un nuevo elemento de menú correspondiente en el menú de su panel de control.

Actualizar la estructura del permalink

Si has creado y visitado un nuevo post de CPT, notarás que tu sitio web está mostrando una notificación de "Página no encontrada". Esto ha ocurrido porque la estructura de enlaces permanentes de WordPress de su sitio web no se actualizará automáticamente cuando registre su CPT. 
Por lo tanto, cada vez que añada un nuevo CPT, deberá actualizar usted mismo la estructura de enlaces permanentes. Para ello, vaya a Panel > Configuración > Enlaces permanentes. Aunque puedes cambiar tus permalinks aquí, no es necesario - simplemente haz clic en el botón "Guardar cambios".

Creación de una plantilla personalizada para su CPT y archivo

Una vez que hayas registrado tu CPT, es hora de comprobarlo en la parte frontal. Ahora, usted notará que se ve igual que sus mensajes regulares. La razón de esto es que no hemos añadido ninguna plantilla personalizada para este CPT. Por esta razón, WordPress está usando la plantilla por defecto localizada en el archivo single.php.

Además, si comprueba la página Archivo, se dará cuenta de que tiene el mismo aspecto que otras páginas de archivo de su sitio web. La razón es la misma.

Para crear sus plantillas personalizadas, siga estos pasos:

Primer paso - Acceda a la carpeta raíz de su sitio web y navegue hasta la carpeta de su tema Astra Child (la ruta por defecto es: /wp-content/themes/astra-child);

Paso 2 - Añada archivos separados para su puesto CPT y archivo. Tenga en cuenta que estos archivos deben ser nombrados en el formato exacto: 

• single-{cpt-name}.php
• archive-{cpt-name}.php

En consecuencia, nombraremos nuestros archivos CPT de sesión como:

• single-session.php
• archivo-session.php

Esto le proporcionará plantillas vacías que podrá construir como desee.

Paso 2b - Alternativamente, haga copias de los archivos originales si desea utilizar la plantilla Astra existente con algunas modificaciones. Aquí, puedes copiar los siguientes archivos de la carpeta de tu tema Astra (la ruta por defecto es: /wp-content/themes/astra-child):

• single.php
• archivo.php

Ahora añade estos archivos a tu carpeta Astra Child theme y renómbralos a: 

• single-session.php
• archivo-session.php

Esto le dará exactamente la misma plantilla que utilizan los archivos por defecto. Ahora puede modificar estos archivos y cambiar el aspecto de sus páginas CPT. 

Estas plantillas se aplicarán sólo a su CPT. Tenga en cuenta que estos archivos deben ser colocados en su carpeta Astra Niño. Por el contrario, si se colocan en la carpeta del tema Astra, la actualización del tema borrará los archivos CPT.

Actualizar el diseño del contenedor para su CPT

Aunque muchos ajustes del Personalizador de Astra se aplicarán a tus CPTs, cuando se trata de la disposición de los contenedores existen algunas limitaciones. 

Es decir, su CPT seguirá el diseño del contenedor del sitio web. Pero, si quieres establecer un diseño diferente para tu CPT necesitas añadir el siguiente código a tu archivo functions.php de Astra Child Theme: 

add_filter ( 'astra_get_content_layout', 'custom_post_type_content_layout'); // Update the container layout based on Custom Post Type. 

function custom_post_type_content_layout ( $layout ){ // Add your CPT instead of Session. If you want to use this layout for more than one CPT, you can add them all separating each CPT by coma (eg. 'session', 'events'). 

	if ( is_singular( array( 'session' ) ) ) { 
		$layout = 'boxed-container'; 
	} 
	return $layout; 
}

En el código anterior, debe especificar la opción de diseño que desea aplicar y los CPT a los que debe aplicarse. Puede utilizar los siguientes códigos para diferentes opciones de diseño:

• Ancho total / Estirado = 'page-builder'
• Ancho total / Contenido = 'plain-container'
• Contenido en caja = 'content-boxed-container'
• En caja = 'caja-contenedor'

Añadir barra lateral

De forma similar al diseño del contenedor, la configuración predeterminada del personalizador de la barra lateral se aplicará a sus CPT. 

Por lo tanto, para añadir una barra lateral a su CPT, debe establecer este valor por defecto para todo el sitio web:

Primer paso - Vaya a Panel de control > Apariencia > Personalizar > Barra lateral;

Paso 2 - En el menú desplegable "Diseño predeterminado", seleccione la opción "Barra lateral izquierda" o "Barra lateral derecha".

Añadir contenido CPT

Anteriormente, le mostramos cómo agregar soporte para el Editor de bloques (Gutenberg) a su CPT. Por lo tanto, puede agregar el contenido del post utilizando el editor de bloques fuera de la caja.

Por otra parte, si prefiere utilizar Elementor o Buiver Builder en su lugar, tendrá que habilitarlos para su CPT.

Para habilitar Elementor para CPT, siga estos pasos:

Primer paso - Ve a Panel de control > Elementor > Configuración y haz clic en la pestaña "General";

Paso 2 - En "Post Types" marque los CPTs que desea editar con Elementor. Haga clic en el botón "Guardar cambios".

Para habilitar Beaver Builder para CPT, siga estos pasos:

Primer paso - Vaya a Panel de control > Configuración > Beaver Builder;

Paso 2 - Haga clic en la opción "Post Types" y marque los CPT que desea editar con Beaver Builder. Haga clic en el botón "Guardar tipos de puesto".

Lazo Astra

La opción alternativa a añadir un CPT es utilizar la función astra_content_loop(). Puede utilizar esta opción para añadir un contenido de plantilla CPT a los tipos de entrada existentes en lugar de crear un nuevo tipo de entrada personalizado. 
Para ello, debes añadir este código al archivo functions.php del Astra Child Theme:

function add_cpt_content() {
    // bail if this current post type is different.
    if ( 'cpt' !== get_post_type() ) {
        return;
    }
    ?>
    <!-- Your custom HTML markup here -->
    <p>My custom theme HTML</p>	
    <?php
}

add_action( 'astra_entry_content_before', 'add_cpt_content' );

Además, si añades tu código utilizando este método, cualquier cambio futuro en la plantilla realizado por Astra them no influirá en el contenido CPT que hayas añadido. Por lo tanto, no será necesario que actualices manualmente tu contenido.