Esta série de Tutoriais WordPress pretende ser um complemento de estudo tanto para iniciantes como para profissionais de como programar tipos de post customizados no WordPress. Não esqueça de ler o primeiro, segundo e terceiro artigos desta série: Guia definitivo para criar Custom Post Types (Parte 1) + Guia definitivo para criar Custom Post Types (Parte 2) + Guia definitivo para criar Custom Post Types (Parte 3). Tenha em atenção que todos os códigos desta série, servem apenas como exemplo. Você pode e DEVE fazer as suas experiências o modificar o código a seu gosto e necessidades.

Neste artigo da série iremos tratar de extender e usar de uma forma mais customizada as taxonomias nos nossos tipos de post.

SUMÁRIO

  • Extender, acrescentando novos campos as taxonomias
  • Apresentar as taxonomias customizadas no website
  • Criar um filtro a partir da taxonomia na página de listagem de tipos de post

As taxonomias customizadas foram iniciadas no ciclo da versão 2.8 do WordPress tendo a API sido acabada na versão 2.9, antes do lançamento dos Custom Post Types. Com esta nova funcionalidade, os developers tiveram a possibilidade de criar novos tipos de categorias para os posts e páginas, extendendo dessa forma o tipo de categorização disponível. Com isto iniciou-se um novo ciclo para o WordPress: de gestor de blog para um verdadeiro CMS personalizável.

É possível criar taxonomias para categorizar não só posts e páginas mas também os nossos tipos de post.

Pegando no nosso tipo de post Filme, e na categoria customizada que criámos no primeiro artigo, vamos extendê-la de modo a termos mais campos para além dos habituais.

EXTENDER, ACRESCENTANDO NOVOS CAMPOS ÀS TAXONOMIAS

Por defeito, as taxonomias apresentam apenas três campos – Título, Slug e Descrição – e sem a possibilidade de acrescentar ou retirar campos.

No entanto, com um plugin que cria a funcionalidade de metadata nas taxonomias, conseguimos atingir da mesma forma o pretendido.

No nosso caso nós iremos criar um campo muito simples, uma caixa de input onde poderemos colocar a URL de uma imagem que será usada como imagem de destaque da categoria de filmes. Que tal? Vamos então!

Para começar, colocamos o código que está na parte 1 desta série para criar a nossa taxonomia. Agora que temos a nossa taxonomia instalada, vamos extendê-la.

Seguidamente fazemos o download do plugin e instalamo-lo da mesma forma como outro plugin qualquer – aqui fica o local para download do nosso plugin.

Existem vários plugins para criar esta funcionalidade, no entanto este é aquele com que prefiro trabalhar e que recomendo.

Depois de instalado e configurado, já temos a estrutura necessária para trabalhar com estes campos das taxonomias customizadas. Desta forma basta-nos mapear quatro acções para realizarem a tarefa de nos criar a interface visual entre os campos e o WordPress:

add_action( 'film_category_add_form_fields', 'film_category_add', 10, 2);
add_action( 'film_category_edit_form_fields', 'film_category_edit', 10, 2);
add_action( 'edited_film_category', 'film_category_save', 10, 2);
add_action( 'save_film_category', 'film_category_save', 10, 2);

Estas quatro acções irão, conjuntamente com as funções que chamam, criar os campos na página de adição de termos  – <taxonomia>_add_form_fields e save_<taxonomia> – e os campos na página de edição dos termos da taxonomia – <taxonomia>_edit_form_fields e save_<taxonomia>. Estes dois conjuntos existem pois as páginas de criação e de edição dos termos das categorias é diferente.

Agora que temos as acções mapeadas, vamos acrescentar as funções que são necessárias:

function film_category_add( $tag ) {
?>
<div class="form-field">
   <p style="color:#222;font-style:normal;">Imagem:</p>
   <input type="text" name="image" id="image" value="" />
   <p>Adicionar uma imagem de destaque para esta categoria.</p>
</div>
<?php
}

function film_category_edit( $tag, $taxonomy ) {
   $image = get_term_meta( $tag->term_id, '_category_image', true );
?>
<tr class="form-field">
   <th scope="row" valign="top">
      <p style="color:#222;font-style:normal;">Imagem:</p>
   </th>
   <td>
      <input name="image" id="image" type="text" value="<?php echo $image; ?>" />
      <p>Adicionar uma imagem de destaque para esta categoria.</p>
   </td>
</tr>
<?php
}

Estas funções são muito simples. A primeira apenas apresenta um HTML que desenha o campo de input para se colocar o URL da imagem.

A segunda função é mais complexa, pois é a função que é usada na edição dos termos das taxonomias. Primeiro, através da função get_term_meta() – uma das funções adicionadas pelo plugin que instalámos à pouco – retornamos para a variável $image o URL definido pelo usuário, apresentando-o em seguida no campo de input.

