Wordpress Total » Dicas / Tutoriais http://www.wptotal.com Wordpress Themes, Plugins, Recursos e Dicas para Webmasters Mon, 06 Feb 2012 12:44:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Como Criar um WordPress Theme – Parte 2 http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/ http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/#comments Mon, 06 Feb 2012 12:30:55 +0000 Celso Azevedo http://www.wptotal.com/?p=6613 Depois do primeiro artigo onde fizemos uma introdução sobre como criar templates para wordpress, começamos a trabalhar nos ficheiros individuais que fazem parte do tema. Seguindo a ordem definida no inicio, na segunda parte desta série de artigos vamos falar nos ficheiros style.css e header.php. Se esta informação é do seu interesse, subscreva a nossa ...

]]> Depois do primeiro artigo onde fizemos uma introdução sobre como criar templates para wordpress, começamos a trabalhar nos ficheiros individuais que fazem parte do tema. Seguindo a ordem definida no inicio, na segunda parte desta série de artigos vamos falar nos ficheiros style.css e header.php.

Se esta informação é do seu interesse, subscreva a nossa newsletter para receber os artigos no seu email e ainda participar no nosso passatempo mensal onde oferecemos vários prémios. Escreva o seu email e clique em “subscrever”:

escreva o seu email:

style.css

No ficheiro style.css fica todo o código css que é responsável pela a aparência dos elementos que estão na página/tema. Neste ficheiro você pode definir tamanhos, cores, margens, etc, sempre usando css.

Se quer aprender css ou melhorar os seus conhecimentos, um dos melhores sites é o W3Schools que tem uma categoria destinada ao CSS: www.w3schools.com/css/.

Como fazer

Primeiro começamos por criar um novo ficheiro e guardamos na pasta do tema com o nome style.css. Depois começamos a definir os atributos de cada elemento da página.

Nós criamos um com uma personalização muito simples e básica e que funciona com os ficheiros que criamos na primeira parte do tutorial. Repare que adicionamos um comentário no inicio do ficheiro, a informação que você escrever nesta parte será usada na página de ativação do tema:

Este é o nosso CSS, se quiser pode usa-lo. Copie e cole no seu style.css:

