Criando o meu blog Parte III: Criando um tema no WordPress



Este é o ultimo post da série Criando o meu blog. Após termos planejado e montado a Identidade visual. Esta na hora de aplicar no CMS(Content Management System).
Baseado no Codex, documentação oferecida aos desenvolvedores do wordpress, escrevo esse guia como uma forma de ensinar e facilitar aos interessados.

Instalando

Para instalar seu wordpress localmente, será preciso o apache, servidor interno, na sua maquina. Aconselho a instalar o XAMPP um aplicativo que contem tudo que é preciso.

Após a instalação do xampp, baixe o wodpress, e coloque a pasta em xampp/htdocs.

Dica:Esta pasta é onde ficam todos os seus sites. Ela é a pasta padrão onde o xampp executa seus modulos.

Entre no endereço http://localhost/wordpress/ e pronto! Você esta rodando na sua maquina.
Antes de instalarmos automáticamente, precisamos ter um banco de dados disponível. Entre em http://localhost/phpMyAdmin. Na opção Criar novo Banco de Dados coloque o nome que quiser e clique em Criar.

1

Voltemos ao http://localhost/wordpress/ e vamos rodar a instalação, clique em Creat configuration File, certifique-se que tem todos os dados necessários e Let’s Go.
Agora é hora de informar os dados. Preencha todos de acordo com os que você instalou no xampp ou já contem. (Se você não modificou nada os valores padrões do xampp são username: root e a senha em branco)

2

Feito isso, informe o título do blog e seu e-mail e será informado uma senha e um login. E Pronto instalamos o wordpress.

Estrutura Básica

Entrando no wordpress após a instalação ele irá nos exibir o tema padrão. Este possui uma a estrutura básica. (header, post title, navigation, footer, etc.).

estrutura1

Como funciona o WordPress

O wordpress trabalha com um sistema denominando Template Tags. Eles funcionam para mostrar as informações dinamicamente na pagina de maneira rápida e fácil. Sua anatomia é formada por uma tag code do PHP(< ? ? >), A função wordpress (bloginfo()) e parâmetros opcionais.

<?php bloginfo('name'); ?>

São todas funções já definidas que estão escritas em todos os arquivos que se encontram na pasta do wordpress.

pasta

Na pasta wp-admin fica localizado apenas os arquivos do administrador. Na wp-includes é onde temos todas as funções que chamamos com as template tags.

E ,por fim, a pasta mais importante para nós desenvolvedores é a wp-content onde ficam armazenados os plugins, os temas e todo o conteúdo que nós subirmos pelo wordpress(imagens, vidoes, pdfs).

A grande vantagem desse sistema de template tags é não precisar saber lógica de programação nem a linguagem php. Apenas sabendo HTML e CSS você tem total condições de montar um site totalmente dinâmico. Utilizando as várias tags que existem. Você pode encontrar a lista completa delas aqui..

O Framework

Eis aqui o grande segredo para se usar o wordpress não apenas como um blog, mas como um CMS completo. Vocês se lembram da estrutura básica? Se abrimos a index.php do tema default temos muitos códigos que geralmente são desnecessários e só atrapalharão a nossa conversão do PSD para o wordpress.

A idéia é resetar todo estilo, ou seja, deixar uma página limpa. O que facilita para nós designers montarmos a folha de estilo.

Vamos usar o framework produzido pelo Elliot Jay Stocks que irá limpar os estilos baseado no YUI Reset. Entre neste link e baixe o tema starkers. E coloque na pasta wp-content/themes.
Irei aproveitar e renomear a pasta starkers para o nome qualquer, no caso o nome do blog.

Entre no admin do wordpress e ative o tema, agora se você visualizar o site ele estará assim:

blog

Isso mesmo sem estilo nenhum.

Entrando na pasta do starkes, podemos ver que o Elliot deixou apenas os arquivos necessários para se ter um tema no wordpress.

Folhas de Estilo

Entrando no arquivo style.css. Encontramos dados do tema em comentário, eles servem para catalogar seu tema. Alteremos para as nossas características.

/*
Theme Name: import Zeh.Design
Theme URI: http://www.importzehdesign.com/
Description: Tema produzido para o blog import Zeh.Design
Version: 1 (WP2.8.2)
Author: José Henrique Fernandes
Author URI: http://www.importzehdesign.com/
Tags:
*/

@import 'style/css/reset.css';
@import 'style/css/layout.css';

