Campos personalizados con ACF para contenido en WordPress

[ 25 abril 2023 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

dashboard editor

En un artículo anterior vimos cómo usar Campos personalizados en productos de WooCommerce con ACF. En este artículo haremos algo similar con un CPT, restringiendo los campos que aparecerán como parte del contenido y de esta forma tener el contenido bajo una estructura rígida.

Resultado Final

Al final obtendremos una serie de campos personalizados con ACF para ingresar el contenido de forma estructurada.

Generalidades

En un artículo anterior habíamos visto como crear un CPT de recetas, usaremos ese tipo de contenido para establecer el contenido con ACF.

La idea es que sólo se muestren los campos de ACF al editar o crear una receta y no el editor por defecto.

Para ocultar el editor del CPT de recetas usaremos el siguiente código, el cual quita el soporte de editor para el CPT llamado recetas_post_type

add_action( 'admin_init', 'dcms_hide_editor' );
function dcms_hide_editor() {
	remove_post_type_support('recetas_post_type', 'editor');
}

Creación del Grupo de Campos

Primero crearemos el grupo de campos con ACF relacionados con recetas, tal como se muestra en la siguiente imagen:

También establecemos reglas para que ese grupo de campos sólo se muestre en el CPT de recetas.

Mostrar el contenido en el front-end del sitio

Para mostrar el contenido en el front-end del sitio primero necesitaremos crear un archivo de acuerdo a la jerarquía de archivos de plantilla, para mostrar el detalle del contenido del CPT.

En nuestro caso el CPT esta registrado con el nombre recetas_post_type, además según la jerarquía de archivos, puedo basarme en el archivo single.php del tema para crear el archivo single-XXX.php, en donde XXX es el nombre del CPT, es decir, mi archivo sería:
single-recetas_post_type.php.

Es en este archivo single-recetas_post_type.php en donde agregaremos las funciones de ACF para mostrar los diferentes campos.

En el siguiente código se muestra un ejemplo de archivo para el tema StoreFront

<?php
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
            <h1><?= get_field('nombre_receta') ?></h1>

			<div class="imagen-receta">
			<?php
			$id_image = get_field( 'imagen_receta' );
			echo wp_get_attachment_image( $id_image, 'full', false, [ 'class' => 'img-recetas' ] );
			?>
        	</div>

			<div class="metadata-receta">
				<div>
					<strong>Dificultad:</strong>
					<?= get_field( 'dificultad_receta' ); ?>
				</div>
				<div>
					<strong>Tiempo:</strong>
					<?= get_field( 'tiempo_preparacion' ); ?> horas
				</div>
			</div>

			<div class="ingredientes-receta">
				<h2>Ingredientes:</h2>
				<?= get_field( 'ingredientes_receta' ); ?>
			</div>

			<div class="preparacion-receta">
				<h2>Preparación:</h2>
				<?= get_field( 'preparacion_receta' ); ?>
			</div>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
do_action( 'storefront_sidebar' );
get_footer();

 
Al consultar una receta se verá de la siguiente forma:

Conclusión

Como has podido comprobar, puedes dar una estructura fija a determinados tipos de contenido CPT en tu sitio web WordPress y de esta manera evitar que el usuario cambie la estructura y el diseño en cada nueva receta.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...