A biblioteca FilterizR<\/h2>\n
Confira a demonstra\u00e7\u00e3o na p\u00e1gina inicial do FilterizR<\/a> para ver se esta biblioteca \u00e9 para voc\u00ea. Voc\u00ea pode at\u00e9 jogar com as op\u00e7\u00f5es em tempo real. Esta biblioteca suporta filtragem (que \u00e9 o que faremos neste tutorial), embaralhamento (ordem aleat\u00f3ria), pesquisa e classifica\u00e7\u00e3o. \u00c9 responsivo e otimizado para dispositivos m\u00f3veis. Longe do que eu experimentei, ele tamb\u00e9m consegue definir muito bem a altura autom\u00e1tica no cont\u00eainer em cada item.<\/p>\n O FilterizR oferece tr\u00eas tipos diferentes de uso:<\/p>\n A segunda op\u00e7\u00e3o \u00e9 a mais f\u00e1cil para pessoas n\u00e3o familiarizadas com Javascript. A maioria das pessoas come\u00e7a com jQuery. Mas tenha em mente que jQuery \u00e9 uma biblioteca grande e pesada para carregar em seu projeto, e se isso puder ser evitado, voc\u00ea deveria. Neste tutorial, usaremos o m\u00e9todo Javascript vanilla. Se voc\u00ea estiver implementando isso em um bloco personalizado do Gutenberg, considere usar a terceira op\u00e7\u00e3o. Ent\u00e3o voc\u00ea pode simplesmente instal\u00e1-lo Vamos pegar o arquivo apropriado! V\u00e1 para o Github do FilterizR<\/a> para fazer o download. A menos que voc\u00ea esteja instalando via npm (terceira op\u00e7\u00e3o), voc\u00ea pode entrar na pasta ‘ Tamb\u00e9m precisaremos de outro arquivo Javascript para inicializar e decidir as op\u00e7\u00f5es. Vou criar um arquivo Para fazer o WordPress incluir os scripts, precisamos enfileirar os dois scripts no Ajuste os nomes de arquivos e\/ou caminhos para se adequarem ao seu projeto\/tema. O c\u00f3digo acima enfileira o script vanilla filterizR e, em segundo lugar, o O pr\u00f3ximo passo \u00e9 ter um lugar onde queremos renderizar essa lista de posts. Isso depende inteiramente de voc\u00ea. Para simplificar neste tutorial, usarei um modelo de p\u00e1gina no meu tema. Se voc\u00ea estiver implementando isso em um bloco Gutenberg, voc\u00ea pode renderiz\u00e1-lo com PHP (para blocos din\u00e2micos) ou com Javascript no Vou criar um modelo de p\u00e1gina Neste tutorial, assumimos que queremos renderizar postagens em um tipo de postagem personalizado. Voc\u00ea pode fazer isso com postagens e categorias padr\u00e3o, mas as postagens geralmente se tornar\u00e3o muitas \u2013 o que n\u00e3o \u00e9 vi\u00e1vel de usar para esse tipo de exibi\u00e7\u00e3o. Suponha, por exemplo, um tipo de postagem personalizado para funcion\u00e1rios com uma taxonomia personalizada conectada para o departamento. N\u00e3o mostrarei como adicionar o tipo de postagem personalizado neste tutorial, apenas lembre-se de que o nome do tipo de postagem \u00e9 No meu template eu come\u00e7o gerando os filtros. Vou buscar todos os termos n\u00e3o vazios em minha taxonomia personalizada usando Antes de gerar os elementos para cada termo na taxonomia, farei um elemento para "Todos" (linha Com o c\u00f3digo acima, voc\u00ea deve obter uma lista com “All" seguido de todos os termos n\u00e3o vazios. Excelente!<\/p>\n Agora, logo abaixo disso, come\u00e7arei a renderizar os posts.<\/p>\n Ao renderizar os posts voc\u00ea precisa se lembrar de duas coisas. Uma \u00e9 envolver todos os posts dentro de um container, que darei o nome da classe Eu consulto todas as postagens do tipo de postagem personalizada A consulta na linha Quanto ao conte\u00fado de cada post, a sa\u00edda \u00e9 bastante padr\u00e3o. Geramos a imagem em destaque da postagem usando um tamanho de imagem personalizado (‘ Neste ponto, a renderiza\u00e7\u00e3o do PHP deve estar completa. Voc\u00ea est\u00e1 convidado a estilizar e torn\u00e1-lo bonito, mas n\u00e3o se preocupe em estilizar colunas. O FilterizR ir\u00e1 gerar colunas (flexbox) para voc\u00ea. O pr\u00f3ximo passo \u00e9 inicializar o script de filtragem!<\/p>\n A \u00faltima parte \u00e9 editar o O FilterizR garantir\u00e1 que o cont\u00eainer de encapsulamento de todas as postagens seja dimensionado automaticamente para caber na visualiza\u00e7\u00e3o. Por exemplo, se o filtro ativo exibir postagens em uma linha e clicarmos em outro filtro com quatro linhas, o cont\u00eainer ser\u00e1 dimensionado automaticamente para a altura correta. Assim, certificando-se de que qualquer conte\u00fado que vem depois n\u00e3o fique escondido atr\u00e1s. Mas para que esse redimensionamento autom\u00e1tico 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\u00eddo, e isso faz com que o cont\u00eainer seja recolhido automaticamente para uma altura de 0. Isso n\u00e3o \u00e9 bom. Portanto, precisamos colocar o c\u00f3digo de inicializa\u00e7\u00e3o dentro de uma fun\u00e7\u00e3o onde sabemos que as imagens terminaram de carregar. Para Javascript de baunilha, isso \u00e9 Em segundo lugar, queremos garantir que nosso script inicialize o FilterizR apenas se houver de fato um cont\u00eainer filtr\u00e1vel presente. Se inicializarmos o FilterizR e a p\u00e1gina atual n\u00e3o tiver a classe wrapper necess\u00e1ria, isso resultar\u00e1 em um erro de Javascript. Podemos resolver isso verificando se a classe container existe primeiro. Em vanilla Javascript voc\u00ea pode usar A maneira de inicializar o FilterizR por vanilla Javascript \u00e9 criando uma nova inst\u00e2ncia de A inicializa\u00e7\u00e3o acontece na linha Tenho apenas algumas dicas finais para otimizar o FilterizR, o que podemos fazer fornecendo um objeto de configura\u00e7\u00f5es. Eu recomendo dar uma olhada nas op\u00e7\u00f5es poss\u00edveis<\/a> para FilterizR para ver o que voc\u00ea pode fazer. Voc\u00ea pode controlar a velocidade da anima\u00e7\u00e3o, o tipo de anima\u00e7\u00e3o e muito mais!<\/p>\n Para fazer com que as colunas funcionem de maneira ideal em tamanhos responsivos, descobri que a configura\u00e7\u00e3o Como padr\u00e3o, cada item n\u00e3o recebe espa\u00e7o entre si. Se voc\u00ea quiser algum espa\u00e7amento entre cada item, voc\u00ea pode definir o tamanho da lacuna em px para Aqui est\u00e1 o c\u00f3digo ajustado para inicializar o FilterizR com minhas op\u00e7\u00f5es:<\/p>\n Com algum estilo menor, o resultado \u00e9 algo assim:<\/p>\n Tenha em mente que filtrar \u00e9 apenas uma coisa que o FilterizR pode fazer! Confira os exemplos em ‘Tutoriais’ em sua p\u00e1gina inicial<\/a>. Voc\u00ea pode adicionar controles para classificar, embaralhar e\/ou pesquisar. E voc\u00ea tem mais op\u00e7\u00f5es para controlar o layout tamb\u00e9m.<\/p>\n\n
jQuery<\/code>para inicializar e configur\u00e1-lo.<\/li>\nnpm<\/code>e importar a biblioteca em seu c\u00f3digo de bloco.<\/p>\nBaixando e configurando os arquivos<\/h2>\n
dist<\/code>‘ e baixar a biblioteca minificada que voc\u00ea precisa. Como vou us\u00e1-lo com vanilla Javascript neste tutorial, vou baixar o vanilla.filterizr.min.js<\/code>arquivo e coloc\u00e1-lo na minha theme-folder\/assets\/js\/<\/code>pasta. \u00c9 claro que onde voc\u00ea coloca a biblioteca depende completamente de voc\u00ea, basta ajustar o caminho mais abaixo.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Voltaremos a este arquivo mais tarde. Obviamente, isso n\u00e3o \u00e9 necess\u00e1rio se voc\u00ea estiver implementando isso em um bloco Gutenberg personalizado.<\/p>\nwp_enqueue_scripts<\/code>gancho. Isso pode ser adicionado em algum lugar no arquivo functions.php<\/code>. Igual a:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('filterizr', get_template_directory_uri(). '\/assets\/js\/vanilla.filterizr.min.js', [], false, true);\n wp_enqueue_script('filtering-script', get_template_directory_uri(). '\/assets\/js\/filtering-main.js', ['filterizr'], false, true);\n});<\/code><\/pre>\nfiltering-main.js<\/code>script que tem uma depend\u00eancia do script filterizR. Isso garante que o script de inicializa\u00e7\u00e3o seja carregado ap\u00f3s a biblioteca necess\u00e1ria.<\/p>\nRenderizando o modelo<\/h2>\n
save<\/code>m\u00e9todo do bloco. A parte importante \u00e9 renderizar o HTML ao redor das postagens e filtros corretamente.<\/p>\nRenderizando os filtros<\/h3>\n
template-filters.php<\/code>na pasta do meu tema e adicionar meu c\u00f3digo PHP para renderizar a sa\u00edda l\u00e1.<\/p>\nemployees<\/code>e o nome da taxonomia personalizada \u00e9 department<\/code>. Alterne os nomes para seu tipo de postagem e taxonomia. Se voc\u00ea n\u00e3o tiver certeza de como adicionar um tipo de postagem personalizado, tenho um post tutorial sobre como criar tipos de postagem personalizados e taxonomias<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>e adicion\u00e1-los em uma lista n\u00e3o ordenada.<\/p>\n<?php\n$departments = get_terms([\n 'taxonomy' => 'department'\n]);\n?><ul class=\"filter-controls\">\n <li data-filter=\"all\"><?php _e('All', 'txtdomain'); ?><\/li><?php\n foreach ($departments as $department) {\n ?><li data-filter=\"<?php echo $department->slug; ?>\"><?php echo $department->name; ?><\/li><?php\n }\n?><\/ul>\n\u00a0<\/code><\/pre>\n#6<\/code>). Para fazer a filtragem do FilterizR funcionar, precisamos fornecer o atributo de dados " data-filter<\/code>" para cada elemento do filtro. O conte\u00fado deve significa exclusivamente um valor de filtragem exclusivo, no nosso caso, o slug do termo (voc\u00ea pode usar o ID do termo ou qualquer outra coisa, se quiser). O FilterizR pode saber quais posts pertencem a qual filtro.<\/p>\nRenderizando as postagens<\/h3>\n
filter-container<\/code>. Essa classe \u00e9 o que precisamos direcionar com Javascript para fazer o FilterizR funcionar. E segundo, cada item precisa ter um atributo de dados ” data-category<\/code>” que liste todos os termos separados por v\u00edrgula. Os valores aqui devem corresponder aos valores que voc\u00ea gerou no data-filter<\/code>atributo ” ” dos filtros.<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>e percorro as postagens. O que voc\u00ea exibe por postagem depende totalmente de voc\u00ea, mas o exemplo abaixo renderiza a imagem em destaque, o t\u00edtulo da postagem e uma \u00fanica meta de postagem personalizada para o cargo. Tudo envolto em links que v\u00e3o para o \u00fanico funcion\u00e1rio.<\/p>\n<?php\n$employees = new WP_Query([\n 'post_type' => 'employees',\n 'posts_per_page' => -1,\n 'orderby' => 'name',\n 'order' => 'ASC'\n]);\nif ($employees->have_posts()) {\n ?><div class=\"filter-container\"><?php\n while ($employees->have_posts()) {\n $employees->the_post();\n\u00a0\n $dep = wp_get_object_terms(get_the_ID(), 'department', ['fields' => 'slugs']);\n ?><div class=\"filtr-item\" data-category=\"<?php echo implode(',', $dep); ?>\">\n <a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php\n if (has_post_thumbnail()) {\n the_post_thumbnail('employees-thumb');\n }\n\u00a0\n $job_title = get_post_meta(get_the_ID(), 'job_title', true);\n ?><div class=\"employee-info\">\n <h2><?php the_title(); ?><\/h2>\n <span class=\"job-title\"><?php echo $job_title; ?><\/span>\n <\/div><?php\n\u00a0\n\u00a0\n ?><\/a><\/div><?php\n }\n wp_reset_postdata();\n ?><\/div><?php\n}\n?><\/code><\/pre>\n#2-7<\/code>garante que eu busque todas as postagens publicadas do tipo de postagem funcion\u00e1rios, ordenadas em ordem alfab\u00e9tica. Antes de renderizar o wrapper div<\/code>de cada post, em line #13<\/code>, uso [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>para buscar todos os termos atribu\u00eddos a este post. Como par\u00e2metro pe\u00e7o apenas os slugs dos termos. O retorno \u00e9 uma matriz de quaisquer slugs de termo atribu\u00eddos. Em seguida, uso a fun\u00e7\u00e3o PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>para criar uma string de todos os elementos da matriz separados por v\u00edrgula. Isso \u00e9 ecoado como o data-category<\/code>atributo necess\u00e1rio para a raiz div<\/code>\u2013 o que faz os filtros funcionarem.<\/p>\nemployees-thumb<\/code>‘), o t\u00edtulo da postagem e o valor de uma \u00fanica meta de postagem personalizada (para o t\u00edtulo do trabalho). Tudo \u00e9 empacotado dentro de um link que vai para a visualiza\u00e7\u00e3o \u00fanica desse funcion\u00e1rio. Tamb\u00e9m adicionei algumas classes e wrappers para facilitar o direcionamento com CSS. A sa\u00edda para cada elemento \u00e9, obviamente, completamente a seu crit\u00e9rio.<\/p>\nInicializando o script de filtro<\/h2>\n
filtering-main.js<\/code>script. N\u00f3s simplesmente precisamos dizer ao FilterizR para inicializar a filtragem em nosso conte\u00fado renderizado. H\u00e1 algumas coisas a ter em mente aqui, no entanto:<\/p>\nwindow.onload<\/code>. Para jQuery voc\u00ea usaria $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>ou document.getElementsByClassName()<\/code>. Veja exemplo abaixo. Para jQuery voc\u00ea usaria jQuery('<selector>').length<\/code>para verificar isso.<\/p>\nFilterizr<\/code>, fornecendo o seletor de cont\u00eainer como primeiro par\u00e2metro e opcionalmente um objeto de configura\u00e7\u00f5es como segundo par\u00e2metro. Este \u00e9 um exemplo do mais b\u00e1sico:<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n filterizr = new Filterizr('.filter-container');\n }\n\u00a0\n}<\/code><\/pre>\n#4<\/code>. Fornecemos o nome da classe ao cont\u00eainer que envolve nossas postagens com um ponto na frente, significando um seletor de classe. Com o c\u00f3digo acima, o FilterizR agora deve assumir seus posts e coloc\u00e1-los em colunas. Como usamos os atributos de dados apropriados, os filtros tamb\u00e9m devem funcionar automaticamente!<\/p>\nPersonalizando as op\u00e7\u00f5es do FilterizR<\/h3>\n
layout<\/code>para ‘ sameWidth<\/code>‘ faz com que o FilterizR funcione melhor com postagens com alturas diferentes. Isso resulta em um estilo “Ma\u00e7onaria”. Em nosso exemplo, ecoamos conte\u00fado adicional ap\u00f3s a imagem, e isso pode resultar em alturas variadas (os nomes podem ser mais longos, for\u00e7ando-o em v\u00e1rias linhas). Isso pode resultar em algum comportamento estranho.<\/p>\ngutterPixels<\/code>. No exemplo acima, usei 10px como tamanho da lacuna. PS: O tamanho da lacuna tamb\u00e9m \u00e9 adicionado ao cont\u00eainer de embalagem. Isso pode nem sempre ser o que voc\u00ea quer. Para substituir isso, simplesmente adicionei estilo padding: 0!important<\/code>ao .filter-container<\/code>.<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n var options = {\n layout: 'sameWidth',\n gutterPixels: 10,\n }\n filterizr = new Filterizr('.filter-container', options);\n }\n\u00a0\n}<\/code><\/pre>\n![\"Implementando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n