Creare siti WordPress avanzati con Acf Pro

In questo articolo non mi soffermerò nell’illustrare le caratteristiche di ACF, ma evidenzierò l’utilizzo di questo plugin per costruire un sito avanzato seguendo l’approccio del Modular Web Design, concetto utilizzato negli ultimi anni per realizzare pagine web a blocchi (web components) versatili e riutilizzabili.

Seguendo questo metodo di progettazione associato all’utilizzo del plugin ACF potrete costruire siti WordPress avanzati dando la possibilità all’utente di poter personalizzare da back-end molti elementi che compongono le pagine del sito.

Tutto questo è possibile grazie a 2 nuovi campi personalizzati introdotti nella versione PRO di ACF, il campo “Ripetitore” (Repeater field) e il campo “Contenuto flessibile” (Flexible content field).

The Flexible content field (Contenuto flessibile)

Questo campo personalizzato svolge compiti simili a quelli eseguiti da un page builder, il vantaggio sta nel fatto che si ha la possibilità di scrivere codice per il front-end attraverso un gruppo di campi, quindi con un controllo molto avanzato della struttura.

The Repeater field (Ripetitore)

Questo campo personalizzato permette di creare gruppi di campi, che possono essere ripetuti. Un esempio: aggiungere un elenco di specifiche a dei prodotti in vendita, ognuno dei quali ha un numero di specifiche differenti. Con il campo “Ripetitore” è possibile impostare per ogni prodotto un elenco di specifiche differenti.

Utilizzando questi due campi associati a tutti gli altri del pacchetto base di ACF, potrete realizzare blocchi (Web components) definendo per ognuno i campi necessari.

Di seguito un esempio concreto.

Supponiamo che dobbiate realizzare uno Slider con titolo, descrizione e immagine di sfondo da usare in home o in altre pagine del sito, procediamo come segue:

  • Definiamo il codice front-end del blocco slider;
  • Creiamo i campi necessari con ACF del blocco slider;
  • Definiamo il codice back-end del blocco slider.

Definizione codice front-end del blocco slider

Iniziate con scrivere il codice front-end dello slider, considerando che lo slider potrebbe essere usato in diverse posizioni e in diverse pagine del sito.

Useremo come codice di esempio per lo slider la libreria Swiper per dettagli sull’inclusione della libreria in un sito, seguite la documentazione ufficiale.

Il codice di esempio

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">

        <!-- Slides -->
        <div class="swiper-slide" style="background-image: url('http://www.testsite.dev/wp-content/uploads/2017/07/img-slider-1.jpg');" >
            <div class="title">
                Titolo Slide 1
            </div>
            <div class="desc">
                Descrizione Slide 1
            </div>
        </div><!-- .swiper-slide -->

        <div class="swiper-slide" style="background-image: url('http://www.testsite.dev/wp-content/uploads/2017/07/img-slider-2.jpg');">
            <div class="title">
                Titolo Slide 2
            </div>
            <div class="desc">
                Descrizione Slide 2
            </div>
        </div><!-- .swiper-slide -->

        <div class="swiper-slide" style="background-image: url('http://www.testsite.dev/wp-content/uploads/2017/07/img-slider-3.jpg');">
            <div class="title">
                Titolo Slide 3
            </div>
            <div class="desc">
                Descrizione Slide 3
            </div>
        </div><!-- .swiper-slide -->

    </div><!-- .swiper-wrapper -->

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>

</div><!-- .swiper-container -->

Creazione dei campi necessari

Il questo passaggio dovete definire i campi del blocco slider, dove entrano in gioco i nuovi campi “Flexible content” e “Repeater”, rispettivamente denominati nella versione italiana di ACF PRO “Contenuto flessibile” e “Ripetitore”.

Dal back-end di WordPress, accedete alla dashboard di ACF e aggiungete un nuovo gruppo di campi nominandolo “Contenuto blocchi”.

