Ves al contingut principal

Shortcode amb views

Per fer un plugin més net i escalable, cal separar la lògica del codi HTML de presentació. En lloc de retornar un string directament des de la funció del shortcode, farem que la funció inclogui un altre fitxer PHP que contindrà l'estructura HTML. En aquest cas ampliarem l'estructura del plugin "Banner Personalitzat" per utilitzar aquesta tècnica.

Estructura de fitxers

Afegirem una carpeta i un fitxer per al nostre template (plantilla):

Carpeta/Fitxer Propòsit
banner-personalitzat/ Carpeta arrel.
banner-personalitzat/includes/ Lògica PHP.
banner-personalitzat/includes/shortcode.php Conté la funció PHP que processa els paràmetres i carrega el template.
banner-personalitzat/templates/ NOVA CARPETA: Conté els fitxers de presentació.
banner-personalitzat/templates/banner-template.php NOU FITXER: Conté l'HTML pur del banner.
banner-personalitzat/assets/ Estils i scripts.

Lògica del shortcode includes/shortcode.php

La funció del shortcode ara s'encarregarà de preparar les dades i carregar el fitxer de plantilla. Utilitzarem una tècnica de buffer de sortida de PHP (ob_start, ob_get_clean) per capturar l'HTML del fitxer inclòs i retornar-lo com a string al lloc on s'ha utilitzat el shortcode.

PHP 

<?php
/**
 * Funció que processa el shortcode [banner]
 * @param array $atts Paràmetres passats pel shortcode
 * @param string $content Contingut tancat dins el shortcode
 * @return string HTML del banner carregat des del template
 */
function bp_shortcode_banner( $atts, $content = null ) {
    
    // 1. Definir els valors per defecte i processar paràmetres
    $params = shortcode_atts( 
        array(
            'titol'   => 'Benvingut!', 
            'tipus'   => 'informatiu', 
            'color'   => '#0073aa', 
        ), 
        $atts, 
        'banner' 
    );
    
    // Extreure els paràmetres per utilitzar-los com a variables al template
    // Les variables $titol, $tipus, $color, $content estaran disponibles al template.
    extract( $params );
    
    // Afegir el contingut del shortcode a la variable $content si existeix
    $content = do_shortcode( $content ); 

    // 2. Iniciar el Buffer de Sortida de PHP
    ob_start();
    
    // 3. Incloure el template
    // Aquest fitxer tindrà accés a totes les variables que hem extret (p.ex., $titol, $color)
    include BP_PATH . 'templates/banner-template.php'; 
    
    // 4. Capturar el contingut del buffer i netejar-lo
    // El contingut HTML generat pel template.php es guarda a $output
    $output = ob_get_clean();

    // 5. Retornar l'HTML
    return $output;
}

// Enregistrem el shortcode
add_shortcode( 'banner', 'bp_shortcode_banner' );

Output buffer

Les funcions ob_start() i ob_get_clean() de PHP s'utilitzen per gestionar el Buffer de Sortida (Output Buffer). Aquesta tècnica és crucial en entorns com WordPress per capturar la sortida d'un codi (normalment HTML) en lloc d'enviar-la directament al navegador, permetent-te manipular-la o, com en el teu cas, retornar-la.

ob_start() (Output buffer start)

  • Què fa: Activa el buffer de sortida. A partir d'aquest moment, tota la sortida generada (amb echo, print, o HTML pur inclòs) no s'envia al navegador.

  • On va la sortida: En lloc d'això, s'emmagatzema internament en una memòria intermèdia (el buffer).

ob_get_clean() (Output buffer get and clean)

  • Què fa: Té dues accions clau:

    1. Obté: Recupera tot el contingut que s'ha emmagatzemat al buffer des de l'últim ob_start().

    2. Neteja: Elimina i descarta la memòria intermèdia, i la desactiva.

  • Resultat: La funció retorna tot el contingut capturat com una cadena de text (string).

Que fa dins el plugin?

En el plugin, s'utilitza de la següent manera:

  1. La funció del shortcode fa ob_start().

  2. Després, fa un include del fitxer de plantilla (banner-template.php). L'HTML d'aquesta plantilla es queda al buffer.

  3. Finalment, fa un ob_get_clean(). Això recupera l'HTML de la plantilla com a string i desactiva el buffer.

  4. Aquesta string es retorna amb return $output;, que és el format que WordPress espera d'un shortcode per inserir el contingut al lloc correcte de la pàgina.

En essència, és com posar tot el codi de presentació en una "caixa virtual" i després tancar la tapa per obtenir el resultat final com un paquet compacte que es pot moure i retornar.

L'arxiu presentació (templates/banner-template.php)

Aquest fitxer només conté HTML i referències a les variables que hem preparat a shortcode.php. És molt més fàcil de llegir, mantenir i modificar per a dissenyadors sense trencar la lògica PHP. Hem de considerar que les variables $titol, $color, $tipus i $content provenen de la funció bp_shortcode_banner que ha utilitzat extract().

PHP 

<?php 
// Per seguretat, evitem l'accés directe al fitxer de template
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Preparem la classe CSS
$classe_css = 'bp-banner bp-' . sanitize_html_class( $tipus );
?>

<div class="<?php echo $classe_css; ?>" style="border-left-color: <?php echo esc_attr($color); ?>;">
    
    <h3><?php echo esc_html( $titol ); ?></h3>
    
    <?php if ( ! empty( $content ) ) : ?>
        <p><?php echo $content; ?></p>
    <?php else : ?>
        <p>Aquest és un missatge de banner per defecte.</p>
    <?php endif; ?>
    
    <button class="bp-tanca-btn">Tanca Banner &times;</button>
    
</div>

Amb aquesta tècnica, has millorat significativament l'arquitectura del teu plugin, separant responsabilitats i facilitant futurs canvis en el disseny (HTML/CSS) sense haver de tocar la lògica de processament dels paràmetres (PHP).

Amunt