2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

04

Explicação

Taxonomia

O anúncio de um imóvel pode conter diversas informações, por exemplo, sua localização. Acrescentaremos essa informação
em "Casa de Argila". Se formos em "Editar Imóvel" nos depararemos com a seguinte tela:

Se quisermos alterar a localização de um imóvel, podemos adicionar essa informação logo abaixo da descrição que já está
inclusa. Podemos escrever, por exemplo, "Localização: São Paulo". Salvando essa modiᦈcação e dando um "reload" na página
podemos veriᦈcar que estará tudo em ordem:

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 1/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Uma funcionalidade interessante seria acrescentar um sistema de busca, um ᦈltro. Para que o usuário tenha facilidade de
encontrar um determinado imóvel situado, por exemplo, em São Paulo. Quando nós adicionamos um "Post" o WordPress
fornece a opção de ᦈltrarmos por categorias nossos posts:

O próprio WordPress já possui um sistema que possibilita que ele encontre distintas categorias. Assim, seria mais fácil que
nós pudessemos encontrar as localizações como nós buscamos as categorias. Vamos introduzir isso! O WordPress possui algo
que se chama "Taxinomia", podemos jogar no Google e a wikipedia nos fornece informações sobre o signiᦈcado dessa
palavra que em linhas gerais signiᦈca "classiᦈcação das coisas".

O que faremos é criar uma espécie de "taxinomia" de localização. Para criar novas funcionalidades no tema podemos abrir o
arquivo "function.php" e ao ᦈnal da página acrescentamos a função register_taxonomy cujo apelido será "localização" e
como ela servirá para o tipo de post "imovel", também passaremos isso e, por ᦈm, passaremos uma $args . Em seguida, após
termos acrescentado isso, podemos deᦈnir os seus argumentos, $args , será igual a array e faltará, ainda, colocarmos os
nomes aos bois, isto é, passarmos uma série de nomes, por exemplo, o label que deverá ser igual a $labels . Temos que
declarar os $labels , escreveremos na linha de cima da $args , que ele será igual a array e temos que passar para a label

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 2/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

os argumentos que tínhamos antes, name , singular_name , edit_item que seriam iguais, respectivamente, a Localizacoes ,
Localizacao e Editar Localizacao . Mas, vimos como ter uma solução mais inteligente! Criar uma variável nova, por

exemplo, $nomeSingular , para que, no caso de mudança, isso não acarrete em alterações diversas vezes. Assim, teremos que
a variável $nomeSingular será igual a Localização e $nomePlural a Localizações . Por ᦈm, alteramos o name ,
singular_name e edit_item escrevemos que são iguais a $nomePlural pu $nomeSingular :

$nomeSingular = 'Localização';
$nomePlural = 'Localizações';

$labels = array(
'name' => $nomePlural,
'singular_name' => $nomeSingular,
'edit_item' => 'Editar'. $nomeSingular
);

$args = array(
'labels' => $labels
);

register_taxonomy('localizacao', 'imovel', $args);

Testando isso teremos o seguinte:

Onde podemos inclusive veriᦈcar o título e o trecho que fala em "Adicionar Nova Tag". Podemos adicionar uma última
label , a add_new_item que será igual a Adicionar nova , um . e $nomeSingular :

$labels = array(
'name' => $nomePlural,
'singular_name' => $nomeSingular,
'edit_item' => 'Editar'. $nomeSingular
'add_new_item' => 'Adicionar nova' . $nomeSingular
);

Salvando e testando teremos o seguinte:

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 3/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Podemos, ainda, passar um parâmetro para o args falando que ele é público e isso é igual a true e um terceiro parâmetro
que passaremos é que a localização será hierárquica, hierarchical que será igual a true . Sobre a hierarquical é porque
nosso imóvel pode ter além da localização da cidade, também o bairro, onde o bairro é "subordinado" a cidade:

$args = array(
'labels' => $labels,
'public' => true,
'hierarchical' => true
);

Salvando isso teremos uma página onde poderemos colocar, inclusive, a relação hierárquica entre as informações. Aqui
podemos acrescentar uma "localização" nova, adicionamos "São Paulo" e podemos colocar também "Vila Mariana" e ao
acrescentarmos esse último podemos escolher a opção de que "São Paulo" é "pai" da "Vila Mariana":

Agora, quando entrarmos em um imóvel já existente, por exemplo "Casa de Argila" poderemos escolher qual a sua
localização.

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 4/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Por enquanto, esta informação ainda não estará visível, já ajeitaremos isso!

