() translation by (you can also view the original English article)
Às vezes, é útil ter um banner legal na página inicial do seu site — pense, por exemplo, algo como anúncios e/ou trechos que não são o suficiente para merecer um post de blog, ou links para conteúdo novo do site. Você não vai querer ficar editando o conteúdo da página inicial toda vez que você adicionar um novo item de conteúdo, você não quer ficar investigando o código para adicionar conteúdo.
Existem algumas opções para fazer isso. Uma simples é usar um widget que você adiciona ao registrar uma área de widget no lugar correto no arquivo de template (modelo) do seu tema. Mas uma abordagem que eu gosto de usar, que lhe dá mais flexibilidade é criar um tipo de post chamado 'banner' e usar isso para mostrar um ou mais banners. Você pode até usá-lo para exibir banners de uma determinada categoria, diferentemente de outros, se você tiver vários banners, mas quero destacar um deles.
Neste tutorial...
- Eu vou mostrar a você como registrar um tipo de post personalizado para seus banners.
- Mostrarei como criar uma função no arquivo de funções do seu tema para exibir os banners.
- Eu vou te mostrar como adicionar função para o arquivo de cabeçalho do seu tema assim que só funcionará na página inicial.
- Finalmente, vou te mostrar como estilizar seus banners.
O Que Você Precisará
Para concluir este tutorial, você vai precisar de:
- uma instalação de desenvolvimento do WordPress
- o acesso a arquivos de modelo do seu tema
Vou criar um tema filho do tema twentytwelve por conveniência, mas você pode facilmente adicionar esse código para o seu próprio tema.
Uma abordagem melhor é escrever um plugin para registrar o tipo de post personalizada e criar uma função para exibir banners, o que significa que, se o tema do seu site for alterado, você não perde seu trabalho. Aqui, eu vou usar um deles para que todo o código fique um em um único lugar para você baixar.
Registrando o Tipo de Post Banner
O primeiro passo é registrar um novo tipo de post. Criar um arquivo functions.php para o seu tema, ou adicione o seguinte código ao seu arquivo de funções existentes:
1 |
// register a custom post type called 'banner'
|
2 |
function wptutsplus_create_post_type() { |
3 |
$labels = array( |
4 |
'name' => __( 'Banners' ), |
5 |
'singular_name' => __( 'banner' ), |
6 |
'add_new' => __( 'New banner' ), |
7 |
'add_new_item' => __( 'Add New banner' ), |
8 |
'edit_item' => __( 'Edit banner' ), |
9 |
'new_item' => __( 'New banner' ), |
10 |
'view_item' => __( 'View banner' ), |
11 |
'search_items' => __( 'Search banners' ), |
12 |
'not_found' => __( 'No banners Found' ), |
13 |
'not_found_in_trash' => __( 'No banners found in Trash' ), |
14 |
);
|
15 |
$args = array( |
16 |
'labels' => $labels, |
17 |
'has_archive' => true, |
18 |
'public' => true, |
19 |
'hierarchical' => false, |
20 |
'supports' => array( |
21 |
'title', |
22 |
'editor', |
23 |
'excerpt', |
24 |
'custom-fields', |
25 |
'thumbnail', |
26 |
'page-attributes'
|
27 |
),
|
28 |
'taxonomies' => array( 'post_tag', 'category'), |
29 |
);
|
30 |
register_post_type( 'banner', $args ); |
31 |
}
|
32 |
add_action( 'init', 'wptutsplus_create_post_type' ); |
Isso cria um novo tipo de post chamado 'banner'.
Tendo criado o tipo de post, crie um novo banner usando o WordPress Admin. O meu é mostrado na imagem:
Criando a Função Para Exibir os Banners
O próximo passo é criar uma função usando WP_Query que irá consultar o tipo de post de banner e exibir todos os banners. Adicione esta função no seu tema no lugar que você desejar exibir seus banners.
Novamente no arquivo functions.php (ou no seu arquivo de plugin se você estiver usando essa abordagem), adicione o seguinte:
1 |
// function to show home page banner using query of banner post type
|
2 |
function wptutsplus_home_page_banner() { |
3 |
|
4 |
// start by setting up the query
|
5 |
$query = new WP_Query( array( |
6 |
'post_type' => 'banner', |
7 |
));
|
8 |
|
9 |
// now check if the query has posts and if so, output their content in a banner-box div
|
10 |
if ( $query->have_posts() ) { ?> |
11 |
<div class="banner-box"> |
12 |
<?php while ( $query->have_posts() ) : $query->the_post(); ?> |
13 |
<div id="post-<?php the_ID(); ?>" <?php post_class( 'banner' ); ?>><?php the_content(); ?></div> |
14 |
<?php endwhile; ?> |
15 |
</div>
|
16 |
<?php } |
17 |
wp_reset_postdata(); |
18 |
|
19 |
}
|
Isto executa uma consulta sobre o tipo de post de banners e em seguida exibi o conteúdo de cada banner isso se forem encontrados posts. Note que apenas estou exibindo o conteúdo e não o título — se você deseja incluir títulos em seus banners, você poderia fazer isso facilmente adicionando o the_title() para sua função.
Adicionando a Função ao Seu Arquivo de Template (Modelo)
No momento os banners ainda não serão exibidos em qualquer lugar em seu site, você precisará adicionar sua função recém-criada para um arquivo de template para que isto aconteça.
Vou adicionar a minha função para meu arquivo header.php, mas você poderia adicioná-lo em qualquer lugar que você quisesse, como por exemplo no rodapé ou na barra lateral, na page.php ou em um arquivo especial do front-page.php.
Caso queira mostrar os banners só na minha página home, vou adicionar minha função na tag condicional if( is_home_page() ). Isto verificará se você tem sua página principal do blog ou uma página estática definida como a página home do seu site como página inicial.
No meu arquivo header.php, acrescento dentro da tag apenas <div id="header.php">. Como estou a trabalhar com um tema filho, eu criei um novo arquivo header.php no meu tema filho que é uma cópia do arquivo de cabeçalho do tema pai exceto por esse novo código.
1 |
<?php if ( is_front_page() ) { |
2 |
wptutsplus_home_page_banner(); |
3 |
}
|
4 |
?>
|
O banner que eu criei anteriormente agora é exibido na minha página home:
Estilizando o Banner
No momento o meu banner não é muito atraente ou promissor. Eu vou mudar isso com algum estilo.
Na folha de estilo do seu tema adicione o seguinte:
1 |
.home .banner-box { |
2 |
text-align: center; |
3 |
color: red; |
4 |
font-size: 1.2em; |
5 |
border: 1px solid red; |
6 |
padding: 1em; |
7 |
}
|
Isso vai colocar o banner em uma grande caixa vermelha poluída e não muito sutil, mas certamente chama a atenção!
Se você tiver mais de um banner para mostrar de uma vez e você queira destacar um deles, você pode fazer isso com algum estilo. Vou criar outro banner e atribuí-lo a categoria 'destaque', então vou acrescentar algum estilo para banners em categoria a minha folha de estilos:
1 |
.home .banner-box .category-highlight { |
2 |
background: red; |
3 |
color: #fff; |
4 |
margin: 0; |
5 |
padding: 0.5em; |
6 |
}
|
Isso faz com que o banner destacado seja ainda mais chamativo:
Não parece muito sutil ou atraente, mas isso mostra como você pode usar essa técnica.
Por padrão, os banners são exibidos em ordem cronológica decrescente. Você pode mudar isso, e se você quiser adicione alguns argumentos para a consulta que você criou na segunda etapa acima.
Resumo
Banner na página home podem ser uma ferramenta útil para a exibição de mensagens temporárias ou direcionar o tráfego para outras partes do seu site. Neste tutorial, mostrei como criar um banner simples na página inicial usando um tipo de post personalizado, que você pode usar em qualquer lugar no tema do seu site.
Recursos
Funções, tags e classes usadas neste tutorial:
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
