JAMES WEB
Aprenda como se faz.
Construindo um site: Diferenças entre caminho relativo e absoluto
Adentrando o universo da construção do site James Web, nos deparamos com intrigantes desafios desde o primeiro momento. Ao escolher um modelo da Colorlib e transferir os arquivos para o servidor Hostinger, surgiram questões técnicas que demandaram nossa atenção. Neste artigo, exploraremos os primeiros passos dessa jornada, mergulhando nos ajustes necessários onde tivemos de diferenciar caminhos relativos e de absolutos no WordPress.
Construindo site James Web – primeiros problemas
Quando começamos a construir o site James Web resolvemos usar um modelo de página de web fornecido por Colorlib que é um site que oferece uma variedade de recursos e ferramentas relacionadas ao design e desenvolvimento web, com foco particular em modelos (templates) de websites gratuitos e premium para diversas plataformas, como WordPress, HTML, Shopify, entre outros.
Após fazer o download dos arquivos transferimos os arquivos diretamente no diretório no servidor Hostinger cujo caminho do diretório era public_html > wp_content > themes > wp-webbin, isto é, uma pasta de criei para um tema WordPress denominado wp-webbin.
Para que o WordPress reconhece-se o arquivos dentro do wp-webbin e renomeei o arquivo index.html para index.php, já que ter este arquivo é uma exigência do wordpress para reconhecer um tema, além do style.css.
Ao testar a página ela foi visualizada como não encontra-se os arquivos CSS e os demais relativos a JS, imagens, fonts etc. Percebi depois de testes que os caminhos dos arquivos como o style.css não estavam corretos. Depois de pesquisas descobri que o problema estava no uso correto e entender as diferenças entre caminho relativo e absoluto.
Caminho Relativo vs. Caminho Absoluto:
Caminho Relativo: Quando você usa um caminho relativo, como “css/style.css”, o navegador tenta encontrar o arquivo style.css com base no diretório atual do documento HTML. Isso significa que o navegador procurará a pasta css dentro do diretório onde o documento HTML está localizado.
Caminho Absoluto: Ao usar um caminho absoluto, como por exemplo, “/wp-content/themes/wp-webbin/style.css”, você especifica o caminho completo do diretório raiz do servidor até o arquivo CSS. Isso garante que o navegador saiba exatamente onde encontrar o arquivo, independentemente do diretório atual do documento HTML
Explicando de uma forma mais simples!
Ainda não entendeu as diferenças de caminho relativo e absoluto. Vamos olhar de uma perspectiva mais simples:
Caminho Relativo
Imagine que você está dando direções para alguém encontrar uma loja dentro de um shopping. Você poderia dizer algo como “Vire à esquerda na primeira esquina e a loja estará logo ali.”
O caminho relativo funciona de forma semelhante. Ele é relativo à localização atual do seu documento HTML. Então, quando você especifica um caminho relativo, você está basicamente dizendo “O arquivo que eu quero está aqui, neste mesmo diretório (pasta), ou dentro de uma pasta próxima.”
Caminho Absoluto
Agora, imagine que você está dando direções para alguém encontrar uma loja em uma cidade. Você precisaria fornecer o endereço completo, incluindo a rua, o número da rua e a cidade.”
O caminho absoluto é como fornecer o endereço completo do arquivo que você deseja, desde a raiz do sistema de arquivos (no caso de páginas da web, desde a raiz do servidor).
Então, resumindo:
Caminho Relativo: Depende da localização atual do seu documento HTML. É como dar direções baseadas em pontos de referência próximos.
Caminho Absoluto: É o caminho completo para o arquivo, desde o início do sistema de arquivos. É como fornecer o endereço completo de uma localização, sem depender de pontos de referência próximos.
O importante é entender que os caminhos relativos e absolutos são formas diferentes de especificar a localização de um arquivo ou recurso.
Estrutura de Diretórios:
Se o arquivo style.css estiver localizado em um diretório diferente do diretório onde o documento HTML está localizado, o caminho relativo pode não funcionar corretamente, pois o navegador estará procurando no local errado.
Local de Hospedagem:
Dependendo do provedor de hospedagem e da configuração do servidor, os caminhos relativos podem funcionar de maneira diferente. Alguns servidores podem ter configurações que afetam a resolução de caminhos relativos.
Além disso, as permissões de acesso aos arquivos e diretórios no servidor também podem influenciar se o navegador pode ou não acessar o arquivo CSS.
Os Códigos abaixo representam os caminhos relativos e no bloco seguinte o absoluto tirados de uma página web de um modelo de navegação com barra lateral Bootstrap fornecido pela Colorlib relativo ao exemplo que estamos utilizando.
Caminho relativo:
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/jquery.min.js”></script>
<script src=”js/popper.js”></script>
<script src=”js/bootstrap.min.js”></script>
<script src=”js/main.js”></script>
Caminho absoluto:
<link rel=”stylesheet” href=”/wp-content/themes/wp-webbin/css/style.css”>
<script src=”/wp-content/themes/wp-webbin/js/jquery.min.js”></script>
<script src=”/wp-content/themes/wp-webbin/js/popper.js”></script>
<script src=”/wp-content/themes/wp-webbin/js/bootstrap.min.js”></script>
<script src=”/wp-content/themes/wp-webbin/js/main.js”></script>
Para a imagem do avatar o caminho relativo também foi modificado para absoluto. Veja como ficou:
<a href=”#” class=”img logo rounded-circle mb-5
style=”background-image: url(/wp-content/themes/wp-webbin/images/logo.jpg);”></a>