Como editar uma página 404 no WordPress (guia de personalização) | Bônus de WP

Publicados: 2022-01-07

Todo criador de conteúdo e administrador de site sabe que pequenos detalhes importam muito e não há uma segunda impressão na Internet. Um belo esquema de cores, excelente efeito de animação ou uma atraente página 404 são detalhes que fazem ou quebram a experiência do usuário.

Uma página 404 é a expressão técnica que descreve situações em que uma página não é encontrada. Por exemplo, pode ser porque o usuário digita incorretamente uma URL na guia do navegador ou essa página da Web não está mais online.

Nos parágrafos a seguir, você aprenderá como editar uma página 404 no WordPress. Uma página 404 atraente é a melhor solução para superar um momento embaraçoso. Em vez de decepcionar os visitantes do site, uma excelente página 404 contribuirá para uma melhor imagem da sua marca.

O que é uma página 404

Você clica em um link ou digita um endereço de URL na guia do navegador. Em seguida, o navegador começa a solicitar dados do servidor que hospeda o site que você deseja visitar. Esta é uma explicação básica da navegação na Internet. A troca de informações entre navegador e servidor implica, entre muitos outros, alguns códigos de status. Além disso, há status para descrever o redirecionamento da página da Web, os erros do cliente ou do servidor ou para fins informativos.

Todos os códigos de status com o formulário 4XX referem-se a erros do cliente. Por exemplo, 403 Forbidden é quando o servidor entende a solicitação do navegador, mas se recusa a fornecer os dados. De longe, a página 404 é o código de status mais famoso. Você recebe uma página 404 quando clica em um link quebrado, digita um URL errado que leva a uma página da Web inexistente ou se o recurso solicitado nunca existiu.

Mesmo sites essenciais, como notícias de grandes revistas ou lojas muito visitadas, podem conter um erro de página 404. Claro, é inevitável, mas você deve saber como passar por cima da situação embaraçosa. Portanto, ajudaria se você fizesse todo o possível para criar uma página de erro 404 de boa aparência para o seu site.

A Anatomia de uma Boa Página 404

Imagem do 404 Page Design do tiktok.com como exemplo de como editar uma página 404 no WordPress.
Design de página 404 do tiktok.com

Alguns sites ganham um backlink e reconhecimento público ao serem mencionados em listas com páginas 404 legais. Os visitantes do site apreciam um bom design ou uma mensagem bem-humorada em uma página 404. Isso deve convencê-lo de que uma página de erro 404 de boa aparência é uma prioridade para seus negócios online. Aqui está o que uma boa página 404 deve incluir:

A mensagem de erro – Os usuários devem perceber um problema a partir do momento em que chegam a uma página 404. Deixe-o explícito para que todos entendam.

Links para seu conteúdo – Você não quer que os usuários abandonem seu site. Forneça links para conteúdo relevante. Seja o seu melhor conteúdo ou algo relacionado à página que falta, depende totalmente de você. O que importa é mantê-los em seu site.

Desculpas – Deixe as pessoas saberem que você sente muito pelo inconveniente. Use o humor se possível – é o melhor método para incentivá-los a dar uma segunda chance ao seu site.

Bom design – As pessoas ficam desapontadas quando chegam a uma página 404 e tendem a reagir exageradamente. Uma peça de design impressionante, além de conteúdo envolvente, pode mudar de ideia. Faça o seu melhor para criar uma excelente página 404.

Como editar uma página 404 no WordPress

Felizmente, temos várias opções para editar uma página 404 no WordPress. Os usuários mais experientes podem editar o arquivo 404.php. Este é o arquivo responsável por exibir a página de erro 404. Os administradores da Web que preferem usar um construtor de páginas como o Elementor podem criar uma página 404. Finalmente, alguns plugins para criar páginas 404 estão disponíveis para aqueles que não possuem habilidades de codificação. Vamos dissecar todas as maneiras de criar e editar uma página 404 no WordPress.

Editar uma página 404 por meio de um cliente FTP

Uma boa regra é fazer uma cópia de backup do seu site antes de editar o código. Nunca pule esta etapa – na maioria dos casos, você não precisará de um backup do site, mas coisas ruins acontecem quando você não está preparado. Então faça esse backup para ficar tranquilo!

