Quer você seja um fotógrafo, designer ou proprietário de uma empresa, seu portfólio é a ferramenta mais poderosa que você tem para conquistar novos clientes. Mas pode ser frustrante para os visitantes se eles tiverem que vasculhar dezenas de imagens ou projetos apenas para encontrar o que procuram.
Eu já vi como um portfólio desorganizado pode fazer você perder oportunidades. Se um cliente em potencial quer ver seus estudos de caso de 'Design de Logotipo', mas se perde em seus projetos de 'Desenvolvimento Web', ele pode simplesmente ir embora.
É aí que entra um portfólio filtrável. Ele permite que os visitantes classifiquem seu trabalho por categoria, tag ou tipo de projeto com um único clique, facilitando a localização exata do que eles precisam.
Neste guia, mostrarei como criar facilmente um portfólio filtrável no WordPress, passo a passo.
Cobrirei dois métodos, para que você possa escolher o que melhor se adapta às suas necessidades:
- Método 1: Envira Gallery (Recomendado para Fotos) – Ideal se você deseja exibir uma galeria de imagens (como um álbum de casamento ou portfólio de fotografia).
- Método 2: WPFilters (Recomendado para Projetos) – Ideal se você deseja filtrar estudos de caso, posts de blog ou produtos WooCommerce.
Por que Criar um Portfólio Filtrável no WordPress?
A maioria dos fotógrafos e designers criam portfólios incríveis mostrando suas melhores fotografias. No entanto, às vezes, as pessoas que procuram te contratar podem querer ver se você já fez algo semelhante antes.
Por exemplo, alguém procurando um fotógrafo de moda pode querer ver seu trabalho anterior na área de moda.
Adicionar filtros ao seu portfólio permite que você mostre seu trabalho sob diferentes tags. Também ajuda seus usuários a classificar facilmente os itens em seu portfólio.
Vamos dar uma olhada em como criar facilmente um portfólio filtrável no WordPress, sem necessidade de codificação.
Método 1: Criando um Portfólio Filtrável Usando Envira Gallery (Recomendado para Fotos)
Envira Gallery é o melhor plugin de galeria de fotos para WordPress. Ele permite criar portfólios de imagens bonitos e filtráveis que carregam rapidamente e ficam ótimos em todos os dispositivos.
Testamos exaustivamente o Envira Gallery para ver como ele se compara a outras soluções. Para ler mais sobre nossa experiência, veja nossa análise completa do Envira Gallery.
Primeiro, você precisa instalar e ativar o plugin. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Observação: Embora exista uma versão gratuita do Envira Gallery, você precisará do plano Plus ou superior para acessar o Addon de Tags necessário para este tutorial.
Após a ativação, você precisa visitar a página Envira Gallery » Settings para inserir sua chave de licença. Você pode obter essas informações em sua conta no site do Envira Gallery.
Assim que você inserir a chave, deverá clicar no botão ‘Verify Key’. Você verá uma mensagem de que o site está recebendo atualizações.
Em seguida, você precisa instalar o addon de tags. Para fazer isso, vá para a página Envira Gallery » Addons e encontre o Tags Addon.
Assim que encontrá-lo, você precisa clicar no botão ‘Install’.
O Envira Gallery buscará e instalará o addon para você, e então você precisará clicar no botão ‘Activate’ para começar a usá-lo.
Agora, você está pronto para criar seu portfólio filtrável.
Criando Seu Portfólio e Organizando Imagens
Vá para a página Envira Gallery » Add New para criar sua primeira galeria e dar um nome a ela.
Agora você pode adicionar fotos à sua galeria. Clique no botão ‘Select Files from Your Computer’ para fazer upload de novas imagens, ou clique em ‘Select Files from Other Sources’ para escolher imagens já existentes em sua biblioteca de mídia do WordPress.
Se as fotos já estiverem na biblioteca de mídia do WordPress, então você deve clicar no botão ‘Selecionar Arquivos de Outras Fontes’.
O Envira agora fará o upload e inserirá esses arquivos na sua galeria. Assim que terminar, você poderá rolar para baixo para ver suas imagens.
Dica de Especialista: Imagens de alta resolução podem diminuir o desempenho do seu site. Recomendo usar uma ferramenta como EWWW Image Optimizer ou Smush para comprimir suas fotos de portfólio antes de enviá-las para o Envira.
Para mais detalhes, veja nosso guia sobre como adicionar galerias de imagens no WordPress.
Em seguida, clique no ícone de lápis para editar uma imagem. Isso abrirá um pop-up onde você pode adicionar as tags e outros metadados às suas fotos.
Pense em tags como palavras-chave ou categorias para suas imagens. Por exemplo, você pode usar tags como 'Casamentos', 'Retratos', 'Paisagens' ou 'Preto e Branco'. Essas tags se tornarão os filtros clicáveis que seus visitantes usarão para classificar seu portfólio.
Insira as tags que você deseja atribuir a esta foto. Você pode adicionar várias tags separadas por vírgula. Quando terminar, clique no botão 'Salvar Metadados' para armazenar suas tags.
Agora, você precisa repetir o processo para adicionar tags a todas as imagens da sua galeria.
Dica Profissional: Seja consistente com suas tags. Por exemplo, use sempre ‘Retratos’ em vez de alternar entre ‘Retrato’ e ‘Retratos’. Isso mantém seus filtros limpos e fáceis de usar para os visitantes.
Habilitando as Configurações de Filtro
Após adicionar tags às suas fotos, clique na aba ‘Tags’ à esquerda da página da sua galeria. É aqui que você pode habilitar ou desabilitar a filtragem por tags para sua galeria.
Você precisa marcar a caixa ‘Habilitar Filtragem por Tags?’ para ativar a filtragem por tags, e você poderá ver as configurações para esta opção.
Você pode escolher a posição das tags (acima ou abaixo da galeria), decidir se exibe todas as tags ou apenas algumas específicas, e configurar outras opções de exibição.
Quando terminar, basta clicar no botão ‘Publicar’ para tornar sua galeria ativa. Sua galeria de portfólio agora está pronta para ser adicionada ao seu site.
Adicionando o Portfólio Filtrável ao Seu Site WordPress
Agora você pode criar o post ou página onde deseja exibir seu portfólio filtrável. Se você estiver usando o editor de blocos, então simplesmente adicione um bloco Envira Gallery ao artigo.
Depois disso, você deve clicar no menu suspenso ‘Pesquisar uma galeria’ e selecionar a galeria que você publicou anteriormente.
Se você estiver usando o editor clássico, então você deve clicar no botão ‘Adicionar Galeria’ localizado acima da barra de ferramentas do editor de posts.
Isso abrirá um pop-up onde você pode selecionar a galeria que acabou de criar e inseri-la em sua postagem e página do WordPress.
Agora você pode atualizar sua postagem ou página para salvar suas alterações e visualizar seu site para ver seu portfólio filtrável em ação.
Se você gostaria de aprender mais sobre o que pode fazer com o Envira Gallery, confira estes tutoriais:
- Como Criar uma Galeria de Imagens no WordPress (Passo a Passo)
- Como Adicionar uma Galeria no WordPress com Efeito Lightbox
- Como Adicionar Marca d'água Automaticamente a Imagens no WordPress
Método 2: Criando um Portfólio Filtrável Usando WPFilters (Recomendado para Projetos)
WPFilters é o melhor plugin de filtragem de conteúdo para WordPress. Ele permite adicionar ordenação estilo Amazon ao seu site e funciona perfeitamente para estudos de caso de projetos e páginas de projetos detalhadas.
Ele permite que seus visitantes filtrem seu trabalho por categoria, tag ou campos personalizados sem recarregar a página. Ele também herda a estilização do seu tema automaticamente através de blocos nativos, então você não precisa se preocupar com ajustes manuais de CSS.
Testamos exaustivamente o WPFilters para ver como ele se compara a outras soluções. Para ler mais sobre nossa experiência, veja nossa análise completa do WPFilters.
Configurando as Definições do Plugin
Primeiro, você precisa instalar e ativar o plugin WPFilters. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Ao ser ativado, o assistente de configuração será iniciado automaticamente. Clique no botão ‘Vamos Começar’ para iniciar.
Descobri que o assistente de integração é incrivelmente eficiente. Consegui ir da instalação a um bloco de filtragem totalmente funcional em menos de 5 minutos.
Dica Pro: Se você é um desenvolvedor que usa Advanced Custom Fields (ACF), vai adorar que o WPFilters detecta automaticamente seus dados ACF. Isso economiza muito tempo, pois você não precisa mapear manualmente campos personalizados para seus filtros.
Na próxima tela, você será perguntado: ‘Que Tipo de Dados Seu Site Usa para Filtragem?’ Isso informa ao plugin que tipo de conteúdo você tem em seu site.
Para um portfólio padrão, você deve marcar as caixas para ‘Categoria do WordPress’ e ‘Tag do WordPress’.
No entanto, se você estiver construindo um portfólio de produtos para vender seu trabalho, certifique-se de marcar as opções ‘Categoria do WooCommerce’ e ‘Preço do WooCommerce’.
Se você tem um portfólio muito grande com subcategorias profundas, notei que o WPFilters lida com aninhamento hierárquico lindamente, indentando automaticamente as categorias filhas. Isso evita uma longa parede de texto e torna muito mais fácil para seus clientes navegarem em listas complexas de projetos.
Ao clicar no botão ‘Salvar e Continuar’, você será solicitado a inserir sua chave de licença, que pode ser encontrada na área da sua conta no site do WPFilters.
Na tela final, você verá uma mensagem de sucesso. Simplesmente clique no botão ‘Salvar e Concluir’ para finalizar a configuração.
Personalizando Seus Filtros de Portfólio
O assistente de configuração cria filtros automaticamente para você com base em suas escolhas. No entanto, você pode querer personalizar a aparência deles.
Simplesmente vá para WPFilters » Elementos no seu painel do WordPress. Aqui, você verá os filtros que o assistente de configuração criou para você, como ‘Categoria do WordPress’ e ‘Tag do WordPress’. Neste tutorial, filtraremos nosso portfólio por categoria.
Vamos personalizar o filtro de categoria. Você precisa clicar no ícone de lápis ao lado do elemento ‘WordPress Category’ para editá-lo.
Isso abrirá o editor de filtros.
Você pode ver que a Fonte de Dados já está definida como ‘Categories’.
Dedique um momento para se familiarizar com as configurações desta página. Para tornar o filtro mais útil, recomendo ativar a opção ‘Item Count’ na seção Items.
Isso exibe o número de projetos em cada categoria ao lado do nome do filtro (como ‘Web Design (12)’), o que ajuda os visitantes a verem quanto conteúdo você tem.
Assim que estiver satisfeito com suas configurações, clique no botão ‘Save’ no canto superior direito.
Exibindo Seu Portfólio Filtrável
Agora que você personalizou seu filtro, precisa adicioná-lo ao seu site. A melhor parte do WPFilters é que ele funciona facilmente com o bloco nativo WordPress Query Loop.
O bloco Query Loop é a solução integrada do WordPress para exibir conteúdo dinâmico. Ele funciona perfeitamente com o WPFilters para criar exibições de conteúdo filtráveis.
Simplesmente edite a página onde você deseja que seu portfólio apareça.
Primeiro, adicione o bloco ‘WPFilters Element’ à página. Nas configurações do bloco à direita, certifique-se de que seu filtro ‘WordPress Category’ esteja selecionado.
Em seguida, imediatamente abaixo do filtro, adicione um bloco Query Loop.
Você pode escolher um padrão ‘Grid’ ou ‘List’ que se adapte ao seu design.
Nas configurações do bloco à direita, encontre a seção ‘Settings’. Certifique-se de selecionar o tipo de consulta ‘Custom’ e o tipo de postagem ‘Posts’.
Isso garantirá que o bloco exiba suas postagens em vez da página atual.
Dica de Especialista: Embora o bloco Query Loop seja poderoso, ele pode ser complicado para iniciantes configurarem corretamente. Se você não vir seus itens, verifique novamente se selecionou o tipo de postagem correto nas configurações do bloco.
É isso! Agora você pode visualizar sua página.
Ao selecionar uma categoria no filtro, a lista de postagens será atualizada instantaneamente para mostrar os resultados.
Observação: Filtros também podem ser adicionados a uma barra lateral como widgets ou blocos. Quando usados dessa forma, eles interagirão automaticamente com outras consultas de página primárias, como listagens da Loja WooCommerce, arquivos de posts do blog ou qualquer outro conteúdo renderizado usando um loop WP_Query.
Tutorial em Vídeo
Perguntas Frequentes Sobre Portfólios Filtráveis
Aqui estão algumas das perguntas mais frequentes que nossos leitores fazem sobre a criação de portfólios filtráveis no WordPress.
1. Qual é o melhor plugin do WordPress para um portfólio filtrável?
O melhor plugin depende do seu conteúdo específico. Para portfólios baseados em imagens (como fotografia ou design gráfico), Envira Gallery é a melhor escolha porque foca em apresentação visual de alta qualidade.
No entanto, para portfólios baseados em projetos (como estudos de caso, posts de blog ou listagens de imóveis), WPFilters é superior porque permite filtrar o conteúdo existente do WordPress por categoria, tag ou campo personalizado.
2. Posso criar um portfólio de produtos filtrável para WooCommerce?
Sim. O WPFilters foi projetado especificamente para funcionar perfeitamente com o WooCommerce. Ele permite que você crie um portfólio de produtos onde os clientes podem filtrar itens por preço, atributos do produto (como tamanho ou cor) e categorias, oferecendo uma experiência de compra semelhante à da Amazon.
3. Os usuários precisam recarregar a página para ver os resultados filtrados?
Não. Tanto o Envira Gallery quanto o WPFilters usam tecnologia Ajax. Quando um visitante clica em um filtro, o conteúdo é atualizado instantaneamente sem recarregar a página. Isso garante que seus visitantes tenham uma experiência rápida e fluida.
4. Posso adicionar vídeos ao meu portfólio filtrável?
Sim, se você escolher o Envira Gallery, poderá instalar o Addon de Vídeos específico. Esta extensão permite incluir vídeos do YouTube, Vimeo e vídeos hospedados localmente em seu portfólio filtrável, juntamente com suas imagens.
5. Esses plugins de portfólio funcionarão com meu tema WordPress?
Sim. Tanto o Envira Gallery quanto o WPFilters são projetados para funcionar com qualquer tema WordPress codificado corretamente. Eles também se integram facilmente com construtores de páginas populares como SeedProd, Divi e Elementor, permitindo que você coloque seu portfólio em qualquer lugar do seu site.
Recursos Adicionais e Próximos Passos
Agora que você sabe como criar um portfólio filtrável, pode querer explorar outras maneiras de melhorar as galerias e imagens do seu site. Confira estes guias úteis:
- Melhores Plugins de Galeria de Fotos WordPress – Veja nossa comparação especializada dos melhores plugins de galeria para garantir que você esteja usando a melhor ferramenta para o trabalho.
- Como Adicionar uma Galeria com Efeito Lightbox – Faça suas imagens de portfólio se destacarem permitindo que os usuários as visualizem em uma bela sobreposição de lightbox.
- Como Adicionar Automaticamente uma Marca d’Água às Imagens – Proteja seu trabalho árduo adicionando automaticamente seu logotipo ou uma marca d’água a cada foto que você carrega.
- Como Criar uma Galeria de Imagens de Produtos WooCommerce – Se você vende suas fotos ou arte online, este guia mostrará como criar galerias de produtos impressionantes para sua loja.
- Como Criar uma Galeria de Imagens no WordPress – Uma ótima atualização sobre os fundamentos da criação de galerias de imagens bonitas e responsivas.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Galerias filtráveis são um item essencial para criativos.
Dica útil que aprendi: crie um sistema de marcação padronizado antes de configurar suas tags do Envira Gallery. Faço isso com todos os meus clientes fotógrafos. Eu me atenho a tags consistentes como "casamento", "retrato" e "comercial" em todo o trabalho deles. É super útil por dois motivos:
– Torna a manutenção do portfólio muito mais fácil
– Cria uma experiência de filtragem melhor para os visitantes
A propósito, o Addon de Tags que você mencionou tem sido perfeito para implementar este sistema!
Haim
Todas as galerias de fotos que encontrei até agora que suportam Tags permitem filtrar uma tag por vez. Eu gostaria de implementar uma galeria onde eu possa filtrar com base em várias tags para obter as fotos que possuem TODAS as tags. Para isso, a seleção de Tags deve estar em formato de caixa de seleção para permitir marcar mais de uma. Alguém pode me indicar tal solução para WP? Obrigado.
divp
boa continue compartilhando
Lewis
Artigo realmente incrível, adorei este tema e em breve contratarei um desenvolvedor web para criar um tema como este para mim. Obrigado!