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:
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.
Não tens Gravatar? Clica aqui para saberes como ter o teu avatar pessoal(gravatar)!