Esta série 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 artigo desta série: Guia definitivo para criar Custom Post Types (Parte 1). 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.
Depois de termos criado o nosso tipo de post customizado, nesta parte iremos falar de como estruturar e apresentar da maneira mais conveniente os tipos de post customizados.
SUMÁRIO
- Preparar o seu tema para receber os seus tipos de posts
- Acrescentar campos usando metaboxes
- Embeber ficheiros 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 tipo de post é responder à seguinte questão: para que serve e onde apresentar este tipo de post? É inevitável não é? A não ser que estejamos apenas a experimentar, uma vez respondida a pergunta, tudo fica mais claro. :)
Então, seguindo com o nosso tipo de post film o 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 sendo que se deve planear bem como e onde queremos cada pedaço do nosso conteúdo.
Um template é um ficheiro PHP do seu tema que é chamado pelo WordPress dependendo do tipo de conteúdo que está a ser requesitado. Assim, numa chamada à homepage do blog o WordPress corre o ficheiro home.php ou front-page.php (dependendo da configuração) e será um destes ficheiros que será colocado no ecrã do usuário. Para um post, o WordPress chama o ficheiro single.php e para um arquivo mensal o archives.php.
Não me vou alongar a explicar cada pedaço de lógica nesta 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 tipo de post: archive-nome-do-post-type.php ( archive-film.php )
Ficheiro de detalhe do tipo de post: single-tipo-de-post.php ( single-film.php )
O código a acrescentar em cada ficheiro pode ser variado, e deve ser ao gosto e 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 true caso existam posts a apresentar. Neste caso, os posts a apresentar são os posts 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, sem alongar muito, este é o processo para fazer o display dos tipos de post definidos por nós.
ACRESCENTAR CAMPOS COM METABOXES
Se ainda não reparou na 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, o Conteúdo, Categorias e Tags.
No topo do ecrã 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 a gosto.
Aqui está o poder do WordPress para os tipos de post. Você pode usar estes 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ê podia apenas digitar para cada um dos filmes, os valores da forma representada na figura:
E poderia com alguma mágica à mistura 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>
Esta função aceita como parâmetros o ID do post o qual pretende ir 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 neste momento a pensar «Que maravilha isto dos campos customizados! Mas… para o usuário comum ter que editar ou acrescentar os valores naquela “caixinha” pode vir a ser dificil…». Devido ao facto da caixa de campos personalizados ser muito pouco flexível, foi possibilitada a criação de metaboxes customizadas para apresentar e receber estes 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 tudo exemplos de metaboxes que existem nativamente na administração do WordPress. Estas 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 adicionar uma chamada à acção add_meta_boxes, seguidamente 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
}
?>
Este 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 a aparecer no topo da caixa (que no nosso caso é Atributos do Filme), o nome da função a chamar para apresentar o HTML na tela e o tipo de post onde esta metabox deve aparecer (neste caso film).
A função film_inner_meta_box() tem como parâmetro o objecto do post corrente. Esta 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.
Neste momento já temos quase tudo pronto, basta apenas adicionar a função que vai salvar todos os dados colocados na metabox. É muito simples, basta chamar a acçã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;
}
?>
Neste trecho de código, nós usámos a acção save_post para chamar a função ewp_film_save_post(). Como esta acção é iniciada para o salvamento de qualquer tipo de post, esta função primeiro verifica se foi enviado pelo formulário o campo ano_film, indicando implicitamente se estamos ou não a salvar 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 salvaguarda, de modo a não aparecer na dropbox da caixa dos campos personalizados.
Com este código temos todas as funções base para colocarmos o nosso tipo de post customizado a funcionar com as metaboxes.
Você pode criar as metaboxes que quiser com os campos que quiser, basta apenas ajustar o código da melhor maneira possível.
Atenção: não recomendamos este código para produção, neste 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 ficheiros de javascript ou CSS diretamente no cabeçalho da página ao invés de se colocar no meio dela tem as suas vantagens. Uma delas é o facto de o carregamento da página ser mais rápido nos browsers modernos (Firefox 4+, Chrome, IE8+), isto porque estes novos browsers usam o chamado carregamento assincrono para fazer o load de todos os ficheiros JS 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 ter maiores ganhos no carregamento dos websites.
Vejamos como podemos carregar estes ficheiros JS e CSS 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 ficheiro Javascript, a que 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' ) );
}
?>
Esta 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 para si, basta indicar o seu nome.
Caso queira carregar ficheiros JS seus, deverá passar como parâmetros, além de um nome indicativo único, o caminho URL para o ficheiro e as dependências desse script.
No nosso exemplo usamos como nome a string nosso-script, uma vez que é único e não foi registado e mais nenhum lugar. Usamos para nos escrever caminho até ao nosso tema a função get_stylesheet_directory_uri(). Esta 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-nos que os scripts só são carregados no front-end do site.
Carregar ficheiros CSS:
O procedimento é similar ao anterior, bastando apenas modificar a acçã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 ficheiro nosso-style.css com o nosso estilo a 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á, este é o resultado final de todo este processo – o script é agora carregado no cabeçalho do seu site de maneira segura.
Carregar os ficheiros Javascript e CSS apenas na administração:
Para o fazer deverá apenas modificar a acção de wp_enqueue_scripts para admin_enqueue_scripts e a acção wp_enqueue_styles para admin_print_styles. Desta maneira está a dizer ao WordPress que pretende que os scripts e CSSs sejam carregados apenas na administração.
Esperemos que tenha gostado desta segunda parte da série.
Bons estudos e até para a semana,
Vitor