Neste momento os campos são apresentados na interface do WordPress, porém nenhum valor é guardado quando se salva um termo dessa taxonomia. Precisamos ainda de definir a função que guarda os valores:

function film_category_save( $term_id ) {
  // Se foi inserido algum valor no campo...
  if ( isset( $_POST['image'] ) )
    // ...guarda esse valor
    update_term_meta( $term_id, '_film_category_image', strip_tags( $_POST['image'] ) );

  // senão...
  else
    // Remove esse valor
    delete_term_meta( $term_id, '_film_category_image' );

  return $term_id;

}

Esta função é muito simples: caso o valor ‘image’ exista (ou seja, caso o utilizador preencha o campo de imagem) ela guarda esse valor, senão ela remove o valor anterior, pois, caso esteja o campo em branco é provável que o usuário tenha querido remover essa imagem do termo da taxonomia.

E estamos prontos! O nosso campo customizado irá aparecer em beleza na interface.

APRESENTAR AS TAXONOMIAS CUSTOMIZADAS NO WEBSITE

Como foi visto na parte 2 desta série, a hierarquia de templates WordPress é bastante complexa, dando a possibilidade de se construir o que se quiser. No caso da apresentação de posts em taxonomias, só necessitamos de um template: taxonomy-<taxonomia>.php

No nosso caso vamos primeiro criar um ficheiro no nosso tema com o nome taxonomy-film_category.php para receber toda a lógica programática de apresentação dos nossos filmes:

<h1 class="entry-title">
  <?php single_tag_title(); ?>
</h1>

<div class="entry-thumbnail">
  <img src="<?php echo get_term_meta( $tag->term_id, '_category_image', true ); ?>" />
</div> 

<?php if ( have_posts() ) : while( have_posts() ) : the_post(); ?>

<div class="entry-title"><?php the_title(); ?></div>
<div class="entry-content"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

Este é o código que é responsável pela apresentação dos filmes dentro de cada termo da taxonomia. A diferença para com o código do artigo anterior prende-se com o uso de uma tag H1 e da função single_tag_title(). Esta é reponsável por apresentar o título da taxonomia que estamos a navegar – por exemplo, se estivermos a ver a categoria Drama, esta função imprime Drama no ecrã.

Novamente usamos a função get_term_meta() para retornar deste modo o URL da imagem que se definiu na administração para cada categoria de filmes.

Com alguns ajustes de HTML e CSS conseguimos atingir algo como isto, em que a imagem da esquerda é a que usámos colocando o seu URL na caixa de input:

É possível criar e extender muito este exemplo, que deve ser trabalhado e usado para os seus próprios fins. Basta dar uso à criatividade. :)

CRIAR UM FILTRO POR TAXONOMIA NA PÁGINA DE LISTAGEM DE TIPO DE POSTS

Se você visualizar a página de listagem dos Posts na sua administração, verá que no topo existem uma série de filtros, sendo que um deles é filtrar os posts por categoria. É essa funcionalidade que iremos apresentar nesta secção, filtrando os filmes por categoria.

Com uma simples acção é possível colocar uma caixa dropdown com as categorias da taxonomia film_category. Desta forma atingimos algo parecido, apresentando no campo da filtragem a seguinte caixa:

Este é o código necessário:

add_action( 'restrict_manage_posts', 'film_retrict_categories' );

function film_retrict_categories() {
  // Acesso às variáveis do tipo de post atual e o array do pedido
  global $typenow, $wp_query;

  // Se o tipo de post for diferente de film não faz nada
  if ( $typenow != 'film' )
   return false;

  // Imprime uma select box com todos os termos da taxonomia film_category
  wp_dropdown_categories(array(
   'show_option_all' =>  'Mostrar tudo',
   'taxonomy'        =>  'film_category',
   'name'            =>  'film_category',
   'orderby'         =>  'name',
   'selected'        =>  $wp_query->query['term'],
   'hierarchical'    =>  true,
   'depth'           =>  3,
   'show_count'      =>  true,
   'hide_empty'      =>  true,
   )
  );
}

Ao chamarmos a acção restrict_manage_posts com a nossa função, temos a possibilidade de acrescentar HTML na zona de filtragem, no cabeçalho da tabela de listagem.

Primeiro, caso o tipo de post não seja film a função retorna sem continuar a sua atividade, assim apenas aplicamos este filtro nas páginas de listagem dos filmes.

A função wp_dropdown_categories é responsável pela impressão da dropdown das categorias da taxonomia passada como argumento, no nosso caso film_category. Não me vou alongar mais sobre os argumentos desta função, pois davam um artigo inteiro, porém deixo o link para estudo mais profundo.

Espero que este artigo lhe tenha sido útil para criar o seu plugin que tanto deseja :)

Não esqueça de ler os outros artigos desta série:

Bons estudos!

Vitor