Como criar uma página 404 personalizada no WordPress

Não há dúvida de que a maioria dos usuários da Internet fica desanimada com a familiar mensagem de erro 404 Página não encontrada . Provavelmente, você foi bombardeado por essa mensagem irritante pelo menos uma vez este mês quando clicou em um link quebrado.

Um erro 404 é uma resposta HTTP padrão a uma solicitação de página da Web que o servidor não conseguiu atender por vários motivos. Por padrão, a mensagem de erro é exibida como texto simples em um fundo branco. Se você odeia essa mensagem brega, você não gostaria de sujeitar os visitantes do seu site a vê-la também. Então, por que não torná-lo menos irritante por meio de uma mensagem personalizada?

Neste tutorial, vou guiá-lo pelas etapas de criação de uma mensagem personalizada de página não encontrada para que os visitantes do seu site fiquem menos irritados quando encontrarem um espaço em branco. Primeiro, porém, vamos entender melhor por que você pode ficar em branco ao tentar acessar uma página da web.

Como e por que ocorrem erros de página 404 não encontrada

Quando você clica em um link e recebe um erro 404, significa que sua solicitação de página ao servidor foi bem-sucedida, mas a página específica que você estava tentando acessar não foi encontrada pelo servidor. Existem muitas causas para isso.

Por exemplo, se a página da Web à qual o link estava conectado foi removida, um erro 404 será exibido. Um cenário típico que leva a isso é quando uma página desatualizada que continha conteúdo popular é removida, mas tinha muitos links apontando para ela de outros sites. Grandes sites de notícias são provavelmente os culpados disso se os administradores do site não tomarem medidas de precaução para evitar links de páginas ausentes.

Um erro de página 404 também pode ocorrer se a página solicitada foi realocada para um novo nome de domínio. Se o problema for com o servidor (o servidor está inativo ou inacessível por algum motivo), você pode receber um erro de DNS. Firewalls, filtros de conteúdo e outras formas de bloqueio de conteúdo também podem causar links quebrados.

Bottom line é links quebrados são comuns na web. Cabe aos proprietários ou administradores de sites tornar a experiência mais suportável para os usuários. Lembre-se, os usuários da Internet geralmente ficam impacientes ao procurar informações em um site. Um usuário não perderá tempo procurando outro site para obter o que deseja se tudo o que encontrou no seu foi um erro 404 simples e irritante.

Uma mensagem de erro amigável

Como já mencionei, a maioria dos servidores da Web é configurada para retornar uma página básica de erro 404 que exibe um pedido de desculpas – uma breve descrição do motivo pelo qual você não conseguiu acessar a página solicitada. Em alguns casos, você também pode receber um link para o e-mail de um webmaster (se precisar de mais suporte técnico) ou um link para um mecanismo de pesquisa para continuar com sua pesquisa.

Embora essa mensagem de erro padrão seja educada, é bastante simples e geralmente desativa a maioria dos visitantes do site. É por isso que webmasters sérios personalizam esta mensagem para que os visitantes que acertarem em branco possam ver uma página de erro 404 mais amigável (e menos irritante).

Todos os temas padrão que acompanham o WordPress têm um modelo básico de página de erro 404 chamado 404.php . Claro, este modelo padrão funciona perfeitamente, mas é provável que não diga o que você quer dizer aos seus visitantes. Felizmente, personalizar a mensagem no modelo é muito fácil. Basta abrir o modelo de página em um editor de código e alterar o texto da mensagem para o seu próprio. Salve as alterações depois.

A estrutura do modelo de página de erro padrão fornecido com o tema Twenty Thirteen é composta de tags para exibir o cabeçalho, o rodapé e uma barra de pesquisa. Isto é o que parece em ação (basta digitar um endereço de página falso na barra de endereços do navegador):

