O WordPress é um sistema web para gerenciamento de conteúdo desenvolvido em PHP com base de dados em MySQL. Essa informação é de suma importância pois o trabalho de desenvolvimento de um Tema consiste na integração de templates estáticos aos recursos da ferramenta, ou seja, são sites comuns em HTML, CSS e JavaScript que através de codificação PHP terão seu conteúdo gerenciado pelo CMS.

A partir desse ponto já fica evidenciada a necessidade de conhecer essas quatro linguagens da programação web para desenvolver Temas de qualidade: A marcação do conteúdo com as tags do HTML, a definição dos estilos através do CSS, permitir a interação rápida do visitante com os elementos do site fazendo uso de scripts e a definição dos códigos PHP para executar as tarefas no lado do servidor.

Logo do WordPress

Para desenvolver um site de conteúdo estático são necessários profissionais com diferentes habilidades. A grosso modo o trabalho se inicia com o planejamento e definição do projeto, das informações que ele deverá possuir, wireframe e estudos em geral. Em seguida entra em cena o webdesigner que irá transformar as idéias em arte, demonstrando como deverá ficar a parte visual do site quando finalizado. Aprovadas as artes, é a vez do programador front-end transformar essas artes no site propriamente dito. Com técnicas de recorte e montagem as artes dão lugar a códigos que serão compreendidos pelos browsers e exibidos ao visitante do modo que fora idealizado no início do processo. No desenvolvimento de Temas WordPress, logo após esse processo, começa uma nova etapa da qual você será o responsável. Será preciso saber os objetivos do site, como ele está organizado, conhecer a estrutura do código, e de posse dessas informações, viabilizar a integração do projeto com o WordPress; permitindo que as informações a serem exibidas ao visitante possam ser facilmente gerenciadas pelo sistema.

Tenha em mente que não será preciso dominar completamente todas as áreas para desenvolver Temas WordPress. Você precisará ter um bom conhecimento sobre o PHP e seu funcionamento, pois a integração será feita basicamente através dessa linguagem. Ainda assim será preciso que você entenda e tenha um certo domínio sobre as demais linguagens para ter condições de não interferir negativamente no projeto.

Gerenciamento de conteúdo

Antes mesmo de iniciar qualquer trabalho para desenvolvimento de Temas, você precisa conhecer e muito bem o WordPress e todo o seu funcionamento. Tenha sedimentado quais são e como funcionam os recursos oferecidos no painel de controle; conheça quais as configurações são permitidas, qual o tratamento dado ao conteúdo cadastrado, como é feita a organização desse conteúdo, enfim, saiba utilizar o sistema.

A partir de uma instalação básica, sem adição de plugins ou Temas com recursos incorporados; o WordPress estrutura o conteúdo que lhe é inserido da seguinte maneira:

  • Textos são tratados como Posts ou Páginas
  • Posts podem possuir Tags ou Categorias para classificar e agrupar conteúdos
  • Arquivos anexos são gerenciados pela Biblioteca de Mídia
  • A interação dos visitantes é feita através do envio de Comentários nos textos publicados
  • Usuários são geridos pelo recurso de mesmo nome

Existem ainda as Opções tratadas nas demais telas do site e também outros recursos não menos importantes. Toda essa estrutura possui suas informações armazenadas em um banco de dados MySQL com as seguintes tabelas:

Estrutura de banco de dados do WordPress

Estrutura de banco de dados do WordPress

A tabela links serve justamente para o gerenciamento de links. Desde a versão 3.5 esse recurso não vem acoplado ao WordPress, porém a tabela continua a existir principalmente em função da compatibilidade da nova versão do sistema em projetos já existentes. Posts, Páginas e Anexos são tratados dentro da tabela posts e suas informações adicionais ficam em postmeta. Do mesmo modo comentários são armazenados em comments, usuários em users e suas respectivas informações auxiliares em commentmeta e usermeta. As opções ficam na tabela options, são providas simplesmente de uma chave e um valor, ou seja, o nome da opção e qual informação ela carrega consigo. Já as Categorias e as Tags são tratadas como Termos e possuem um comportamento peculiar; suas informações ficam divididas entre as tabelas terms (definição básica), term_relationships (estabele a ligação entre post e termo) e term_taxonomy (determina o tipo de taxonomia adotado).

Perceba que assim como os anexos e as páginas que são tratados como posts, você poderá criar tipos de conteúdos novos para gerir diferentes tipos de textos, e esses conteúdos serão também armazenados na tabela posts. Ainda será possível criar novas taxonomias que possuirão o mesmo sistema de armazenamento das tags e categorias.

Planejamento e Lógica de programação

