Em breve chegará a hora de redesenhar meu site para a “Era da Web 2.0”. Analisei seriamente duas plataformas, Drupal e Joomla, para conseguir isso.
Drupal e Joomla oferecem pacotes abrangentes que, no caso do Drupal, incluem um blog e um fórum como módulos principais. A temática dessas plataformas pode ser realizada por meio de modificações de código CSS (Cascading Style Sheets) e PHP (Personal Home Page ou PHP: Hypertext Preprocessor). No entanto, essas plataformas são complexas e aprender o suficiente para instalar, gerenciar e personalizar essas plataformas pode ser uma tarefa difícil.
Depois de estudar as duas plataformas, inclusive usá-las em minha plataforma de teste e na Internet, decidi dar uma olhada no WordPress como uma possível solução para minhas futuras necessidades na Web. Fiquei surpreso ao descobrir que a versão mais recente do WordPress é fácil de instalar, fácil de usar e fácil de tematizar.
Neste artigo, descreverei como personalizar o WordPress 2.5.
ESTILO WORDPRESS
Existem seis componentes principais que compõem a aparência do blog WordPress padrão:
1. Gráfico de cabeçalho
2. Título do blog
3. Slogan
4. Página
5. Fundo
6. Rodapé.
Para fazer o blog carregar rapidamente, decidi não usar gráfico de cabeçalho ou rodapé; e como o design será essencialmente o tema padrão do WordPress com uma nova camada, apenas um pequeno trabalho de design gráfico precisa ser feito. Na verdade, eu só precisei criar um gráfico para gerar a página do blog com efeito de duas colunas. A página do blog “flutuará” centralizada em um fundo *corpo* azul escuro que servirá para enquadrar a página.
Criando o gráfico
Uma olhada no diretório de imagens do tema padrão do WordPress mostra as imagens padrão usadas para a aparência do Kubrick. Por enquanto, existe apenas um arquivo de particular interesse: kubrickbgwide.jpg. Para o design, as outras imagens de Kubrick não são necessárias, mas serão necessárias para o design “extravagante” e mais complexo.
A página do blog será criada a partir de uma “fatia” no centro do novo design. A fatia é uma imagem estreita da largura da página do blog.
Comecei meu design criando uma página básica (760px X 600px) no Adobe Illustrator. Gosto de usar o Illustrator para trabalhos artísticos desse tipo, embora outros programas também possam ser usados.
Preenchi a página básica com a cor de fundo da página (não confundir com o fundo azul escuro *corpo*). A cor de fundo clara irá “exibir” o texto colorido, como o título e o slogan do blog.
Sobrepus a página com dois retângulos, ou “colunas”. A coluna esquerda, com 510 pixels de largura, é preenchida com uma cor amarelo pastel; a coluna da direita, com 230px de largura, é preenchida com uma cor azul pastel. As duas colunas cabem na página básica com uma borda de fundo de página de 10px ao redor delas.
No Illustrator, coloquei um retângulo de 760px X 40px na página e usei-o para fazer uma fatia. Uma fatia nada mais é do que um pedaço representativo de uma imagem maior, no caso, do design do blog. Salvei a fatia como kubrickbgwide.jpg. Kubrickbgwide.jpg será usado para gerar o plano de fundo da página do blog. À medida que novo conteúdo é adicionado à página do blog, as cópias da fatia serão empilhadas verticalmente para “aumentar” o fundo de duas colunas. Esta é a única imagem necessária a um navegador para gerar a página inicial do blog. O Blog irá, portanto, carregar muito rapidamente.
Muito fácil até agora, certo? O restante do design é realizado através do arquivo CSS do tema e/ou através da interface administrativa do WordPress.
APF Alterações
O arquivo CSS padrão está no diretório wp-content_themes_default. O texto CSS abaixo mostra as alterações de código em style.css. Antes de fazer qualquer alteração no arquivo CSS padrão, sempre faço e salvo uma cópia do original. O arquivo CSS pode ser aberto e modificado com qualquer editor de texto. O texto a ser excluído será mostrado entre colchetes. O texto novo ou modificado será mostrado sem colchetes.
/* Começar tipografia e cores */
corpo { [fundo: #d5d6d7 url('images/kubrickbgcolor.jpg');]
plano de fundo: #636f89; /* Define a cor de fundo do corpo para azul */
}
#página {
[cor de fundo: branco;] [borda: 1px sólido #959596;]fronteira:nenhuma;
} [#cabeçalho {
plano de fundo: #73a0c5 url('images/kubrickheader.jpg') centro inferior sem repetição;
}
#headerimg {
margem: 7px 9px 0;
altura: 192px;
width: 740px;
}]
#footer { [fundo: #eee url('images/kubrickfooter.jpg') topo sem repetição;]
plano de fundo: #ffef2; /* Amarelo bem claro */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.descrição] {
decoração de texto: nenhuma; [cor branca;]
cor vermelha; /* Torna o título vermelho */
fundo de preenchimento: 5em; /* Coloque um pequeno espaço entre o título e o slogan */
}
.descrição {
text-decoration: nenhum;
cor azul; /* Deixa o slogan azul */
text-align: center;
}
/* Fim da tipografia e cores */
/* Inicia a estrutura */
#page { [cor de fundo: branco;]
cor de fundo: ffef2; /* Amarelo muito claro */ [borda: 1px sólido #959596;]
fronteira: nenhuma;
}
#header { [cor de fundo: #73a0c5;]
cor de fundo: #ffffef2; /* Amarelo bem claro */
}
/* Estrutura final */
Depois de fazer e salvar essas alterações no arquivo style.css, a página do blog recém-projetada está concluída.
ESTILO WORDPRESS – O DESIGN DO VESTIDO FANCY
Embora eu goste da simplicidade do design do blog Jakob, ele não agradará a todos. Muitas pessoas adoram “brilho”. O preço de um vestido elegante em WordPress costuma ser um blog de carregamento mais lento, sem aumento na usabilidade. No entanto, para aqueles que desejam “enfeitar” a aparência de seu blog, aqui estão outras maneiras de fazer isso.
Em primeiro lugar, deve-se notar que o plano de fundo da página padrão do WordPress usa gráficos de cabeçalho (kubrickheader.jpg) e rodapé (kubrickfooter.jpg). Esses gráficos não são preenchidos com cores sólidas, como no design de Jakob, mas com gradientes. Também parece haver uma pequena sombra projetada sob a página.
Devido à complexidade da página padrão, são necessários gráficos adicionais e, portanto, mais fatias serão necessárias. Além disso, quando um fundo de corpo mais complexo é desejado para “flutuar” a página, uma imagem “semente” para isso também pode ser necessária (é para isso que serve a imagem kubrickbgcolor.jpg).
Como antes, criei um desenho da página do blog no Illustrator. A página, com cantos arredondados, flutua no fundo padrão do WordPress, tem um gradiente amarelo e uma pequena sombra projetada.
Primeiro criei um retângulo de 760px X 600px na prancheta do Illustrator. Preenchi este retângulo com a cor de fundo (C:8, M:6, Y:6, K:0).
Em seguida, usando a ferramenta Rounded Rectangle, desenhei um retângulo de 736px X 584px e preenchi-o com o gradiente amarelo. Essencialmente, tornei a página o maior possível no plano de fundo, deixando espaço suficiente para a sombra projetada.
Finalmente, dei ao retângulo arredondado uma pequena sombra projetada.
Para garantir que as fatias se fundirão perfeitamente no fundo *corpo*, criei um quadrado de 60px X 60px da mesma cor de fundo (C:8, M:6, Y:6, K:0) e salvei-o como kubrickbgcolor.jpg. A imagem pequena será usada para “pintar” o fundo do corpo. Esta é uma etapa importante, pois o plano de fundo usado para o corpo e o plano de fundo usado para a página devem corresponder perfeitamente ao design sofisticado.
Criando as fatias
Usando a ferramenta Retângulo, coloquei um retângulo de 760px X 200px no topo do layout descrito acima. Posicionei esse retângulo na parte superior do layout e usei-o para fazer uma fatia para o gráfico do cabeçalho. Antes de fazer isso, desativei o traço e o preenchimento.
Salvei a fatia como kubrickheader.jpg.
Criei o rodapé e as fatias de página de maneira semelhante e os renomeei como kubrickfooter.jpg e kubrickbgwide.jpg, respectivamente. Kubrickfooter.jpg tem 760px X 63px e kubrickbgwide tem 760px X 40px.
Existem duas outras imagens Kubrick no diretório de imagens: kubrickbg-ltr.jpg e kubrickbg-rtl.jpg (da esquerda para a direita e da direita para a esquerda). Essas imagens são iguais a kubrickbgwide.jpg. Então, fiz duas cópias de kubrickbgwide.jpg e as renomeei de acordo.
Mudanças CSS
O arquivo CSS padrão está no diretório wp-content_themes_default. O texto CSS abaixo mostra as alterações de código em style.css. Colchetes mostram qual código excluir e o novo código é mostrado sem colchetes. Antes de fazer a alteração, copiei e salvei o arquivo original. Para o design sofisticado, as alterações de CSS são mínimas.
/* Começar tipografia e cores */
corpo { [fundo: #d5d6d7 url('images/kubrickbgcolor.jpg');]
plano de fundo: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#page { [cor de fundo: branco;] [borda: 1px sólido #959596;]
}
#header { [fundo: #73a0c5 url('images/kubrickheader.jpg') sem repetição no centro inferior;]
background: #e7e7e7 url('images/kubrickheader.jpg') centro inferior sem repetição;
}
#footer { [fundo: #eee url('images/kubrickfooter.jpg') topo sem repetição;]
plano de fundo: #e7e7e7 url('images/kubrickfooter.jpg') topo sem repetição;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [descrição]{ [cor: branco;]
cor vermelha; /* Torna o título do blog vermelho */
fundo de preenchimento: 5em; /* Coloque um pequeno espaço entre o título e o slogan */
}
.descrição {
text-decoration: nenhum;
cor azul; /* Deixa o slogan do blog azul */
text-align: center;
}
/* Fim da tipografia e cores */
/* Inicia a estrutura */
#page { [cor de fundo: branco;]
cor de fundo: #e7e7e7; [borda: 1px sólido #959596;]
fronteira: nenhuma; }
#header { [cor de fundo: #73a0c5;]
cor de fundo: #e7e7e7;
}
/* Estrutura final */
Depois do trabalho de design e CSS, o WordPress mostra sua nova roupagem para toda a Internet.
ESTILO WORDPRESS – O DESIGN NÃO GRÁFICO
Nada dá errado quando um navegador carrega uma página da Internet, certo? Mesmo que esse fosse de fato o caso, ainda é aconselhável considerar como uma página será exibida caso os gráficos não sejam encontrados.
No caso do design Jakob, se kubrickbgwide.jpg não fosse baixado, por qualquer motivo, a página não seria exibida de forma aceitável. Devido ao fundo claro usado para o cabeçalho e rodapé, eles são exibidos normalmente no fundo azul escuro atribuído ao corpo. No entanto, o conteúdo da página torna-se difícil de ler: quase se perde no fundo azul escuro. Um fundo mais claro para o corpo poderia ter sido uma escolha muito mais sábia.
O criador do design Kubrick resolveu esse problema atribuindo cores de fundo alternativas a serem usadas caso os gráficos não estivessem disponíveis. As atribuições são feitas dentro do arquivo style.css:
corpo { background: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { background: #73a0c5 url('images/kubrickheader.jpg') centro inferior sem repetição; }
#footer { background: #eee url('images/kubrickfooter.jpg') topo sem repetição; }
Se as imagens não estiverem disponíveis, o valor de cor RGB alternativo será usado.
Se os gráficos não estiverem disponíveis, o blog padrão do WordPress ainda estará apresentável e utilizável. Para um redesenho inicial da página, começar com o design básico do Kubrick, sem gráficos, pode ser um bom ponto de partida. Isso pode ser conseguido simplificando as afirmações acima:
corpo {fundo: #d5d6d7; }
#header { background: #73a0c5; }
#rodapé { plano de fundo: #eee; }
As cores podem então ser alteradas para experimentar vários esquemas de cores do blog. Basta alterar os códigos de cores RGB, salvar o arquivo CSS e atualizar o navegador para ver as alterações imediatamente. Espero que isso tenha sido útil e fácil de ler.
Postagem escrita por Royce Tivel
