A utilização de páginas de FAQ é hoje em dia muito comum na grande maioria dos websites de qualidade existentes na internet. Em uma FAQ, são inseridas as perguntas mais frequentes relativas à utilização do website ou serviço, fornecendo assim aos clientes e utilizadores um local onde poderão tirar as suas dúvidas mais comuns rapidamente. Em WordPress, é possível criar uma página para a FAQ com bastante qualidade, tirando partido dos Custom Post Types em uma instalação WordPress. Iremos criar uma página para apresentar das FAQs, utilizando também umas técnicas jQuery para abrilhantar um pouco a página fazendo assim com que os seus leitores possam rapidamente encontrar as respostas às perguntas mais frequentes relativamente à utilização do seu website, blog, aplicativo web ou serviço.
1. CRIANDO O CUSTOM POST TYPE
Para introduzirmos o custom post type para a nossa FAQ é necessário editarmos o ficheiro functions.php que está localizado na pasta do template do seu website em WordPress. Tire partido do seu editor de texto preferido e abra o ficheiro functions.php e adicione o seguinte código no final do código existente, para criar o custom post type:
add_action('init', 'my_custom_init');
function my_custom_init()
{
$labels = array(
'name' => _x('FAQs', 'post type general name'),
'singular_name' => _x('FAQ', 'post type singular name'),
'add_new' => _x('Adicionar', 'FAQ'),
'add_new_item' => __('Adicionar FAQ'),
'edit_item' => __('Edita rFAQ'),
'new_item' => __('Nova FAQ'),
'view_item' => __('Ver FAQ'),
'search_items' => __('Procurar FAQs'),
'not_found' => __('Não foram encontradas FAQs'),
'not_found_in_trash' => __('Não foram encontradas FAQs no lixo'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title','editor','thumbnail','custom-fields')
);
register_post_type('faq',$args);
}
Guarde o ficheiro functions.php, envie-o para a pasta do seu template, dirija-se ao seu painel de administração WordPress e observe o novo custom post type existente:
2. ADICIONAR CONTEÚDO DE TESTE
Para que possamos completar este tutorial é necessário ter conteúdo de teste na nossa FAQ. Para isso, crie algumas FAQs fictícias, utilizando por exemplo um gerador lorem ipsum para criar texto.
3. ALTERAR O TEMPLATE
Até este ponto já criámos o custom post type e criámos algumas FAQs fictícias. Agora é altura de se alterar o template para podermos apresentar as FAQs aos utilizadores. Para o fazer iremos utilizar as IDs únicas de cada FAQ para fazer a ligação entre as perguntas e as respostas, ficando assim com duas partes distintas: as questões e as respostas. Dentro da sua pasta do template, procure o ficheiro header.php e insira o seguinte código:
<?php
get_header(); ?>
<?php
query_posts('post_type=faq&order=ASC')
?>
<div id="content">
<?php if (have_posts()) : ?>
<h3>FAQs</h3>
<div id="questions">
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="#answer<?php the_id() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
<?php else : ?>
<h3>Não encontrado</h3>
<p>Desculpe ainda não existem FAQs</p>
<?php endif; ?>
</div>
Neste momento terá uma lista das FAQs existentes com as questões e as respostas já disponíveis. Está tudo ainda um pouco feio e sem estilo, e é altura para estilizar as nossas FAQ’s.
4. ESTILIZAR
A estilização da FAQ depende do layout e aspeto do seu website, do seu gosto pessoal e daquilo que você quer transmitir aos seus leitores. Assim, iremos utilizar uma estilização básica. Se você pretender criar a sua própria estilização, salte este passo e dê asas à sua imaginação! Localize o ficheiro de estilos do seu template e adicione o seguinte código:
body{
background-color: #bcbcbc;
}
.clear {
clear: both;
}
h1,h2,h3,h4,h5,h6{
color:#424242;
font-family:Georgia,Arial,Helvetica,sans-serif;
text-shadow: #fff 1px 1px 0px;
}
h1 a{
color:#424242;
font-size:50px;
position:relative;
top:11px;
font-weight: normal;
z-index: 100;
}
h3{
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
h4{
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
a{
color: #3299bb;
text-decoration: none;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#page-wrap{
width: 750px;
position: relative;
margin: 0px auto 20px auto;
padding-top: 50px;
}
#content{
background-color: #e9e9e9;
padding: 64px 35px 22px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-webkit-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
-moz-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
box-shadow: rgba(0,0,0,1) 0px 0px 4px ;
}
#content p{
text-align:justify;
font-size: 12px;
line-height: 18px;
margin-bottom: 10px;
}
#questions{
margin-bottom: 50px;
}
#questions li{
margin-bottom: 20px;
color: #3299bb;
list-style-type: disc;
list-style-position: inside;
}
#questions ul li a{
font-weight: bold;
}
#questions ul li a:hover{
color: #00befd;
}
#questions ul li a:active{
color: #e78c03;
}
#answers ul li{
margin-bottom: 30px;
clear: both;
}
#footer{
padding-top:5px;
text-align:center;
}
#footer p{
color: #424242;
}
#footer a{
color: #424242;
font-weight: bold;
}
.current-faq{
background-color: #424242;
color: #e9e9e9;
padding:30px 30px 23px;
}
.current-faq h4{
color: #e9e9e9;
font-weight: bold;
font-size:22px;
text-shadow: #000 1px 1px 0px;
}
.top-button {
border-top: 1px solid #96d1f8;
background: #2289a8;
background: -webkit-gradient(linear, left top, left bottombottom, from(#3299bb), to(#2289a8));
background: -moz-linear-gradient(top, #3299bb, #2289a8);
padding: 4px 8px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-box-shadow: rgba(0,0,0,1) -1px -1px 0;
-moz-box-shadow: rgba(0,0,0,1) -1px -1px 0;
box-shadow: rgba(0,0,0,1) -1px -1px 0;
text-shadow: rgba(0,0,0,.4) -1px -1px 0;
color: #ffffff;
font-size: 11px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
font-weight: bold;
float: rightright;
rightright:-30px;
position: relative;
}
.top-button:hover {
border-top-color: #0b93bd;
background: #0b93bd;
color: #ffffff;
}
.top-button:active {
border-top-color: #e78c03;
background: #e78c03;
}
Agora é altura de adicionar alguma magia às FAQs!
5. JQUERY
Iremos utilizar jQuery UI para introduzir alguns efeitos na nossa FAQ. Poderá fazer o download do jQuery UI aqui. Assim iremos introduzir um pequeno efeito nas FAQs, fazendo com que quando se clica no título de uma FAQ, a resposta será apresentada com um efeito que fará surgir com um look arrojado. Assim, introduza o seguinte código na secção head:
<?php wp_enqueue_script("jquery"); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url') ?>/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url') ?>/js/jquery.scrollTo.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url') ?>/js/main.js" type="text/javascript"></script>
Através dos custom post types é possível criar uma página para as FAQs com um look fantástico e de forma a que os seus visitantes e leitores sejam presenteados com um local onde poderão tirar rapidamente as suas dúvidas comuns rapidamente.
O resultado final ficará algo deste tipo:
Logicamente, a FAQ ficará tão mais elegante, quanto melhor for o seu CSS. Aproveite para criar algum código CSS por forma a estilizar corretamente a sua FAQ e torná-la visualmente atrativa para os seus usuários!
Abraço!
