Banner para las páginas secundarias, el cual tiene un título, un parágrafo y una imagen.
- Creamos en el cms los campos personalizados
- Llenamos la información correspondiente a los mismos en la página en la cual deben estar asociados.
- creamos el componente php en este caso banner-internal.php: Aquí vamos a definir primero la clase name la cual le asignamos el nombre principal del campo personalizado “banner-internal” luego con esta clase asignamos la clase principal del componente. Obtenemos los datos del campo principal con la función get_field(), si existen datos creamos la sección del componente, recorremos los datos del campo y con la función get_sub_field() obtenemos los datos de título, párrafo e imagen. Estos son renderizados usando las etiquetas que corresponden para cada caso.
1. Imagen de Fondo:Esta es la imagen que se utiliza como fondo del banner. Puede ser una fotografía, ilustración o gráfico relevante que complemente el propósito del banner y agregue un elemento visual atractivo.
2. Título:El título es un texto breve y hace referencia en este caso al nombre de la página en cuestión
3. Párrafo: El párrafo proporciona información adicional o detalles sobre el propósito del banner. Puede ser un texto descriptivo que complemente el título y puede estar o no en el componente.
Nota: el componente debe estar asociado al template de la página en cuestión.
Campos Personalizados
Internal banner
internal-banner
Layout/Group
Image
internal-banner__image
Content/Image
Title
internal-banner__title
Basic/Text
Paragraph
internal-banner__paragraph
Basic/Text Area
Archivos Usados
1.
banner-internal
PHP
wp-content/themes/depura_theme/components/banner-internal.php
Component
banner-internal
PHP
wp-content/themes/depura_theme/components/banner-internal.php
Component
<?php
/*
Internal banner banner-internal
Group
---------------------------------------
Title banner-internal__title
text
-----------------------------------
Paragraph banner-internal__paragraph
TextArea
-----------------------------------
*/
$class_name = 'banner-internal';
$internal_banner = get_field($class_name);
if ($internal_banner) : ?>
<section class="<?php echo $class_name; ?> p-0 co-white fade-in">
<?php
while (have_rows($class_name)) : the_row();
$image = get_sub_field($class_name . '__image');
$title = get_sub_field($class_name . '__title');
$paragraph = get_sub_field($class_name . '__paragraph');
?>
<figure class="<?php echo $class_name ?>__imagen m-0">
<img class="m-0 w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']) ?>">
</figure>
<div class="<?php echo $class_name ?>__decorated m-0 position-absolute w-100 h-100 top-0">
<div class="<?php echo $class_name ?>-content p-0 m-0">
<?php if ($title) : ?>
<h2 class="<?php echo $class_name ?>-content__title mb-4">
<?php echo $title; ?>
</h2>
<?php endif;
if ($paragraph) : ?>
<p class="<?php echo $class_name ?>-content__paragraph m-0">
<?php echo $paragraph; ?>
</p>
<?php endif ?>
</div>
</div>
<?php endwhile; ?>
</section>
<?php endif; ?>
2.
_banner-internal
SCSS
wp-content/themes/depura_theme/frontend/scss/theme/components/_banner-internal.scss
Block
_banner-internal
SCSS
wp-content/themes/depura_theme/frontend/scss/theme/components/_banner-internal.scss
Block