Vamos supor que você tenha feito um backup completo do site e esteja pronto para se aprofundar no assunto. Use o cliente FTP de sua preferência e conecte-se ao site localhost. Procure um arquivo chamado arquivo 404.php – é o arquivo responsável por exibir a página de erro 404. Normalmente, os temas do WordPress têm um arquivo 404.php dedicado, mas alguns podem perder esse arquivo. Verifique novamente se o código do seu tema inclui um arquivo 404.php. Se o seu tema não tiver um arquivo 404.php, você terá que construir um. Crie um novo arquivo e copie as seguintes linhas de código:

Modelo de página 404

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

Fonte : Criando uma página de erro 404 no WordPress Codex

Este é o código por trás do tema 404 Page of Twenty Thirteen – é uma página básica adequada para edição e uso em seu projeto. Claro, você pode dar uma olhada em outros temas padrão do WordPress e verificar suas páginas 404. A página 404 do tema Twenty Thirteen chama o cabeçalho e o rodapé do seu site, para que a página fique alinhada com o estilo do seu site. Não importa a aparência do seu site, a página de erro 404 terá um design semelhante. No entanto, você deve adaptar o conteúdo exibido nesta página. Nesta fase, o talento do seu criador de conteúdo entra em cena.

Opcionalmente, você pode editar o arquivo 404.php para exibir o conteúdo publicado em seu site. As opções são infinitas, então vamos ver algumas modalidades potenciais para melhorar o erro de página 404.

  • Exiba os títulos das últimas sete postagens - Tudo o que você precisa fazer é colar este trecho de código no arquivo 404.php:
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
  • Exibir os títulos de sete postagens aleatórias Cole o código a seguir para exibir sete postagens aleatórias:
 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

Adicione seu logotipo ou uma imagem engraçada (gatos e cachorros sempre funcionam) para fazer os espectadores sorrirem e dar a você uma segunda chance. Em seguida, teste a página 404 após concluir o trabalho de edição. Para exibir sua página 404, digite o endereço do seu site na barra do navegador e adicione uma sequência aleatória de letras depois dela. O resultado deve ser algo assim:

 https://example.com/dfdfddfd

Se não estiver funcionando, é porque o servidor não consegue encontrar seu arquivo 404.php personalizado. Nesse cenário, você deve acessar o arquivo .htaccess do site e colar a seguinte linha de código:

ErrorDocument 404 /index.php?error=404

Importante : Se você editar um site novo ou lançado recentemente, talvez ele não tenha o arquivo .htaccess. Não é um grande problema - mude os permalinks do seu site e salve sua operação. Em seguida, reverta para o formato de permalinks preferido imediatamente depois disso. Desta forma, você terá gerado o arquivo .htaccess.

Editar uma página 404 através do editor de temas (não recomendado)

Imagem de como editar uma página 404 no WordPress usando o editor de temas.
Editando uma página 404 através do editor de temas

Um número significativo de artigos relacionados à edição de uma página 404 no WordPress menciona o editor de temas como uma solução viável. Não é! Embora seja conveniente e direto editar o código do site diretamente do painel de administração do WordPress, é perigoso e pode acabar sendo um fiasco. Sem falar que não é nada profissional editar o site enquanto ele está online e acessível a todos. Além disso, sua edição desaparece assim que você atualiza o tema (a menos que você use um tema filho).

Editar uma página 404 por meio de construtores de página

Este método é seguro, simples e eficaz. Você provavelmente está familiarizado com construtores de páginas como Elementor, Divi Builder, Beaver Builder, SeedProd ou Themify Builder. Qual você escolhe não é relevante, desde que você tenha uma boa compreensão sobre isso. Esses construtores permitem que você crie uma excelente página 404 sem escrever uma única linha de código. Esta é a melhor solução se você estiver preocupado em colar trechos de código nos arquivos do seu site.

Verifique o blog e a documentação do seu construtor de páginas favorito e, provavelmente, você encontrará um tutorial explicando como criar uma página 404. Além disso, alguns construtores de páginas têm modelos dedicados para páginas 404. Escolha um modelo e personalize-o para combinar com sua marca.

Plugins WordPress de 404 Páginas

Você não tem muitas alternativas para criar uma página 404 com um plugin dedicado. No entanto, alguns plugins merecem sua atenção. Sua vantagem capital é que você não precisa escrever código para criar e editar 404 páginas. Os plugins são simples, eficazes e leves.

