Sviluppo tema WordPress con Understrap, parte 5: Creazione e modifica dei template principali

Introduzione alla gerarchia dei template WordPress

Prima di immergerci nella creazione e modifica dei template principali, è fondamentale comprendere come WordPress utilizza la sua gerarchia di template per determinare quale file utilizzare per visualizzare una specifica pagina.

La gerarchia dei template

WordPress segue una logica precisa per decidere quale template utilizzare. Quando un visitatore richiede una pagina, WordPress cerca i file template in un ordine specifico, partendo dal più specifico al più generico:

Per i Post Singoli:

• single-{post-type}-{slug}.php
• single-{post-type}.php
• single.php
• singular.php
• index.php

Per le Pagine:

• page-{slug}.php
• page-{id}.php
• page.php
• singular.php
• index.php

Per le Archive:

• archive-{post-type}.php
• archive.php
• index.php

Per le Categorie:

• category-{slug}.php
• category-{id}.php
• category.php
• archive.php
• index.php

Struttura base di un tema WordPress

Un tema WordPress ben organizzato dovrebbe contenere i seguenti file essenziali:

File Obbligatori:

• style.css – Il foglio di stile principale con i meta dati del tema
• index.php – Il template predefinito
• functions.php – Funzioni e configurazioni del tema

File Template Principali:

• header.php – La parte superiore comune del sito
• footer.php – La parte inferiore comune del sito
• sidebar.php – La barra laterale
• single.php – Per i post singoli
• page.php – Per le pagine
• archive.php – Per gli archivi
• search.php – Per i risultati della ricerca
• 404.php – Per le pagine non trovate

Directory Importanti:

• /inc – File di funzioni PHP aggiuntive
• /template-parts – Parti riutilizzabili dei template
• /assets – JavaScript, CSS e immagini
• /languages – File di traduzione

Come understrap organizza i template

Understrap segue questa struttura standard di WordPress ma la arricchisce con alcuni elementi aggiuntivi:

Directory Loop Templates:

• Contiene parti riutilizzabili specifiche per diversi tipi di contenuto
• Facilita la manutenzione e la personalizzazione

Directory Sidebar Templates:

• Permette di avere diverse configurazioni di sidebar
• Facilita la gestione di layout diversi

Directory Page Templates:

• Contiene template personalizzati per pagine specifiche
• Permette di creare layout unici per diverse sezioni del sito

Il flusso dei template in understrap

Quando una pagina viene caricata in Understrap, il flusso tipico è:

1. WordPress determina quale template utilizzare
2. Il template richiama header.php
3. Il contenuto specifico viene caricato (da single.php, page.php, ecc.)
4. Eventuali template parts vengono inclusi
5. La sidebar viene caricata (se prevista)
6. Il template richiama footer.php

Header Template (header.php)

Il file header.php è fondamentale per la struttura del tuo tema. Ecco un esempio di personalizzazione:

<div class="site" id="page">
    <header id="wrapper-navbar">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <!-- Logo -->
                <?php if ( has_custom_logo() ) : ?>
                    <?php the_custom_logo(); ?>
                <?php else : ?>
                    <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <?php bloginfo( 'name' ); ?>
                    </a>
                <?php endif; ?>

                <!-- Menu Toggle -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
                        data-bs-target="#navbarNavDropdown">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Menu principale -->
                <?php
                wp_nav_menu( array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav ms-auto',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                ) );
                ?>
            </div>
        </nav>
    </header>

Footer Template (footer.php)

Ecco un esempio di personalizzazione del footer:

<footer class="wrapper" id="wrapper-footer">
    <div class="<?php echo esc_attr( $container ); ?>">
        <div class="row">
            <div class="col-md-4">
                <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
                    <?php dynamic_sidebar( 'footer-1' ); ?>
                <?php endif; ?>
            </div>
            <div class="col-md-4">
                <?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
                    <?php dynamic_sidebar( 'footer-2' ); ?>
                <?php endif; ?>
            </div>
            <div class="col-md-4">
                <?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
                    <?php dynamic_sidebar( 'footer-3' ); ?>
                <?php endif; ?>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="site-info text-center">
                    © <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?>
                </div>
            </div>
        </div>
    </div>
</footer>

Index Template (index.php)

L’index.php è il template predefinito per visualizzare i post:

<?php
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>

<div class="wrapper" id="index-wrapper">
    <div class="<?php echo esc_attr( $container ); ?>" id="content">
        <div class="row">
            <main class="col-md-8 content-area" id="primary">
                <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <article <?php post_class(); ?>>
                            <header class="entry-header">
                                <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s">', 
                                    esc_url( get_permalink() ) ), '</a></h2>' ); ?>

                                <div class="entry-meta">
                                    <?php understrap_posted_on(); ?>
                                </div>
                            </header>

                            <div class="entry-content">
                                <?php the_excerpt(); ?>
                            </div>
                        </article>
                    <?php endwhile; ?>

                    <?php understrap_pagination(); ?>

                <?php else : ?>
                    <?php get_template_part( 'loop-templates/content', 'none' ); ?>
                <?php endif; ?>
            </main>

            <?php get_sidebar(); ?>
        </div>
    </div>
