Criando um site do zero com WordPress - #21 Arquivo 404

22/03/2018

Nessa vídeo-aula vamos aprender como criar nossa página não encontrada no WordPress (404.php).

Criando a página 404 no WordPress

Para criarmos nossa página não encontrada, vamos criar primeiramente o arquivo 404.php na raiz do nosso wp-content/theme/tyr. Nesse arquivo chamaremos os arquivos nativos jquery, javascript e css e criaremos um arquivo HTML5 do zero, afinal não queremos repetir o wp_header nem wp_footer.

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Tyr | Página não encontrada</title>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.min.css">
</head>

<body>
    <div class="Fundo404">
        <div class="Fundo404Image"><img src="<?php echo get_template_directory_uri(); ?>/images/Fundo.png" alt="Fundo da Página não encontrada"></div>
    </div>
    <script src='<?php echo get_option('siteurl'); ?>/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
    <script src='<?php echo get_template_directory_uri(); ?>/javascript.min.js'></script>
</body>
</html>

Posteriormente, vamos criar uma imagem qualquer num programa de design e aplicar o estilo e o jquery para que a tela seja toda ocupada.

var HeightWindow=jQuery(window).height();
jQuery('.Fundo404').height(HeightWindow);

.Fundo404{position: relative; float:left; width:100%; background: linear-gradient(#999, #fff);}
    .Fundo404Image{position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%,-50%);}

No código acima temos duas classes, sendo a primeira responsável por preencher todo o fundo e a segunda responsável por abrigar a imagem "Página não Encontrada".

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Criando um site do zero com WordPress - #20 Criando menu dinâmico

Na vídeo-aula de hoje vamos aprender como configurar um menu dinâmico no WordPress.

Criando um site do zero com WordPress - #22 Cadastro de Clientes I

Nessa vídeo-aula vamos iniciar o aprendizado de cadastro de usuários no banco de dados. Iremos demonstrar como realizar o cadastro completo.

WordPress do Zero

Neste curso aprenderemos como criar um site no CMS WordPress do zero, começando pela instalação, criação do tema e publicação no ar.