página 404  

Plugin 404page no WP Repository
Plugin 404page no WP Repository

Você pode ser tentado a acreditar que precisa ser um codificador para criar uma boa página de erro 404. Graças a este plugin, todos podem conceber uma atraente página de erro 404. Além disso, o plugin 404page não é tão complexo quanto os construtores de páginas. Você se concentra em seu produto final – uma boa página de erro 404.

Instale e ative o plug-in. Em seguida, crie uma página 404 da mesma forma que você faz com o restante das páginas do seu site. No painel de administração do WordPress, vá para Aparência > Página de erro 404 e escolha a página que você acabou de criar para ser a página de erro 404 personalizada do seu site.

Este plugin não permite redirecionar páginas da web; ele apenas informa aos bots de pesquisa que a página da Web está ausente. 404page é um projeto pessoal de um desenvolvedor, então não há agência por trás deste plugin. Leve em consideração que o plugin tem 100.000 instalações ativas e uma classificação quase perfeita – 4,9 estrelas de 5. Nessas circunstâncias, o desenvolvedor do plugin merece nossa apreciação!

Todos os 404 Redirecionamento para a página inicial e Redirecionamento de imagens quebradas  

Todos os plugins 404 Redirect no WP Repository
Todos os plugins 404 Redirect no WP Repository

O nome do plugin não é muito impressionante, mas é altamente sugestivo. O plug-in trata os erros de página 404 de maneira diferente da alternativa anterior. Em vez de encantar os visitantes com uma página 404 bem projetada, este plugin redireciona todos os erros 404 para a página inicial ou outra página da web. A maior vantagem deste plugin é que você tem controle sobre os links quebrados em seu site. Além disso, você pode usar este plugin para redirecionar os usuários. Por exemplo, em vez de permitir que as pessoas visitem uma postagem de blog não atualizada, use este plug-in para direcioná-las à versão atualizada.

Colorlib 404 personalizador  

Plugin Colorlib 404 Customizer no WP Repository
Plugin Colorlib 404 Customizer no WP Repository

Este plugin é simples de usar e realmente ajuda você a criar páginas 404 envolventes. Ele vem com modelos 404 criados profissionalmente que você pode personalizar para atender às suas necessidades. O plug-in Colorlib 404 Customizer permite inserir botões de mídia social, alterar a cor ou a imagem do plano de fundo e configurar os títulos do texto. Usuários mais avançados podem adicionar código CSS personalizado. O plugin é de código aberto, então você pode contribuir para melhorar o plugin.

Use um construtor de páginas ou faça isso através do seu tema .

Se você já usa um construtor de páginas, já terá a opção de personalizar seu 404 por meio dele. Praticamente todos os construtores de páginas permitem que você edite sua página 404. Aqui está uma lista de plugins em que estamos confiantes de que você pode fazer isso:

● Alegre

● Elementor

● Construtor de castores

● Construtor Divi

● Origem do site

Se você estiver usando um tema como OceanWP, GeneratePress ou Astra, poderá fazê-lo por meio de suas opções de tema. Você obterá uma página 404 com excelente aparência se importar o conteúdo de demonstração. A única desvantagem de importar conteúdo de demonstração e usar designs pré-criados é que seu site será mais ou menos parecido com o Demo. Veja, por exemplo, este site e a demonstração do Astra. Qualquer pessoa que tenha examinado a biblioteca de sites iniciais do Astra reconhecerá rapidamente que os proprietários do site não o criaram. Isso pode prejudicar o quanto os usuários confiam em seu site.

Pelo lado positivo, Astra, OceanWP e outros temas com mais de 500.000 usuários estendem sua biblioteca de sites iniciais mais a cada mês.

Para você

Agora você tem uma ideia clara sobre como editar uma página 404 no WordPress. Existem muitas soluções para fazer isso, e você deve selecionar aquela adequada às suas habilidades e necessidades. O que importa é ter uma página de erro 404 empolgante para encantar seus espectadores. O método e as ferramentas que você usa para projetar e implementar essa página 404 não dizem respeito aos seus clientes. Você não tem desculpa para não ter uma excelente página de erro 404! Vá para a prancheta e comece a criar uma página de erro personalizada!