Agora o CSS é seu, Eu não gosto de ficar chamando vários estilos por isso retirei o typography.css deixando apenas o reset.css e o layout.css. Esses arquivos se encontram na pasta style/css.

Dica: Retirei o typography.css pois irei definir a tipografia do site no próprio arquivo layout.css. Diminuindo o numero de requisições que o meu site faz ao servidor. Otimizando-o

Hierarquia

O wordpress usa vários arquivos para criar a index principal (index.php << header.php, sidebar.php e footer.php).

estrutura3

Header

Vamos começar a mexer no header. Um site normal traria suas marcações:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  <head profile="http://gmpg.org/xfn/11">
    <title>import Zeh.Design - Design e Desenvolvimento Web</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="http://www.importzehdesign.com/wp-content/themes/importZehDesign/style.css" media="screen" />
    <link rel="pingback" href="http://www.importzehdesign.com/xmlrpc.php" />
  </head>   

  <body>
    <h1><a href="">Nome do blog</a></h1>
    <p>Descrição</p> 

O que acontece nos arquivos do wordpress é que ao invés das informações estáticas são chamadas as template tags, que chamam por sua vez as informações armazenadas no banco. Vejam:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
   <head profile="http://gmpg.org/xfn/11">
     <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
     <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
     <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
     <?php wp_head(); ?>
   </head>

   <body <?php body_class(); ?>>
     <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
     <p><?php bloginfo('description'); ?></p>

Essa é a essência, aprendendo isso é só saber as tags certas a chamar nos lugares certos.
Vamos olhar as principais tags do header:

<?php echo get_option('home'); ?>  //Retorna o endereço da home
<?php bloginfo('name'); ?>  //Retorna o nome do blog
<?php bloginfo('description'); ?>  //Retorna a descrição do blog 

Essas informações podem ser alteradas diretamente pelo administrador do site. Vejam que a opção get_option precisa usar um echo para exibir.

Dica: como o nome da função diz get funciona apenas para pegar a informação sem exibi-la. As outras já retornam o valor na tela. Você não conseguiria armazenar seu valor numa variável, apenas com funções get.

Sidebar

sidebar

Este é o arquivo onde são exibidos os widgets(tipos de funcionalidades do wordpress). No caso do meu site ele é chamado junto com o footer e contem os blogs que indico, os posts populares, as categorias e uma nuvem de tags. Você pode modificá-lo de dois modos. Chamar suas funções manuais (como eu fiz) ou pelo administrador na opção wideget do apperence.

A idéia é a mesma do header, nós usamos as template tags para isso.

<div id="footer">     
  <div id="container">
      <?php /* Widgetized sidebar, if you have the plugin installed. */
              if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
      
      <div id="blogroll">
          <?php wp_list_bookmarks('before=<li>{   &after=   }&orderby=name'); ?> 
      </div>
      
      <div id="post-popular">
          <?php popular_posts(); ?>
      </div>
      
      <div id="categorias">
         <?php
          $categoria = wp_list_categories('echo=0&show_count=0&title_li=<h2>Categories</h2>&orderby=name');
          $categoria = str_replace('<a href="', '/* <a href="', $categoria);
          echo $categoria;
         ?> 
      </div>
      
      <div id="popular-tags">
      <h2>Popular Tags</h2>
          <div class="tags">
              <?php wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count'); ?>
          </div>
      </div>

      <?php endif; ?>
  </div>

Esse é o código que estou usando no blog, esquecendo as marcações das divs e focando apenas nas template tags do wordpress. Estou verificando se existir widgets adicionandos pelo administrador:

  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :

ele os usa se não exibe as tags manuais, que são:

<?php wp_list_bookmarks('before=<li>{   &after=   }&orderby=name'); ?>

Chama a lista de links do blogroll e usando os parâmetros eu adiciono um caracter de chaves antes e depois. Veja as informações sobre esta tag

blogsIndico

<?php popular_posts(); ?>

Apenas chamo os posts populares. Simples não?

Dica: Esta tag não é padrão do wordpress, é preciso usar um plugin. Mais abaixo você encontra um link para adquiri-lo.

popular

wp_list_categories('title_li=<h2>Categories</h2>&orderby=name');

Esta tag lista as categorias do site ordenando por nome e antes da lista de exibição adicionando um heading h2. Veja as informações sobre esta tag.

categorias

<?php wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count'); ?>

Esta template tag cria a nuvem de tags. Vejam que defini o tamanho Máximo e o mínimo de fonte e quantas eu quero ter no Máximo, pelos parametros. E o worpdress faz o resto. Veja informações sobre esta tag.