Assim como todo o trabalho que envolve programação, você precisará de uma lógica apurada para desenvolver seus Temas. Você deve conhecer quais informações o site deverá possuir e adequá-las ao contexto do WordPress, quando não o fizer de forma contrária, adequando o WordPress para o projeto; mas obviamente, através da inserção de códigos e não pela modificação do core do CMS. A lógica imposta aos seus trabalhos deverá compreender o fluxo da informação, ordem de execução das tarefas e também a simplificação das rotinas responsáveis pelos recursos personalizados.

Sempre antes de iniciar a integração de um template ao WordPress faça um rigoroso planejamento referente a todos os elementos presentes no projeto. Um levantamento das necessidades reais do site permitirá uma melhor integração e mais prático gerenciamento dos dados pelo Dashboard. Mesmo com a grande quantidade de features que o sistema oferece, atenha-se a desenvolver apenas os recursos que serão úteis ao projeto, você economizará tempo de trabalho e diminuirá a carga de requisições do servidor.

Desenvolvimento de Temas WordPress

Um Tema consiste em um conjunto de arquivos capazes de apresentar ao visitante o conteúdo gerenciado pelo sistema de acordo com suas definições personalizadas. Em princípio será preciso que você conheça os arquivos básicos de um Tema, suas definições e como o sistema compreenderá os seus arquivos e códigos como um Tema. Desde o começo da integração do template estático com o WordPress, tenha o devido cuidado para evitar falhas e realizar a otimização dos recursos que estão sendo trabalhados.

Saiba desde antes a começar seus estudos que você não deverá modificar os arquivos que acompanham o WordPress, ao invés disso, ao desenvolver Temas você terá a mão recursos que permitem adicionar funções e tratar das informações do sistema sem alterar uma linha sequer do código-fonte do mesmo.

Definições e Reconhecimento de um Tema WordPress

A primeira etapa para o desenvolvimento de um Tema WordPress é adequar o conteúdo do template para a estrutura que o WordPress reconhece como um Tema. Para isso é preciso que você adicione uma nova pasta ao diretório de temas /wordpress/wp-content/themes, e dentro dela, criar os dois arquivos bases do tema:

  • index.php
  • style.css

Mesmo com os arquivos vazios o sistema irá reconhecer o novo Tema e irá listá-lo entre os demais Temas instalados. Perceba que o novo Tema recebe o nome da pasta que fora criada, seu autor é definido como anônimo e também não possui nenhuma imagem que o identifique. Para preencher esses dados a fim de otimizar o reconhecimento do novo Tema e proporcionar uma melhor organização dos Temas instalados, insira dentro da folha de estilos as seguintes instruções em seu cabeçalho:

/*
Theme Name: Novo Tema
Description: Breve descrição do novo Tema
Author: Seu nome ou de sua empresa
Author URI: http://seu-site-ou-blog.com.br
Version: 1.0
*/

Atualize a tela de Temas instalados e veja que os dados já foram corretamente reconhecidos. No entanto, falta ainda definir uma imagem que ilustre o template. Para tal propósito, crie ou escolha uma imagem no formato PNG com as dimensões 300px de largura por 225px de altura. Salve essa imagem com o nome de screenshot.png e a insira na pasta raiz do Tema. Para apresentar a imagem em alta resolução o WordPress recomenda utilizar as dimensões 600x450px do screenshot.

Escopo do Projeto

Já é hora de você começar a incorporar o WordPress aos seus projeto web.

A partir de um template simples será demonstrada os primeiros passos para a integração do template com o WordPress. A fim de ilustrar melhor o processo de análise de um projeto e sua posterior integração; será criado um site com demandas baseadas em checklists de desenvolvimento. Esse processo de desenvolvimento é o modelo mais adotado pelos profissionais e empresas que realizam esse tipo de serviço profissionalmente.

O primeiro trabalho será uma Home Page para o site Baseball Brasil. Trata-se de uma única tela contendo informações referentes a revista digital. Os objetivos desse projeto são:

  • Permitir a edição de nome e descrição do projeto
  • Especificar corretamente os caminhos dos arquivos do Tema
Tema WordPress desenolvido para a revista Baseball Brasil

Tema WordPress desenvolvido para a revista Baseball Brasil

Transformando um Template HTML+CSS em um Tema WordPress

Copie o template para seu diretório de Temas, altere o formato do arquivo index.html para index.php e renomeie o CSS. Se desejar poderá configurar as descrições do Tema e também atribuir uma imagem que o ilustre, são opcionais. Não se assuste se após esse passo você visualizou o site e ele está sem formatação e com as imagens sem serem exibidas. Isso ocorre pois a inserção da folha de estilo e das imagens estão sendo feitas de modo relativo, a partir do arquivo index.php:

<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<img src="images/pic01.jpg" width="940" height="585" alt="" />

Mesmo com os caminhos corretos e com a existência de tais arquivos dentro da pasta do Tema, o WordPress não os insere pois a inserção está sendo feita a partir do diretório de instalação do sistema e não do Tema instalado. Ocorre que a cada requisição de página o arquivo solicitado é o index.php do sistema. Esse arquivo é responsável por iniciar uma série de requisições a outros arquivos que fazem com que o sistema seja completamente carregado e esteja a disposição do desenvolvedor. Tente acessar o endereço completo do arquivo index.php do Tema em que está trabalhando:

http://localhost/baseballbrasil/wp-content/themes/baseball-brasil/index.php

Sim, tudo foi carregado normalmente. Porém, desse modo você não terá os recursos do WordPress para trabalhar e de nada adiantará tê-lo instalado. Portanto, logo após ter realizado o reconhecimento do Tema, é hora de começar a tratar das questões de integração do conteúdo gerenciado pelo sistema com o resultado a ser exibido para o visitante desse site.

O primeiro passo a ser dado será definir o caminho absoluto de localização dos arquivos externos; seguindo o exemplo, o arquivo de estilo e as imagens. Com o objetivo de recuperar informações sobre o site, sua estrutura; você poderá utilizar a função bloginfo.

<?php bloginfo( $show ); ?>

O parâmetro da função é o nome da informação a ser recuperada. Entre as informações que podem ser recuperadas, com essa função você poderá saber qual a URL ou estrutura de pasta na qual seu Tema está inserido, recuperar o nome e descrição do site e outras mais. De posse dessas informações, você já tem condições de acertar alguns pontos essenciais dentro do novo Tema:

<title><?php bloginfo( 'name' ); ?></title>
...
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" type="text/css" media="all" />
...
<div id="logo">
<h1><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'name' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div>
...

E para as imagens:

<img src="<?php bloginfo( 'template_url' ); ?>/images/...

Foi recuperado o nome do site, a descrição, sua URL inicial e também o arquivo de estilo principal do Tema. Ao abrir novamente seu site pela URL correta verá que os arquivos foram carregados corretamente e as informações (nome e descrição do site) estão sendo recuperadas de acordo com a definição do painel de controle.

A integração tem por objetivo recuperar informações editáveis no painel de controle e aplicá-las ao site

Otimização de requisições

Como já foi apresentado acima, o WordPress carrega uma série de arquivos para fornecer ao desenvolvedor muitos recursos úteis para tratar do conteúdo armazenado e gerenciado pelo sistema. Imagine agora que além do carregamento desses arquivos, você solicite ao sistema muitas consultas. Obviamente que o seu projeto se tornará cada vez mais lento de ser carregado, a medida que as requisições ao servidor aumenta.

Comece então a otimizar o código-fonte do Tema desde o início, assim evitará surpresas desagradáveis ao final do processo. Note que apesar da possibiliade de recuperar o charset do projeto com bloginfo, isso não foi feito pois essa é uma informação que não irá sofrer alteração no decorrer do desenvolvimento. E mesmo se sofrer, será algo bem simples de ser retirado.

Agora você pode imaginar que o mesmo pode ser feito com a estrutura de pasta do Tema. Sim e não. Caso o projeto envolva mais profissionais ou outras pessoas tenha acesso aos arquivos do site, é possível que o nome da pasta do Tema seja alterada. Inserindo o caminho absoluto manualmente você teria que alterar essa informação também em seus arquivos ou o Tema estaria arruinado. A proposta aqui é fazer uso de constantes para armazenar essas informações:

define( 'PW_URL',       get_home_url() . '/' );
define( 'PW_URL_THEME', get_bloginfo( 'template_url' ) . '/' );
define( 'PW_SITE_NAME', get_bloginfo( 'name' ) );

O uso do prefixo PW ocorre em razão da diferenciação das constantes personalizadas do Tema, das demais constantes do WordPress e também do PHP. Determine um prefixo seu e faça uso dessa técnica que certamente aumentará a organização e entendimento do seu código.

Faça as devidas substituições dentro do arquivo principal do Tema, o index.php e você terá desenvolvido seu primeiro Tema WordPress! Foi fácil?! rs

Para não esquecer

  • Apenas com os arquivos index.php e style.css já é possível montar um Tema personalizado
  • A folha de estilo principal contém as definições do projeto
  • O comportamento de caminhos relativos e absolutos
  • Otimização das requisições ao servidor
  • Definição um prefixo para as constantes