Proseguite creando un campo di tipo “contenuto flessibile” con etichetta Flexible Content e nome del campo flexible_content; pubblicate o aggiornate.

Comparirà nel campo “Flexible Content”, appena aggiunto, una voce “layout”, sarà qui che definirete i campi specifici da associare al blocco slider.

Andate ora sulla voce “Layout”, inserite come etichetta Blocco Slider e come nome: blocco_slider, mentre nel selettore layout selezionate Riga.

Avete definito uno spazio (layout) in cui inserire tutti i campi necessari per lo slider, considerando che lo slider potrebbe avere una o più immagini, utilizzerete un campo “Ripetitore” nel quale definirete i tre campi: titolo, descrizione e immagine.

Aggiungete al Layout appena creato il campo “Ripetitore” inserendo come etichetta Ripetitore Slide, nome ripetitore_slide e selezionando il tipo di campo Ripetitore.

Ora nel campo “Ripetitore Slide” definite i 3 campi per titolo, descrizione e immagine per ogni nuova slide.

Andate in fine sotto al riquadro gestione field, individuate un riquadro “Posizione” per decidere dove visualizzare la meta box con i nuovi campi nel back-end, nel nostro caso sarà “Template di pagina”

Aggiornate per salvare le ultime modifiche. A questo punto andate a verificare che compaia la meta box con i nuovi field nella pagina in cui volete inserire lo slider.

Definizione codice back-end del blocco slider

A questo punto dovete scrivere il codice Php necessario per stampare a video gli elementi gestiti da Acf ed integrare il codice front-end per lo slider precedentemente fatto sostituendo gli elementi statici (titolo, descrizione e immagine), con le funzioni di Acf per richiamare i campi definiti per il blocco slider.

Individuate il file page.php (che gestisce la visualizzazione delle pagine) nel vostro tema ed inserite il seguente script estratto dalla documentazione ufficiale di ACF.

<?php
// check if the flexible content field has rows of data
if( have_rows('flexible_content') ):

     // loop through the rows of data
    while ( have_rows('flexible_content') ) : the_row();

        if( get_row_layout() == 'blocco_slider' ):

            get_template_part( 'template-parts/blocks/blocco_slider' );

        endif;

    endwhile;

else :

    // no layouts found

endif;
?>

In seguito, nella cartella del vostro tema, create una cartella “template-parts” e un’altra sottocartella “blocks” e create un file Php rinominandolo con il nome del “layout” definito per lo slider “blocco_slider”.

Inserite ora il codice front-end precedentemente definito sostituendo le parti statiche con quelle dinamiche attraverso il loop per richiamare il campo “Ripetitore” “ripetitore_slide” suggerito nella documentazione ufficiale ACF.

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">

    <?php if( have_rows('ripetitore_slide') ): ?>

        <?php while( have_rows('ripetitore_slide') ): the_row();
            // vars
            $titolo = get_sub_field('titolo_slider');
            $desc = get_sub_field('descrizione_slider');
            $img = get_sub_field('immagine_slider');
        ?>

        <!-- Slides -->
        <div class="swiper-slide" style="background-image: url('<?php echo $img; ?>');" >
            <div class="title">
                <?php echo $titolo; ?>
            </div>
            <div class="desc">
                <?php echo $desc; ?>
            </div>
        </div><!-- .swiper-slide -->

        <?php endwhile; ?>

    <?php endif; ?>

    </div><!-- .swiper-wrapper -->

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>

</div><!-- .swiper-container -->

Ora non vi resta che compilare i campi predisposti per lo slider in una pagina e controllare che venga visualizzato tutto correttamente.

Potete usare il medesimo metodo per qualsiasi altri elementi che compongono le pagine del sito pulsanti, colonne, header, footer ecc…

The following two tabs change content below.
Sono un Web Designer, ma sopratutto un appassionato di grafica, di internet, nuove tecnologie e in particolare del potente cms che è WordPress.

Lascia un commento

XHTML: È possibile utilizzare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>