Se você examinar o código do seu modelo de página 404, notará o título da página Not Found dentro da tag de título <h1>, junto com uma função _e que realmente exibe o resultado na página . Isso é o que você deseja editar primeiro ao personalizar sua página 404. Você pode então adicionar mais texto amigável nas tags <h2> e <p> abaixo dele. Observe que você pode ou não alterar o título Não encontrado , mas geralmente é bom colocar um título personalizado que não irrite seus visitantes, junto com o texto personalizado nos parágrafos.

Você também pode notar que o título aparece dentro do enorme número 404 na página. Quando você faz uma inspeção de página de sua página de erro usando o Firebug, você verá que o enorme 404 é inserido por um pseudo-elemento ( .error404 .page-title:before ). Portanto, abra o modelo 404.php e substitua o texto padrão nas tags <h1>, <h2> e <p> pelo que você deseja informar aos visitantes. Além disso, edite o pseudo-elemento mencionado acima ao seu gosto ou remova-o (comente-o na folha de estilo). Eu mudei o meu para isso:

Embora você possa dizer o que quiser diretamente para seus visitantes aqui, é sempre bom mantê-lo curto e doce. Além disso, tente dizer ou apontar o visitante para o que ele pode estar procurando em primeiro lugar. E isso é praticamente tudo o que você precisa fazer para tornar sua página 404 mais amigável. Inspecione a página e altere os estilos como achar melhor.

Além disso, dependendo do tema do WordPress que você está usando, o desenvolvedor pode ter incluído suporte de página 404 personalizada. Em nosso tema Total WordPress, criamos uma opção de tema de página 404 personalizada que facilita a adição de um redirecionamento 404 personalizado ou um título e conteúdo de página personalizados diretamente do painel do WordPress.

Captura de tela do editor de página 404 personalizado no Total

O arquivo .htaccess é onde a mágica acontece

Uma vez que seu 404.php é personalizado, tudo o que resta é o WordPress exibi-lo quando a situação for apropriada – quando não puder encontrar uma página específica. Este é o processo padrão. No entanto, há momentos em que o servidor da Web pode encontrar problemas antes que o WordPress esteja ciente deles, o que significa que os visitantes podem não conseguir acessar algumas páginas. Nesse caso, você precisa garantir que o servidor web possa redirecioná-los para sua página 404.php e é aí que entra o arquivo .htcaccess .

O arquivo .htcaccess está localizado na pasta raiz da sua instalação do WordPress. Para o caso do WordPress, ele é gerado automaticamente quando você altera sua estrutura de permalink do padrão. Tudo o que você precisa fazer para garantir que o servidor encontre sua página 404 personalizada é adicionar uma única linha ao arquivo como esta:

ErrorDocument 404 /index.php?error=404

Como você pode ver, esta url começa na raiz (/), o que significa que para usar este formato de url, sua instalação do WordPress deve estar na raiz do seu servidor. Caso contrário, se o WordPress estiver instalado em um subdiretório, o caminho de redirecionamento deve ser:

ErrorDocument 404 /suapasta/index.php?error=404

Dessa forma, mesmo que você altere seu tema, index.php sempre chamará o arquivo 404 correto para seu novo tema.

Empacotando

Ao ler este tutorial rápido, agora você pode criar uma página 404 personalizada completa com uma mensagem personalizada e amigável. Você também pode configurar o arquivo .htcaccess para garantir que os visitantes do seu site sejam sempre redirecionados para a página 404 correta pelo servidor em situações em que o WordPress não é capaz ou quando você altera os temas.

Se você deseja atrair visitantes fiéis que sempre voltarão ao seu site, é importante personalizar sua página 404 com uma mensagem menos irritante. E, claro, tentar limitar o número de vezes que um visitante chega a uma página 404 também é uma boa ideia.

Você tem alguma ótima ideia para uma mensagem 404 personalizada? O que você está usando atualmente em sua página 404? Eu adoraria ouvir suas ideias nos comentários abaixo!