10 dicas para acelerar, estilizar e proteger seu template WordPress

Veremos aqui como você pode melhorar seu template wordpress
imediatamente, sem grandes truques complexos. Depois de escolher seu
template de entre milhares
que existem no mercado, é a hora de você melhorar seu site e torná-lo
tanto mais rápido quanto mais funcional e atrativo. Seja o seu template
grátis ou premium, existem inúmeras formas de aprimorá-lo rapidamente,
de acordo com os colegas da sixrevisons. Estas dicas para WordPress vão desde customização, estilização e otimização.

01. Reduza o peso das imagens do template

As imagens são uma parte muito importante de qualquer template
WordPress, embora a grande maioria dos desenvolvedores se esqueça de otimizar corretamente. As imagens de um template WP incluem
por exemplo, imagens de background, logomarcas, images para ilustração
de opções, ícones e por aí adiante. Otimizá-las ajuda a poupar espaço de banda, bem como melhora drasticamente o tempo de
resposta de seu site sempre que um novo usuário tentar acessá-lo.

O Photoshop, por exemplo, oferece uma opção “Save for Web”
que otimiza automaticamente imagens para serem usadas na internet. O que
normalmente fazemos nesses casos, é reduzir a qualidade da imagem para
85% ou 90%, garantindo ainda assim uma qualidade aceitável, mas um peso
muito inferior. Desta forma, poderá usar aplicações online como o Smush.it que basicamente compacta a qualidade de suas imagens até um peso minimamente aceitável, sem perder qualidade.

02. Use um favicon personalizado

Alguns templates wordpress não oferecem um favicon por defeito. Trata-se do ícone que representa seu site quando você o acessa através de um
browser e/ou o ícone que aparece em seus separadores de browser. Quando
um site ou blog não tem favicon, ele poderá parecer pouco profissional. Tenha a certeza de que seu template WordPress oferece um favicon. Para
isso, basta você criar uma imagem de 16×16 pixeis que identifique seu site (pode ser inspirado na logo, se você ja tiver), e depois usar um gerador de favicon como o HTML Kit
para criar o seu arquivo .ico. Para puxar seu favicon através de seu
template wordpress, coloque o seguinte código no seu arquivo header.php:

<link rel="icon" href="http://www.escolawp.com/favicon.ico" type="image/x-icon" />

Não esqueça de alterar o atributo href para a localização correta do favicon de seu site.

3. Estilize legendas em suas imagens

Quando você faz upload e postagem de uma imagem
poderá atribuir legendas para as definir melhor. Um bom template wordpress
deverá incluir um estilo original para as legendas de imagens. Para estilizar a legenda original, pode usar a classe .wp-caption no seu arquivo styles.css.

Eis um exemplo de estilização de legenda, usando propriedades CSS3:

.wp-caption {<br />  background-color: #f3f3f3;<br />  border: 1px solid #ddd;<br />  -khtml-border-radius: 3px;<br />  -moz-border-radius: 3px;<br />  -webkit-border-radius: 3px;<br />  border-radius: 3px; /* optional rounded corners for browsers that support it */<br />  margin: 10px;<br />  padding-top: 4px;<br />  text-align: center;<br />}<br />.wp-caption img {<br />  border: 0 none;<br />  margin: 0;<br />  padding: 0;<br />}<br />.wp-caption p.wp-caption-text {<br />  font-size: 11px;<br />  line-height: 17px;<br />  margin: 0;<br />  padding: 0 4px 5px;<br />}

4. Use o PHP Flush

Chamando a função PHP flush logo depois do seu header poderá acelerar consideravelmente seu site WordPress. Adicione
simplesmente a seguinte linha de código em seu arquivo header.php logo depois de fechar a tag </head>:

<?php flush(); ?>

Este código força seu servidor a enviar o cabeçalho do site antes de enviar todo o resto do conteúdo. Usando a função flush,
o browser tem tempo de descarregar todas as folhas de estilo
(stylesheets) referenciadas no cabeçalho enquanto aguarda o
carregamento do resto da informação.

5. Use um CSS simplificado

Os arquivos CSS dos templates WordPress contém muitos códigos
capazes de corresponderem às diferentes situações e necessidades de um site.
Para conseguir reduzir o peso de seu arquivo você pode
simplificar seu CSS. Alguns desenhadores de templates menos
experientes, normalmente usam simplificação de CSS, o que resulta num
template bastante complexo e pesado.

Por exemplo, se encontrar regras de estilo do tipo:

.post {<br />padding-top:3px;<br />padding-right:10px;<br />padding-bottom:5px;<br />padding-left:2px;<br />}

Você pode simplificá-las para a sua versão idêntica:

.post { padding: 3px 10px 5px 2px; }

Essa técnica irá ajudá-lo a reduzir consideravelmente o peso de seus
arquivos de estilo. Embora uma estilização desse tipo não lhe poupe um
peso muito grande, a verdade é que numa folha de estilos completa,
poderá representar centenas de linhas de código a menos. Só nesse
exemplo, poupámos 4 linhas de código.

6. Minimize arquivos do seu template

Sendo congruente com a simplificação de seu CSS para diminuir o peso de seus artigos styles.css,
caso seu template faça uso também de JavaScript, você poderá
minimizá-los para reduzir drasticamente seu peso. A minimização faz a
remoção de espaços em branco e parágrafos desnecessários em seu código,
compactando completamente seu arquivo para que seu peso seja mínimo.

Para código JavaScript, você pode usar o JavaScript Compressor, que basicamente comprime seus arquivos, deixando mais leves e rápidos.

Seria bastante complicado compactar seu código HTML uma vez que seu
template inclui inúmeros arquivos, muitos deles com código PHP
integrado. No entanto, existem plugins como o W3 Total Cache
que basicamente comprime todo o front-end do seu template, realizando
automaticamente uma série de otimizações, tal como manter suas postagens
em cache para que seu site seja mais rápido a carregar.

7. Proteja a versão do seu site

Uma forma simples de proteger seu template é removendo o código de
geração da versão WordPress, que se encontra no cabeçalho de
seu template, entre tags <head>. A razão por trás
disso é que os usuários maliciosos conseguem saber qual a versão de seu
Wordpress. E isso significa que o site fica muito mais vulnerável a
ataques. Para resolver esse problema, você pode seguir dois passos
simples.

Primeiro, vá no seu arquivo header.php e procure por essa linha de código:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

Se encontrar, remova-a. Essa linha de código gera automaticamente a versão de seu WordPress em seu código-fonte.

De seguida, para garantir que essa funcionalidade não é passada pela função wp_head() automaticamente, copie e cole o seguinte código em seu arquivo functions.php:

<?php remove_action('wp_head', 'wp_generator'); ?>

8. Esconda os erros de login do painel de administração

Outro forma de proteger seu template, passa por esconder os
erros de login do seu painel administrativo. O problema é que se você
testar vários nomes de usuário, o WordPress irá indicar-lhe que
está errando o nome de usuário, bem antes de afirmar que você está
errando a password. Isso significa também, que qualquer usuário
malicioso poderá tentar adivinhar qual o seu username, realizando
testes, e depois disso só irá necessitar de tentar descobrir ou hackear
sua palavra-chave.

Para esconder esses erros na sua caixa de login, você necessita de adicionar o seguinte código em seu arquivo functions.php:

add_filter('login_errors', create_function('$a', "return null;"));

Esse filtro irá remover os erros de login de seu painel
administrativo, não mostrando qualquer tipo de mensagem caso você falhe
seu username ou palavra-chave.

9. Substitua a caixa de pesquisa do WordPress

A grande maioria dos templates wordpress que você encontra na
internet, fazem uso da funcionalidade nativa de pesquisa do WordPress.
No entanto, a função de pesquisa, neste momento, não é tão boa e tão
funcional como por exemplo a caixa de pesquisa customizada do Google.

Utilizando o serviço de pesquisas da Google, você apenas acumula
vantagens: o serviço é mais eficiente e mais relevante, as suas
pesquisas são mais rápidas porque não trabalham diretamente com seu
servidor, e você ainda pode ganhar dinheiro com
anúncios de Adsense em seus resultados de pesquisas orgânicas. Para
aprender a integrar uma pesquisa customizada do Google, leia este
artigo sobre Como fazer uma barra de pesquisa Google que lhe renda dinheiro também.

10. Reduza o número de chamadas de funções

Arquivos que são consumidos em massa e constantemente utilizados
necessitam ser flexíveis. Como tal, existem imensas chamadas de funções
dinâmicas e truques para tornar seu template flexível em diversas
situações. No entanto, isto pode reduzir a performance de seu site
porque cada página gerada necessita de várias funções para se
auto-renderizar.

Olhe por situações onde não é necessário usar chamada de funções.

Por exemplo, no seu arquivo header.php, você poderá encontrar uma linha de código do género:

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

O que essa linha faz é mostrar o nome de seu site na barra de títulos
do browser. Provavelmente, o nome de seu site não muda assim tão
regularmente, ou seja, você pode eliminar essa função e escrever
diretamente o título:

<title>Escola WordPress - Ensinando WordPress</title>

Vejamos outro exemplo (também no arquivo header.php):

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

Nesse exemplo, usamos uma função para chamar o URL de sua folha de
estilos. No entanto, é improvável que esse endereço URL mude, pelo que
você pode escrever diretamente o endereço URL do tipo:

<link rel="stylesheet" href="http://exemplodeblog.com /wp-content/themes/templatedoblog/style.css" type="text/css" />

Existem imensas chamadas de funções desse tipo em seu template
certamente, e colectivamente, elas podem contribuir para uma quebra de
performance do site, especialmente se você não estiver usando um
plugin de cache. Otimize essa funções, reduzindo-as para o mínimo
indispensável e obrigatório.

Até Já!