Como criar uma página 404 personalizada em um tema filho do WordPress

Não importa o quão bem projetado e arquitetado seja seu site, os usuários encontrarão uma página 404 em algum momento. Pode ser algo tão simples quanto digitar uma URL com um erro de ortografia. Por exemplo, se você tiver uma página de contato encontrada em www.website.com/contact e alguém tentar acessar www.website.com/contacts, há uma boa possibilidade de que eles sejam redirecionados para a página 404. Além disso, os ajustes de conteúdo do site nem sempre levam em conta as páginas que poderiam ter sido movidas sem que os links fossem redirecionados. Espero que essa experiência não aconteça com muita frequência com seus usuários, mas quando acontece, é uma oportunidade de oferecer ajuda e fazer algo único para sua marca.

Provavelmente, você não é estranho às páginas 404 na web, então você já deve ter um design em mente. Se não, pesquisando no Google “cool 404 pages”, você encontrará todo tipo de inspiração. O design pode ser qualquer coisa, de sério a engraçado, com muito texto ou minimalista, ou algo intermediário.

Abaixo estão alguns dos meus favoritos. São bons exemplos de como a criatividade é usada no design da página.

Figma

Figma é uma página 404 simples, mas o gráfico se encaixa muito bem com os pontos vetoriais. Eu gosto de como é simples e ousado; é realmente tudo o que é necessário.

Airbnb

Este exemplo oferece um pouco mais em termos de conteúdo. A abordagem ilustrativa adiciona um elemento de humor. Isso inclui alguns dos links principais. Se um usuário digitou algo errado, é possível que ele encontre o que está procurando na lista.

MailChimp

O design é sempre divertido no site MailChimp, especialmente com o recente redesenho. Tem um elemento de humor tanto no texto quanto na ilustração.

Obtenha os temas Genesis Framework & StudioPress gratuitamente!

Ao hospedar seus sites no Flywheel, você terá acesso a mais de 30 temas premium do WordPress (incluindo o Genesis!) diretamente do nosso delicioso painel. São mais de $ 2.000 em valor com o qual você pode começar por apenas $ 15/mês! Saiba mais aqui.

Criando uma página 404 personalizada

Primeiras coisas primeiro: Todas as personalizações devem ser feitas em um tema filho. Dessa forma, quaisquer modificações não serão substituídas por atualizações do tema regular. Esta página 404 será um arquivo no tema filho, o arquivo chamado 404.php para ser exato.

Como adicionar variáveis ​​CSS para personalizar temas filhos do WordPress

As variáveis ​​CSS, também conhecidas como propriedades personalizadas CSS, permitem uma fácil reutilização em suas folhas de estilo CSS. Se você já trabalhou com temas filhos do WordPress, provavelmente está fazendo muito estilo...

Além disso, lembre-se de fazer isso em um ambiente de teste. Quando os arquivos do tema estão sendo alterados, sempre há a possibilidade de erros de sintaxe que podem derrubar o site.

1. Crie um novo arquivo

Quando você tem o tema filho, o primeiro passo é criar um novo arquivo para começar a trabalhar. Você vai querer abrir a pasta onde criou o tema filho e adicionar um arquivo 404.php .

2. Edite o arquivo

Exemplo básico

Este exemplo é responsável por uma página que tem texto e uma imagem. A ideia de design aqui é criar algo simples que exija um gráfico ilustrado.

Cole o seguinte código na página 404.php . É um começo básico. Você pode modificar as coisas para uma estrutura diferente para torná-la realmente sua (ou seja, se você não quiser uma barra lateral, ela pode ser removida).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Existem algumas modificações que você terá que fazer. Uma delas é alterar o caminho para a imagem e incluir o título desejado. Não se esqueça de escrever uma mensagem personalizada e salvar suas alterações.

Se você seguiu as instruções até aqui, criou um modelo personalizado com imagem, mensagem e cabeçalho, barra lateral e rodapé padrão. (Você pode ter isso nas outras páginas também.)

Abordagem do widget

Isso é opcional, mas muitos designers preferem trabalhar com áreas de widget. É mais fácil fazer alterações e mais sustentável. Por exemplo, um widget é uma maneira eficiente de exibir os artigos de blog mais recentes e populares.

Adicionando o widget

Para adicionar o widget ao 404.php file , você precisará criar uma nova área widgetizada. Um tema filho precisa de um arquivo functions.php , então agora é a hora de verificar se o tema filho tem um.

No arquivo functions.php , será necessário um snippet para adicionar um novo widget na página.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Este snippet apenas adiciona o widget. Para realmente começar a usá-lo, essa função deve ser chamada. Ele será chamado no arquivo 404.php . Fique de olho no local onde deseja esta área de widget.

Copie e cole o seguinte código onde você deseja mostrar novos widgets (por exemplo, após o título e o texto):

<?php dynamic_sidebar( '404' ); ?>

Agora que você estabeleceu onde exibir a nova área do widget, é hora de adicionar o conteúdo do widget acessando Appearance > Widgets . Aqui é onde você pode escolher coisas como um bloco HTML, Postagens Populares ou qualquer outro widget para a página 404.

Esteja você criando algo simples ou uma página com muitos links, criar uma página 404 personalizada é bastante simples. Ao usar um tema filho e utilizar widgets, há possibilidades ilimitadas de design.

Procurando mais maneiras de personalizar seu site? Confira estes tutoriais:

• Como adicionar variáveis ​​CSS para personalizar temas filhos do WordPress
• Personalizações simples para o seu tema filho Genesis
• Como criar e usar campos personalizados no WordPress