Na primeira parte desta série de artigos, nós criamos o nosso Custom Post Types. Agora iremos falar de como estruturá-lo e apresentá-lo da maneira mais conveniente. Vale lembrar que todos os códigos apresentados nos artigos servem apenas como exemplo. Você pode e deve fazer as suas experiências ao modificar o código de acordo com seu gosto e necessidade.
Sumário
- Preparar o seu tema para receber os seus Custom Post Types;
- Acrescentar campos usando metaboxes;
- Embedar arquivos Javascript e folhas de estilo CSS no cabeçalho da página da Administração e no Front-end.
Preparar o seu tema
O primeiro passo para a criação de um Custom Post Types é responder à seguinte questão: para que ele serve e onde apresentá-lo? Essa pergunta é necessária, a não ser que estejamos apenas experimentando. Depois de responder essa pergunta, tudo fica mais claro.
O modo mais prático e realista é apresentá-lo na front-end do website, e, uma vez que definimos toda a nossa lógica dentro do functions.php, podemos integrá-lo dentro do tema sem recorrer a nenhum plugin.
A hierarquia de templates dos temas no WordPress é bastante complexa, o que pede um bom planejamento de como e onde queremos cada pedaço do nosso conteúdo.
Um template é um arquivo PHP do seu tema que é chamado pelo WordPress, dependendo do tipo de conteúdo requisitado. Assim, em uma chamada à homepage do blog, o WordPress acessa o arquivo home.php, ou front-page.php (dependendo da configuração), e um deles será colocado na tela do usuário. Para um post, o WordPress chama o arquivo single.php e para um arquivo mensal, o archives.php.
Não vou me alongar explicando cada pedaço de lógica nessa hierarquia, nem é o propósito deste artigo. Irei apenas mostrar quais são os templates que devem, ou podem, ser criados para controlar e apresentar os Custom Post Types.
- Apresentar um arquivo do Custom Post Types: archive-nome-do-post-type.php ( archive-film.php );
- Arquivo de detalhe do Custom Post Types: single-tipo-de-post.php ( single-film.php ).
O código que deve ser acrescentado em cada arquivo pode variar de acordo com o gosto e as necessidades de cada um. No entanto, a lógica (o loop) do WordPress deve estar lá e genericamente é assim:
<?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; ?>
A função have_posts() na primeira linha irá retornar sempre para o true caso existam posts a apresentar. Nesse caso, os posts a apresentar são os do tipo film.
Dentro do ciclo while, o programador poderá colocar o que quiser, desde o título, o conteúdo, um link, imagem de destaque etc. Isso fica ao critério do programador.
Genericamente, esse é o processo para fazer o display dos Costum Post Types definidos por nós.
Acrescentar campos com metaboxes
Se ainda não se atentou para a possibilidade de criar campos de conteúdo personalizados na tela de posts, então vai ficar surpreendido se lhe disser que você não está restringido aos campos que existem nativamente, tais como o Título, Conteúdo, Categorias e Tags.
No topo da tela da Administração, existe uma aba chamada Opções de Tela, e se você a abrir e marcar a checkbox Campos Personalizados, irá fazer aparecer uma caixa por baixo do editor de texto com os campos Nome e Valor, e com a possibilidade de acrescentar mais campos.
Aqui está o poder do WordPress para osCustom Post Types. Você pode usar esses valores personalizados no seu tema e apresentá-los conjuntamente com todo o resto do conteúdo. No caso do film, seria interessante poder acrescentar o ano de criação do filme, o nome do realizador, do produtor e do diretor de fotografia.
Para isso, você poderia apenas digitar para cada um dos filmes os valores. Veja na figura a seguir:
E poderia, também, fazer aparecer no seu tema por baixo do seu conteúdo. Na verdade, existe uma função responsável para isso, ela é get_post_meta():
<ul>
<li>
<b>Ano: </b>
<?php get_post_meta( $post->ID, 'ano_film', true ); ?>
</li>
<li>
<b>Realizador: </b>
<?php get_post_meta( $post->ID, 'realizador_film', true ); ?>
</li>
<li>
<b>Produtor: </b>
<?php get_post_meta( $post->ID, 'produtor_film', true ); ?>
</li>
</ul>
Essa função aceita como parâmetros o ID do post, o qual pretende buscar o valor do campo personalizado, o nome do campo personalizado e se deve, ou não, ser retomado o último valor acrescentado à tabela. Este último parâmetro deve ser sempre true.
O leitor deve estar pensando neste momento "Que maravilha isso de campos customizados! Mas para o usuário comum ter que editar, ou acrescentar, os valores naquela “caixinha” pode vir a ser difícil!". Devido ao fato de a caixa de campos personalizados ser pouco flexível, foi possibilitada a criação de metaboxes customizadas para apresentar e receber esses campos personalizados de maneira mais conveniente.
Uma metabox é uma caixa com campos de formulário que aparece na tela de criação/ edição de um post. Categorias, Tags, Excerto, Discussão e Publicar são exemplos de metaboxes que existem nativamente na administração do WordPress. Essas metaboxes apresentam no seu interior campos de formulário para opções e preenchimento de novos conteúdos, ou capacidades. Assim, o usuário terá à sua disposição uma caixa com os campos necessários já prontos para serem adicionados.
Para criar uma metabox, primeiro temos que adicionar uma chamada à ação add_meta_boxes, em seguida chamar a função add_meta_box() e passar-lhe os parâmetros necessários, incluindo o HTML, que será mostrado na interface:
<?php
add_action( 'add_meta_boxes', 'film_add_meta_box' );
function film_add_meta_box() {
add_meta_box(
'film_metaboxid',
'Atributos do Filme',
'film_inner_meta_box',
'film'
);
}
function film_inner_meta_box( $film ) {
?>
<p>
<label for="realizador">Ano:</label>
<br />
<input type="text" name="ano_film" value="<?php echo get_post_meta( $film->ID, '_ano_film', true ); ?>" />
</p>
<p>
<label for="realizador">Realizador:</label>
<br />
<input type="text" name="realizador_film" value="<?php echo get_post_meta( $film->ID, '_realizador_film', true ); ?>" />
</p>
<p>
<label for="realizador">Produtor:</label>
<br />
<input type="text" name="produtor_film" value="<?php echo get_post_meta( $film->ID, '_produtor_film', true ); ?>" />
</p>
<?php
}
?>
Esse código, colocado no functions.php, cria uma metabox na interface de criação do tipo de posts film.
A primeira função chama add_meta_box(), que tem como parâmetros um ID, para colocar na div que envolve a caixa; o título que aparece no topo da caixa (que no nosso caso é Atributos do Filme); o nome da função que será chamada para apresentar o HTML na tela e o tipo de post onde essa metabox deve aparecer (neste caso, film).
A função film_inner_meta_box() tem como parâmetro o objeto do post corrente. Essa função é responsável pela apresentação dos campos dentro da metabox.
Do mesmo modo que fazemos para o front-end do website, através da função get_post_meta(), recolhemos os valores de cada campo já colocados pelo utilizador. Nesse momento, já temos quase tudo pronto. Basta apenas adicionar a função que vai salvar todos os dados colocados na metabox. É muito simples, é preciso apenas chamar a ação save_post e passar a função update_post_meta():
<?php
add_action( 'save_post', 'ewp_film_save_post', 10, 2 );
function ewp_film_save_post( $film_id, $film ) {
// Verificar se os dados foram enviados, neste caso se a metabox existe, garantindo-nos que estamos a guardar valores da página de filmes.
if ( ! $_POST['ano_film'] ) return;
// Fazer a saneação dos inputs e guardá-los
update_post_meta( $film_id, '_ano_film', strip_tags( $_POST['ano_film'] ) );
update_post_meta( $film_id, '_realizador_film', strip_tags( $_POST['realizador_film'] ) );
update_post_meta( $film_id, '_produtor_film', strip_tags( $_POST['produtos_film'] ) );
return true;
}
?>
Nesse trecho de código, nós usamos a ação save_post para chamar a função ewp_film_save_post(). Como essa ação é iniciada para o salvar qualquer tipo de post, essa função primeiro verifica se foi enviado pelo formulário o campo ano_film, indicando implicitamente se estamos, ou não, salvando um filme.
A função update_post_meta() tem como parâmetros o ID do post, o nome do campo que queremos salvar e o valor para esse campo. O uso do prefixo “_” para o nome de cada campo serve como segurança, de modo a não aparecer na dropbox da caixa dos campos personalizados.
Com esse código, temos todas as funções base para colocarmos o nosso Custom Post Types para funcionar com as metaboxes. Você pode criar as metaboxes que quiser e com os campos que quiser, basta ajustar o código da melhor maneira possível.
Atenção: não recomendamos esse código para produção. Nesse momento, existem algumas brechas de segurança que iremos tratar nos próximos artigos da série.
Carregar JavaScript e CSS no cabeçalho da página
Carregar arquivos de JavaScript ou CSS diretamente no cabeçalho da página, em vez de colocá-los no meio, tem as suas vantagens. Uma delas é o fato de o carregamento da página ser mais rápido nos browsers modernos (Firefox 4+, Chrome, IE8+). Isso porque esses novos browsers usam o carregamento assíncrono para fazer o load de todos os arquivos JavaScript e CSS que se encontram linkados no cabeçalho, paralelamente ao carregamento e à construção de todo o HTML e de toda a árvore de elementos (DOM no JavaScript), permitindo maiores ganhos no carregamento dos websites.
Vejamos como podemos carregar esses arquivos no cabeçalho de uma página do front-end. Para isso, recorremos à função add_action(), que será colocada dentro do functions.php chamando a função wp_enqueue_script().
Primeiro, vamos colocar o nosso arquivo Javascript, ao qual iremos chamar nosso-script.js numa pasta dentro do seu tema. Essa pasta deverá (não obrigatoriamente) ser /js/.
Agora iremos colocar o seguinte código no functions.php:
<?php
add_action( 'wp_enqueue_scripts', 'ewp_film_scripts' );
function ewp_film_scripts() {
if ( is_admin() ) return;
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'nosso-script', get_stylesheet_directory_uri() . '/js/nosso-script.js', array( 'jquery' ) );
}
?>
Essa função wp_enqueue_script() tem duas modalidades de uso. O WordPress regista automaticamente alguns scripts, tais como a biblioteca jQuery e a jQuery UI. Sendo assim, caso queira carregá-las para o cabeçalho da página, deverá apenas passar o nome dos scripts à função. Existem vários scripts disponíveis, basta indicar o seu nome.
Caso queira carregar seus arquivos JavaScript, deverá passar como parâmetros, além de um nome indicativo único, o caminho URL para o arquivo e as dependências desse script.
No nosso exemplo, usamos como nome a string nosso-script, uma vez que ele é único e não foi registado em nenhum outro lugar. Usamos para escrever o caminho até ao nosso tema a função get_stylesheet_directory_uri(). Essa função retorna o caminho URL completo para a pasta do seu tema, por exemplo, se o seu tema se chamar Tema Impecável, e este se localizar na pasta /tema-impecavel/, então a função retorna http://o-seu-site.com/wp-content/themes/tema-impecavel/.
A condição if ( is_admin() ) return; garante que os scripts só são carregados no front-end do site.
Carregar arquivos CSS:
O procedimento é similar ao anterior, bastando apenas modificar a ação a ser iniciada e a função que define o carregamento que passa a ser wp_enqueue_style(). Antes disso, iremos criar a pasta /css/ e o arquivo nosso-style.css com o nosso estilo para ser carregado.
Depois é só colocar o script no functions.php:
<?php
add_action( 'wp_print_styles', 'ewp_film_styles' );
function ewp_film_styles() {
wp_enqueue_style( 'nosso-style', get_stylesheet_directory_uri() . '/css/nosso-style.css', array( 'jquery' ) );
}
?>
A função wp_enqueue_style() é semelhante à que carrega os scripts, sendo assim, os seus parâmetros são iguais.
Et voilá! Esse é o resultado final de todo o processo – o script é agora carregado no cabeçalho do seu site de maneira segura.
Carregar os arquivos JavaScript e CSS apenas na administração:
Para fazê-lo, deverá apenas modificar a ação de wp_enqueue_scripts para admin_enqueue_scripts e a ação wp_enqueue_styles para admin_print_styles. Dessa maneira, você está dizendo ao WordPress que pretende que os scripts e CSSs sejam carregados apenas na administração.
Espero que tenha gostado desta segunda parte da série. No próximo artigo, vamos falar sobre como estender as capacidades dos Costum Post Types.