Foi lançado recentemente o novo Wordpress 3.0 que inclui uma série de grandes novidades e alterações à estrutura e forma como o Wordpress trabalha, nomeadamente os novos Custom Post Types. A pedido do leitor Flávio Araújo, vamos hoje falar sobre os Custom Post Types, tendo como base o excelente artigo dos colegas do blog Think Vitamin.

Como referido pelo próprio criador dos Custom Post Types, por vezes o Wordpress introduz novas funcionalidades que à partida parecem demasiado complexas mas que na realidade não o são. Os Custom Post Types são uma delas. Na verdade esta nova funcionalidade deverá ser vista como conteúdo customizável e nada mais do que isso.

O QUE SÃO CUSTOM POST TYPES?

O nome Custom Post Type é na verdade bastante confuso pois introduz o nome genérico “Post” que na verdade nada tem a ver com um post de um blog. Se pretende compreender melhor esta nova funcionalidade, substitua esse termo por “content”, ou seja, tipos de conteúdo customizado (custom content type). Dessa forma é mais fácil compreender o conceito.

Os custom post types não têm regras que os definem propriamente e relativamente aquilo que são. Eles podem na verdade representar qualquer tipo de conteúdo que você deseje. Por exemplo, o Wordpress oferece originalmente diferentes tipos de custom post types:

• Posts do blog
• Páginas
• Anexos
• Revisões
• Menus de navegação (WordPress 3.0)

Basicamente este tipo de conteúdo utiliza a mesma forma de criação, edição e armazenamento de um artigo de um blog, mas com muito mais controlo criativo sobre o mesmo.

IDEIAS CUSTOM POST TYPES?

Embora o Wordpress 3.0 introduza uma série de custom post types originalmente, existem muitos desenvolvedores e webdesigners que pretendem levar o Wordpress ao próximo nível. Vejamos alguns exemplos criativos que se podem construir a partir de diferentes Custom Post Types:

• Listas de classificados
• Calendários de eventos.
• Base de dados de filmes.
• Base de dados de livros.
• Integração de um fórum sem problemas de compatibilidade.
• Um sistema de tickets de serviço e helpdesk.
• Portfólios.
• Galeria de design e fotografia.
• Etc.

As opções são na verdade infinitas e estão apenas dependentes da sua capacidade criativa, portanto, evite limitar-se aos exemplos dados e sempre que sentir necessidade de criar algo no seu blog, provavelmente irá conseguir faze-lo utilizando Custom post types.

COMO CRIAR UM CUSTOM POST TYPE?

Os custom post types são extremamente simples de utilizar do ponto de vista do painel de administração do Wordpress. No entanto e tal como referimos em cima, os designers/desenvolvedores ainda necessitam de ter algum conhecimento de PHP, excepto se optarem por plugins como o Custom Post Template e o Custom Post Type UI.

Neste tutorial vamos editar o ficheiro functions.php que se encontra na sua diretoria principal do seu template. Vamos apenas acrescentar código, portanto, poderá fazer a edição do seu ficheiro no topo ou no fundo do mesmo. Com algumas edições, pretendemos criar um custom post type para o nosso portfolio, e um template que irá utilizar esta informação. No final acabaremos com um novo menu no nosso painel administrativo, algo deste tipo:

Uma nova página intitulada “My Portfolio”:

E um novo local onde colocar os conteúdos específicos desta nova secção:

PRIMEIRO PASSO

Eis a primeira porção de código que teremos de adicionar ao ficheiro functions.php:

add_action('init', 'portfolio_register');
 
function portfolio_register() {
 
	$labels = array(
		'name' => _x('My Portfolio', 'post type general name'),
		'singular_name' => _x('Portfolio Item', 'post type singular name'),
		'add_new' => _x('Add New', 'portfolio item'),
		'add_new_item' => __('Add New Portfolio Item'),
		'edit_item' => __('Edit Portfolio Item'),
		'new_item' => __('New Portfolio Item'),
		'view_item' => __('View Portfolio Item'),
		'search_items' => __('Search Portfolio'),
		'not_found' =>  __('Nothing found'),
		'not_found_in_trash' => __('Nothing found in Trash'),
		'parent_item_colon' => ''
	);
 
	$args = array(
		'labels' => $labels,
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'query_var' => true,
		'menu_icon' => get_stylesheet_directory_uri() . '/article16.png',
		'rewrite' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'menu_position' => null,
		'supports' => array('title','editor','thumbnail')
	  );
 
	register_post_type( 'portfolio' , $args );
}

Todos aqueles que já trabalharam com o WordPress no passado irão certamente reconhecer a estrutura. Iremos adicionar uma acção quando o painel de administração do WP inicializar para que este chame a função portfolio_register(). Nessa função iremos criar duas arrays, $labels e $args, e depois utilizar o register_post_type para juntar tudo. Para o fazer iremos atribuir o nome ‘portfolio’ e dizer-lhe para utilizar os argumentos da array $args.

A parte mais complexa está no detalhe, portanto vamos analisar alguns desses argumentos. A lista completa encontra-se em  http://codex.wordpress.org/Function_Reference/register_post_type. Primeiro analisemos a array $labels:

• name – este é o (provavelmente plural) nome para o nosso novo post type
• singular_name – a forma como você se refere a ele no singular (do tipo: ‘Adicionar novo ****’)

Provavelmente você poderá trabalhar o resto das $labels sozinho, uma vez que eles apenas se referem a diferentes circunstâncias nas quais o nome do nosso custom post type será usado.

E agora analisemos a array $args:

• public – serão apresentadas no admin UI
• show_ui – deveremos mostrar um painel de admin para este custom post type
• menu_icon – um ícone customizado para o painel de admin
• capability_type - o WordPress irá tratar este como um ‘post’ para leitura, edição, e capacidade de eliminação
• hierarchical – ele é hierárquico, como as páginas
• rewrite – reescrever os permalinks utilizando a slug ‘portfolio’
• supports – que items pretendemos mostrar no adicionar/editar post page

Este é o primeiro passo, e já será o suficiente para que possa ver o seu novo custom post type no seu painel de administração do WordPress. Guarde o ficheiro functions.php e veja-o!

SEGUNDO PASSO

A próxima coisa a fazer é o registo da taxonomia. Basicamente é criar categorias para este novo tipo de conteúdo.

Por exemplo, no nosso portfolio desejamos incluir os nomes das tecnologias e software utilizados para criar o trabalho. Iremos chamar essa taxonomia de ‘Skills’, e preenche-la com nomes tipo HTML, CSS e jQuery.

É apenas uma linha de código:

register_taxonomy("Skills", array("portfolio"), array("hierarchical" => true, "label" => "Skills", "singular_label" => "Skill", "rewrite" => true));

O primeiro item é o nome da taxonomia, ‘Skills’. O segundo é o nome do tipo de objecto a que a estamos a aplicar, que no nosso caso é o nosso custom post type ‘portfolio’ (que é uma array). Finalmente os nossos argumentos; poderá encontrar uma listagem completa em http://codex.wordpress.org/Function_Reference/register_taxonomy, e aqui iremos utilizar apenas três que tenham as características que desejamos, tal como explicado no primeiro passo.

Adicionando essa linha de código, já poderá ver algo deste tipo:

Posteriormente poderá adicionar ‘skills’ tal como faz com as categorias dos seus blogs. Será algo deste tipo:

TERCEIRO PASSO

O terceiro passo é adicionar campos de informação customizados no adicionar/editar post page.

Para o nosso portfolio poderemos adicionar coisas como o ano em que a peça foi publicada e detalhes de quem a desenhou, construir, e produziu o site/design.

Neste caso existe um pouco mais de código, mas se por ventura o ler, compreenderá facilmente o seu sentido:

add_action("admin_init", "admin_init");
 
function admin_init(){
  add_meta_box("year_completed-meta", "Year Completed", "year_completed", "portfolio", "side", "low");
  add_meta_box("credits_meta", "Design & Build Credits", "credits_meta", "portfolio", "normal", "low");
}
 
function year_completed(){
  global $post;
  $custom = get_post_custom($post->ID);
  $year_completed = $custom["year_completed"][0];
  ?>
  <label>Year:</label>
  <input name="year_completed" value="<?php echo $year_completed; ?>" />
  <?php
}
 
function credits_meta() {
  global $post;
  $custom = get_post_custom($post->ID);
  $designers = $custom["designers"][0];
  $developers = $custom["developers"][0];
  $producers = $custom["producers"][0];
  ?>
  <p><label>Designed By:</label><br />
  <textarea cols="50" rows="5" name="designers"><?php echo $designers; ?></textarea></p>
  <p><label>Built By:</label><br />
  <textarea cols="50" rows="5" name="developers"><?php echo $developers; ?></textarea></p>
  <p><label>Produced By:</label><br />
  <textarea cols="50" rows="5" name="producers"><?php echo $producers; ?></textarea></p>
  <?php
}

Primeiro que tudo chamamos a função adicionar do admin_init quando o painel administrativo do WordPress se inicializa, e dentro dessa função adicionamos duas meta boxes – locais para introduzir os nossos dados. O contexto para estas duas boxes é:

<?php add_meta_box( $id, $title, $callback, $page, $context, $priority ); ?>

A única diferença entre estas duas é o local onde as colocamos no ecrã. O ‘year completed’ é colocado na barra lateral utilizado o ‘side’ enquanto os ‘credits’ são colocados no interior da página utilizando o ‘normal’.

Dentro de ambas as funções existe algum código PHP do WordPress e HTML para nos ajudar a definir correctamente os velhinhos custom fields. Tenha a certeza de que inclui:

global $post;

…para que possamos depois correr uma query

$custom = get_post_custom($post->ID);

Depois das duas meta boxes serem adicionadas, você irá visualizar algo deste tipo:

A última coisa a fazer no terceiro passo é termos a certeza de que guardamos estes valores. Para o fazer utilizamos:

add_action('save_post', 'save_details');

e

function save_details(){
  global $post;
 
  update_post_meta($post->ID, "year_completed", $_POST["year_completed"]);
  update_post_meta($post->ID, "designers", $_POST["designers"]);
  update_post_meta($post->ID, "developers", $_POST["developers"]);
  update_post_meta($post->ID, "producers", $_POST["producers"]);
}