E como colocamos diversas labels em nosso código, podemos, organizar um pouco o código adicionando a function
registra_taxonomia_localizacao e depois do register_taxonomia , acrescentamos um add_action('init',

'registra_localizacao') . Teremos o seguinte:

function criando_taxonomia_localizacao() {
$singular = 'Localização';
$plural = 'Localizações';

$labels = array(
'name' => $plural,
'singular_name' => $singular,
'view_item' => 'Ver ' . $singular,
'edit_item' => 'Editar ' . $singular,
'new_item' => 'Novo ' . $singular,
'add_new_item' => 'Adicionar novo ' . $singular
);

$args = array(
'labels' => $labels,
'public' => true,
'hierarchical' => true
);

register_taxonomy('localizacao', 'imovel', $args);

}

add_action( 'init' , 'criando_taxonomia_localizacao' );

Implementando ំ�ltro

Por enquanto, a "localização" não se converteu em um benefício para o usuário. Essa informação estará visível apenas para o
administrador, vamos criar um meio acessível de ᦈltrar os nossos imóveis.

Antes disso, vamos atualizar para que o imóvel "Casa de Madeira" tenha sua localização registrada em "São Paulo", para isso
basta selecionar a opção na caixa "localização" e vamos atualizar a "Casa de Praia" que terá sua localização no "Rio de
Janeiro".

Feito isso, vamos cadastrar dois novos imóveis, para isso, vamos em "Imóveis > Adicionar Novo". O primeiro novo imóvel se
chamará "Casa de Campo", cuja descrição será "casa de campo linda", a localização "São Paulo" e escolhemos uma imagem de
detaque. Podemos adicionar um segundo imóvel seguindo o mesmo caminho, seu título será "Apartamento luxuoso", sua

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 5/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

descrição "Um apartamento gourmet", sua localização será "Rio de Janeiro" e escolhemos, também, uma imagem de
destaque.

Agora que já temos cinco imóveis podemos re᫘etir a cerca de como ᦈltrar esses imóveis. Para ᦈltrá-los podemos pensar na
parte que traz nossos imóveis para a tela, no caso, o loop . Assim, podemos acessar o arquivo "index.php" e teremos o
seguinte nesse arquivo:

"Filtrar" é um dado a mais que passaremos, assim, podemos organizar um pouco o código adicionando espaçamentos e na
args podemos acrescentar um tax_query e isso receberá uma array e dentro deste array colocaremos as coisas

relacionadas a taxinomia que queremos, ou seja, 'taxonomia' => 'localizacao' e 'field' => 'slug' . O slug é o que será
ᦈltrado e ele é melhor de ser utilizado, pois não contêm espaços nem acentos. Observe como ele está presente no
formulário:

Falta, ainda, adicionarmos em nosso código qual o item que desejamos. Passaremos o termo, terms deve ser sao‐paulo .
Teremos:

<main class="home‐main">
<div class="container">

<?php

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 6/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

$args = array(
'post_type' => 'imovel',
'tax_query' => array(
'taxonomia' => 'localizacao',
'field' => 'slug',
'terms' => 'sao‐paulo'
);
);

/...

</div>
</main>

Falta, ainda, um pedaço desse código, o tax_query não recebe apenas o array . Ele vai receber um array de array , então,
vamos envolver o que temos com mais uma array . Fazemos isso pois o WordPress é capaz de realizar buscar entrelaçadas.
Observe o código:

$args = array(
'post_type' => 'imovel',
'tax_query' => array(
array(
'taxonomy' => 'localizacao',
'field' => 'slug',
'terms' => 'sao‐paulo'
)
)
);

Dando um "reload" teremos os três imóveis cujo slug é "sao-paulo":

Voltando ao código e observando ele podemos melhorar alguns detalhes:

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 7/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Podemos retirar as informações que estão ligadas a array e podemos salvar elas em uma variável, para que o código ᦈque
mais legível. Retiramos o seguinte:

