[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

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 (répertoires).

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 :

http://www.monsite.fr/CSS/Style.css

background.jpg est donc à l’adresse :

http://www.monsite.fr/IMG/background.jpg

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 :

dossier/sous-dossier/sous-sous-dossier/etc.

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) :

<link href="le-lien-du-fichier-css" rel="stylesheet" type="text/css" />

Ce qui nous intéresse c’est ceci :

href="le-lien-du-fichier-css"

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 :

http://www.monsite.fr/CSS/ Style.css

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

<link href="http://www.monsite.fr/CSS/ Style.css" rel="stylesheet" type="text/css" />

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 :

http://www.monsite.fr/dossier/sous-dossier/sous-sous-dossier/mon-fichier.ext

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

http://www.monsite.fr/CSS/ Style.css

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 :

body { background-image : url(chemin-de-mon-image) ;}

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 :

 ../IMG/

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

../IMG/ background.jpg

Ce qui nous donne :

body { background-image : url(../ IMG/ background.jpg) ;}

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 :

../../dossier/sous-dossier/sous-sous-dossier/

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 :

http://www.monsite.fr/1/2/3/.../14/monfichier.extension

Vous aurez :

../monfichier.extension

– 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é !

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 2 commentaires

2 commentaires

  1. Bonjour et merci pour cet article ! 😉
    Cependant, il y a une chose que je ne comprends pas bien… si on a un chemin beaucoup plus compliqué type :
    monsite.com/wp-co…nimage.jpg
    Est ce que l’on met :
    ../../../../05/monimage.jpg
    ?
    Désolé pour la question peut être idiote… 😉

    • Bonjour Christophe,
      Il n’y a pas de question idiote !
      Dans ton cas, puisque tu utilises WordPress, il existe des constantes et fonctions (en PHP) et qui te permettent de remonter le chemin vers le répertoire uploads. Tu n’as ensuite plus qu’à aller dans les sous-répertoires comme ceci :

      Attention, si tu souhaites remonter une image uploadée via l’interface d’administration, le plus « simple » et logique reste d’utiliser l’Identifiant de cette dernière et de procéder comme suit :

      Pour trouver l’ID d’une image, il faut que tu cliques dessus pour l’ouvrir depuis le menu Médias en administration, regarde ensuite l’Url et récupère le numéro en fin de ligne, : www.ton-site.com/wp-ad…?item=1651

      Voilà la page de la documentation en question codex.wordpress.org/Funct…chment_url

      Bonne journée