Muitas pessoas usam o WordPress como plataforma para blogging, sites, portais e outros tipos de projetos online. Depois de instalar o WordPress, a maioria dos usuários de WordPress normalmente vai em busca de um tema pronto para não usar o tema padrão que vem com o WP.
Quer você use temas gratuitos ou pagos (ou, mesmo, desenvolva seus próprios temas), existem muitas maneiras de melhorá-los através de dicas para fazer temas WordPress melhores!
Use favicon personalizado
Quando um site não tem um favicon personalizado, ele pode parecer não-profissional. Certifique-se que o seu tema WordPress tenha um favicon próprio. Você pode conferir uma lista de geradores de favicon para ajudar.
Para fazer referência ao seu ícone no WordPress, basta colocar o seguinte código, normalmente dentro arquivo header.php que pode ser encontrado na pasta raiz do seu tema (levando em conta que o arquivo da imagem também está na pasta raiz):
|
1 |
<link rel="icon" href="favicon.ico" type="image/x-icon" /> |
Estilize a legenda das imagens
Quando você faz upload de uma imagem para colocar em um post ou página do WordPress, dentre outras opções, é possível inserir uma legendas para colocar uma descrição para a imagem. Um bom tema WordPress deve incluir regras CSS para estilizar as legendas da imagens. Para estilizar as legendas segundo o padrão do WordPress, insira as seguintes linhas em seu arquivo CSS (geralmente chamado styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.wp-caption { background-color: #f3f3f3; border: 1px solid #ddd; border-radius: 3px; margin: 10px; padding-top: 4px; text-align: center; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .wp-caption img { border:0 none; margin:0; padding:0; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } |
Veja o artigo com o guia completo sobre breadcrumbs para visualizar imagens com captions estilizados corretamente.
Use PHP Flush
Chamando a função flush() do PHP imediatamente depois do cabeçalho HTML, você será capaz de acelerar seu site WordPress. Basta adicionar esta linha com a chamada à função após o </ head> (por padrão, no arquivo arquivo header.php):
|
1 |
<?php flush() ?> |
Esse código simplesmente força seu servidor web a enviar cabeçalho do site antes de enviar o restante do conteúdo. Usando a função flush(), o navegador tem tempo para baixar todas as folhas de estilo referenciadas no cabeçalho enquanto espera pelas outras partes da página.
Minimize os arquivos de seu tema WordPress
É muito útil ter os arquivos CSS e javascript de seu tema minimizados para reduzir seu tamanho, consequentemente realizando uma transferências de arquivos mais rápido, aumentando a velocidade do site, em geral. Minimizar os arquivos significa retirar caracteres desnecessários deles, como espaços e tabs (e, no melhor caso, juntar todos os arquivos do mesmo tipo em um só).
Existem diversas ferramentas gratuitas na internet para minimizar arquivos CSS e javascript. Para javascript, existem, dentre outros, os excelentes JavaScript Compressor, /packer/, jsCompress e YUI Compressor Online. Para fazer um minify em arquivos CSS, confira o item “Otimizadores e Formatadores de CSS” do artigo de ferramentas e recursos para desenvolvimento web.
Existem, também, vários plugins para WordPress para minimizar e otimizar os arquivos, como o WP Minify e W3 Total Chache, que fazem o serviço de minify de forma bastante transparente e, ainda, melhoram outros aspectos para otimização de temas WordPress, tais como manipulações de cache, combinação de arquivos, e outros para melhorar a velocidade do site.
Substitua funções e hooks por conteúdo estático
Os arquivos de temas que podem ser baixados na web precisam ser bem flexíveis, para atender ao maior número de pessoas que os queiram usar. Por isso, existem diversas chamadas a funções e hooks que permitem que um tema funcione nas mais diversas formas e situações.
No entanto, isso pode acarretar em uma perda de performance e desempenho das página, já que cada vez que uma página é gerada, ela precisa fazer várias chamadas a hooks/funções para renderizar a página.
Inspecione os arquivos do tema que você escolheu para seu site/blog e perceba as chamadas desnecessárias. Por exemplo, no header.php, você pode encontrar uma linha parecida com esta:
|
1 |
<title><?php bloginfo('name'); ?></title> |
Essa função serve para mostrar o nome do seu site (definido nas configurações no Painel Administrativo) na barra de títulos do navegador. Na verdade, o nome do site não se altera quase nunca, então, para que deixar mais uma chamada a função? Isso consome recursos do servidor e reduz o tempo de carregamento do site. Você pode, facilmente, substituir por:
|
1 |
<title>Nome do Site<title> |
Eis um outro exemplo do que pode ser encontrado no header.php:
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> |
Essa linha usa a função para referenciar o caminho de onde se encontra o arquivo “style.css” do tema. Mais uma vez, é possível poupar recursos do servidor com uma simples mudança:
|
1 |
<link rel="stylesheet" href="http://www.site.com/wp-content/themes/themename/style.css" type="text/css" /> |
Esses foram somente 2 exemplos, mas existem muitas outra chamadas a funções “desnecessárias” quando se baixa um tema, seja ele gratuito ou pago. Vasculhe os arquivos do tema usado e substitua por conteúdo estático sempre que possível.
E você, tem mais alguma dica para o desenvolvimento de temas WordPress melhores? Comente!