array(
array(
'taxonomia' => 'localizacao',
'field' => 'slug',
'terms' => 'sao‐paulo'
)

E colocamos no lugar uma variável, a $taxQuery e passamos para ela o array que tínhamos retirado. Teremos o seguinte:

<?php

$taxQuery = array(
array(
'taxonomy' => 'localizacao',
'field' => 'slug',
'terms' => 'sao‐paulo'
)
);

$args = array(
'post_type' => 'imovel',
'tax_query' => $taxonomy_args
);

Agora, nosso código estará funcionando direitinho. Falta darmos um jeito no ᦈltro, por enquanto nós estamos ᦈltrando a
mão.

Filtrando

Já criamos um meio de ᦈltrar as opções que temos usando a taxonomia por localização. Vamos criar um meio do próprio
usuário escolher dentre as opções do ᦈltro. Essa escolha será feita através de um formulário que criaremos no arquivo
"index.php". Para isso digitaremos, abaixo da main class e do div class , o form :

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 8/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Vamos incluir o select e um name , ou seja, aquilo que será incluído vai ser a taxonomy . O name deve possuir dentro de si
options que deverão ter seus valores, value . A primeira option value pode ser igual a São Paulo . Quando acabarmos de

inserir as opções podemos fechar o select :

<form>
<select name ="taxonomy">
<option value ="">São Paulo</option>
</select>
</form>

Mas, escrever todas as localizações a mão não faz muito sentido! É preciso trazer todas as localizações que estiverem
guardadas no banco de dados. O WordPress possui uma função que pode nos auxiliar. Se é uma função usamos o php e
vamos salvar essas opções em uma variável, a $taxinomias que será igual a função get_terms , ou seja, pega termos. No
caso, o que queremos é a localização , e é isso que passaremos para essa função:

<?php $taxonomias = get_terms('localizacao'); ?>

<form>
<select name="taxonomy">
<option value ="">São Paulo</option>
</select>
</form>

Falta, ainda, inteirar o array de taxonomias que foi gerado e que ele cuspa as opções que existem para cada uma das
"taxinomias" que ocorrem na interação. O que iremos acrescentar é que, "para cada um das taxinomias que sejam
taxinomias", foreach($taxonomias as $taxinomia)? deve ser impresso uma option , cujo valor deve ser $taxonomia‐>slug . O
slug é o que estamos utilizando para buscar as opções e adicionamos um sinal de igual antes, = , para que a informação

seja impressa. E, por ᦈm, apagamos o "São Paulo", pois, o que vai aparecer é que o próprio "$taxinomia->name" é o nome da
taxinomia.

<?php $taxonomias = get_terms('localizacao'); ?>

<form>
<select name="taxonomy">
<?php foreach($taxonomias as $taxinomia) { ?>
<option value="<?= $taxonomia‐>slug; ?>"><?= $taxonomia‐>name; ?></option>
<?php } ?>
</select>
</form>

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 9/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Dando um reload teremos em nossa página uma caixinha onde constará as opções "Rio de Janeiro" e "São Paulo", ou seja, as
duas localizações que temos registradas:

Na verdade, se formos em "Painel > Imóveis > Localizações" poderemos visualizar que temos uma terceira localização, o
bairro "Vila Mariana" que, soma zero em sua contagem, ou seja, não registramos nada sob esse nome e por isso não nos é
mostrado nenhuma informação a cerca.

Falta adicionarmos no formulário um botão para que a informação que acrescentamos seja submetida. Assim, após fechar o
select podemos adicionar um button type que deverá ser igual a submit e cujo nome será "Filtrar", <button

type="submit">Filtrar</button> . Além disso, podemos acrescentar um CSS para que isso que acabamos de colocar ᦈque

mais bonito. Assim, abaixo do get_terms colocaremos uma class que será igual a busca‐localizacao‐form e abaixo disso,
acrescentamos um div class que deverá ser igual a taxonomy‐select‐wrapper . Assim, fechamos a div e nosso código
ᦈcará da seguinte maneira:

<?php $taxonomias = get_terms('localizacao'); ?>

<form class="busca‐localizacao‐form">
<div class="taxonomy‐select‐wrapper">
<select name="taxonomy">
<?php foreach($taxonomias as $taxonomia) { ?>
<option value="<?= $taxonomia‐>slug; ?>"><?= $taxonomia‐>name; ?></option>
<?php } ?>
</select>
</div>
<button type="submit">Filtrar</button>
</form>

Dando um reload teremos a caixa "ᦈltrar" centralizada no site:

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 10/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

Entretanto, se escolhermos a opção "Rio de Janeiro" ele continuará mostrando apenas as casas de São Paulo. É necessário
ajustar esse comportamento. É preciso que passemos essa informação em algum lugar. Falta passarmos os atributos de tag
principal, da form , que são o method que será igual a get e o action que deverá ser igual a bloginfo . Como a informação
que desejamos é a url passaremos isso também! Teremos o seguinte:

<?php $taxonomias = get_terms('localizacao'); ?>

<form class="busca‐localizacao‐form" action="<?= bloginfo('url'); ?>">
<div class="taxonomy‐select‐wrapper">
<select name="taxonomy">
<?php foreach($taxonomias as $taxonomia) { ?>
<option value="<?= $taxonomia‐>slug; ?>"><?= $taxonomia‐>name; ?></option>
<?php } ?>
</select>
</div>
<button type="submit">Filtrar</button>
</form>

Se dermos um "reload" ele estará ᦈltrando as informações conforme queríamos. Falta passarmos para o terms da
$taxQuery que ele deve ser igual a $_GET['taxonomy'] :

$taxQuery = array(
array(
'taxonomy' => 'localizacao',
'field' => 'slug',
'terms' => $_GET['taxonomy']
)
);

Teremos nosso ᦈltro funcionando da maneira como queríamos. Mas, por exemplo, se não digitarmos nenhum caminho para
o navegador ele não nos mostrará nada.

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 11/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

O ideal é que todos os imóveis apareçam. Mesmo que não ᦈltremos nada. Caso contrário o site ᦈca esquisito.

Voltando no código podemos pensar: "Quando é preciso que ele realize a busca por temas?" A resposta é: quando o usuário
submeter as respostas no formulário. Para que isso aconteça podemos incluir uma função no topo da página, a
array_key_exists e passamos para ele a chave taxonomy e a array, $_GET . Mas, vamos transformar a função em uma

variável: $queryTaxonomy que será igual a $existe_key_exists :

<?php
$queryTaxonomy = array_key_exists('taxonomy', $_GET);
$css_escolhido = 'index';
require_once('header.php');
?>

E para falar que a busca deve ser feita somente quando for exigido pelo usuário, acrescentamos um if na linha de cima da
$taxQuery . Assim, if a $queryTaxonomy tiver busca execute o ᦈltro, caso contrário, não execute:

if($queryTaxonomy) {
$taxQuery = array(
array(
'taxonomy' => 'localizacao',
'field' => 'slug',
'terms' => $_GET['taxonomy']
)
);
}

Se dermos um "reload" tudo estará funcionando em ordem. Ainda, entretanto, existe a estranheza de termos apenas as
opções "São Paulo" e "Rio de Janeiro" sem contar a opção "mostrar tudo". Podemos fazer isso colocando uma opção a mais
junto ao select name , colocaremos ela abaixo do select name escrevendo option value cujo valor será vazio, pois
queremos efetuar uma busca em tudo, o texto será: "Todos os imóveis". Observe o código:

<?php $taxonomias = get_terms('localizacao'); ?>

<form class="busca‐localizacao‐form" action="<?= bloginfo('url'); ?>">
<div class="taxonomy‐select‐wrapper">
<select name="taxonomy">
https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 12/13
2017­6­6 Wordpress: Aula 5 ­ Atividade 4 Explicação | Alura ­ Cursos online de tecnologia

<option value="">Todos os imóveis</option>

<?php foreach($taxonomias as $taxonomias) { ?>
<option value="<?= $taxonomia‐>slug; ?>"><?= $taxonomia‐>name; ?></option>
<?php } ?>
</select>
</div>
<button type="submit">Filtrar</button>
</form>

Quando buscamos os imóveis teremos um resultado vazio. Para resolver o bug podemos passar um "se o $_GET for vazio na
parte de taxinomia" e "a string for vazia" podemos redirecionar o navegador para a págia inicial, assim usaremos o if(
$_GET['taxonomy']=== '') isso será redirecionado, wp_redirect para home_url . Falta ainda garantir que isso existe, ou seja,

usamos o $queryTaxonomy e que ele será vazio, && $_GET :

<?php
$queryTaxonomy = array_key_exists('taxonomy', $_GET);
if( $queryTaxonomy && $_GET['taxonomy'] === '') {
wp_redirect( home_url() );
}

$css_especifico = 'index';
require_once('header.php');
?>

Se testarmos isso na página veremos que estará tudo funcionando em ordem. Usamos a taxonomia para fazermos ᦈltros e
conseguimos que eles funcionassem conforme queríamos!

https://cursos.alura.com.br/course/wordpress­criacao­tema­zero/task/19219 13/13