</div>

<?php get_footer(); ?>

Single Post Template (single.php)

Template per i singoli articoli:

<?php
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>

<div class="wrapper" id="single-wrapper">
    <div class="<?php echo esc_attr( $container ); ?>">
        <div class="row">
            <main class="col-md-8" id="primary">
                <?php while ( have_posts() ) : the_post(); ?>
                    <article <?php post_class(); ?>>
                        <header class="entry-header">
                            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

                            <div class="entry-meta">
                                <?php understrap_posted_on(); ?>
                                <?php understrap_entry_footer(); ?>
                            </div>
                        </header>

                        <?php if ( has_post_thumbnail() ) : ?>
                            <div class="entry-featured-image">
                                <?php the_post_thumbnail( 'large' ); ?>
                            </div>
                        <?php endif; ?>

                        <div class="entry-content">
                            <?php the_content(); ?>
                        </div>

                        <?php
                        wp_link_pages(
                            array(
                                'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
                                'after'  => '</div>',
                            )
                        );
                        ?>
                    </article>

                    <?php understrap_post_nav(); ?>

                    <?php
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;
                    ?>
                <?php endwhile; ?>
            </main>

            <?php get_sidebar(); ?>
        </div>
    </div>
</div>

<?php get_footer(); ?>

Best Practices per i Template

Organizzazione del Codice

• Mantieni il codice organizzato e ben commentato
• Usa l’indentazione appropriata
• Separa la logica dalla presentazione

Sicurezza

• Usa sempre le funzioni di escaping appropriate
• Verifica i permessi e le capacità degli utenti
• Sanitizza tutti i dati in input

Performance

• Minimizza le query al database
• Usa il caching quando possibile
• Ottimizza le immagini e le risorse

Responsive

• Usa le classi Bootstrap per layout responsivi
• Testa su diversi dispositivi
• Assicurati che il contenuto sia accessibile

Personalizzazione dei Template

Per personalizzare i template, puoi:

Creare Template Parts

// Crea file separati per parti riutilizzabili
get_template_part( 'template-parts/content', 'post' );

Aggiungere Hook Personalizzati

do_action( 'before_post_content' );
the_content();
do_action( 'after_post_content' );

Modificare le Classi Bootstrap

<div class="row">
    <div class="col-md-8 col-lg-9"> <!-- Contenuto principale -->
        <?php the_content(); ?>
    </div>
    <div class="col-md-4 col-lg-3"> <!-- Sidebar -->
        <?php get_sidebar(); ?>
    </div>
</div>

La personalizzazione dei template principali è fondamentale per creare un tema WordPress unico e funzionale. Ricorda sempre di seguire le best practice di WordPress e di mantenere il codice pulito e ben organizzato.

Nel prossimo articolo della nostra serie, “Implementazione di un sistema di griglia responsive con Bootstrap”, approfondiremo come utilizzare il sistema di griglia di Bootstrap per creare layout complessi e responsivi. Non perderlo!