Como Criar Uma Simples Página de Erro 404

Por: em Tutoriais no dia 18 Janeiro, 2012

A página de 404 é a página que um visitante pode encontrar por diversas razões, e como donos de uma website temos que tentar dar sempre a melhor experiência ao nosso utilizador para este não se sentir perdido ou confuso quando estas situações acontecem. Neste tutorial vou explicar os básicos de como criar uma simples página de 404.

A melhor parte de todas é que uma página personalizada de 404 não é difícil de criar, basta criarmos uma página com o nome 404 no nosso tema de WordPress, a partir é colocarmos o que desejarmos na nossa página. Mas há sempre algumas coisas que deveremos adicionar para o utilizador não se sentir perdido:

  • Dizer ao utilizador qual foi o erro.
  • Explicar o Significado de esse erro e porque terá acontecido.
  • Dar um link para o inicio ou últimos artigos colocados.
  • É sempre uma boa prática ter uma caixa de pesquisa na página 404 para o utilizador se tiver encontrado essa página por um mau link conseguir procurar o que pretendia no site.
  • Colocar um link para o contacto ou manter o mesmo menu na página para os usuários o poderem contactar com o erro.

Tendo isto dito, vamos começar por criar a nossa página, criem um ficheiro na pasta do vosso tema chamado 404.php (se já tiverem abram-o e vejam se segue estas dicas) e abram no vosso editor de escolha.

A primeira coisa que acho fulcral colocar se desejamos que o layout da página se integre com o resto do site é chamar a header, footer e sidebar, ou seja:

1
2
3
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Depois de isto feito, colocamos a div ou section que usamos para conter os artigos e pomos o erro e a sua explicação lá:

1
2
3
4
5
6
7
8
9
<?php get_header(); ?>

<div id="artigos">
<h1 id="404">404</h1>
<h2>A Página não foi encontrada</h2>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

O próximo passo que temos na nossa lista é explicar ao utilizador porquê é que pode ter encontrado esse erro, então adicionamos depois do h2:

1
<p>Tem a certeza que escreveu bem o URL? Se sim talvez o post que estava à procura tenha sido apagado, tenta fazer uma procura para ver se encontras o que precisas.</p>

Depois da explicação adicionamos uma caixa de pesquisa para o utilizador tentar encontrar o que procuravae também um link para o inicio da nossa página:

1
2
3
<?php get_search_form(); ?>

Ou talvez queiras voltar para o <a href="<?php bloginfo('url'); ?>">Inicio</a>.

Esta página de 404 claro que não tem CSS aplicado mas com estes elementos básicos e um pouco de CSS conseguem criar uma página de 404 simples mas eficaz, podem ver aqui todo o código da nossa página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php get_header(); ?>

<div id="artigos">
<h1 id="404">404</h1>
<h2>A Página não foi encontrada</h2>

<p>Tem a certeza que escreveu bem o URL? Se sim talvez o post que estava à procura tenha sido apagado tenta fazer uma procura para ver se encontras o que procuras.</p>

<?php get_search_form(); ?>

Ou talvez queiras voltar para o <a href="<?php bloginfo('url'); ?>">Inicio</a>.

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Espero que tenham gostado desta dica e se tiverem duvidas coloquem nos comentários.


Eu sou uma Webdesigner e programadora baseada em espinho com uma paixão pelas novas vertentes do webdesign como o Wordpress, HTML5 e CSS3, neste momento podes-me encontrar no Plus Coding.


Com um total de 9 posts.

Comenta com força que é de graça!