Montando tema para WordPress parte 1

Com a velocidade que a internet vem se expandindo e a quantidade de sites que são criados a cada dia, resolvi dar destaque para uma plataforma que além de ser ótima, tem uma comunidade muito forte e envolvida no seu desenvolvimento, isso mesmo, estou falando do WordPress.

Não queria ser muito teórico, porém acredito que o fundamento para conhecer melhor a evolução e recursos da ferramenta é de extrema importância.

Seguindo fontes da Wikipédia, o WordPress é um aplicativo CMS ( Sistema de Gerenciamento de Conteúdo) ou antes seu criador falava somente como uma plataforma de blog. Utilizando linguagem PHP e Banco de dados MySQL, assim foi escrito um grande sucesso mundial na questão de desenvolvimento e gerenciamento de conteúdo.

Antes mesmo de entrar para a grande história do desenvolvimento para Web, seu antecessor era o b2/cafeblog. Conhecido também por porb2 ou cafelog, conseguiu a marca de 2000 blogs. Embora o WordPress seja o sucessor oficial, outro projeto b2evolution, também está em desenvolvimento ativo.

Como o nosso foco não é contar a trajetória do WordPress, deixo aqui a referência completa sobre a sua longa jornada.

http://pt.wikipedia.org/wiki/WordPress

Vamos conhecer as características, para ter certeza se ele supre as necessidades do seu projeto ou estudo:

  • Criação de Temas
  • Estrutura de permalink amigável aos mecanismos de busca
  • Suporte extensivo a plugins
  • TrackBack e Pingback
  • Páginas estáticas
  • Múltiplos autores
  • Suporte a tags
  • Pode gerenciar múltiplos blogs em subpastas ou subdomínios (Versão 3.0)
  • Importação e exportação de dados
  • API de desenvolvimento de plugins
  • Níveis de usuário
  • Campos personalizados que permitem armazenar dados extras no banco de dados

 

Diferenças entre o .ORG e .COM

WordPress.org é um site comunitário do projeto do aplicativo WordPress, onde é possível fazer  o download do aplicativo e contribuir para o projeto. Sem contar com o diretório de plugins e temas, chamada para Codex, Fórum de Suporte e blog oficial.

WordPress.com é um serviço da Automatic que oferece hospedagem gratuita de blogs com o software WordPress. Vale ressaltar as limitações contida no serviço, como escolha limitada de temas, e ainda de restringir a utilização de JavaScript, CSS e FTP.

Com todos esses pontos levantados, podemos dizer que o WordPress é uma ferramenta flexível e ágil.

 

Por onde começar?

Entendo plenamente que o título do meu artigo é montando um tema, porém vamos aprender a fazer a instalação local do WordPress e com o passar dos artigos mostrarei o funcionamento do painel.

Lembrando que trabalhando localmente você precisar ter um ambiente rodando o PHP, Apache e MySQL.

O melhor local para explicar a instalação está no site WordPress.org. Logo na primeira página temos tudo que é preciso para iniciar, download da última versão, passos para instalação e suporte.

 

Instalação do Tema

 

Após o login na Dashboard, vamos pular alguns itens até o momento para se concentrar na aparência do seu blog ou site.

Por padrão o WordPress vem com dois temas: Twenty Eleven e Twenty Ten.

Existem duas maneiras de adicionar um novo tema, clicando na guia Instalar Temas ou copiando a pasta do tema para o diretório de instalação: wp-content/themes.

 

Organização do Tema

Nossos arquivos devem estar em uma pasta com o nome do tema e pelo menos ter:

index.php e style.css

Somente com esses dois arquivos, é possível ter um tema básico funcionando. Claro que adicionar um preview do tema deixa bem profissional, basta fazer a imagem que deseja e salvar com o nome de screenshot.

No arquivo CSS é aonde conseguimos descrever o nome do tema, autor, resumo e recursos.

/*

Theme Name: Tema ONE

Theme URI: http://www.infonaveia.com.br

Description: Tema para estudo.

Author: Carlos Bortoni

Version: 0.1

Tags: Básico

*/

Quando estou desenvolvendo um tema, procuro montar primeiro HTML e CSS, depois adiciono as funções do WordPress.

Segue HTML base:

<!DOCTYPE html>

<html dir=”ltr” lang=”pt-BR”>

<head>

<meta charset=”UTF-8″ />

<title>Titulo do Site</title>

<link rel=”stylesheet” href=”style.css” type=”text/css” />

</head>

<body>

<div id=”header”>

<h1><a href=”#”>Nome do Site</a></h1>

</div> <!– header –>

<div id=”main”>

<h3>data</h3>

<h2>

<a href=”#”>Titulo do Post</a>

<p>conteúdo do post</p>

</h2>

</div><!– main –>

<div id=”sidebar”>

Sidebar

