Como Usar Masonry para Adicionar Grade de Posts Estilo Pinterest no WordPress

Este é um post de convidado de Josh Pollock

A exibição em grade de posts, semelhante ao Pinterest, tem sido um design popular para páginas de índice de blogs do WordPress há algum tempo. É popular não apenas porque imita a aparência do popular site de mídia social, mas também porque aproveita ao máximo o espaço na tela. Em um índice de blog do WordPress, ele permite que cada prévia de post tenha o tamanho que naturalmente precisa, sem deixar espaço extra.

Neste tutorial, mostrarei como usar a popular Biblioteca JavaScript Masonry para criar layouts de grade em cascata para o índice do seu blog, bem como páginas de arquivo para o seu tema. Abordarei algumas questões que você precisa considerar para otimização para dispositivos móveis e como resolvê-las.

Observação: Este é um tutorial de nível avançado para aqueles que se sentem confortáveis editando temas do WordPress e possuem conhecimento suficiente de HTML/CSS.

Etapa 1: Adicionar Bibliotecas Necessárias ao Seu Tema

Atualização: O WordPress 3.9 agora inclui a versão mais recente do Masonry.

Primeiro, você precisa carregar o Masonry em seu tema, usando este código:

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

Este código simplesmente carrega o masonry e o disponibiliza para os arquivos de template do seu tema (veja nosso guia sobre como adicionar JavaScripts e Estilos Corretamente no WordPress). Observe também que não estamos adicionando o jQuery como dependência para nenhum deles. Uma das vantagens do Masonry 3 é que ele não requer jQuery, mas pode ser usado com ele. Na minha experiência, inicializar o Masonry sem jQuery é mais confiável e abre a possibilidade de não carregar o jQuery, o que pode ajudar tanto no tempo de carregamento da página quanto em problemas de compatibilidade.

Passo 2: Inicialize o Javascript

A próxima função configura o Masonry, define os contêineres que serão usados com ele e também garante que tudo aconteça na ordem correta. O Masonry precisa calcular o tamanho de cada um dos itens na página para organizar sua grade dinamicamente. Um problema que encontrei com o Masonry em muitos navegadores é que o Masonry calcula incorretamente a altura de itens com imagens de carregamento lento, levando a itens sobrepostos. A solução é usar o imagesLoaded para impedir que o Masonry calcule o layout até que todas as imagens sejam carregadas. Isso garante o dimensionamento correto.

Esta é a função e ação que irá gerar o script de inicialização no rodapé da página:

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

A função é explicada passo a passo com comentários inline. O que a função Javascript faz é dizer ao Masonry para procurar dentro de um contêiner com o id "masonry-loop" por itens com a classe "masonry-entry" e calcular a grade somente após as imagens serem carregadas. Definimos o contêiner externo com querySelector e o interno com itemSelector.

Passo 2: Crie o Loop Masonry

Em vez de adicionar a marcação HTML para Masonry diretamente a um template, vamos criar uma parte de template separada para ele. Crie um novo arquivo chamado “content-masonry.php” e adicione-o ao seu tema. Isso permitirá que você adicione o loop Masonry a quantos templates diferentes desejar.

Em seu novo arquivo, você adicionará o código mostrado abaixo. A marcação é semelhante ao que você normalmente veria para qualquer prévia de conteúdo. Você pode modificá-la como precisar, apenas certifique-se de que o elemento mais externo tenha a classe “masonry-entry”, que definimos como itemSelector na última etapa.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Esta marcação possui classes para cada uma de suas partes, para que você possa adicionar marcação para combinar com seu tema. Gosto de adicionar uma borda agradável e levemente arredondada a .masonry-entry. Outra opção agradável é nenhuma borda para .masonry-entry, mas dar a ela uma leve sombra. Isso fica particularmente bom quando a miniatura da postagem se estende por toda a borda do contêiner, o que pode ser alcançado dando a .masonry-thumbnail margens e preenchimentos de 0 em todas as direções. Você vai querer adicionar todos esses estilos em um arquivo chamado masonry.css no diretório css do seu tema.

Etapa 3: Adicionar Loop Masonry aos Templates

Agora que temos nossa parte de template, você pode usá-la em qualquer template do seu tema que desejar. Você pode adicioná-la ao index.php, mas não ao category.php se não quiser que seja usada para arquivos de categoria. Se você quiser que seja usada apenas na página inicial do seu tema, quando configurada para mostrar posts do blog, você a usaria no home.php. Onde quer que você escolha, tudo o que você precisa fazer é envolver seu loop em um contêiner com o id “masonry-loop” e adicionar a parte do template ao loop usando get_template_part(). Certifique-se de iniciar o contêiner do loop masonry antes de while (have_posts() ).

Por exemplo, aqui está o loop principal do index.php do twentythirteen:

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

E aqui está modificado para usar nosso loop Masonry:

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Passo 4: Definir Larguras Responsivas dos Itens Masonry

Existem várias maneiras de definir a largura de cada item Masonry. Você pode definir a largura usando um número de pixels ao inicializar o Masonry. Não sou fã de fazer isso, pois uso temas responsivos e isso requer algumas consultas de mídia complexas para acertar as coisas em telas pequenas. Para designs responsivos, descobri que a melhor coisa a fazer é definir um valor de largura para .masonry-entry com uma porcentagem, com base em quantos itens você deseja em uma linha, e deixar o Masonry fazer o resto dos cálculos para você.

