Com a própria Galeria de Imagens do WordPress, a que pode ser criada e inserida pelo editor visual dos posts, e algumas instruções de JavaScript é possível personalizar a exibição das imagens transformando a galeria em um Carrossel. Poucas linhas de CSS ajudam a formatar e adequar o carrossel da galeria a identidade visual do Tema em uso.

Galeria do WordPress no editor visual

Esse recurso será obtido ao gerar uma galeria de imagens padrão do WordPress com o projeto Slick. Trata-se de um plugin jQuery com suporte a múltiplas resoluções, transições CSS, eventos de touch e swipe e uma série de outros recursos.

A implantação desse recurso fará uso de 3 arquivos presentes no plugin:

  • slick.min.js: o plugin jQuery do carousel em si;
  • slick.min.css: as formatações essenciais a seu funcionamento;
  • slick-theme.min.css: exibição personalizada dos elementos do carrossel (opcional).

Além desses serão utilizados mais um arquivo .js para fazer a chamada do plugin e um outro .css para ajustar a exibição dos elementos do carousel ao Tema.

Criada a galeria, a inserção do shortcode dentro do conteúdo de uma publicação vai gerar um código HTML similar a:

<div id="gallery-1" class="gallery gallery-columns-3">
    <figure class="gallery-item"></figure>
    <!-- // e o mesmo para os demais itens

Seguindo a estrutura que o plugin Slick precisa para funcionar, basta fazer a chamada do mesmo utilizando a classe da camada que abriga todas as imagens da galeria.

$( ".gallery" ).slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

Porém antes de incorporar os arquivos ao Tema é preciso ter em mente que tais arquivos somente serão úteis ao projeto quando uma publicação estiver aberta e também, quando existir uma galeria em seu conteúdo. Por isso, ao invés de usar o gancho padrão para incorporar scripts wp_enqueue_scripts, será feita uma verificação do conteúdo usando o filtro the_content.

add_action( 'the_content', array( 'WPJS_Carousel', 'enqueue' ) );
public static function enqueue( $c )
{
     if ( has_shortcode( $c, 'gallery' ) ) {
         // incorpora os scripts ao Tema
     }
     return $c;
}

O uso da função has_shortcode verifica o conteúdo a procura do shortcode, parâmetros da função. O filtro precisa retornar o conteúdo para que este seja exibido corretamente.

Inserido os códigos .js e .css no tema Twenty Fifteen, o resultado será este:

Galeria do WordPress com carrossel aplicado

Uma boa estratégia é fazer uso dessa formatação da galeria do WordPress em carrossel juntamente com um outro plugin jquery (talvez o próprio Thickbox do CMS) a fim de manter o visitante dentro do site, do post mesmo quando ele clica sobre uma imagem (cujo link destino seja o Arquivo de Mídia).

Download do plugin WordPress Gallery Shortcode Carousel