</div><!– sidebar –>

<div id=”footer”>

<p>Rodapé</p>

</div><!– footer –>

</body>

</html>

Criando o arquivo index.php, sendo a junção do HTML + funções do WordPress, ou tags se achar melhor.

 

Alterando o cabeçalho

Vamos destacar as mudanças no código, logo adicionamos a tag de definição da língua do site e o tipo de codificação de caractere. Para o título temos tags para o nome do blog ou site.

Em questões para um bom desenvolvimento de SEO, há opção para descrição. Em um outro artigo vamos falar mais sobre o assunto e como turbinar o tema.

Link com o CSS do projeto, buscando automaticamente o arquivo style.css na raiz do projeto.

Vale destacar as funções de Feeds e Pingback, no caso do último citado, serve para avisar sobre links e menções a artigos, post e página.

A função wp_head é obrigatória para ativar a Barra Administradora, junto com a wp_footer.

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />

<title><?php bloginfo(‘name’); ?></title>

<meta name=”description” content=”<?php bloginfo(‘description’); ?>” />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />

<link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />

<link rel=”alternate” type=”application/atom+xml” title=”Atom Feed” href=”<?php bloginfo(‘atom_url’); ?>” />

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

<?php wp_head(); ?>

</head>

 

Corpo da página

Agora vamos para área de  conteúdo da página. Já falamos aqui blog sobre o Loop do WordPress. Por enquanto trabalhamos com o básico para um melhor entendimento.

A mesma função usada para exibir o titulo da página utilizamos para adicionar o nome do site, junto um link aonde vamos direcionar sempre para a URL raiz.

Seguindo para DIV MAIN, chegamos ao famoso LOOP, aonde será verificado se há postagens para ser exibir, junto colocamos a data, titulo, link permanente para ver todo o conteúdo em uma única página.

Exibir o número de comentários, logo abaixo the_content para mostra o texto do post ou página criada. No caso de comentários só serão exibidos quando o usuário clicar no Título do Post, junto com o formulário para preencher. Veja a importância do link permanente nessa hora.

Opções de navegação, quando chegar ao número máximo de posts na página, será exibido a possibilidade de ir para os próximos conteúdos.

No último item, tratando-se de uma função de condição, caso não haja nenhum post, mensagem indicando que não há postagens.

<body>

<div id=”header”>

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

</div> <!– header –>

<div id=”main”>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<h3 class=”date”><?php the_time(‘l F j, Y’) ?></h3>

<h2 id=”post-<?php the_ID(); ?><?php post_class(); ?>>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent link to <?php the_title_attribute(); ?>“><?php  the_title(); ?></a>

</h2>

<?php comments_number(); ?><!– exibe o número de comentários –>

<?php the_content(); ?>

<?php wp_link_pages(); ?>

<div class=”commentblock”>

<?php comments_template(); ?>

</div><!– commentblock–>

<?php endwhile; ?>

<div class=”navigation”>

<div><?php posts_nav_link(); ?></div>

</div><!– .navigation –>

<?php else: ?>

<h2>Sem Postagens</h2>

<p>Não há postagens no momento</p>

<?php endif; ?>

</div><!– main –>

 

Sidebar e Rodapé

Finalizando o nosso tema, barra lateral e rodapé. Se eu fosse descrever todos os recursos possíveis para a Sidebar é melhor guardar para um outro artigo. Mas vamos a uma breve explicação de possibilidades de uso. Adicionar busca, últimos artigos, categorias e assim várias informações para auxiliar o usuário, o mesmo vale o rodapé que adicionar auxilio.

Na Sidebar ativei manualmente a opção de busca, por meio da função get-search_form. No futuro vamos trabalhar com o arquivo functions.php, para que você tenha a possibilidade de adicionar os Widget desejados.

Por último o rodapé, aproveitamos uma função nativa do PHP para exibir o ano no Copyright. Para ativar a Barra Administradora função wp_footer.

<div id=”sidebar”>

<ul>

<?php if( !dynamic_sidebar(‘first-widget-area’)) : //o ID da sidebar ?>

<li id=”search” class=”widget-container widget_search”>

<?php get_search_form(); ?>

</li>

<?php endif; //fim da area da sidebar ?>

</ul>

</div><!– sidebar –>

<div id=”footer”>

<p>&copy; <?php echo date(‘Y’);?><?php bloginfo(‘name’); ?></p>

</div><!– footer –>

<?php wp_footer(); ?>

</body>

</html>

Todos os itens que foram adicionados, são para serem preenchidos dinamicamente pelo WordPress. Isso é a grande sacada do CMS, apesar de todo o trabalho e cuidado na hora de montar o tema, será compensado na hora de criar os conteúdos e páginas.

Espero que tenho gostado e aguardem a continuação.

Download dos arquivos temaOne