Como Criar uma Galeria de Fotos Personalizada com ACF e PrettyPhoto no WordPress

Exibir imagens de forma elegante é essencial para muitos projetos WordPress. Neste tutorial, vamos criar uma galeria de fotos usando o Advanced Custom Fields (ACF) para gerenciar as imagens no painel administrativo e o PrettyPhoto para exibi-las em um lightbox interativo no front-end.

Passo 1: Configurando os Campos Personalizados no ACF

Antes de mais nada, crie um grupo de campos no ACF para gerenciar as imagens da galeria.

1. Acesse o painel do WordPress e vá até Custom Fields > Adicionar Novo.
2. Crie um grupo de campos chamado “Galeria de Fotos”.
3. Adicione um campo do tipo Galeria:
   • Nome do Campo: galeria_fotos.
   • Rótulo: “Galeria de Fotos”.
4. Configure o grupo para aparecer apenas nos tipos de post que desejar, como posts, páginas ou um Custom Post Type específico.

Passo 2: Preparando o Front-End

Agora vamos criar o código necessário para exibir as imagens da galeria no front-end.

Exemplo de Código no Template:

<?php if (get_field('galeria_fotos')) : ?>
    <div class="gallery">
        <?php foreach (get_field('galeria_fotos') as $image) : ?>
            <a href="<?php echo esc_url($image['url']); ?>" data-rel="prettyPhoto[gallery]" title="<?php echo esc_attr($image['alt']); ?>">
                <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
            </a>
        <?php endforeach; ?>
    </div>
<?php else : ?>
    <p>Nenhuma foto disponível nesta galeria.</p>
<?php endif; ?>

O código acima verifica se o campo galeria_fotos tem imagens e exibe cada uma como uma miniatura que abre no PrettyPhoto ao ser clicada.

Passo 3: Instalando o PrettyPhoto

1. Baixe os arquivos do PrettyPhoto (disponíveis no GitHub).
2. Adicione os arquivos CSS e JS ao seu tema. Por exemplo:

No arquivo functions.php:

function load_prettyphoto() {
wp_enqueue_style('prettyphoto-css', get_template_directory_uri() . '/assets/css/prettyPhoto.css');
wp_enqueue_script('prettyphoto-js', get_template_directory_uri() . '/assets/js/jquery.prettyPhoto.js', array('jquery'), null, true);
wp_enqueue_script('prettyphoto-init', get_template_directory_uri() . '/assets/js/prettyPhoto-init.js', array('prettyphoto-js'), null, true);
}
add_action('wp_enqueue_scripts', 'load_prettyphoto');

Passo 4: Configurando o PrettyPhoto

Crie o arquivo prettyPhoto-init.js na pasta de scripts do seu tema e adicione:

jQuery(document).ready(function ($) {
    $("a[data-rel^='prettyPhoto']").prettyPhoto({
        theme: 'light_square', // Altere para outros temas, se desejar.
        social_tools: false,
        autoplay_slideshow: false,
    });
});

Passo 5: Estilizando a Galeria

Adicione um pouco de CSS para ajustar o layout da galeria:

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery a img {
    width: 100px; /* Ajuste o tamanho da miniatura */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.gallery a:hover img {
    transform: scale(1.1);
}

Passo 6: Teste e Publicação

1. Adicione algumas imagens no campo de galeria no painel do WordPress.
2. Visualize a página para garantir que as imagens são exibidas corretamente e abrem no PrettyPhoto.

---

Conclusão

Esse tutorial mostra como integrar uma galeria dinâmica e estilizada ao seu site WordPress usando ACF e PrettyPhoto. Essa solução é flexível, funcional e ideal para projetos que demandam uma exibição elegante de imagens.