Aprenda a criar um aviso de manutenção personalizado em seu site com facilidade e mantenha seus visitantes informados durante atualizações.
Um aviso de manutenção é um recurso não apenas mantém os visitantes informados sobre a situação, mas também impede que eles acessem páginas incompletas ou quebradas durante o processo de atualização. Neste artigo, vamos mostrar como criar um aviso de manutenção para o seu site através de um arquivo index.php. Você aprenderá a criar o código necessário para o aviso e como personalizá-lo com suas próprias informações. Vamos lá?
Requisitos
Confira os requisitos para o passo-a-passo:
- Possuir domínio registrado a ativo. Seu domínio precisa estar devidamente ativo para ser possível acessá-lo. Confira nossa página de domínios.
- Possuir o domínio configurado em uma hospedagem. A hospedagem será responsável por exibir o aviso de manutenção a quem tentar visitar seu site, para isso, o domínio precisa já estar corretamente configurado em uma hospedagem. Servidores da HostGator garantem o funcionamento do código PHP utilizado no passo-a-passo. Confira como adicionar um domínio na hospedagem.
Passo 1: Criando o arquivo index.php
Atenção! Se você for um usuário iniciante, recomenda-se criar um backup para evitar comprometer os arquivos de sua estrutura.
- Acesse o cPanel da sua Hospedagem.
- Acesse o menu Domínios.
- Clique no diretório do domínio em que você deseja adicionar o aviso de manutenção.
- Clique em + Arquivo.
- Crie um arquivo com nome index.php.
- Clique em Create new File.
Atenção! O arquivo index.php costuma ser muito usado por construtores como o WordPress para funcionamento do site. Então se você já existir um arquivo index.php criado, salve o arquivo ou renomeie para voltar a utilizá-lo no futuro.
Passo 2: Escrevendo o código de aviso de manutenção
Agora que você tem o arquivo index.php em branco, é hora de adicionarmos o código do aviso de manutenção.
- Clique com o botão direito no arquivo index.php e depois em Edit.
- Cole o seguinte código dentro do arquivo index.php.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site em Manutenção</title>
<style>
/* Estilize esta seção de acordo com o design do seu site */
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
text-align: center;
padding: 100px;
}
.container {
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<h1>Site em Manutenção</h1>
<p>Nosso site está passando por manutenção neste momento.</p>
<p>Estamos trabalhando para melhorar a sua experiência.</p>
<p>Entre em contato conosco em caso de urgência:</p>
<p>Telefone: (seu número de telefone)</p>
<p>Email: (seu endereço de email)</p>
</div>
</body>
</html>
Este código cria uma página simples de aviso de manutenção com um estilo mínimo. Veja como seu site ficará utilizando este código:
- Para personalizar o código, siga estas etapas:
- Título da página: Substitua “Site em Manutenção” pelo título que você deseja para a página de manutenção.
- Conteúdo: Edite os parágrafos de texto para fornecer informações sobre o motivo da manutenção e quando o site estará de volta ao normal.
- Informações de contato: Substitua “(seu número de telefone)” e “(seu endereço de email)” pelos seus próprios números de telefone e endereço de email, para que os visitantes possam entrar em contato com você durante a manutenção.
Pronto! Agora você pode exibir o aviso de manutenção no seu site enquanto realiza os ajustes necessários.
Considerações Finais
Neste artigo você aprendeu como criar um aviso de manutenção em um site através de um código no arquivo index.php. Se você utiliza um site WordPress, você poderá continuar acessando o painel de administrador do WordPress para realizar manutenções enquanto o aviso se mantém no ar para todas as suas páginas, lembre-se apenas de reativar o arquivo index.php do WordPress para voltar tudo ao normal.
Se você sentiu alguma dificuldade ou então tem alguma sugestão de algo que não foi mencionado, basta deixar aí nos comentários que no futuro podemos trazer atualizações para este artigo. Também indico esses outros materiais relacionados com este assunto:
Até a próxima! :^)