Tudo o que é necessário é dividir 100 pelo número de itens que você deseja definir a porcentagem em uma entrada simples no style.css do seu tema. Por exemplo, se você quiser quatro itens em cada linha, você pode fazer isso no seu arquivo masonry.css:

.masonry-entry{width:25%}

Passo 5: Otimização para Dispositivos Móveis

Poderíamos parar aqui, mas não acho que o resultado final funcione incrivelmente bem em telas de celulares pequenas. Assim que você estiver satisfeito com a aparência do seu tema com a nova grade Masonry no seu desktop, confira no seu celular. Se você não estiver satisfeito com a aparência no seu celular, precisará fazer um pequeno trabalho.

Não acho que haja espaço suficiente na tela de um celular para tudo o que adicionamos à nossa parte do modelo content-masonry. Duas boas soluções disponíveis para você são encurtar o resumo para celulares ou ignorá-lo completamente. Aqui está uma função extra que você pode adicionar ao functions.php do seu tema para fazer isso. Como não acho que esses problemas sejam um problema em tablets, estou usando um ótimo plugin Mobble em todos os exemplos desta seção para fazer as alterações apenas em celulares, não em tablets. Também estou verificando se o Mobble está ativo antes de usá-lo e, se necessário, recorrendo à função de detecção de celular mais geral wp_is_mobile, que é integrada ao WordPress.

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

Como você pode ver, começamos armazenando o comprimento do trecho longo e o comprimento do trecho curto em variáveis, já que usaremos esses valores duas vezes e queremos poder alterá-los de um único lugar, se precisarmos mais tarde. A partir daí, testamos se podemos usar is_phone() do Mobble. Se sim, definimos o trecho curto para telefones e o trecho longo se não estivermos. Depois disso, fazemos a mesma coisa básica, mas usando wp_is_mobile, que afetará todos os dispositivos móveis, se is_phone() não puder ser usado. Esperamos que a parte else desta função nunca seja usada, mas é bom ter um backup, por precaução. Uma vez que a lógica do comprimento do trecho é definida, basta conectá-la ao filtro excerpt_length.

Encurtar o trecho é uma opção, mas também podemos eliminá-lo completamente com um processo simples. Aqui está uma nova versão de content-masonry, com a parte inteira do trecho omitida em telefones:

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Desta vez, estamos testando para ver se não estamos em um telefone/dispositivo móvel e, se for o caso, retornamos a parte do trecho do nosso loop. Se estivermos em um telefone/dispositivo móvel, não fazemos nada.

Outra coisa que você pode querer fazer é aumentar a largura dos itens do Masonry, o que reduz o número em uma linha, em dispositivos móveis. Para fazer isso, adicionaremos um estilo inline diferente ao cabeçalho com base na detecção do dispositivo. Como esta função usa wp_add_inline_styles, ela dependerá de uma folha de estilo específica. Neste caso, estou usando masonry.css, que você pode querer para manter seus estilos de masonry separados. Se você não acabar usando isso, pode usar o handle de outra folha de estilo já registrada.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Esta função enfileira a folha de estilos personalizada e, em seguida, define um valor para a largura usando uma lógica que agora deve ser muito familiar. Depois disso, criamos a variável $custom_css passando o valor da largura para um trecho de CSS de aparência regular com {$width}. Em seguida, usamos wp_add_inline_style para dizer ao WordPress para imprimir nossos estilos inline no cabeçalho sempre que a folha de estilos Masonry estiver sendo usada e, em seguida, conectamos toda a função a wp_enqueue_scripts e terminamos.

Se você optou por combinar seus estilos Masonry em uma folha de estilos existente, certifique-se de usar o identificador dessa folha de estilos com wp_add_inline_style ou seus estilos inline não serão incluídos. Eu gosto de usar wp_add_inline_style porque geralmente envolvo o hook de ação para enfileirar Masonry em uma condicional para que ele só seja adicionado quando necessário. Por exemplo, se eu estiver usando Masonry apenas nas minhas páginas de índice de blog e de arquivo, eu faria isso:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Estes últimos exemplos devem abrir outras ideias em sua mente. Por exemplo, você poderia usar uma lógica semelhante para pular o Masonry completamente em um dispositivo móvel. Além disso, wp_add_inline_style() é uma função menos utilizada, mas muito útil, pois permite definir programaticamente estilos diferentes com base em qualquer tipo de condicional. Ela pode permitir que você mude radicalmente o estilo de qualquer elemento com base não apenas na detecção de dispositivo, mas as mudanças também podem ser baseadas em qual template está sendo usado, ou mesmo se o usuário está logado ou não.

Espero que você veja essas diferentes mudanças que estou fazendo como uma oportunidade para ser criativo. Sistemas de grade em alvenaria e similares em cascata têm sido populares há algum tempo, então é hora de algumas novas reviravoltas nessa ideia popular. Mostre-nos nos comentários as maneiras legais que você encontrou para usar a alvenaria em um tema WordPress.

Um cara multifacetado do WordPress, Josh Pollock escreve sobre WordPress, faz desenvolvimento de temas, atua como gerente de comunidade para o Pods Framework e defende soluções de código aberto para design sustentável.