Pour créer un site web ou aller plus loin dans l’administration dans son blog, vous allez souvent être amené à utiliser des liens pour intégrer une image, un fichier CSS ou Javascript, gérer un menu, etc.

Il est donc essentiel de savoir comment fonctionne les liens et notamment les chemins absolus et relatifs.

Partie I : Le fonctionnement des dossiers.

Il faut d’abord commencer par comprendre comment fonctionne la structure de vos dossiers.

Prenons un exemple simple avec les dossiers suivants qui sont tous à la racine de notre ftp :

• « CSS » qui contient Style.css

• « IMG » qui contient background.jpg

Style.css est donc à l’adresse :

background.jpg est donc à l’adresse :

Vous l’avez compris, le « / » correspond à la séparation entre dossiers.

Ce fonctionnement est le même sur n’importe lequel des systèmes d’exploitation quand vous naviguez dans vos dossiers.

C’est ce qu’on appelle le chemin :

Partie II : Utiliser un lien

Notre page index.html qui est la première page chargée en ce connectant à http://www.monsite.fr est placée à la racine de note site. Elle est donc à côté de nos dossier « CSS » et « IMG ».

Pour y intégrer notre fichier Style.css qui gèrera le design de notre page, le code suivant est généralement utilisé (il se trouve dans le header) :

Ce qui nous intéresse c’est ceci :

C’est ce bout de code qui va dire à la page d’aller chercher son fichier style au bon endroit.

Ici, c’est très simple, comme nous venons de le voir, fichier Style.css est a l’adresse :

Il suffit donc d’insérer ce lien au bon endroit, ce qui donne :

Partie III : Chemins absolus et relatifs

Nous allons maintenant voir la différence entre ces deux termes. Pour information, ces deux techniques permettent d’arriver exactement au même résultat, à savoir lier (grâce à un lien, oui oui…) deux fichiers l’un à l’autre. Ce qui change, c’est leur mise en œuvre.

Le chemin absolu c’est l’adresse de notre serveur ftp, suivi du chemin du fichier :

C’est donc ce que je viens de vous présenter juste au-dessus.

Le Chemin relatif est un peu plus complexe à comprendre. Il faut tout simplement savoir qu’un chemin lie un point à un autre. Plutôt que de commencer le chemin à la racine de notre site en utilisant http://www.monsite.fr/, nous allons tout simplement commencer notre chemin là ou ce trouve le fichier dans lequel on veut ajouter un lien.

Prenons un exemple simple, nous allons ajouter une image de fond à notre page en utilisant notre fichier Style.css. Ce qui revient à insérer un lien dans Style.css qui ira chercher background.jpg pour l’afficher.

Le code concerné est le suivant :

Comme indiqué si dessus la structure des dossiers est la suivante :

• CSS qui contient Style.css

• IMG qui contient background.jpg

Les dossiers CSS et IMG sont dans le même répertoire (ici, la racine du site).
Nous venons de voire que le « / » correspond à la séparation entre dossiers.

Il suffit donc d’ajouter « .. » devant le « / » pour remonter dans le dossier précédent.
Par exemple, si j’écris dans mon fichier Style.css

« ../ » le lien pointera dans le répertoire qui contient le dossier CSS (qui contient lui-même notre fichier Style.css).

Ce que nous voulons, c’est nous rendre dans le dossier IMG pour que notre lien pointe vers l’image background.jpg

Il nous suffit donc de compléter notre chemin par le nom du dossier dans lequel on veut rentrer :

Nous voilà maintenant dans le dossier IMG, il ne nous reste plus qu’à ajouter le nom de notre image et notre lien est complet !

Ce qui nous donne :

Pour résumer, quand on veut sortir d’un dossier, on utilise « ../ » et pour y entrer « dossier/ »

On peut donc facilement se retrouver avec des liens comme ceci :

Vous trouvez peut-être cette seconde technique un peu compliqué mais elle s’avère très utile dans de nombreuses situations :

– Utilisation d’un thème pour un CMS (WordPress, Joomla !, Drupal…)
Votre thème doit pouvoir aller sur n’importe lequel des serveurs, quel que soit l’url du FTP.

– Une arborescence très complexe avec de nombreux niveaux

Si vous êtes dans le 15ème sous dossier et que vous voulez aller chercher un fichier dans le dossier précédent, plutôt que d’avoir le lien :

Vous aurez :

– Changement de nom de domaine

Vous devrez reprendre tous vos http://www.monsite.fr pour les changer en http://www.mon-nouveau-site.fr

Voilà, c’est terminé pour cette première « astuce », en espérant vous avoir un peu éclairé !

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Responsable commercial en agence web, je suis également développeur freelance WordPress à Rennes.

Coorganisateur des Meetups WordPress Rennes et fondateur de b-website.com.