Não existe nada demasiado complexo aqui. Estamos novamente a adicionar uma acção, desta vez para efectuar o ‘save_post’. Ele dispara a função save_details() que utiliza o update_post_meta (http://codex.wordpress.org/Function_Reference/update_post_meta) para guardar a informação relevante.

QUARTO PASSO

Agora é altura de dar um toque à página My Portfolio para mostrar alguma desta informação. Vejamos:

add_action("manage_posts_custom_column",  "portfolio_custom_columns");
add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
 
function portfolio_edit_columns($columns){
  $columns = array(
    "cb" => "<input type=\"checkbox\" />",
    "title" => "Portfolio Title",
    "description" => "Description",
    "year" => "Year Completed",
    "skills" => "Skills",
  );
 
  return $columns;
}
function portfolio_custom_columns($column){
  global $post;
 
  switch ($column) {
    case "description":
      the_excerpt();
      break;
    case "year":
      $custom = get_post_custom();
      echo $custom["year_completed"][0];
      break;
    case "skills":
      echo get_the_term_list($post->ID, 'Skills', '', ', ','');
      break;
  }
}

Aqui estamos a adicionar duas novas funções ao WordPress Admin. A primeira, portfolio_edit_columns($columns), define simplesmente as colunas. Os primeiros dois argumentos “cb” e “title” são parte do core pelo que não recomendamos que mexa neles. Os outros três surgem do nosso custom post type, “description”, “year” e “skills”.

Temos também mais uma função para dizer ao WordPress onde ir buscar esta informação – portfolio_custom_columns($column). Utilizando um simples switch podemos definir qual a informação a mostrar em cada uma das colunas do layout. Para a “description” utilizamos o the_excerpt(), para o “year” vamos buscar o custom field utilizando o get_post_custom(), e para as “skills” vamos buscar uma lista de termos/taxonomias/categorias, separadas por vírgulas, utilizando o get_the_term_list().

Com isso teremos as nossas colunas definidas:

QUINTO PASSO

Originalmente os custom post types são mostrados utilizando o fallback single.php, ou index.php. Uma das coisas fantásticas é que podemos ser nós a criar os nossos templates customizados utilizando nomes do tipo single-xxxxxx.php. Neste caso iremos utilizar o single-portfolio.php. Crie apenas o seu ficheiro de template na sua directoria e o custom post type irá utiliza-lo. A forma como depois mostra a informação, já é consigo!

PROBLEMAS A REESCREVER ENDEREÇOS

Existem alguns problemas reportados relativamente ao reescrever endereços URL; por vezes não funcionam. No entanto, se está com este problema existem uma série de formas de solucionar o problema.

Primeiro, vá no seu menu Opções > Permalinks, e faça gravar. Normalmente este truque resolve o problema, tendo em consideração que o seu Wordpress consegue gravar facilmente a informação no ficheiro .htaccess.

Se isso não funcionar você pode acrescentar uma linha de código depois de registar o tipo de post:

register_post_type( 'portfolio' , $args );
flush_rewrite_rules();

Isto poderá resolver de vez o seu problema…

Leitura adicional:

http://thinkvitamin.com/dev/create-your-first-wordpress-custom-post-type/

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

Bons truques! Até Já!

Outros artigos de interesse:

• Utilização de thumbnails à prova de bala no Wordpress 2.9
• Tutorial WordPress: Como mostrar uma mensagem de boas vindas
• Tutorial: Como apresentar os artigos em colunas no seu blog
• Tutorial: Como alterar o aspecto do seu painel de administração WP2.7
• Grupos e funções dos usuários no Wordpress
• 15 maneiras de usar de usar o ficheiro functions no Wordpress
• 5 plugins para criar um site de games flash em Wordpress
• Como ligar a opção Multi-Sites no Wordpress 3.0
• 10 coisas para fazer depois de instalar o Wordpress
• Como separar contagem de comentários, pingbacks e trackbacks

Tendo em conta que a parte mais importante do seu blog são os conteúdos que você produz diariamente para atrair novos leitores e visitantes, e também ganhar dinheiro, porque razão você não presta mais atenção aos arquivos do seu blog? Se você não aprimorar os seus arquivos, todos os conteúdos fantásticos que você desenvolveu ao longo dos últimos meses (ou anos), ficará totalmente perdido nas páginas de navegação do seu blog. Muitos blogueiros acabam por deixar para trás os conteúdos que escrevem diariamente, fazendo com que estes se percam no tempo e acabem esquecidos, quando na verdade poderiam ser excelentes fontes de informação a longo prazo.

Para muitos outros, os arquivos dos seus blogs são uma das peças mais importantes dos seus projectos. Um local onde os seus leitores e visitantes poderão encontrar conteúdos de qualidade, e muitas vezes encontrar conteúdos que nem sequer julgavam ser possível de encontrar. Uma página de arquivos que seja realmente útil e eficiente, poderá converter todos os seus novos leitores que passam pelo seu blog apenas por curiosidade, convertendo-os em novos subscritores e leitores regulares das suas matérias. No artigo de hoje, vamos analisar passo-a-passo como criar uma página de arquivos realmente eficiente e fantástica para o seu blog.

CRIANDO UM TEMPLATE

A primeira coisa que deverá fazer é criar uma página de Template no seu blog Wordpress, a qual iremos utilizar para colocar os seus novos arquivos. Aqui iremos criar o seu novo ficheiro archives.php, que ficará localizado na diretoria de conteúdos do seu template. Portanto, eis o código que iremos utilizar para começar, e de seguida damos-lhe uma série de opções que poderá utilizar para customizar a sua nova página de acordo com os seus interesses.

NOTA: Uma vez que o nome da página chama-se Archives, a página deverá ser renomeada para archives.php.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="archives">

	Este é o espaço onde iremos criar a página de arquivos do seu blog.

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

ARTIGOS POR DATA

Embora listar os seus arquivos por data não seja propriamente útil para encontrar um artigo em particular, é uma boa forma de estabelecer o seu blog (a sua longevidade = confiança dos leitores). Recomendamos simplesmente listar estes arquivos por mês, conservando então a dimensão da sua página.

O código seguinte irá listar os seus arquivos por mês sem limite para o número de meses que serão listados no futuro.

<?php wp_get_archives(); ?>

O código seguinte irá listar os seus arquivos por mês, apresentando apenas os últimos 12 meses.

<?php wp_get_archives('type=monthly&limit=12'); ?>

Poderá definir o tipo e limite para uma qualquer preferência que desejar. Poderá encontrar mais informação sobre as suas opções e parâmetros na página do Wordpress Codex para Arquivos.

ARTIGOS POR CATEGORIA

Esta será a secção mais importante dos seus arquivos, uma vez que a maioria dos leitores não estará à procura de uma data particular, mas sim um assunto ou tópico específico.

Se deseja gerar uma lista das suas categorias, utilize o seguinte código:

<?php wp_list_categories(); ?>

Se deseja excluir alguma categoria da sua listagem (por exemplo, entrevistas) utilize o código seguinte. Neste exemplo, as categorias 10 e 12 serão excluídas. Para encontrar o ID da categoria que deseja excluir, visite o seu painel de administração e procure pelo menu Artigos > Categorias. Se colocar o rato por cima da categoria que pretende excluir, o fundo do seu browser irá mostrar-lhe o endereço da categoria, que termina com a indicação do ID.

<?php wp_list_categories('exclude=10,12'); ?>

Se desejar apresentar alguns artigos por cada categoria, existe um plugin fantástico que o poderá ajudar, intitulado Latest Post from each Category. Com este plugin poderá escolher quantos artigos deseja puxar a partir de cada categoria, incluindo a opção para listar todos os artigos de cada uma das categorias.

ARTIGOS MAIS POPULARES

É sempre útil e extremamente rentável direccionar os seus leitores e visitantes para os seus artigos mais populares de sempre, porque o conteúdo provou ser eficiente ao nível da conectividade com os leitores. Para conseguir realizar esta tarefa, recomendamos-lhe a utilização do plugin Wordpress Popular Posts.

De seguida, coloque o seguinte código onde deseja que os seus artigos mais populares sejam apresentados. Por defeito o título dos seus artigos irá utilizar uma tag h3 e irá listar apenas 5 artigos.

<?php if (function_exists('WPPP_show_popular_posts')) WPPP_show_popular_posts(); ?>

Poderá inclusivamente alterar estes parâmetros com as opções listadas na página do plugin. Por exemplo, o código seguinte fará uso de uma tag h4 e listará 10 artigos, ao mesmo tempo que apresenta o número de leituras que cada artigo recebeu.

<?php WPPP_show_popular_posts( "title=<h4>Artigos Mais Populares</h4>&number=10&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" );?>

ARTIGOS MAIS COMENTADOS

Destacar os seus artigos mais comentados irá direccionar os seus leitores para os conteúdos mais debatidos do seu blog, aumentando ainda mais essa interacção com a sua audiência que na verdade é extremamente benéfica na construção e uma audiência e comunidade de qualidade.

Para realizar esta tarefa, recomendamos-lhe a instalação do plugin Most Commented. Depois disso, insira o seguinte código no local onde deseja que os seus artigos sejam listados. Este plugin irá apresentar os 5 artigos mais comentados do seu blog. Poderá inclusivamente alterar este número para o número de artigos que desejar listar.

<?php mdv_most_commented(5); ?>

DESTAQUE OS SEUS ARTIGOS FAVORITOS

Se por ventura desejar destacar os seus artigos favoritos enquanto autor, deverá começar por criar uma categoria com um nome do tipo Favorites/Favoritos, e posteriormente adicionar todos esses artigos a essa categoria também. Utilizando o código seguinte, poderá listar todos os seus artigos inseridos na categoria “Favoritos”.

<?php $my_query = new WP_Query('category_name=Favoritos'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Link Permanente para <?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile;?>

CAIXA DE PESQUISA

No caso de os seus leitores e visitantes não conseguirem encontrar os conteúdos que desejam, é interessante a colocação de uma caixa de pesquisa na sua página de arquivos. Se o seu template ainda não incluir um ficheiro do tipo searchform.php, você terá de criar um. Copie e cole simplesmente o código seguinte num novo ficheiro e grave-o com o nome searchform.php na pasta do seu template.

<form id="searchform" method="get" action="/index.php">
  <div>
     <input type="text" name="s" id="s" size="15" /><br />
     <input type="submit" value="Search" />
  </div>
</form>
</li>

Posteriormente, copie e cole o seguinte código onde deseja que a sua caixa de pesquisa apareça na sua página de arquivos.

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

O PRODUTO FINAL

Portanto, eis a sua página de arquivos final. Obviamente, deverá estilizar a sua página com CSS de acordo com o seu template, para que esta se apresente o mais agradável possível.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="archives">

	<h3>Arquivos por Mês</h3>
	<?php wp_get_archives(); ?>

	<h3>Arquivos por Categoria</h3>
	<?php wp_list_categories(); ?>

	<?php WPPP_show_popular_posts( "title=Posts by Popularity&number=5&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" ); ?>

	<h3>Artigos Mais Comentados</h3>
	<?php mdv_most_commented(5); ?>

	<h3>Artigos Favoritos do Autor</h3>
	<?php $my_query = new WP_Query('category_name=Favoritos'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Link Permanente para <?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile;?>

	<h3>Pesquise no Blog</h3>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Agora que tem o seu template completo, poderá carregá-lo para a pasta de ficheiros do seu template, ligar-se no seu painel de administração do Wordpress e criar uma nova página. Na sua coluna da direita, irá ter como opções os Templates de páginas disponíveis, logo por baixo dos Atributos. Escolha a sua página de Arquivos, dê-lhe um título e publique-a!

O que é que você fez com a sua página de arquivos? Sinta-se à vontade para partilhar o link dos seus arquivos nos comentários!

Até Já!

Outros artigos de interesse:

• 16 truques e dicas para estilizar e modificar os comentários do seu blog!
• 11 truques para tornar o template do seu blog ainda mais incrível!
• 10 templates wordpress grátis para galerias
• UBD Money Theme disponível para download grátis temporariamente!
• Wordpress Love v3.0 está no ar!
• Tutorial: Como criar um template Wordpress de raíz – Comentários, Sidebar e Arquivos (parte 2)
• Tutorial: Como criar um template Wordpress de raíz (parte 1)
• Plugin Wordpress Snazzy Archives (Arquivos Fantasticos) em Português
• 5 plugins para criar um site de games flash em Wordpress
• Como colocar data e hora de expiração nos artigos do seu blog

Acredito que uma das grandes vantagens na construção de comunidades em torno de websites e blogs é a criação de sinergias diversificadas com os leitores e visitantes, seja através de comentários, mensagens ou simplesmente pela afectividade inerente à prática de o visitar.

São muitos os blogs que nos dias de hoje fazem uso de rankings de comentadores, páginas de perfis, avatares nos comentários, trocas de links, entre muitas outras estratégias que são nada mais, nada menos, do que formas de tornar o blog mais afectivo e interessante para todos aqueles que o visitam regularmente, fazendo com que as subscrições e associações ao blog sejam mais permanentes e regulares.

COMO MOSTRAR UMA MENSAGEM DE BOAS-VINDAS

Primeiro, devemos utilizar o código seguinte para definir que o utilizador ligado tem um nível 0, que é basicamente o nível por defeito para membros que não têm poder nenhum além do poder de deixar um comentário. Este código permite também aos utilizadores abaixo do nível 0 de verem o seu username também (ex: nível de administrador é 10, mas eles continuam a poder ver esta mensagem na mesma). Esta é também uma forma interessante de apresentar mensagens personalizadas apenas a grupos restritos de utilizadores (ex: admin, contribuidores, etc…).

< ?php global $user_ID; if( $user_ID ) : ?>
< ?php if( current_user_can('level_10') ) : ?>
< a href="http://www.wordpress-love.com/stats">Estatísticas< /a>
< ?php else : ?>
< ?php endif; ?>
< ?php endif; ?>

Agora, pode verificar que existe um código no meio que aponta para uma página de “estatísticas”. Vamos remover essa linha de código e adaptá-la para chamar o nome do utilizador de acordo com o Wordpress Codex. Este código irá fazer com que o utilizador seja identificado após efectuar login no seu blog.

< ?php global $current_user; get_currentuserinfo(); echo ($current_user->user_login); ?>

Se efectuo a alteração com sucesso, o seu código final deverá ser algo do tipo:

< ?php global $user_ID; if( $user_ID ) : ?>
< ?php if( current_user_can('level_10') ) : ?>
< ?php global $current_user; get_currentuserinfo(); echo ($current_user->user_login); ?>
< ?php else : ?>
< ?php endif; ?>
< ?php endif; ?>

A partir daqui podemos trabalhar no sentido de apresentar aquilo que desejarmos quando o código é puxado. Apenas necessitamos de inserir mensagens antes ou depois de o código “echo” para que estas sejam apresentadas ao visitante. Por instantes, apresento uma série de modelos interessantes que poderá utilizar no seu blog. Vejamos:

< ?php global $user_ID; if( $user_ID ) : ?>
< ?php if( current_user_can('level_0') ) : ?>

Bem-Vindo de volta < ?php global $current_user; get_currentuserinfo(); echo ($current_user->user_login); ?>
< ?php else : ?>
< ?php endif; ?>
< ?php endif; ?>

Mensagem do tipo: “Bem-Vindo de volta Paulo”.

< ?php global $user_ID; if( $user_ID ) : ?>
< ?php if( current_user_can('level_0') ) : ?>

Bem-Vindo de volta < ?php global $current_user; get_currentuserinfo(); echo ($current_user->user_login); ?>. No caso de ter perdido alguma coisa, eis os artigos mais recentemente publicados.

<ul>< ?php wp_get_archives('type=postbypost&limit=5'); ?></ul>
< ?php else : ?>
< ?php endif; ?>
< ?php endif; ?>

Mensagem do tipo: “Bem-Vindo de volta Paulo. No caso de ter perdido alguma coisa, eis os artigos mais recentemente publicados”. E depois lista 5 conteúdos do seu blog. Poderá mudar o código “limit=5″ para o número que desejar.

Como pode ver, as possibilidades de utilização do código são imensas. Faça as adaptações que achar interessantes e use e abuse delas!

Até Já!

Outros artigos de interesse:

• Como criar Custom Post Types no Wordpress 3.0?
• 10 truques para Wordpress que lhe vão facilitar a vida
• Utilização de thumbnails à prova de bala no Wordpress 2.9
• 12 truques secretos do Wordpress para utilizar em 2010
• Adicione uma caixa de login ao seu blog Wordpress
• Como criar um template Wordpress traduzível para multi línguas
• 15 truques e dicas para tornar o seu template wordpress mais interessante!
• 10 dicas para fazer o seu blog Wordpress sobressair da concorrência!
• Tutorial: Como apresentar os artigos em colunas no seu blog
• 10 shortcodes incríveis para Wordpress

A nova versão do WordPress 2.7 já saiu há algum tempo, e uma das coisas que é facilmente perceptível, é o facto de que muitos utilizadores ainda não migraram os seus blogs porque o painel de administração é bastante diferente daquilo a que estão habituados. No entanto uma das coisas interessantes do Wordpress é que ele é extremamente flexível e permite que você o re-adapte facilmente às suas necessidades, incluindo visuais e de navegação.

O tutorial seguinte irá ajudá-lo através de imagens e textos como ajustar o seu painel de administração Wordpress.

O PAINEL POR DEFEITO NO WORDPRESS 2.7

O FUTURO

MENOS É MAIS

Acreditamos também que a nova versão WP2.8 que será lançada na Primavera, irá utilizar um esquema de funcionamento bastante similar, o que significa que será possível manter as suas opções devidamente configuradas.

TUDO DIFERENTE

ALTERAR OS ICONS

Boas alterações!

Outros artigos de interesse:

• 5 plugins para modificar completamente o seu painel de administração Wordpress
• 10 dicas para fazer o seu blog Wordpress sobressair da concorrência!
• Como criar Custom Post Types no Wordpress 3.0?
• 5 plugins para criar um site de games flash em Wordpress
• Como ligar a opção Multi-Sites no Wordpress 3.0
• 10 coisas para fazer depois de instalar o Wordpress
• Plugins e códigos para integrar o Google Buzz no seu blog
• 10 truques para Wordpress que lhe vão facilitar a vida
• 7 plugins e 7 dicas para monitorizar e acelerar o seu blog
• Como monetizar os RSS Feeds em Wordpress?

Uma das partes mais engraçadas de estilizar um template Wordpress, é criar a secção de comentários do blog, que seja um complemento visual extremamente atrativo, tal como o resto do template do blog.
Hoje trago-lhe três tipos de estilos de comentários que poderá utilizar no seu blog. Junto coloco o código fonte original dos mesmos e também um ficheiro .PSD para estilizar em Photoshop.

1. Os gravatars verdes

Este estilo de comentários deverá estar associado a um blog que utilize um tom esverdeado. Ele necessita do plugin Gravatars para Wordpress e três imagens: imagem 1, imagem 2 e imagem 3. Faça “salvar como” e carrege-as para o seu servidor.
Depois disso a primeira coisa a fazer é editar o ficheiro “comments.php” do seu template wordpress com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite>
<img src=”<?php gravatar(“R”, 32); ?>” alt=”" />
<span class=”author”><?php comment_author_link() ?></span><br /><span class=”time”><?php comment_time() ?></span> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(‘F jS, Y’) ?></a> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?>
</cite>
<div class=”commenttext”><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

Depois de inserir o código, deverá inserir também o CSS:

ol.commentlist {
margin:0;
padding:0;
}

.commentlist li {
list-style:none;
margin-bottom:14px;
}

.commentlist cite {
padding: 7px;
display:block;
font-style:normal;
background:url(http://www.yoursite.com/images/bg_comments2_cite.gif);
border-top:1px solid #d6e4c1;
border-bottom:1px solid #779d42;
color:#596e3b;
}

.commentlist a:link, .commentlist a:visited {
color:#596e3b;
}

.commentlist a:hover, .commentlist a:active {
color:#8ec343;
}

.commentlist cite img {
padding:1px;
border:1px solid #aab59a;
float:left;
margin-right:9px;
}

.commentlist .author {
font: small-caps bold 1.2em Georgia, “Times New Roman”, Times, serif;
text-decoration:underline;
}

.commentlist .time {
background: url(http://www.yoursite.com/images/bg_clock.gif) no-repeat 1px;
padding-left:13px;
}

.commenttext {
background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom;
border-top:1px solid #c5f386;
padding: 0 20px 10px 20px;
color:#fafcf6;
}

Não se esqueça que todos os exemplos aqui apresentados irão utilizar a dimensão de pixel de texto que estiver previamente definida no seu template. Depois será necessário ajustá-la devidamente ao tamanhoa da caixa de comentários.

Download: Gravatars em Verde (.psd)

2. Balão de Comentário

Este balão de comentários não necessita de nenhum plugin, apenas de duas imagens: imagem 1 e imagem 2. Faça “salvar como” e carrege-as para o seu servidor.
Depois disso vamos editar o ficheiro “comments.php” com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<div class=”quote”><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<cite><?php comment_author_link() ?> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?></a></cite>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

E depois estilizá-lo com o seguinte CSS:

.commentlist .quote {
background:url(http://www.yoursite.com/images/bg_quote.gif) no-repeat top right;
}

.commentlist li {
padding: 5px 18px 22px 18px;
margin-top:15px;
background:#454545 url(http://www.yoursite.com/images/bg_commentlist.gif) bottom no-repeat;
color:#e4edee;
}

.commentlist cite {
display:block;
font-style:normal
}

.commentlist cite a:link, .commentlist cite a:visited {
color:#88e5f0;
text-decoration:none;
}

.commentlist cite a:hover, .commentlist cite a:active {
color:#FFF;
text-decoration:underline;
}

Download: Balão de Comentários (.psd)

3. Alternar Setas dos Comentários

Esta estilização tem como objectivo fazer alternar os comentários com o estilo apresentado na imagem. Ela faz uso do atributo “.alt” nas imagens para fazer a alternação devidamente.
Ele utiliza dois fundos diferentes: fundo 1 e fundo 2. Utiliza também duas imagens: imagem 1 e imagem 2 e ainda dois tipos de setas: seta 1 e seta 2.
Faça “salvar como” e carrege-as para o seu servidor.
Depois disso vamos editar o ficheiro “comments.php” com o seguinte código:

<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<div class=”commenttext”>
<cite><?php comment_author_link() ?></cite>
<?php comment_text() ?>
<span class=”date”><img src=”/images/commentlink.gif” alt=”" /> <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_time() ?> on <?php comment_date(‘n/j/y’) ?></a></span> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?>
</div>
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;?>
<?php endforeach; /* end for each comment */ ?>
</ol>

E aqui está o CSS:

ol.commentlist {
margin:0;
padding:0;
}

.commentlist li {
margin-bottom:8px;
background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottom no-repeat;
color:#FFF;
list-style:none;
width:413px;
}

.commentlist .commenttext {
background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;
padding:22px 22px 50px 22px;
}

.commentlist cite {
display:block;
color:#FFF;
font-weight:bold;
text-transform:uppercase;
font-style:normal;
background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottom repeat-x;
padding-bottom:12px;
font-size:1.1em;
}

.commentlist a:link, .commentlist a:visited {
color:#fff9b9;
}

.commentlist a:hover, .commentlist a:active {
color:#FFF;
}

.commentlist .date {
background:#930e27;
padding:3px;
}

li.alt {
background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) bottom no-repeat;
}

li.alt .commenttext {
background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;
}

li.alt .date {
background:#67421c;
padding:3px;
}

Download: Alternando setas nos comentários (.psd)

Outros artigos de interesse:

• Como estilizar os comentários de resposta no seu blog Wordpress 2.7
• Como destacar os últimos artigos publicados no seu blog?
• Widget contador de comentários para Wordpress
• Tutorial: como instalar uma DomTAB no seu blog Wordpress
• 10 dicas para fazer o seu blog Wordpress sobressair da concorrência!
• O que há de novo no Wordpress 2.8?
• Tutorial: Como alterar o aspecto do seu painel de administração WP2.7
• Como destacar os comentários do Administrador no Wordpress 2.7?
• Como desligar os comentários do seu blog em posts com mais de 30 dias?
• Como tornar os comentários do seu blog compatíveis com o novo WP2.7?

Hoje vamos leccionar a segunda parte de um conjunto de dois tutoriais sobre como criar um template Wordpres de raíz. Se por ventura não leu a primeira parte, aconselho-o a fazê-lo: Como criar um template wordpress de raiz (parte 1).

Partindo desse mesmo artigo, iremos dar continuidade à construção de um template um pouco mais completo, com a inserção de uma sidebar, a caixa de comentários do blog e também uma página de arquivos. Com a utilização do primeiro tutorial e com a integração deste segundo, torna-se praticamente simples a concepção de um template para Wordpress. Todavia, os exemplos aqui prestados são com o intuito de criar um template simples e funcional, pelo que se desejar poderá sempre equacionar um desenvolvimento mais aprofundado da matéria e explorar opções mais avançadas de programação em Wordpress.

PASSO Nº1 – CRIAÇÃO DA SIDEBAR

Comece por criar um novo ficheiro na sua directoria do template, com o nome functions.php e abra-o para o editar. Depois disso, cole o seguinte código:

O que este código faz, é dizer ao seu Wordpress que o seu theme tem uma sidebar widget ready. Este código pode ser facilmente expandido se você quiser colocar várias áreas de widgets, por exemplo. Também aproveitamos para referir que a sidebar do nosso theme utiliza um código HTML diferente daquele que o Wordpress geralmente exterioriza. O que isso faz é colocar os elementos da sidebar envolvidos nas tags <li>, o que certamente não ficaria muito bonito no nosso theme.

Agora vamos desenhar a sidebar, sendo que deverá criar um novo ficheiro intitulado sidebar.php e colar lá dentro o seguinte código.

O que este código faz é dizer ao Wordpress onde estará localizada a sua sidebar. Está colocando também um texto por defeito que só irá aparecer caso você não tenha widgets definidos.

Para finalizar, deveremos incluir a sidebar no ficheiro index.php do template, portanto abra esse mesmo ficheiro e cole o seguinte código depois desta tag <div id="content">: 

E parabéns, acabou de criar a sidebar do seu theme!

PASSO Nº2 – COMENTÁRIOS

O sistema de comentários do Wordpress pode ser simples ou complexo, dependendo da sua vontade, no entanto e tendo em conta que estamos a desenvolver um template simples, achámos por bem envolver um sistema de comentários simples.

O Wordpress coloca tudo simplificado com a integração do seu sistema de comentários por defeito, que inclui um design simplista e funcional, e que pode ser utilizado em qualquer tema, uma vez que vem integrado em todas as cópias do Wordpress. Portanto, isso é o que vamos fazer. Abra o ficheiro index.php e coloque o seguinte código após a 13ª linha (estou a referir-me ao local logo em baixo aos detalhes dos posts, tipo the_time(), etc.)

Como pode constatar, esta porção de código faz referência a um ficheiro que ainda não temos no nosso theme.

Aproveite para testar o seu template, e irá aperceber-se de que ele não é esperto o suficiente para apresentar a caixa de comentários e todos os comentários na homepage, mas quando clica num artigo, tudo aparece como desejava. Bem… excepto a área de texto que provavelmente ficou muito grande. Para resolvermos esta situação não iremos ao core do Wordpress editar o que está feito, pelo que o processo mais simples é adicionar uma linha ao CSS, fazendo com que este processo se torne bem mais simples. Portanto, adicione o seguinte código ao fundo do seu ficheiro style.css.

A primeira linha define uma largura fixa de 400 pixeis para a caixa de texto e inclui também um padding para tornar a leitura mais agradável. Agora você já deve ter um sistema de comentários simples e ao mesmo tempo ultra funcional no seu template.

PASSO Nº3 – OS ARQUIVOS

A maioria dos sites e blogs em Wordpress têm uma página de ’arquivos’, sendo esse o local onde os leitores irão procurar por entradas mais antigas. O formato comum é feito em duas listas, uma com todos os links para os artigos por categoria, e outra dos artigos ordenados por mês. Isto torna os arquivos bastante mais funcionais e simples, facilitando a leitura e navegação do leitor.

archives.php é um ficheiro geralmente encontrado por defeito nos ficheiros do WordPress, sendo que não é necessário “codar” nenhum header especial para fazê-los aparecer. No entanto se desejar poderá tentar criar uma página singular e única para o propósito dos arquivos.

Portanto, crie o ficheiro e cole nele o seguinte código.

Este código pode parecer-lhe idêntico ao index.php mas se olhar com cuidado irá reparar que não existe nenhum loop Wordpress. Isto acontece porque estamos a criar uma página com um item apenas. Ainda assim poderemos utilizar funções como o the_title() para colectar e apresentar informação sobre a página.

Existe também a função the_content(), que o ajudará a colocar algum texto nesta página se sentir necessidade disso. Agora em termos gerais o funcionamento é muito simples, é uma listagem standard (na verdade são duas…) com duas funções, wp_list_categories() e wp_get_archives(). Ambas as funções exteriorizam uma listagem, sendo que a primeira lista todas as categorias do site e atribui-lhe um link que apresenta todos os artigos dentro dessa categoria. A segunda faz precisamente o mesmo, mas em vez de categorias importa os meses do ano em que foram inseridos artigos.

Os parâmetros nas funções colocam um contador com o número de artigos dentro de cada categoria, para facilitar a navegação do leitor. Depois disso e para adicionar esta página fantástica ao seu blog, apenas tens de ir escrever uma nova página e mudar o ”Page Template” para o estilo ”Archives Page” e gravar. Parabéns o seu arquivo está online!

PASSO Nº4 – TESTAR!

Agora que concluiu o processo todo de inclusão da sidebar, comentários e arquivos no seu template Wordpress, procure realizar alguns testes de funcionamento e verificar se tudo corre às mil maravilhas!

SUBSCREVA o Wordpress-Love para mais tutoriais e novidades do mundo Wordpress!

Outros artigos de interesse:

• Tutorial: Como criar um template Wordpress de raíz (parte 1)
• Como criar uma página de arquivos eficiente e fantástica para o seu blog!
• 16 truques e dicas para estilizar e modificar os comentários do seu blog!
• 11 truques para tornar o template do seu blog ainda mais incrível!
• 10 templates wordpress grátis para galerias
• Como forçar a utilização de um Wordpress Theme específico?
• Como criar um template Wordpress traduzível para multi línguas
• Video Flick 2.0 – O template de videos que faltava ao mercado!
• Template FREEmium traduzido para Português
• Automatizar trabalhos com Wordpress

Hoje vou dar uma dica muito simples para a criação de uma caixa sobre o autor do blog, que geralmente está posicionada no final dos artigos, deixando um pouco mais de informação sobre quem cria e escreve regularmente no blog. Esta opção é também muito interessante para todos os bloggers que utilizam múltiplos autores, uma vez que permite saber de antemão quem é que escreve o quê, oferecendo igualmente alguma visibilidade extra para o autor. O mesmo se poderá aplicar aos guest-posts.

Estes dois exemplos foram retirados do blog Webtuga e do A list Apart e são precisamente aquilo que pretendemos construir no nosso blog. Vamos ver como.
Penso que existem plugins que fazem esta tarefa automaticamente, mas o processo manual e via código é bastante mais engraçado e estimulante, e ainda por cima é muito simples.

1. INICIAR

Todo o conteúdo do código vai estar embebido numa <div>, que poderá posicionar onde bem quiser. Geralmente este tipo de código e destaque ao autor, é colocando no final de cada artigo, pelo que editar o ficheiro single.php do seu blog será o mais lógico. Eis o código:

<div id=”authorbox”>
<strong>Sobre o Autor</strong>

<div>
<img src=”/images/<?php the_author_ID();?>.png” alt=”Author Image” id=”authorpic”/>
</div>

<div id=”authorbio”>
<?php the_author_description();?>
</div>

</div>

Este é apenas o código em bruto. Agora vamos ver como funciona para que os conteúdos apareçam correctamente. Onde diz “Sobre o Autor”, poderá trocar pelo que bem entender.

2. O AVATAR

Geralmente o avatar é colocado numa pasta de imagens específica ou criada para o efeito. Você poderá fazer isso também no seu alojamento, por exemplo. Se por ventura utilizar múltiplos autores no seu blog, a melhor forma de os conseguir chamar é utilizando uma tag the_author_ID, para gerar um ID único por cada autor (para ver o ID de utilizador coloque o rato sobre o nome de utilizador no seu painel de administração wordpress – secção utilizadores). Se a imagem se chamar por exemplo, 2.PNG, o número irá corresponder ao ID2 do autor do blog.

Para que este procedimento funcione correctamente, poderá criar ficheiros de imagem com os IDs de cada autor, ou seja, 1.PNG, 2.PNG, e por ai adiante.

3. O CORPO DE TEXTO – BIO

Este campo poderemos aproveitar facilmente pela caixa de descrição do autor que está localizada nas propriedades do utilizador, no painel de administração do Wordpress. Para o fazermos importamos uma tag the_author_description, que copia toda a informação biográfica do autor colocada no referido painel de administração do Wordpress.

4. O ESTILO

A adaptação do estilo pode ser feito por intermédio do CSS através da invocação das diferentes div-ids, no caso de desejar apresentar caixas diferentes para cada autor, por exemplo. Essa parte é simples, pelo que deixo-a para si!

5. OUTRAS ADIÇÕES EXTRA

Poderá customizar ainda mais a sua ficha de autor, importando informação adicional, como o exemplo apresentado e retirado do blog Webtuga. Eis algumas coisas que poderá querer utilizar:

• O website do autor
  Para importar o website do autor, utilize a tag the_author_url, que importa automaticamente o campo que está no painel de utilizadores do seu blog.
• A data do artigo
  Poderá desejar apresentar a data do artigo que o autor acabou de escrever. Para isso importe a tag the_date. Simples.

Basicamente o funcionamento do código em cima é esse. Agora é so colocá-lo no seu blog e começar a apresentar a cara de quem participa activamente nele!
Se gostou deste tutorial, considere subscrever o nosso RSS Feed, ou a nossa Newsletter.

Outros artigos de interesse:

• Template FREEmium traduzido para Português
• Tutorial: Como alterar o aspecto do seu painel de administração WP2.7
• Como destacar os últimos artigos publicados no seu blog?
• Fotografia exclusiva da versão final do painel de administração do WP2.7
• Template Wordpress NewsMag, em Português
• Tema Wordpress ‘Hello Wiki’ em Português
• Tema Wordpress ‘Agregado’ em Português
• Template Wordpress Change Room, em Portugues
• Template Wordpress Fun, em Português
• Tutorial: como instalar uma DomTAB no seu blog Wordpress

O Wordpress é de facto um CMS fantástico, não fosse ele altamente flexível para os programadores e desenvolvedores de templates. Uma das vantagens desta plataforma de blogging, é que permite utilizar campos personalizados, através da inserção de dados extra, chamados de meta-data, em combinação com os tais campos personalizados, vulgarmente conhecidos como custom fields.

É por causa destes campos personalizados que por vezes surgem templates para wordpress fantásticas e todo o mundo fica de boca aberta perguntando como foi possível fazer tal coisa com o Wordpress. Pois bem, estes campos personalizados possibilitam recriar no Wordpress praticamente tudo, criando templates bem diferentes do que é comum no mundo dos blogs.

Caso nunca tenha reparado, no editor de conteúdos do seu blog Wordpress, você deverá ter por baixo um campo chamado “Custom Fields” ou “Campos Personalizados”, que funciona de forma muito simples. Do lado esquerdo está a “Key” que você vai chamar, e do lado direito o “Value” que corresponde à acção que se vai desenrolar depois de chamar a função. Vamos ver mais à frente….

Os campos personalizados funcionam através da “Key” (chave) e do “Value” (valor). A única coisa que ambos têm em comum, é o facto de você ter de chamar ambos no loop do seu código.

<?php the_meta(); ?>

Esta é seguramente a forma mais simples de apresentar os dados. A template tag importa todos os dados da meta-data e coloca-os numa folha de estilo CSS chamada post-meta. A “Key” é um parâmetro que será identificado como post-meta-key.

Apresentando uma lista de itens sem ordem poderia ser:

<ul class=’post-meta’>
<li><span class=’post-meta-key’>Personalidade:</span> happy</li>
<li><span class=’post-meta-key’>Metereologia:</span> fine</li>
</ul>

Você poderá interessar-se em utilizar estes dados de uma forma mais sofisticada, e fazendo uso de listas não ordenadas, que apresentem os seus dados de personalidade e metereologia, por exemplo.

Para utilizar a chamada de dados de uma forma superior e mais avançada, usamos:

get_post_meta($post_id, $key, $single);

Os parâmetros desta entrada são os seguintes:

$post_id
Este é o ID do artigo que guarda a informação contida na meta-data.
A maioria das vezes é chamado pela função $post->ID.

$key
A Key é a chave que contem o nome do campo meta value.

$single
Este campo pode tanto ser falso como verdadeiro (true/false).
Se for verdadeiro, irá resultar na chamada de um único resultado em forma de string.
Se for falso ou não for específicado, a função irá retornar uma array do campo personalizado. Este passo é importante se fizer uso de diferentes $keys com o mesmo nome.

Exemplo de utilização de um campo personalizado

Imaginemos a situação em que temos um campo chave com o título “Imagem” e onde o valor é o endereço dessa mesma imagem.
Para apresentarmos essa mesma imagem, utilizariamos o seguinte código:

<?php $imagem = get_post_meta($post->ID, ‘Imagem’, true); ?>
<img src=”<?php echo $imagem; ?>” alt=”" />

As possibilidades depois são imensas e a utilização dos campos especiais irá depender das necessidades de cada um e também da sua imaginação. Faça testes!

Outros artigos de interesse:

• 15 fantásticos hacks para Wordpress realmente úteis
• Tutorial: Como criar um template Wordpress de raíz (parte 1)
• Como criei um footer de 3 colunas no meu blog Wordpress
• Tutorial: como instalar uma DomTAB no seu blog Wordpress
• Como criar uma página de login customizada para o seu blog
• 10 formas de acelerar o seu blog Wordpress imediatamente!
• Tutorial: como colocar os comentários do seu blog com mais estilo
• Plugin Wordpress Snazzy Archives (Arquivos Fantasticos) em Português
• 8 códigos úteis para começar a usar no Wordpress 3.0
• 15 truques e dicas para tornar o seu template wordpress mais interessante!

Na semana passada andei lendo algumas coisas e deparei-me com um artigo no Blog Verde ensinando a criar um footer de 3 colunas. Resolvi então aproveitar parte da ideia e começar a trabalhar num footer de 3 colunas para o meu blog Fique-Rico. O processo tem como objectivo criar três colunas invisíveis no footer do seu blog, que passam a ser administradas individualmente.
Há quem utilize o footer do blog para colocar os créditos e informação demais, mas há também quem o utilize (como eu) para colocar artigos populares ou informação de redes sociais.

Este é o aspecto geral do footer que criei lá no blog. Na coluna do lado esquerdo coloquei alguma Navegação que considero importante. No espaço do meio coloquei artigos populares que defini manualmente, e na coluna da direita coloquei um widget do MyBlogLog, com os leitores que passaram recentemente pelo blog.

Para começar, vamos abrir o CSS (stylesheet.css) e colocar no fim dele as seguintes linhas:

!–adicionando colunas footer–!
#footercolumns {padding:2em 0 0 10%; }
#footercolumns .block {float:left; width:30%; margin:0 0 0 2.5%; text-align:left;}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0; text-align:justify;}

Eu não mexi ainda neste código CSS porque não senti necessidade, mas existem alguns parâmetros que você poderá customizar, como o padding, o float à esquerda, o alinhamento e a justificação.
No footer do meu blog tenho o seguinte:

<div id=”footercolumns”>
<div class=”inside”>
<div class=”block first”>
<h1>Navegação</h1>
<ul>
<li><a href=”">Home</a></li>
<li><a href=”">Contactos</a></li>
<li><a href=”">Sobre Paulo Faustino</a></li>
<li><a href=”">RSS Feed</a></li>
<li><a href=”">Themes Wordpress</a></li>
<li><a href=”">Publicidade</a></li>
<li><a href=”">Politica Privacidade</a></li>
<li><a href=”" target=”_blank”>Google Adsense</a></li>
<li><a href=”" target=”_blank”>Netaffiliation</a></li>
<li><a href=”" target=”_blank”>BidVertiser</a></li>
<li><a href=”" target=”_blank”>Text Link Ads</a></li>
</ul>
</div>
<div class=”block”>
<h1>Artigos Populares</h1>
<ul>
<li><a href=”" target=”_blank”>Inserir Blog nos Motores de Busca e Directorios</a></li>
<li><a href=”" target=”_blank”>Themes Wordpress Grátis</a></li>
<li><a href=”" target=”_blank”>Como fazer uma barra de pesquisa Google</a></li>
<li><a href=”" target=”_blank”>Ferramentas de SEO</a></li>
<li><a href=”" target=”_blank”>Tutorial de instalação e utilização OpenX</a></li>
<li><a href=”" target=”_blank”>Criar um blog de sucesso em 12 meses</a></li>
<li><a href=”" target=”_blank”>Ganhar dinheiro com Videos</a></li>
<li><a href=”" target=”_blank”>Inserir Google Maps no Blog</a></li>
<li><a href=”" target=”_blank”>Como utilizar o Webmaster Tools</a></li>
</ul>
</div>
<div class=”block”>
<h1>Leitores Recentes</h1>
(script do MyBlogLog aqui)
</div>
</div>
</div>

No lugar de cada coluna, é possível fazer algumas modificações e inclui qualquer outro tipo de informação. Isto é apenas um exemplo com os dados incluidos, para que possa situar-se mais facilmente relativamente ao exemplo que coloquei na imagem.
O colega Mário Andrade dá ainda uma ajudinha a importar automaticamente os artigos mais recentes no seu blog. Considere também a utilização dessa linha de código com provavelmente umas tags <li> para ajudá-lo a organizar melhor a informação.

Alguns exemplos de footers criativos
———————-

Designshack

YoDiv

Kulturbanause.de

Rapidweaver

HEBAtec

Freelenz.at

Us Trendy

Arrival Design

Outros artigos de interesse:

• Tutorial: Como criar um template Wordpress de raíz (parte 1)
• Como utilizar os campos personalizados no wordpress (custom fields)
• Tutorial: como instalar uma DomTAB no seu blog Wordpress
• Como criar uma página de login customizada para o seu blog
• Como resolver o problema ‘internal server error’ no Wordpress
• 10 formas de acelerar o seu blog Wordpress imediatamente!
• Como tornar o seu template Wordpress widget ready?
• 10 novos plugins para Wordpress que realmente valem a pena!
• Como estilizar os comentários de resposta no seu blog Wordpress 2.7
• Como destacar os últimos artigos publicados no seu blog?

Hoje vou dar a conhecer o conceito de DomTabs, que hoje em dia é frequentemente utilizado em blogs, tanto em Wordpress, como em outras aplicações para blogging.
Como pode ver na imagem em cima, retirada do blog ProBlogger.net, as DomTabs permitem ao utilizador uma fácil navegação por diversas temáticas, sem que na realidade o utilizador necessite de navegar em diversas páginas. A grande vantagem das DomTabs é exactamente essa. O utilizador neste caso poderá ver os melhores artigos de sempre do ProBlogger, como também os artigos o mês, artigos para iniciantes e os favoritos do Darren Rowse, tudo isso sem sair da mesma página. Aquilo a que eu geralmente chamo de navegação simplificada.

A DomTabs para começar, é um scritp gratuíto. Além de funcionar como uma grande vantagem para o leitor, porque não exige uma navegação continuada, a DomTabs poupa também muito espaço ao seu blog. Numa DomTab é possível colocar imensa informação organizada em pequenas separadores, tal como representado na imagem.

A DomTabs é um scritp gratuíto e pode ser utilizada em qualquer website, blog ou outro sistema CMS. No entanto, vou introduzir o conceito para o Wordpress, e depois você decide se pretende alterar alguma coisa ou não.

Instalação da DomTab no seu blog Wordpress
——————————–

[1] Faça download do script DomTabs e descompacte o ficheiro .zip
[2] Faça o upload do ficheiro domtab.js para a directoria do seu template Wordpress
[3] Descarregue o ficheiro domtab_love.css e coloque-o na directoria do seu template também
[4] No header do seu blog (header.php), coloque o seguinte código após o </head>

<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/domtab.js”></script> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/domtab_love.css” media=”screen” />

[5] Na sidebar (sidebar.php) do seu blog ou num widget, coloque o seguinte código

<div class=”domtab”>
  <ul class=”domtabs”>
    <li><a href=”#t1“>Tab 1</a></li>
    <li><a href=”#t2″>Tab 2</a></li>
    <li><a href=”#t3″>Tab 3</a></li>
  </ul>
  <div>
    <a name=”t1″ id=”t1“></a>
    <p>Inserir conteúdos da primeira tab aqui,
por exemplo ficheiros para download.</p>
  </div>
  <div>
    <a name=”t2″ id=”t2“></a>
    <p>Inserir conteúdos da segunda tab aqui.</p>
  </div>
  <div>
    <a name=”t3″ id=”t3“></a>
    <p>Inserir conteúdos da terceira tab aqui.</p>
  </div>
</div>

Notas
——————————–

Se por ventura quiser fazer uso de mais do que 3 Tabs, como fez o Darren Rowse por exemplo, apenas necessita de copiar a secção de código da Tab e depois a secção de conteúdo na Tab. Pode adicionar o número de tabs que desejar, ou inclusivamente fazer um website assim, com conteúdos navegáveis a partir de DomTabs.

O ficheiro domtab_love.css que está disponível para download, pode ser também editar num editor de ficheiros CSS. O ficheiro inclui todas as instruções em Português, pelo que é simples de utilizar.
Eu para editar ficheiros utilizo o fantástico Notepad++, que além de tudo, é gratuito.

Se por ventura tiver algum problema com a utilização da DomTabs no seu blog, deixe um comentário.
Estou para implementar potencialmente aqui no blog, mas tenho de ver primeiro que conteúdos pretendo realçar

Créditos
——————————–

Página DomTabs: DomTabs
Ficheiros CSS: ProBlogDesign
Tradução e Compilação: Paulo Faustino

Outros artigos de interesse:

• Tutorial: Como alterar o aspecto do seu painel de administração WP2.7
• Tutorial: como colocar os comentários do seu blog com mais estilo
• Como utilizar os campos personalizados no wordpress (custom fields)
• Como criei um footer de 3 colunas no meu blog Wordpress
• Como estilizar os comentários de resposta no seu blog Wordpress 2.7
• Como destacar os últimos artigos publicados no seu blog?
• Os verdadeiros icons RSS para o Natal de 2008!
• Como criar uma caixa de informação sobre o autor no seu template wordpress
• Tutorial: Como criar um template Wordpress de raíz (parte 1)
• Novo kit de icons fantásticos para bloggers