/*
Theme Name: WPTotal
Theme URI: http://www.wptotal.com/
Description: WPTotal
Author: WPTotal
Author URI: http://www.wptotal.com/
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;outline:0;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
i,em{font-style:italic;}
b,strong{font-weight:bold;}
small{font-size:10px;}
big{font-size:16px;}
a img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
a:link,a:visited{color:#0066cc;text-decoration:none;outline:0;}
a:hover,a:active{color:#0055a9;text-decoration:none;outline:0;}
body{background:#f4f4f4;font:normal 13px/150% Arial, Helvetica, sans-serif;color:#363636;}

#corpo{
margin:20px auto;
width:960px;
background:#fff;
}

#header{
width:940px;
margin:10px;
float:left;
}

#header h1{
font-size:24px;
margin-bottom:10px;
}

#header h2{
font-size:18px;
margin-bottom:20px;
}

#nav{
width:940px;
}

#nav li{
display:inline;
margin-right:30px;
}

#conteudo{
width:940px;
margin:10px;
float:left;
}

#artigos{
width:630px;
float:left;
}

.artigo{
width:630px;
margin-bottom:30px;
float:left;
}

.artigo h1{
font-size:20px;
margin-bottom:10px;
}

.artigo h2{
font-size:16px;
margin-bottom:10px;
}

.artigo p{
margin-bottom:10px;
}

#sidebar{
width:300px;
float:right;
}

.widget{
width:300px;
margin-bottom:20px;
}

.widget h3{
font-size:14px;
margin-bottom:10px;
}

#footer{
width:940px;
margin:10px;
font-size:11px;
text-align:center;
}

Este será o resultado:

Wordpress Theme

header.php

Com o style.css já pronto, vamos abrir o ficheiro header.php que criamos na primeira parte deste tutorial.

Neste ficheiro ficam algumas tags que são importantes para o tema e alguns plugins funcionarem. Estas linhas de código devem de ser adicionadas entre as tags <head> e </head> (apague as duas linhas de código que estão lá):

<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

Cada linha de código faz uma coisa diferente, aqui está a explicação de cada linha:

  • linha 1: indica ao browser como o  mark-up deve de ser usado;
  • linha 2: indica o tipo de conteúdo e o conjunto de caracteres que está a ser usado;
  • linha 3: a tag wp_title vai gerar um título diferente para cada página. Esta tag pode ser mais trabalhada, mas falamos nisso noutro artigo;
  • linha 4: insere automaticamente o stylesheet criado anteriormente (style.css). O wordpress deteta a sua localização e insere o url do ficheiro;
  • linha 5: gera o url de pingback, não é obrigatório mas convém usar;
  • linha 6: ativa o suporte a comentários com vários níveis e também tem a tag wp_head que serve para inserir outras linhas de código nesta zona do tema (é uma tag muito usada pelos plugins)

Ainda no header.php, umas linhas mais a baixo, temos já o “corpo” da página onde podemos adicionar 3 outras tags: uma para o título (nome do site), uma para a descrição e outra tag para listar as categorias no menu.

Aqui é opcional: você pode escrever manualmente, pode usar tags php do wordpress ou usar uma imagem para o logotipo. Nós vamos usar as tags do wordpress para o título e descrição do blog (o texto que aparece aqui pode ser alterado em Opções > Geral).

As tags para mostrar o nome e descrição são estas:

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

Só tem que copiar cada uma e substituir dentro das tags <h1> e <h2> que estão na div “header”:

<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>

Mais em baixo temos o menu e mais uma vez é uma escolha sua. Pode criar o menu manualmente usado html, usar alguma tag do wordpress para listar as categorias (o mais usado) ou usar os menus personalizados do wordpress que permitem adicionar ou remover links do menu através do painel de administração.

Nós vamos usar os menus personalizados (custom menus), mas como só vamos explicar isto num dos próximos artigos, vamos deixar como está.

No fim destas alterações todas temos o seguinte código no nosso header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1><?php bloginfo('name'); ?></h1>
		<h2><?php bloginfo('description'); ?></h2>

		<ul id="nav">
			<li><a href="#">Página 1</a></li>
			<li><a href="#">Página 2</a></li>
			<li><a href="#">Página 3</a></li>
			<li><a href="#">Página 4</a></li>
		</ul>
	</div>

Depois de guardar todas as alterações, o seu header.php está pronto e podemos passar para as outras partes do tema.

Download dos ficheiros

Conclusão

Nesta segunda parte da série de artigos onde ensinamos a criar wordpress themes, começamos já a trabalhar nos ficheiros individuais que fazem parte de um tema. Já temos a aparência “desenhada” (no style.css) e as tags mais importantes no cabeçalho (header.php).

No próximo artigo vamos falar em dois ficheiros que são responsáveis por mostrarem os artigos na página inicial e nas páginas de arquivo (categorias, tags, etc). Se não quer perder nenhum artigo, passe pela página de subscrição e esteja sempre atualizado sobre o que publicamos aqui no wptotal.

Qualquer dúvida deixem um comentário! :)

]]> http://www.wptotal.com/como-criar-um-wordpress-theme-parte-2/feed/ 3 Como Otimizar as Imagens para os Motores de Busca http://www.wptotal.com/como-otimizar-as-imagens-para-os-motores-de-busca/ http://www.wptotal.com/como-otimizar-as-imagens-para-os-motores-de-busca/#comments Fri, 03 Feb 2012 12:23:56 +0000 Fernando Augusto http://www.wptotal.com/?p=6483 A utilização de imagens nos sites é uma coisa normal e até recomendada porque em muitos casos fazem com que os usuários leiam e explorem mais o site. As imagens podem também ser usadas para melhorar as posições de algumas páginas nos resultados das procuras dos motores de busca e também para receber tráfego de serviços como ...

]]> A utilização de imagens nos sites é uma coisa normal e até recomendada porque em muitos casos fazem com que os usuários leiam e explorem mais o site. As imagens podem também ser usadas para melhorar as posições de algumas páginas nos resultados das procuras dos motores de busca e também para receber tráfego de serviços como o Google Images.

Para que isto seja possível as imagens devem de estar bem otimizadas e por isso neste artigo falamos sobre a otimização de imagens, ensinamos a otimizar o SEO de uma imagem e também damos algumas dicas para poder receber mais tráfego de sites como o Google, Google Images, Bing e Yahoo.

Otimizar imagens para melhor SEO

Dos mais conhecidos, o Google é o site que melhor consegue indexar imagens e o que mais tráfego pode trazer, por isso estas dicas são direccionadas para o Google, apesar de também funcionarem nos outros motores de busca.

É importante referir que a utilização excessiva de imagens pode deixar o seu site lento e isso é mau para os usuários que visitam o seu site e também tem consequências negativas no posicionamento do seu site nos resultados das SERP’s.

1. Nome da imagem adequado e descritivo

Utilize sempre um nome para a imagem que seja descritivo e relevante. Evite utilizar nomes genéricos como Imagem 2.jpg ou IMG003.jpg, uma vez que estes nomes não lhe dão qualquer benefício para o SEO.

O ficheiro com o nome otimizar-imagens.jpg, ajuda-o a ganhar um ranking no Google Images, quando alguém procura pela frase “Otimizar Imagens”.

2. Escreva sempre um bom Alt Text

O atributo “alt” é sempre muito importante. O Matt Cutts fez um vídeo a algum tempo atrás explicando a sua importância e como deve de ser usado:

3. A importância das descrições e dos títulos

optimizar imagens seo

Exemplo para um artigo com dicas para SEO

Para os utilizadores de WordPres é bastante fácil, dado que o sistema dá a opção de incluir um título e uma descrição, quando é feito o upload de uma imagem. Neste momento, tem a opção de fornecer informações descritivas e de permitir que o Google tenha uma noção do que a imagem trata.

4. Imagem coerente no contexto

Assim como o nome da imagem e do alt text, a Google também utiliza o conteúdo da página para determinar sobre o que a imagem é. Por isso, tente fazer uma ligação entre as imagens e o conteúdo para melhores resultados nas SERPs.

5. Qualidade das imagens

A qualidade das imagens é muito importante, tente sempre utilizar imagens nítidas, coloridas e visualmente ricas para obter uma melhor classificação e para os SERP’s do Google.

6. Tamanho e formato das imagens

Se fizerem uma procura rápida no Google Images vão reparar que este motor de busca dá mais prioridade a imagens bem otimizadas no tamanho e ao formato .jpg/.jpeg. Penso que isto acontece porque este formato consegue ter uma boa qualidade e ao mesmo tempo um tamanho aceitável.

Recomendo que use o formato .jpg ou .png, com uma qualidade aceitável e com um tamanho (“peso”) otimizado. Para otimizar o tamanho das imagens pode usar ferramentas como o Smush.it ou a opção “save for web” do photoshop.

Se tiver alguma dúvida deixe um comentário :)

]]> http://www.wptotal.com/como-otimizar-as-imagens-para-os-motores-de-busca/feed/ 3 Como Criar um WordPress Theme – Parte 1 http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/ http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/#comments Wed, 18 Jan 2012 19:46:17 +0000 Sara Vieira http://www.wptotal.com/?p=6489 Como criar templates wordpress é uma das perguntas mais comuns que recebemos. Muitas pessoas percebem de html e css, mas quando chega a hora de fazer alterações ou de criar um tema não sabem como fazer, por isso decidimos criar uma série de artigos que vos vai ensinar a criar wordpress themes de raiz. Vamos ...

]]> Como criar templates wordpress é uma das perguntas mais comuns que recebemos. Muitas pessoas percebem de html e css, mas quando chega a hora de fazer alterações ou de criar um tema não sabem como fazer, por isso decidimos criar uma série de artigos que vos vai ensinar a criar wordpress themes de raiz. Vamos dar a informação mais importante e explicar como tudo deve de ser feito.

Se esta informação interessa-lhe, pode receber todos os artigos no seu email através da newsletter gratuita. Se ainda não subscreveu, faça-o agora!

escreva o seu email:

Série Sobre Criar um Template WordPress

Nesta série de artigos sobre a construção de um wordpress theme vamos tentar falar na informação mais importante, usando sempre uma linguagem simples para que todos possam entender.

Vamos seguir a seguinte ordem:

  • Introdução aos WordPress Themes
  • style.css e header.php
  • index.php, archive.php
  • single.php, page.php, 404.php
  • comments.php
  • sidebar.php e footer.php
  • Melhorar a aparencia do tema (css)
  • Funcionalidades Extras: Thumbails
  • Funcionalidades Extras: Menus Personalizados

Ferramentas e Conhecimentos Necessários

Para poder seguir este tutorial e conseguir criar o seu tema, deve de:

  • Ter um browser (de preferência o Firefox com o addon firebug instalado
  • Conta de hospedagem online ou servidor local (Wamp (Windows), MAMP (Mac) e LAMP (Linux).
  • Editor de texto à sua preferência. (Recomendamos o NotePad++ para Windows, TextWrangler para Mac e o Bluefish para Linux
  • Última versão do WordPress – faça o download em wordpress.org
  • Saber trabalhar com o WordPress
  • Conhecimento em HTML e CSS – Se perceber PHP, melhor ainda

A Estrutura do WordPress

O WordPress é um gestor de conteúdo que no inicio pode fazer alguma confusão as muitas pastas e ficheiros que tem, mas você só tem que se preocupar com 2 coisas: o ficheiro wp-config.php e a pasta wp-content.

O ficheiro wp-config.php contém toda a informação necessária para o WordPress se ligar a base de dados (banco de dados) e funcionar normalmente. Já a pasta wp-content é onde ficam os temas e os plugins.

Como neste tutorial vamos aprender a fazer temas, é importante que você saiba onde ele tem que ser colocado para poder ser usado no seu site. Como dissemos anteriormente, os temas e os plugins ficam dentro da pasta wp-content. Dentro desta pasta existem outras duas chamadas de “plugins” e themes. Nós vamos trabalhar dentro da pasta “themes” (wp-content/themes).

Depois do tema estar pronto, você tem transferir a pasta do tema para dentro desta pasta “themes”. Só assim você vai conseguir ativa-lo e usar-lo online.

A Estrutura de um Tema

Antes de começar a criar um template é preciso saber como ele funciona. Um tema para wordpress é basicamente uma página normal feita em HTML, mas dividida em partes. A parte que diz respeito ao cabeçalho fica num ficheiro, a parte do código que diz respeito ao conteúdo fica noutro e assim por diante.

As partes/ficheiros básicos e essenciais de um tema são os seguintes:

  • header.php: local onde fica o código do cabeçalho
  • sidebar.php: local onde fica o código da lateral
  • footer.php: local onde fica o código do rodapé
  • index.php: código que mostra os artigos na página inicial
  • single.php: código que mostra o artigo na sua própria página
  • page.php: código que mostra o conteúdo de uma página estática
  • archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc
  • functions.php: local onde ficam algumas funções que adicionam mais capacidades aos temas
  • 404.php: igual ao index.php, em vez de mostrar um artigo deverá de mostrar um texto a avisar que o conteúdo não foi encontrado
  • style.css: ficheiro onde fica o stylesheet do tema

O que devo colocar em cada um destes ficheiros:

Já explicamos em cima o que deve de colocar em cada parte, mas para que não restem dúvidas criamos uma página normal em HTML e vamos ensinar a separar cada parte.

É importante que antes de começar criar o seu wordpress theme, já tenha as páginas feitas em HTML. Depois só precisa de dividir essas páginas pelos vários ficheiros do tema e usar php para que funcione bem.

Este código é de uma simples página HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1>Titulo do Site</h1>
		<h2>Descrição do site</h2>

		<ul id="nav">
			<li><a href="#">Página 1</a></li>
			<li><a href="#">Página 2</a></li>
			<li><a href="#">Página 3</a></li>
			<li><a href="#">Página 4</a></li>
		</ul>
	</div>

	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>

			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>

		<div id="sidebar">
			<ul class="widget">
				<h3>Widget</h3>
				<li><a href="#">Página 1</a></li>
				<li><a href="#">Página 2</a></li>
				<li><a href="#">Página 3</a></li>
				<li><a href="#">Página 4</a></li>
			</ul>

			<ul class="widget">
				<h3>Widget</h3>
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>
	</div>

	<div id="footer">
		<p>&copy; 2012 - Todos os Direitos Reservados</p>
	</div>

</div>

</body>
</html>

Separando a página HTML em partes

Vamos começar de cima para baixo, ou seja, no header.php (cabeçalho). Comece por criar um novo ficheiro no seu bloco de notas, copiar o código deste o inicio até ao fim da div “header” e colar no bloco de notas. Depois grave com o nome header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<title>Página de HTML</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="corpo">
	<div id="header">
		<h1>Titulo do Site</h1>
		<h2>Descrição do site</h2>

		<ul id="nav">
			<li><a href="#">Página 1</a></li>
			<li><a href="#">Página 2</a></li>
			<li><a href="#">Página 3</a></li>
			<li><a href="#">Página 4</a></li>
		</ul>
	</div>

Depois do cabeçalho, passamos a div onde o conteúdo (artigos e sidebar) é mostrado. Então nos ficheiros index.php, single.php, page.php, archive.php e search.php, colamos toda a div “conteudo” com excepção da parte da sidebar. O código é este:

	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>

			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>

		<!--o código da sidebar ficava aqui-->
	</div>

Não colocamos o código da sidebar no passo anterior, porque esse código deve de ficar no sidebar.php, um ficheiro que contém todo o conteúdo da sidebar.

		<div id="sidebar">
			<ul class="paginas">
				<li><a href="#">Página 1</a></li>
				<li><a href="#">Página 2</a></li>
				<li><a href="#">Página 3</a></li>
				<li><a href="#">Página 4</a></li>
			</ul>

			<ul class="categorias">
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>

Neste momento toda a parte do conteúdo também está pronta. Vamos passar ao que falta, ou seja, ao rodapé do tema. Vamos usar para isso o footer.php, o ficheiro onde deve de ficar a nossa div “footer” e o código restante.

	<div id="footer">
		<p>&copy; 2012 - Todos os Direitos Reservados</p>
	</div>

</div>

</body>
</html>

Agora toda a página HTML que tínhamos no inicio está dividida em partes.

Como “chamar” outras partes dos temas

O próximo passo é adicionar algumas tags para que o wordpress, quando usar o tema, possa “juntar” todas as partes e mostrar todas as partes do tema.

Para fazer isto, vamos usar 3 tags que servem para ir chamar/incluir outras partes do tema. Numa página como o index.php, precisamos de “chamar” o cabeçalho (header.php), lateral (sidebar.php) e o rodapé (footer.php):

<!--?php get_header(); ?-->

<!--?php get_sidebar(); ?-->

<!--?php get_footer(); ?-->

Cada uma destas tags devem de ser colocadas no lugar onde o código das outras páginas deve de ser incluído. Por exemplo, no index.php precisamos de incluir o header.php logo no inicio, o sidebar.php no lugar onde antes estava o código da sidebar e no fim da página, temos que incluir o footer.php.

Então os ficheiros index.php, single.php, page.php, archive.php e search.php ficam assim:

<!--?php get_header(); ?-->
	<div id="conteudo">
		<div id="artigos">
			<div class="artigo">
				<h2>Titulo do artigo 1</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>

			<div class="artigo">
				<h2>Titulo do artigo 2</h2>
				<p>Postado por administrador em 16/01/2012</p>
				<p>Conteudo do artigo</p>
			</div>
		</div>

		<!--?php get_sidebar(); ?-->
	</div>

<!--?php get_footer(); ?-->

Como pode ver, as tags foram adicionas em 3 lugares diferentes, a primeira chama o header, a segunda chama a sidebar e a terceira chama o footer.

Estes são os primeiro passos para a criação de um tema. Depois temos que adicionar várias tags, criar o loop que vai fazer com que os artigos e páginas sejam mostradas e também criar um stylesheet para que o tema fique apresentável nos navegadores de internet. Tudo isto será falado nos próximos artigos.

Download dos ficheiros do tutorial

Conclusão

Neste primeiro artigo demos os primeiros passos na criação de um template para wordpress. Começamos por saber onde é que os temas estão, como são organizados, quantos ficheiros tem um tema, aprendemos a separar uma página HTML pelos vários ficheiros do tema e também introduzimos pela primeira vez PHP nas páginas para “chamar” outras partes do tema. O mais básico está feito.

No próximo artigo vamos falar no stylesheet e também no header.php por isso fique atento! Se ainda não acompanha o wptotal, recomendamos que passe pela página de subscrição para saber como nos pode seguir :)

Se tiver alguma dúvida, deixe um comentário. ;)

]]> http://www.wptotal.com/como-criar-um-template-wordpress-parte-1/feed/ 31 15 Dicas Para Deixar o Seu Blog Mais Seguro http://www.wptotal.com/dicas-para-deixar-o-seu-blog-mais-seguro/ http://www.wptotal.com/dicas-para-deixar-o-seu-blog-mais-seguro/#comments Sun, 15 Jan 2012 19:00:05 +0000 Celso Azevedo http://www.wptotal.com/?p=6432 Com o aumento da utilização do WordPress começaram a aparecer mais relatos de sites que são atacados. Na maior parte dos casos as falhas de segurança não estão no WordPress, estão sim em plugins, temas ou outros scripts desatualizados e que servem de porta de entrada para pessoas mal intencionadas danificarem o seu site. Para ...

]]> Com o aumento da utilização do WordPress começaram a aparecer mais relatos de sites que são atacados. Na maior parte dos casos as falhas de segurança não estão no WordPress, estão sim em plugins, temas ou outros scripts desatualizados e que servem de porta de entrada para pessoas mal intencionadas danificarem o seu site.

Para ajuda-lo a prevenir estes problemas, juntamos num só artigo 18 dicas que vão tornar o seu site e hospedagem mais seguros, evitando assim perca de conteúdo, prejuízos e downtimes desnecessários. Estas dicas são para quem usa o wordpress.org, quem usa o wordpress.com não tem que se preocupar com a segurança.

Backups

Fazer backups (cópias) de segurança do seu site não o protege de ataques, mas deixa-o prevenido para o caso de ser atacado. Ao fazer backups regulares para um lugar seguro (o seu computador, por exemplo) evita perder conteúdo ou partes do tema ou plugins que são infetados pelos intrusos.

Se tiver uma cópia, tem os ficheiros a salvo e sem códigos maliciosos. Neste caso só tem que ver onde está o problema, resolve-lo, colocar tudo online e o problema está resolvido.

Recomendamos que faça pelo menos um backup semanal de todo o seu site (não se esqueça da base de dados). Em sites com muitas atualizações diárias é recomendado que faça backups mais regulares para o risco de perder dados ser menor.

WordPress e Plugins Atualizados

Uma das principais portas de entrada para os hackers são os scripts desatualizados, neste caso o próprio wordpress, os plugins e em alguns casos os temas.

Para minimizar os riscos de ser atacado você deve de manter tudo atualizado na última versão. Assim os bugs são menos e torna o trabalho mais difícil para quem está a tentar prejudica-lo.

É importante alertar para o facto de alguns plugins não serem compatíveis com a versão mais recente do WordPress, por isso recomendamos que veja primeiro até qual é a versão que o plugin é compatível e que faça sempre um backup antes da atualização. Caso alguma coisa corra mal tem sempre essa segurança.

Instalar o WordPress de Forma Segura

Instalar o WordPress é uma coisa simples e rápida, no entanto existem alguns pontos em que você pode aumentar a segurança da instalação. Deixamos as seguintes dicas:

- Faça sempre o download através do site oficial

Deve de fazer o download sempre através do site oficial (wordpress.org). Ao fazer o download através de outro site, você pode estar a transferir uma versão alterada do WordPress que pode funcionar mal ou ter já código malicioso instalado.

- Não use scripts de instalação automática

Muitos alojamentos web oferecem sistemas de instalação rápida de scripts como o WordPress. É verdade que você perde menos tempo, mas a configuração automática nunca é tão boa e além disso algumas pessoas sentem depois dificuldades a realizar tarefas básicas como a atualização para versões mais recentes.

Recomendamos que instale o wordpress manualmente e evite estes scripts automáticos para sites que estão disponíveis para o público.

- Dados seguros para aceder a base de dados

A base de dados (no Brasil, banco de dados) é o local onde toda informação do seu site fica guardada (posts, links, configurações, etc) por isso a ligação entre a base de dados e o WordPress deve de ser segura.

Ao criar um user para adicionar a base de dados que vai usar para o wordpress, escolha uma password muito complexa e difícil de descobrir, assim fica muito mais difícil para um hacker conseguir aceder a sua base de dados.

- Nome das tabelas que o wordpress vai usar

Uma base de dados é organizada por tabelas e dentro de cada tabela fica um certo tipo de informação. Por defeito o wordpress usa como prefixo de cada tabela o texto wp_ mas não é o mais seguro porque é o mais vulgar. Ao fazer a instalação do wordpress, use um outro nome qualquer que não faça sentido. Por exemplo: m2a_, 1dp_, etc…

- Username de login no wordpress

Normalmente o username para fazer o login no painel de gestão do WordPress é “admin” e isto pode causar alguns problemas em termos de segurança. Uma pessoa mal intencionada que pretenda entrar no painel de gestão vai começar por usar o username “admin” por ser o mais comum e por isso é importante que o username seja outro.

Nas últimas versões do WordPress foi adicionado um espaço onde você pode escolher o nome para fazer o login. Em vez de “admin” use outra coisa qualquer, o seu nome por exemplo ou outra coisa que não passe pela cabeça de outras pessoas.

- Configurar bem o wp-config

No caso de instalar o WordPress manualmente e por alguma razão não quiser usar o seu navegador para fazer a primeira parte da instalação, terá de configurar o wp-config.php, um ficheiro onde fica toda a informação que vai permitir o WordPress comunicar com a base de dados e que por vezes é usado para adicionar alguns códigos que podem alterar o comportamento do WordPress.

Recomendamos a leitura do artigo como configurar o wp-config.php.

Elimine Ficheiros Desnecessários

Outra das causas para os sites serem atacados é o facto de existir “lixo” na conta de alojamento do site. Apague os plugins e themes que não esteja a usar, deixe online apenas o conteúdo que seja necessário para o site funcionar.

Apague ainda alguns ficheiros que  resultam da instalação ou atualização do wordpress. Esses ficheiros (wp-config-sample.php, readme.html, license.txt) contém informação preciosa para os hackers por isso apague-os para evitar problemas.

Limite o Numero de Logins Falhados

Muitos usam ataques brute force para descobrir a password para entrar no painel de gestão do wordpress, por isso é importante adicionar uma proteção que bloqueie o acesso do IP que fez o ataque se inserir a password várias vezes errada. Recomendamos a utilização do plugin Login LockDown que bloqueia um IP ou até mesmo uma inteira gama de IPs caso seja detectado um grande ataque.

Limite o Acesso a Pastas e Ficheiros

Usando vários métodos é possível visualizar ou até mesmo editar os ficheiros que estão no alojamento, por isso é importante protege-los e torna-los inacessíveis para o publico, algumas coisas que pode fazer:

- Proteger o acesso ao wp-config e .htaccess

O wp-config.php e o .htaccess são dois ficheiros que contêm informação importante sobre a sua instalação de wordpress e hospedagem respetivamente, por isso deve de ter um cuidado especial com estes ficheiros. Para proteger o wp-config.php, adicione este código no fim do seu .htaccess:

order allow,deny
deny from all

Pode fazer o mesmo para proteger o próprio .htaccess:

order deny,allow
deny from all

- Esconda o conteúdo das pastas

Quando criamos uma pasta no nosso alojamento ela fica, na maioria dos casos, acessível através do seu navegador. É possível desta forma ver todo o conteúdo dessa pasta e também ver ou fazer o download dos ficheiros que estão lá.

Para deixar o conteúdo invisível pode criar um ficheiro vazio e chamado de index.html, depois só tem de o colocar dentro de cada pasta. Quem tentar aceder a pasta com esse ficheiro vai ver uma página branca em vez do conteúdo. O problema desta solução é que você precisa de colocar este ficheiro em todas as pastas… isso dá trabalho e você corre o risco de se esquecer de alguma pasta.

A maneira mais simples de fazer isto é adicionar o seguinte código ao .htaccess:

Options All -Indexes

- Esconda a informação do software que está instalado no seu servidor

Normalmente os servidores que usam o Apache mostram, nas páginas de erro e listagem do conteúdo de pastas, o que você tem instalado no servidor e as respetivas versões. Isto pode aumentar a probabilidade do atacante explorar alguma falha conhecida para essas versões. Para resolver este problema, adicione o seguinte código ao .htaccess:

ServerSignature Off

O resultado é este (antes / depois):

- Altere as permissões dos ficheiros e pastas

Cada pasta e ficheiro que estão no seu alojamento têm um conjunto de permissões e quando estas permissões estão mal definidas o seu site corre o risco de ser atacado. As permissões ideais normalmente são o valor 755 para pastas e 644 para ficheiros.

Para perceber melhor como é que as permissões dos ficheiros funcionam e saber como pode alterar estas permissões, recomendamos a leitura do artigo Como Mudar as Permissões de Pastas e Ficheiros através de FTP.

Use uma Hospedagem Segura

Ter um servidor ou uma conta de alojamento num servidor seguro é fundamental para não sofrer ataques. Alguns dos ataques feitos a sites são feitos através de falhas que existem no software que está instalado no servidor. É importante ter tudo atualizado, usar versões estáveis e nunca usar versões editadas ou personalizadas por amadores.

Use o Cloudflare

Já aqui falamos várias vezes no Cloudflare, um serviço que protege o seu site de ataques, aumenta a velocidade de carregamento e ainda diminui o consumo de recursos do seu alojamento (tráfego, load, etc). Além da proteção contra IP’s que já tenham estado envolvidos em ataques anteriores, o Cloudflare ajuda a bloquear ataques DDoS, sql injection, ataques de spam, entre outros.

Recomendamos a leitura do artigo onde apresentamos o Cloudflare e todos os prós e contras e também do artigo como usar o cloudflare.

Conclusão

Como pode ver com apenas algumas coisas simples de aplicar você pode aumentar muito a segurança do seu site. Nada é 100% seguro e infalível mas mesmo assim vale a pena estar protegido.

Espero que este artigo seja útil, se tiver alguma dúvida deixe um comentário em baixo :)

]]> http://www.wptotal.com/dicas-para-deixar-o-seu-blog-mais-seguro/feed/ 7 Como tirar mais partido da tag wp_list_categories http://www.wptotal.com/como-tirar-mais-partido-da-tag-wp_list_categories/ http://www.wptotal.com/como-tirar-mais-partido-da-tag-wp_list_categories/#comments Thu, 12 Jan 2012 13:54:15 +0000 Sara Vieira http://www.wptotal.com/?p=6378 A tag wp_list_categories é uma tag muito usada nos temas para wordpress, mesmo depois de ter sido introduzida a opção dos menus personalizados. Neste artigo vamos explorar a tag wp_list_categories e mostrar o que você pode fazer com ela. Normalmente esta tag é usada na sua forma mais simples, ou seja: Para aproveitar todas as ...

]]> A tag wp_list_categories é uma tag muito usada nos temas para wordpress, mesmo depois de ter sido introduzida a opção dos menus personalizados. Neste artigo vamos explorar a tag wp_list_categories e mostrar o que você pode fazer com ela.

Normalmente esta tag é usada na sua forma mais simples, ou seja:

wp_list_categories();

Para aproveitar todas as capacidades desta tag temos de usar argumentos. Para isso começamos por definir uma variável para depois aplicarmos na list_categories, vamos chamar a esta variável “argumentos” e esta variável vai ter uma array associativa dentro dela pois queremos aplicar mais do que um valor à variável e não vamos chamar os conteúdos da array com o ID de cada elemento mas sim pelo nome, começando:

$argumentos=array(
//aqui adicionaremos os argumentos
);
wp_list_categories($argumentos);

Não mostrar o titulo na lista

Esta é um dos usos mais comuns para nós utilizarmos os argumentos dentro desta tag e tudo o que temos que fazer é:

$argumentos=array(
'title_li'=> __( '//aqui podem adicionarem o que desejarem que esteja no titulo da lista' ),
);

O que nós estamos a fazer neste pedaço de código em termos de PHP é apenas chamar a chave ‘title_li’ e estamos a dar-lhe o valor que desejamos, neste caso retirar o que vem por defeito no wordpress.

Listar as categorias por ordem descendente

Por defeito o wordpress coloca as categorias ordenadas por nome e de uma forma ascendente, mas se quisermos contrariar isto e revelar as categorias de uma forma descendente, aplicamos este valor á nossa variável:

$argumentos=array(
'order'=>'DESC',
);

Esta chave(‘order’) só aceita dois valores: DESC para revelar as categorias de uma forma descendente e ASC que vem por defeito e as revela numa forma ascendente.

Ordenar as categorias por ID

Todas as categorias que criamos no website têm um nome e a essa categorias também está associado um ID, se não sabem ver qual é este ID vejam o tutorial do Celso que explica como descobrir o ID de uma categoria.

Depois de sabermos isto, e de experimentamos notamos que o list_categories não ordena as categorias por ID mas sim por nome como previamente dito, mas se quisermos ordenar estas por ID também o podemos fazer:

$argumentos=array(
'orderby'=> 'ID',
);

Assim as nossas categorias estarão na nossa página ordenadas pelo ID e não pelo nome.

Não esconder categorias vazias

Muitos de vocês já devem ter reparado que se criarmos uma categoria e não introduzimos nada nesta ela não aparecerá na página se não mudarmos a definição que vêm por defeito com o wordpress que é não mostrar as categorias que estejam vazias na página, se quisermos mudar esta definição e mostrar na nossa página as categorias que estejam vazias usamos:

$argumentos=array(
'hide_empty'=> 0,
);

Esta chave só aceita valores booleanos como verdadeiro e falso, e é para isso que serve o 0, no PHP o 0 é falso e o 1 verdadeiro, este ultimo é o que vem por defeito com o wordpress tornando hide empty verdadeiro e escondendo todas as categorias que estejam vazias e colocando o 0 revertemos isso.

Mostrar apenas categorias que são filhas de uma categoria

Por defeito o wordpress mostra todas as categorias que criou exceto as que estão vazias, mas se tivermos uma página que contenha o artigos e outra que contenha vídeos e nestas duas páginas queremos ter sidebars diferentes, e que estas só mostrem as categorias que são filhas da categoria-mãe artigos, assumindo que o ID dessa categoria é 6 usamos:

$argumentos=array(
'child_of'=> 6,
);

Com este pedaço de código dizemos ao wordpress que na chave child_of só quero que ele mostre as categorias que são filhas da categoria que têm o ID de 6.

Excluir categorias

Caso tenham por exemplo categorias que contenham artigos premium no vosso website e queiram esconder estas categorias só permitindo quem tem conta premium ver também o podem fazer utilizando o chave exclude:

$argumentos=array(
'exclude'=> 5,
);

Com este código o wordpress sabe que quando listar as categorias na página vai ter que excluir a que tem o ID de 5 dessa lista pois esta foi a categoria especificada na chave exclude.
Se quiserem excluir mais que uma categoria só têm que separar os ID’s com virgulas:

$argumentos=array(
'exclude'=> 5,4,7,
);

Como podem ver no final têm que colocar a virgula na mesma para o PHP não dar um erro.

Usando tudo Junto e aplicando ao list_categories

<!--?php $argumentos=array( 'exclude'=--> 5,4,7,
'title_li'=> __( '//aqui podem adicionarem o que desejarem que esteja no titulo da lista' ),
'order'=>'DESC',
'orderby'=> 'ID',
'hide_empty'=> 0,
'child_of'=> 7,
);
wp_list_categories($argumentos); ?>

Como podem ver esta tag do wordpress normalmente não é muito utilizada com estes argumentos e pode ser muito mais enriquecida e moldada com eles. Recomendamos também uma visita ao codex do wordpress para ler a documentação oficial desta tag.

Espero que este artigo seja útil e se tiverem alguma dúvida deixem um comentário :)

]]> http://www.wptotal.com/como-tirar-mais-partido-da-tag-wp_list_categories/feed/ 6 Como Usar o Cloudflare http://www.wptotal.com/como-usar-o-cloudflare/ http://www.wptotal.com/como-usar-o-cloudflare/#comments Tue, 08 Nov 2011 09:00:34 +0000 Celso Azevedo http://www.wptotal.com/?p=5991 O Cloudflare é um serviço que permite tornar o seu site mais seguro e ao mesmo tempo pode torna-lo mais rápido (se ainda não o conhece, leia o artigo o que é o Cloudflare e quais são os seus benefícios) e apesar de ser fácil de usar temos recebido alguns emails com dúvidas, por isso neste ...

]]> O Cloudflare é um serviço que permite tornar o seu site mais seguro e ao mesmo tempo pode torna-lo mais rápido (se ainda não o conhece, leia o artigo o que é o Cloudflare e quais são os seus benefícios) e apesar de ser fácil de usar temos recebido alguns emails com dúvidas, por isso neste artigo vamos explicar como deve de instalar e usar o Cloudflare.

Como Começar a Usar o Cloudflare?

Usar o Cloudflare é simples e não requer grandes conhecimentos. Primeiro deve de verificar se no painel de administração do alojamento web do seu site se existe um icon do Cloudflare (uma nuvem laranja). Caso tenha, clique nela e na página seguinte será pedido que crie uma conta no Cloudflare, depois só tem que clicar em cima da nuvem cinzenta para que todo o seu tráfego passe a ser gerido pela rede do Cloudflare.

No caso desse ícone não existir, você tem que alterar os DNS do seu domínio (endereço do site). A primeira coisa que tem que fazer é ir ao site do Cloudflare, criar uma conta, adicionar o domínio e substituir os velhos DNS pelos novos.

Como Fazer?

1. Vá a cloudflare.com/sign-up e crie uma conta ou faça o login caso já tenha uma conta criada
2. Escreva o endereço do site (em o http:// e sem o www.) e clique em “Add this website”
3. Aguarde que o Cloudflare configure o seu domínio
4. Veja se todas as zonas de DNS estão bem, não altere nada caso não saiba o que está a fazer
5. Na página seguinte são fornecidos os novos DNS. Você tem que ir ao local onde pode gerir o seu domínio, apagar os antigos e substituir pelos que foram fornecidos pelo Cloudflare. Se não souber como fazer, contacte a empresa onde você comprou o domínio e peça informações sobre a mudança de DNS.
6. A alteração dos DNS pode demorar várias horas, em alguns casos é quase instantâneo, mas a propagação mundial demora normalmente 24 horas.

Opções para Gerir o Domínio e Estatísticas

Em cloudflare.com/my-websites, você pode ver todos os seus domínios. Ao lado de cada domínio existe um link “Reports & Stats” onde poderá ver as estatísticas de acesso ao site (visitas, tráfego gasto/poupado, ameaças, ataques, etc).

Ainda no mesmo espaço, um pouco mais para a direita, em “Settings”, existem várias opções entre elas a opção “CloudFlare settings”. Ao clicar vai ter a uma página onde você fazer o upgrade para uma conta premium, alterar o nível de segurança e ativar/desativar a firewall, limpar a cache e fazer alterações a forma como o Cloudflare vai funcionar. Recomendamos que perca aqui algum tempo para perceber para que serve cada opção para que a performance do seu site seja a melhor.

Nesse mesmo menu existe ainda a opção “DNS Settings” que deve de ser usada caso queira alterar alguma coisa nas zonas de DNS (exemplo: alterar os IP’s do seu servidor, etc).

As Estatísticas

Aqui é possível analisar todo o tráfego que você recebe e o tráfego gasto. Na parte superior a verde fica todas as visitas e a vermelho as visitas que foram “bloqueadas” pelo Cloudflare. O bloqueio de visitas é feito com base no IP de cada visita. Por exemplo, se um IP é conhecido por fazer parte de uma botnet, esse IP sempre que visitar o site terá que inserir um código (captcha) para poder entrar no site. O tempo em que esse IP pode navegar pelo site pode ser definido por si.

Nesta página é possível também ver quais são os motores de pesquisa que estão a indexar o nosso site e o número de páginas vistas por eles.

O tráfego gasto e poupado pelo Cloudflare está quase no fim da página. Dependendo do tipo de conteúdo que você tem no seu site, a taxa de tráfego servido pelo Cloudflare é alta. A poupança de tráfego apenas se aplica para ficheiros estáticos (imagens, páginas html, páginas com css, scripts, etc).

O “Mau” Tráfego

No canto superior direito da página das estatísticas, existe um link “Threat Control” que vai ter a página onde você pode ver todos os IP’s e a razão pela qual foram bloqueados/foram obrigados a inserir um captcha code, bloquear/debloquear IP’s e ainda bloquear ou desbloquear países. Isto significa que se você tem um site que não deve de receber visitas de um determinado país, basta adicionar o nome ou nomes dos países e todas as visitas vindas desses locais não conseguem ver o site. É possível também adicionar os países a uma “lista branca” para que as visitas desses países nunca sejam bloqueadas mesmo que sejam consideradas “perigosas”.

Gestão dos DNS

Por defeito o Cloudflare detecta todas as zonas DNS que o seu domínio tem no momento em que o adiciona a plataforma, mas é possível fazer alterações depois. Na página onde aparece os seus domínios, no lado direito do domínio existe a opção “DNS Settings” e aí pode fazer todas as alterações que quiser.

Nesta página você pode ativar ou desativar o Cloudflare para algum acesso do seu site. Basta clicar em cima da nuvem e depois escolher a opção “Enable” ou “Disable” (ativar cloudflare e desativar cloudflare). Isto é útil quando você usa uma CDN e tem um sub-domínio para isso, se quiser que todo o conteúdo continue a ser servido pela CDN deve desativar o cloudflare nessa entrada de DNS.

Configurações da Proteção e Aceleração do Site

A página de configuração e gestão de todos os aspetos do Cloudflare pode ser encontrada também nas opções que estão ao lado do domínio, é a opção “CloudFlare Settings”. Nessa página é possível configurar a forma como a cache será feita, a otimização do site e também o nível de proteção desejado. Apesar de cada domínio ter uma configuração default, você deve de adapta-las para obter mais benefícios deste serviço.

Descrição de cada opção:

  • CloudFlare Account Type: Escolha o plano que deseja ter. Por defeito a opção é a “Free” (gratuito), escolha a opção “Cloudflare Pro” para poder fazer o upgrade.
  • Basic Security Level: O nível de segurança básico pode ser ajustado aqui. É recomendado a utilização da opção média (medium) ou baixa (low). Um nível de segurança alto bloqueia até os visitantes que possam ser considerados de risco mínimo, já a opção “low” bloqueia apenas os que são considerados os mais perigosos.
  • Caching Level: Recomendamos a utilização da opção “Aggressive” para obrigar os browsers a ficarem com o conteúdo mais depressa em cache e diminuir os pedidos ao servidor.
  • Automatic IPv6: O IPv4 está a acabar e para o substituir temos o IPv6, se quiser que o seu site já suporte o IPv6 ative a opção “Full”.
  • Minimum Expire TTL: Especifique o tempo máximo para o conteúdo ficar no computador do visitante. Se tiver visitantes que vejam várias páginas do seu site durante o dia, um tempo maior é recomendado porque parte do conteúdo já está em cache e não precisa de ser carregado novamente. Um valor a volta das 4 horas é, segundo o Cloudflare, aceitável.
  • Auto Minify: Esta opção permite minimizar e otimizar os ficheiros de CSS, HTML e JS. Em alguns casos essa otimização pode causar problemas do site, mas vale a pena testar e se tudo trabalhar bem é uma opção a considerar porque diminuí o tempo de carregamento do site.
  • Rocket Loader: O rocket loader faz com que vários scripts, externos ou internos, sejam carregados de forma alternada aumentando a velocidade de carregamento do site.
  • Challenge Passage TTL: Quando um IP é bloqueado tem a possibilidade de inserir um código “Captcha” e navegar no site durante um tempo que você definir aqui. Quando esse tempo acabar é necessário inserir um novo código para poder continuar a navegar pelo site.
  • Customize Challenge Page: Permite configurar a página vista pelos users bloqueados.
  • Advanced Security: Esta é uma opção só para users “Pro” e é uma firewall online que protege o seu site de vários tipodes de ataques (sql injection, xss javascript injection, etc) e protege mais do que o recomendado pela OWASP. Talvez uma das melhores opções existentes.
  • Website Preloader: É também uma opção disponível só para users pagantes que carrega em background e depois de ter aberto uma página até 200 ficheiros (os mais populares) para que parte dos ficheiros estejam já em cache e a navegação seja muito mais rápida.
  • Outbound Links: Permite que você faça o tracking dos cliques de saída. Usa javascript e não altera os urls que estão no código do site.
  • E-mail Address Obfuscation: Ao ativar esta opção, todos os emails que existam nas páginas do seu site serão codificados para evitar que os emails vão parar a listas de spam. Não há problemas de compatibilidade para o visitante desde que o javascript esteja activo.
  • Server Side Exclude (SSE): Com esta opção ativa e depois de adicionar um código ao código do seu site, as visitas suspeitas deixam de ver partes do site definidas por si.
  • Always Online: Significa “sempre online” e serve para mostrar as páginas que estão em cache mesmo quando o seu servidor está offline. Basicamente assegura que o site esteja acessível quando o servidor está offline.
  • IP Geolocation: Detecta a localização do IP e permite que o visitante veja vários conteúdos, dependendo da localização.
  • Google Analytics: Quer usar o Google Analytics sem adicionar nenhum código no código do seu site? Pode colar o código de tracking aqui.
  • Browser Integrity Check: Através desta opção o Cloudflare faz uma verificação a integridade do browser e se detectar alguma coisa de errado o visitante será bloqueado.
  • Hotlink Protection: Se quer que as imagens/ficheiros só estejam disponíveis quando alguém visita o seu site pode ativar esta opção e sempre que alguém tente abrir ou ver um desses ficheiros será redireccionado para uma imagem definida por si. Esta opção permite poupar tráfego, mas não é recomendada.
  • Cache Purge: Esta opção permite limpar toda a cache do Cloudflare. Útil para quando faz alterações no site ou no próprio cloudflare e quer que essas actualizações estejam logo disponíveis para os seus visitantes.
  • Development Mode: Se está a fazer alterações no seu site em ficheiros que podem ficar na cache (imagens, css, html, etc) pode ativar esta opção e todo o tráfego será “ignorado” pela cache. Todos os visitantes carregam o conteúdo que está no seu alojamento.
  • Related DNS Actions: Gestão das zonas de DNS.

E estas são as opções existentes neste momento.

Como Corrigir o Erro de “Website Offline”

Um dos problemas que muitos encontram ao usar o cloudflare é ver, de vez em quanto, uma mensagem que diz que o website está offline mesmo quando está a funcionar bem. A solução é adicionar os IP’s do cloudflare a white list do vosso servidor de alojamento pois como são apenas aqueles IP’s que acedem ao alojamento do site por vezes ficam bloqueados e deixam de funcionar.

No seguinte link podem encontrar as gamas de IP’s do cloudflare. Podem pedir ao suporte da empresa de alojamento para adiciona-los a whitelist e em principio o problema desaparece.

Link: cloudflare.com/wiki/I_keep_seeing_%22My_Site_is_Offline%22

Conclusão

O cloudflare é um serviço que é fácil de usar, no inicio pode parecer confuso mas depois a única coisa que pode ter que fazer ocasionalmente é limpar a cache. Uma conta gratuita é suficiente na maior parte dos casos, mas caso tenha um website que precise de mais proteção uma conta Cloudflare Pro é a melhor solução e custa apenas 20 dollars por mês!

Além dos benefícios no que diz respeito a velocidade, segurança e poupança de recursos, a probabilidade do site ficar completamente offline é muito baixa pois existem servidores em vários continentes (EUA, Europa, Ásia) e quando um está com problemas o tráfego é redirecionado para outro datacenter que esteja próximo.

Tanto o WPTotal como o departamento de defesa dos Estados Unidos, que já elogiaram o serviço, recomendam o cloudflare :)

Links Úteis

Se tiver alguma dúvida, deixe um comentário para que possamos ajuda-lo :)

]]> http://www.wptotal.com/como-usar-o-cloudflare/feed/ 17 Cloudflare – Aumente a Velocidade e a Segurança do Seu Site http://www.wptotal.com/cloudflare-aumente-a-velocidade-e-a-seguranca-do-seu-site/ http://www.wptotal.com/cloudflare-aumente-a-velocidade-e-a-seguranca-do-seu-site/#comments Wed, 05 Oct 2011 08:00:05 +0000 Celso Azevedo http://www.wptotal.com/?p=5715 A velocidade e a segurança são duas coisas importantes e indispensáveis para os websites. Quantos de nós já fomos atacados com ataques de DDoS e fomos obrigados a ter o site offline durante algumas horas ou dias? Quantos já viram os seus sites injectados com códigos maliciosos? Uma das soluções para estes problemas pode passar pela a utilização ...

]]> A velocidade e a segurança são duas coisas importantes e indispensáveis para os websites. Quantos de nós já fomos atacados com ataques de DDoS e fomos obrigados a ter o site offline durante algumas horas ou dias? Quantos já viram os seus sites injectados com códigos maliciosos? Uma das soluções para estes problemas pode passar pela a utilização do Cloudflare.

O Cloudflare é um serviço criado em 2009 por 3 norte-americanos e rapidamente ficou conhecido porque não existia outro igual preparado para ser vendido ao público em geral. Desde então a empresa tem crescido, tem vários investidores de peso e até o departamento de defesa dos EUA já reconheceram o seu valor. Este ano o Cloudflare foi falado várias vezes por ter protegido o site dos Lulz Sec numa altura em que os ataques eram constantes.

Conheci este serviço a uns 7 meses atrás e desde então tenho usado-o em vários sites, entre eles o wptotal. Quando fiz a primeira experiência ainda não conhecia todo o potencial do cloudflare, mas com o tempo percebi que podia ser útil para proteger os meus sites e não só. Como grande parte dos meus sites recebe visitas de Portugal e do Brasil e eu tenho o alojamento em Portugal, o cloudflare iria ajudar a aumentar a velocidade para os visitantes brasileiros e ainda poupava tráfego.

O que é o Cloudflare?

O Cloudflare é basicamente uma CDN (content delivery network), uma rede de entrega de conteúdo, que tem vários servidores espalhados pelo mundo e cada visitante é servido a partir do data center mais próximo. Isto quer dizer que se um site estiver num servidor em Portugal e se eu estiver nos Estados Unidos, sempre que eu entrar no site estou a carrega-lo a partir dos servidores que a Cloudflare tem nos Estados Unidos em vez da ligação ser feita ao servidor que está em Portugal. O resultado é uma maior velocidade e também uma poupança de recursos no meu servidor.

Como é que o Cloudflare me Ajudou?

Com a utilização do cloudflare notei uma drástica e imediata descida no consumo de tráfego e uma redução da carga do servidor. Posso dar como exemplo um caso onde o site gastava a volta dos 100/120 GB de tráfego por mês e com a utilização do cloudflare gastou apenas 23 GB no primeiro mês, um valor muito inferior ao consumo anterior.

Na altura que comecei a usar estava quase a mudar para um servidor dedicado porque a vps já não aguentava com tanta visita, mas com o cloudflare consegui aguentar até ao mês passado com uma vps e com isso poupei várias centenas de euros o que já deu para pagar parte das férias que fiz em Agosto :)

Foi interessante também reparar que o numero de comentários com spam diminuiu assim como os emails enviados por bots através dos formulários de contactos.

Qual é a diferença entre o Cloudflare e as outras CDN?

A principal diferença é que enquanto os outros serviços apenas servem conteúdo, o Cloudflare protege o seu site bloqueando IP’s indesejados e optimizando os ficheiros que são servidos ao visitante. Como se fosse pouco, todos os serviços básicos são fornecidos gratuitamente, quer dizer que você pode usar o Cloudflare sem pagar.

Segurança

A tecnologia desenvolvida pela empresa permite proteger o seu site de ataques de spam, sql injection, ataques ddos, etc porque todo o tráfego passa pela rede do Cloudflare e qualquer situação anormal é rápidamente bloqueada.

Na seguinte imagem é possível ver como o Cloudflare age quando detecta um ataque. A verde está o aumento do trafego (ddos) e logo a seguir a vermelho mostra os IP’s bloqueados pela firewall, ficando o problema resolvido em poucos minutos:

Com o Cloudflare você pode bloquear/desbloquear IP’s manualmente, bloquear visitantes por país ou pode também escolher uma das opções das quatro opções de segurança pré-definidas.

Para uma utilização normal, a opção “Medium” é suficiente e bloqueia os IP’s considerados mais perigosos, apresentando sempre uma página onde o utilizador bloqueado possa introduzir um “captcha” para poder visitar o site.

Estatísticas de Perigos, Visitas e Mensagens de Users Banidos

Tanto com o plano gratuito como no plano pago temos acesso as estatísticas de utilização do serviço. Podemos saber quantas visitas passaram pela CDN, as visitas bloqueadas, o tráfego gasto e poupado e ainda as páginas de saída.

É ainda possível ver as mensagens que os users banidos podem deixar se não passarem a página onde é lhes apresentado um captcha. Normalmente as mensagens não fazem sentido porque são computadores “zombies” controlados por outras pessoas.

Recursos

Ao usar o cloudflare está a poupar recursos (ram, processamento, tráfego) do seu servidor porque grande parte dos pedidos são processados pelos vários servidores que têm. Segundo a informação disponível no site do cloudflare, cada site poupa em média 60% menos tráfego, 65% menos requests e a velocidade aumenta em cerca de 30% o que não é nada mau.

Preços

Existem 3 planos diferentes:

  • Free: É o plano que oferece as opções básicas. É o ideal para testar o serviço ou até mesmo para alguns sites.
  • Pro: É o plano que dá acesso a todas as ferramentas que têm. O preço é de 20 dollars por mês para o primeiro site e 5 dollars para cada site adicional.
  • Enterprise: É um plano que só está disponíveis para grandes clientes que precisam de grandes soluções. Para informações sobre este plano terá que entrar em contacto com eles.

Pode fazer uma comparação dos planos nesta página: https://www.cloudflare.com/plans.html

Prós e Contras do Cloudflare

Todos os sistemas e serviços têm pontos bons e pontos maus e o cloudflare não é excepção.

Pontos a favor:

  • Não há limite de tráfego
  • Configuração rápida (5 minutos no máximo)
  • As principais funcionalidades estão disponíveis no plano gratuito
  • Optimização automática dos ficheiros html, css e js
  • Firewall na “nuvem” (pro)
  • Sistema “Rocket Loader” (pro)
  • Website preloader (pro)
  • Certificado de SSL activo em um clique (pro)
  • Estatísticas de utilização
  • Suporte a IP V4 e IP V6
  • Permite que você poupe recursos no seu servidor
  • Sistema “always online” que mantem o site online mesmo quando o servidor está offline
  • Protecção Hotlink
  • Várias aplicações que adicionam mais funcionalidades ao serviço
  • Compatível com os browsers mais usados
  • Vários servidores nos EUA, Europa e Ásia
  • Pouca probabilidade de ser afectado por problemas pois quando um servidor tem problemas o tráfego é redireccionado para outro
  • Se usar o plugin “W3 Total Cache” pode limpar a cache do cloudflare em segundos
Pontos contra:
  • Como é apresentado uma cache do conteúdo, sempre que faz uma alteração no site tem que limpar a cache do cloudflare para todos poderem ver o conteúdo
  • O site passa a estar “alojado” nos estados unidos porque os DNS são apontados para lá (isto não influencia a performance porque há datacenters em vários lugares)
  • Num site com muitas visitas, pode ser necessário adicionar a lista de ip’s do cloudflare a white list do seu servidor para que as pessoas consigam ver bem o site
  • Alguns serviços só estão disponíveis para quem paga

Conclusão

Ao utilizar o cloudflare você torna os seus sites mais rápidos e seguros, poupa tempo a resolver problemas e poupa também dinheiro em alojamento e em soluções de segurança. É sem dúvida um serviço que ajuda em muitos casos os responsáveis pelos sites e por isso mesmo merece um bom feedback da minha parte :)

]]> http://www.wptotal.com/cloudflare-aumente-a-velocidade-e-a-seguranca-do-seu-site/feed/ 19