Sempre quis fazer uma boa apresentação em coluna de posts com filtros de categoria acima que embaralha e filtra os posts com uma boa animação? Então este é o tutorial para você.
O que faremos neste tutorial é uma lista de todas as postagens (de preferência dentro de um tipo de postagem personalizado, como funcionários) bem em colunas e com suas imagens em destaque. Acima das postagens geramos filtros para a taxonomia conectada. Ao clicar em um filtro, as postagens com uma bela animação embaralham e ocultam as postagens que não estão presentes na categoria escolhida.
Para isso fazemos uso de uma biblioteca Javascript para a filtragem. Existem muitos disponíveis – alguns exigem jQuery e outros não – alguns são de código aberto e alguns exigem licença comercial. Os mais populares são MixItUp e Isotope. No entanto, ambos requerem uma licença comercial. Para o meu projeto, eu precisava de uma biblioteca que fizesse o truque e fosse totalmente gratuita para uso em projetos comerciais. Eu tentei vários e o melhor que encontrei até agora é o FilterizR. Vamos começar este tutorial obtendo esta biblioteca!
A biblioteca FilterizR
Confira a demonstração na página inicial do FilterizR para ver se esta biblioteca é para você. Você pode até jogar com as opções em tempo real. Esta biblioteca suporta filtragem (que é o que faremos neste tutorial), embaralhamento (ordem aleatória), pesquisa e classificação. É responsivo e otimizado para dispositivos móveis. Longe do que eu experimentei, ele também consegue definir muito bem a altura automática no contêiner em cada item.
O FilterizR oferece três tipos diferentes de uso:
- Vanilla Javascript: Expõe o FilterizR como uma função global para chamar em Javascript padrão.
- jQuery: Permite usar
jQuerypara inicializar e configurá-lo. - Pure Javascript library/npm: Para uso em importações ES6 (por exemplo, se você escrever blocos personalizados para Gutenberg).
A segunda opção é a mais fácil para pessoas não familiarizadas com Javascript. A maioria das pessoas começa com jQuery. Mas tenha em mente que jQuery é uma biblioteca grande e pesada para carregar em seu projeto, e se isso puder ser evitado, você deveria. Neste tutorial, usaremos o método Javascript vanilla. Se você estiver implementando isso em um bloco personalizado do Gutenberg, considere usar a terceira opção. Então você pode simplesmente instalá-lo npme importar a biblioteca em seu código de bloco.
Baixando e configurando os arquivos
Vamos pegar o arquivo apropriado! Vá para o Github do FilterizR para fazer o download. A menos que você esteja instalando via npm (terceira opção), você pode entrar na pasta ‘ dist‘ e baixar a biblioteca minificada que você precisa. Como vou usá-lo com vanilla Javascript neste tutorial, vou baixar o vanilla.filterizr.min.jsarquivo e colocá-lo na minha theme-folder/assets/js/pasta. É claro que onde você coloca a biblioteca depende completamente de você, basta ajustar o caminho mais abaixo.
Também precisaremos de outro arquivo Javascript para inicializar e decidir as opções. Vou criar um arquivo theme-folder/assets/js/filtering-main.js. Voltaremos a este arquivo mais tarde. Obviamente, isso não é necessário se você estiver implementando isso em um bloco Gutenberg personalizado.
Para fazer o WordPress incluir os scripts, precisamos enfileirar os dois scripts no wp_enqueue_scriptsgancho. Isso pode ser adicionado em algum lugar no arquivo functions.php. Igual a:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('filterizr', get_template_directory_uri(). '/assets/js/vanilla.filterizr.min.js', [], false, true);
wp_enqueue_script('filtering-script', get_template_directory_uri(). '/assets/js/filtering-main.js', ['filterizr'], false, true);
});Ajuste os nomes de arquivos e/ou caminhos para se adequarem ao seu projeto/tema. O código acima enfileira o script vanilla filterizR e, em segundo lugar, o filtering-main.jsscript que tem uma dependência do script filterizR. Isso garante que o script de inicialização seja carregado após a biblioteca necessária.
Renderizando o modelo
O próximo passo é ter um lugar onde queremos renderizar essa lista de posts. Isso depende inteiramente de você. Para simplificar neste tutorial, usarei um modelo de página no meu tema. Se você estiver implementando isso em um bloco Gutenberg, você pode renderizá-lo com PHP (para blocos dinâmicos) ou com Javascript no savemétodo do bloco. A parte importante é renderizar o HTML ao redor das postagens e filtros corretamente.
Renderizando os filtros
Vou criar um modelo de página template-filters.phpna pasta do meu tema e adicionar meu código PHP para renderizar a saída lá.
Neste tutorial, assumimos que queremos renderizar postagens em um tipo de postagem personalizado. Você pode fazer isso com postagens e categorias padrão, mas as postagens geralmente se tornarão muitas – o que não é viável de usar para esse tipo de exibição. Suponha, por exemplo, um tipo de postagem personalizado para funcionários com uma taxonomia personalizada conectada para o departamento. Não mostrarei como adicionar o tipo de postagem personalizado neste tutorial, apenas lembre-se de que o nome do tipo de postagem é employeese o nome da taxonomia personalizada é department. Alterne os nomes para seu tipo de postagem e taxonomia. Se você não tiver certeza de como adicionar um tipo de postagem personalizado, tenho um post tutorial sobre como criar tipos de postagem personalizados e taxonomias.
No meu template eu começo gerando os filtros. Vou buscar todos os termos não vazios em minha taxonomia personalizada usando [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()e adicioná-los em uma lista não ordenada.
Antes de gerar os elementos para cada termo na taxonomia, farei um elemento para "Todos" (linha #6). Para fazer a filtragem do FilterizR funcionar, precisamos fornecer o atributo de dados " data-filter" para cada elemento do filtro. O conteúdo deve significa exclusivamente um valor de filtragem exclusivo, no nosso caso, o slug do termo (você pode usar o ID do termo ou qualquer outra coisa, se quiser). O FilterizR pode saber quais posts pertencem a qual filtro.
Com o código acima, você deve obter uma lista com “All" seguido de todos os termos não vazios. Excelente!
Agora, logo abaixo disso, começarei a renderizar os posts.
Renderizando as postagens
Ao renderizar os posts você precisa se lembrar de duas coisas. Uma é envolver todos os posts dentro de um container, que darei o nome da classe filter-container. Essa classe é o que precisamos direcionar com Javascript para fazer o FilterizR funcionar. E segundo, cada item precisa ter um atributo de dados ” data-category” que liste todos os termos separados por vírgula. Os valores aqui devem corresponder aos valores que você gerou no data-filteratributo ” ” dos filtros.
Eu consulto todas as postagens do tipo de postagem personalizada [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)e percorro as postagens. O que você exibe por postagem depende totalmente de você, mas o exemplo abaixo renderiza a imagem em destaque, o título da postagem e uma única meta de postagem personalizada para o cargo. Tudo envolto em links que vão para o único funcionário.
A consulta na linha #2-7garante que eu busque todas as postagens publicadas do tipo de postagem funcionários, ordenadas em ordem alfabética. Antes de renderizar o wrapper divde cada post, em line #13, uso [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()para buscar todos os termos atribuídos a este post. Como parâmetro peço apenas os slugs dos termos. O retorno é uma matriz de quaisquer slugs de termo atribuídos. Em seguida, uso a função PHP [implode](https://www.php.net/manual/en/function.implode.php)()para criar uma string de todos os elementos da matriz separados por vírgula. Isso é ecoado como o data-categoryatributo necessário para a raiz div– o que faz os filtros funcionarem.
Quanto ao conteúdo de cada post, a saída é bastante padrão. Geramos a imagem em destaque da postagem usando um tamanho de imagem personalizado (‘ employees-thumb‘), o título da postagem e o valor de uma única meta de postagem personalizada (para o título do trabalho). Tudo é empacotado dentro de um link que vai para a visualização única desse funcionário. Também adicionei algumas classes e wrappers para facilitar o direcionamento com CSS. A saída para cada elemento é, obviamente, completamente a seu critério.
Neste ponto, a renderização do PHP deve estar completa. Você está convidado a estilizar e torná-lo bonito, mas não se preocupe em estilizar colunas. O FilterizR irá gerar colunas (flexbox) para você. O próximo passo é inicializar o script de filtragem!
Inicializando o script de filtro
A última parte é editar o filtering-main.jsscript. Nós simplesmente precisamos dizer ao FilterizR para inicializar a filtragem em nosso conteúdo renderizado. Há algumas coisas a ter em mente aqui, no entanto:
O FilterizR garantirá que o contêiner de encapsulamento de todas as postagens seja dimensionado automaticamente para caber na visualização. Por exemplo, se o filtro ativo exibir postagens em uma linha e clicarmos em outro filtro com quatro linhas, o contêiner será dimensionado automaticamente para a altura correta. Assim, certificando-se de que qualquer conteúdo que vem depois não fique escondido atrás. Mas para que esse redimensionamento automático funcione, todas as imagens devem ter sido carregadas primeiro. Em alguns casos, o script pode ser carregado e executado antes que o carregamento de cada imagem seja concluído, e isso faz com que o contêiner seja recolhido automaticamente para uma altura de 0. Isso não é bom. Portanto, precisamos colocar o código de inicialização dentro de uma função onde sabemos que as imagens terminaram de carregar. Para Javascript de baunilha, isso é window.onload. Para jQuery você usaria $(window).load().
Em segundo lugar, queremos garantir que nosso script inicialize o FilterizR apenas se houver de fato um contêiner filtrável presente. Se inicializarmos o FilterizR e a página atual não tiver a classe wrapper necessária, isso resultará em um erro de Javascript. Podemos resolver isso verificando se a classe container existe primeiro. Em vanilla Javascript você pode usar document.getElementById()ou document.getElementsByClassName(). Veja exemplo abaixo. Para jQuery você usaria jQuery('<selector>').lengthpara verificar isso.
A maneira de inicializar o FilterizR por vanilla Javascript é criando uma nova instância de Filterizr, fornecendo o seletor de contêiner como primeiro parâmetro e opcionalmente um objeto de configurações como segundo parâmetro. Este é um exemplo do mais básico:
A inicialização acontece na linha #4. Fornecemos o nome da classe ao contêiner que envolve nossas postagens com um ponto na frente, significando um seletor de classe. Com o código acima, o FilterizR agora deve assumir seus posts e colocá-los em colunas. Como usamos os atributos de dados apropriados, os filtros também devem funcionar automaticamente!
Personalizando as opções do FilterizR
Tenho apenas algumas dicas finais para otimizar o FilterizR, o que podemos fazer fornecendo um objeto de configurações. Eu recomendo dar uma olhada nas opções possíveis para FilterizR para ver o que você pode fazer. Você pode controlar a velocidade da animação, o tipo de animação e muito mais!
Para fazer com que as colunas funcionem de maneira ideal em tamanhos responsivos, descobri que a configuração layoutpara ‘ sameWidth‘ faz com que o FilterizR funcione melhor com postagens com alturas diferentes. Isso resulta em um estilo “Maçonaria”. Em nosso exemplo, ecoamos conteúdo adicional após a imagem, e isso pode resultar em alturas variadas (os nomes podem ser mais longos, forçando-o em várias linhas). Isso pode resultar em algum comportamento estranho.
Como padrão, cada item não recebe espaço entre si. Se você quiser algum espaçamento entre cada item, você pode definir o tamanho da lacuna em px para gutterPixels. No exemplo acima, usei 10px como tamanho da lacuna. PS: O tamanho da lacuna também é adicionado ao contêiner de embalagem. Isso pode nem sempre ser o que você quer. Para substituir isso, simplesmente adicionei estilo padding: 0!importantao .filter-container.
Aqui está o código ajustado para inicializar o FilterizR com minhas opções:
Com algum estilo menor, o resultado é algo assim:
Tenha em mente que filtrar é apenas uma coisa que o FilterizR pode fazer! Confira os exemplos em ‘Tutoriais’ em sua página inicial. Você pode adicionar controles para classificar, embaralhar e/ou pesquisar. E você tem mais opções para controlar o layout também.