Como adicionar filtros de postagem ao seu site WordPress facilmente

Uma solicitação frequente que encontro é a capacidade de permitir que os usuários filtrem ou classifiquem postagens no front-end de seu site.

Talvez os usuários queiram ver as postagens em ordem alfabética ou talvez vejam apenas as postagens com miniaturas? Isso já faz sentido para postagens regulares, mas pode ser ainda mais significativo no caso de produtos, fotos ou outros tipos de conteúdo.

No Weekend WordPress Project de hoje, darei um resumo rápido de como você pode implementar um recurso como esse no tema Twenty Fifteen. Vamos rachar!

• Criando um tema filho
• Criando controles
• Modificando a consulta
• Formulários mais inteligentes
• Comportamento do WordPress
• Conclusão

Criando um tema filho

Como sempre, você precisa de um tema filho. Temos um guia para temas filhos aqui no WPMU DEV, recomendo dar uma lida se você não estiver familiarizado com temas filhos.

Criando controles

Vamos adicionar três controles: um para ordenar as postagens, um para definir a direção da classificação e outro para mostrar apenas as postagens com miniaturas.

O primeiro passo é copiar o index.php do tema pai em nosso tema filho.

Abra o arquivo index.php em seu tema filho e cole o seguinte HTML abaixo do container principal (que deve estar na linha 20):

E aqui está o que parece no front-end:

Como você pode ver, falta um pouco de estilo. Vamos resolver isso adicionando alguns estilos à folha de estilo:

Uma reação que escuto com frequência de novatos na programação é: “como ele sabia que esses são os estilos que vão fazer com que ela se integre ao tema?”

A solução é bem simples: eu trapaceio. Eu uso as ferramentas do desenvolvedor no Chrome para inspecionar os elementos regulares do artigo. Nesse caso, ele me permitiu ver como os elementos obtêm suas sombras de caixa e suas margens e eu simplesmente apliquei essas regras ao meu próprio elemento.

Modificando a consulta

Vamos selecionar “ordenar por título”, “ascendente” e “postagens com miniaturas” e enviar o formulário. Você deve realmente ver uma mudança sem fazer nada no código.

Para ver o porquê, vamos inspecionar o URL. Deve ser algo assim:

 http://seudominio.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

As informações podem ser recuperadas em nossos scripts PHP usando a variável $_GET . O WordPress já sabe o que significam os parâmetros order e orderby e os utiliza na consulta padrão. Como resultado, se precisarmos apenas de ordenação e direção de ordem, na verdade, tudo está feito.

Isso é tudo ótimo, mas, novamente, como eu sabia disso? Eu poderia ter usado “order_by” como parâmetro em vez de “orderby”. Nesse caso, o WordPress não capta nossas intenções. Eu dei uma olhada na documentação WP_Query no WordPress Codex onde há vários parâmetros, muitos dos quais podem ser usados ​​em URLs.

Agora, vamos implementar nosso parâmetro de miniatura de postagem. Uma postagem tem uma miniatura se tiver metadados com a chave _thumbnail_id associada a ela. Precisaremos modificar nossa consulta para garantir que isso seja levado em consideração. Vamos fazer isso agora com query_posts() .

Cole o seguinte código acima da função get_header() na parte superior do arquivo:

Mesclamos os parâmetros da consulta original com nosso próprio novo parâmetro, o que resulta em um conjunto diferente de postagens. Nosso formulário agora funciona, mas não lembra de nossas seleções. Vamos corrigir isso reescrevendo nosso formulário e usando um pouco de PHP.

Formulários mais inteligentes

Além de listar todas as opções do pedido por seletor precisamos de uma forma de indicar qual está selecionado. Se fôssemos fazer isso sem um loop, seria algo assim:

Você entende alguma coisa disso? Eu não te culpo! Dentro de cada opção estamos verificando se o valor atualmente selecionado é igual ao valor da opção. Se for, produzimos a propriedade selecionada. Vamos tornar isso muito mais limpo com um loop:

Isso é um pouco mais longo, mas apenas porque temos três opções. Este é um formato muito melhor para gerenciar qualquer tipo de seleção. Vamos estender isso para todo o formulário:

Tudo feito. O formulário agora deve lembrar nossas seleções com base nas variáveis $_GET na URL.

Comportamento do WordPress

Lembra como mencionei que sei usar “order” e “orderby” porque olhei a documentação do WP_Query? Esta é uma boa prática, mas pode levar a resultados inesperados. Encontre o slug de uma categoria que você possui, digamos que esta categoria seja “wordpress”.

Agora use o seguinte URL: http://yourwebsite.com/?category_name=wordpress. Você deve ver seu arquivo de categorias, listando todas as suas postagens do WordPress. Isso é ótimo, mas temos dois problemas:

Se você tiver belos permalinks ativados (o que você deveria), a página foi redirecionada para um novo URL, provavelmente http://yourwebsite.com/category/wordpress. Nossos filtros não serão visíveis porque o arquivo archive.php lida com essa visualização, não index.php . Além disso, nosso nome de categoria não é passado como um parâmetro de URL, então precisaremos usar alguns truques adicionais para fazer nossos filtros funcionarem.

A maneira mais rápida de fazer isso funcionar é não usar deliberadamente os mesmos parâmetros que o WordPress usa. Você pode passar o nome da categoria usando o parâmetro catname na URL, pois o WordPress não vai pegar isso. Você pode então alimentar isso na consulta usando o nome de parâmetro correto. Algo assim:

A alternativa seria usar uma função em vez de gerar nosso formulário em index.php como está. Você precisaria detectar a categoria na própria consulta do WordPress e exibir a seleção atual com base nisso.

Conclusão

Adicionar seus próprios filtros não é tão difícil, mas requer um pouco de manipulação. No nosso caso, você pode querer garantir que a paginação seja removida quando o pedido for definido como aleatório. Ele poderia ser substituído por um botão “mostrar mais aleatoriedade”, que simplesmente recarrega a página.

Espero que este artigo tenha dado a você o básico de como você pode fazer isso por si mesmo e você poderá criar os filtros necessários.

• projetos wordpress fim de semana