Creación del template.php


<?php
/**
 * Template for block: Box Images
 */

$bi_image = get_field('bi_image');
$bi_title = get_field('bi_title');
$bi_subtitle = get_field('bi_subtitle');
$bi_p = get_field('bi_p');
$bi_text_b = get_field('bi_text_b');
$bi_link_b = get_field('bi_link_b');
?>

<section class="section-box-image" style="background-image: url(<?php echo esc_attr($bi_image); ?>)">
    
    <div class="container">
        <div class="box-image-info">
            <h1><?php echo esc_html($bi_title); ?></h1>
            <h2><?php echo esc_html($bi_subtitle); ?></h2>
            <p><?php echo esc_html($bi_p); ?></p>
            <?php
            if($bi_text_b != ''):
            ?>
            <div class="tagcloud">
                <a class="btn btn-outline-dark" href="<?php echo esc_attr($bi_link_b); ?>"><?php echo esc_html($bi_text_b); ?></a>
            </div>
            <?php endif; ?>
        </div>
    </div>
    
</section>

1. Extracción y Preparación de Datos

Al comienzo del archivo, el código PHP utiliza la función get_field() para extraer los valores de los campos de ACF que has creado (como bi_image, bi_title, bi_p, etc.). Cada uno de estos valores se guarda en una variable PHP local (por ejemplo, $bi_image, $bi_title). Esta etapa asegura que todos los datos necesarios para la presentación estén listos.

2. Estructura Principal y Fondo de Imagen

El bloque comienza a construir el HTML con la etiqueta <section>, que usa la clase section-box-image. Es importante destacar cómo se maneja la imagen:

El valor de la URL de la imagen guardado en $bi_image se inserta directamente en el atributo style como una imagen de fondo CSS: background-image: url(...). Esto significa que la imagen se aplicará como fondo del contenedor, y su visualización (si se recorta, si se repite, etc.) dependerá enteramente de los estilos CSS que tengas definidos en style.css. El uso de esc_attr() aquí garantiza la seguridad de la URL.

3. Contenedor y Contenido de Texto

Dentro de la sección, se utiliza un div con la clase container para asegurar que el contenido textual del bloque se centre y respete los márgenes y anchos del diseño de tu tema. Dentro de este contenedor se coloca un div adicional con la clase box-image-info, donde reside el texto:

  • El título ($bi_title), subtítulo ($bi_subtitle) y párrafo ($bi_p) se insertan usando las etiquetas <h1>, <h2> y <p>, respectivamente.
  • En cada inserción de texto se utiliza la función de seguridad de WordPress, esc_html(). Esto es una práctica fundamental que evita que los usuarios inyecten código HTML malicioso o no deseado a través de los campos de texto.

4. Botón Condicional

La última parte del código maneja el enlace o botón de acción. Se aplica una lógica condicional para que el botón solo aparezca si el usuario realmente ha introducido texto en el campo del botón ($bi_text_b).

  • El código verifica: if($bi_text_b != ''):
  • Si el campo tiene contenido, renderiza el botón con la clase btn btn-outline-dark.
  • El texto del botón y el enlace (href) se toman de las variables $bi_text_b y $bi_link_b. Se utiliza esc_attr() para asegurar la URL del enlace antes de imprimirla.

En resumen, template.php actúa como un transformador: convierte los datos simples de ACF en una estructura HTML rica, bien clasificada y segura, lista para ser presentada al visitante.

Categorias