tags

Trabalhar com wordpress é muito divertido e a curva de aprendizado para se ter um blog é pequena, basta conhecer as tags.

Index

Esta página irá chamar as outras com as funções :get_header, get_sidebar, e get_footer na ordem da estrutura do layout.

O loop

Uma etapa importante na construção é o loop, ele irá exibir todos os posts:

loop

Dessa forma temos basicamente, o loop checando se existem posts no blog, se tiver mostra todos, se não ele exibe o “Not Found”.

<?php if (have_posts()) : ?> 
	<?php while (have_posts()) : the_post(); ?> <!-- Se eles forem publicações de textos no blog -->
		<div class="post">
        .
        .
        </div>
		
	<?php endwhile; ?>
 
<?php else : ?>
<!-- Quando não encontra posts -->

	<h2>Not Found</h2>

Dentro desse loop são chamadas as informações individuais de cada post, com as seguintes template tags:

<?php the_title(); ?> //Mostra o titulo
<?php the_content(); ?> //Chama o conteudo
<?php the_category(' '); ?> //Mostra a/as categorias do post
<?php the_time('F jS, Y'); ?>  //Exibe a data de acordo com o padrão do parentes
<?php the_permalink(); ?> //Link para o post

Usando elas dentro do loop, a cada novo post ele requer elas novamente. Para facilitar a compreensão abaixo está o código do starkes comentando:

<?php
get_header(); ?> <!-- Chama o Header -->

<?php if (have_posts()) : ?> <!-- Se ouver posts -->
	<!-- Início do Loop -->
	<?php while (have_posts()) : the_post(); ?> <!-- Se eles forem publicações de textos no blog -->

		<div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
        	<!-- H2 recebe o titulo e o link -->
			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			
            <!-- Exibe a data e o autor -->
            <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>
			
			 <!-- Mostra o conteudo, com o parametro para o leia mais -->
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			
             <!-- Imprimi tags, categorias -->
            <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
		</div>

	<?php endwhile; ?>
     <!-- Termina o Loop -->

	  <!-- Navegação -->
	<?php next_posts_link('&laquo; Older Entries') ?> | <?php previous_posts_link('Newer Entries &raquo;') ?>

<?php else : ?>
<!-- Quando não encontra posts -->

	<h2>Not Found</h2>
	<p>Sorry, but you are looking for something that isn't here.</p>
	<?php get_search_form(); ?>

<?php endif; ?>

<?php get_sidebar(); ?> <!-- Chama Sidebar -->
<?php get_footer(); ?> <!-- Chama o Footer -->

Single

Agora que já terminamos a capa do site vamos trabalhar nas páginas internas. Ou seja na exibição do conteúdo. Se vocês repararem temos a mesmas tags da index aqui para chamar titulo, conteúdo e etc…
A diferença é que não temos o loop iremos agora pegar a informação de apenas um post.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="single-post" id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>

			<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
            
            <div id="coments">
            <h2>Diga Comente</h2>
            
           		 <?php comments_template(); ?>
            
            </div>

	<?php endwhile; else: ?>

Vejam como foi simples. Apenas chamo a atenção para a tag comments_template(); ela irá chamar o arquivo comments.php. Que contem a estrutura para o funcionamento dos comentários.

Plugins

Uma das grandes qualidades do wordpress são seus plugins fáceis de instalar e usar. Dependendo do site que você está a construir vão variar os que irá usar. Estou listando abaixo alguns essenciais para um blog:

All in One SEO Pack – Este plugin possibilita a personalização de cada post para os motores de busca. E de todas as URL’s

Google Analyticator – Uma ótima ferramenta que exibe os dados do Google analytics no seu dashbord.

Google XML Sitemaps – Os conhecedores de SEO sabem como é importante o sitemap, este é um ótimo gerador

Post-Plugin Library – Biblioteca de funções para os posts. Necessário para os dois plugins abaixo:

Popular Posts – Alem de ser útil para reviver seus posts já escritos, é também perfeito no quesito usabilidade, em trazer a lista dos melhores posts.

Similar Posts – Uma forma de fazer seu usuário continuar navegando no site, com posts semelhantes.

Conclusão

Espero que este guia tenha ajudado vocês a entenderem como o wordpress trabalha e inicia-los nas suas infinitas possibilidades. Tenham sempre ao lado a lista das template tags e mãos a obra.

Qualquer duvida comentem que irei responder.


Gostou deste post?