web-dev-qa-db-fra.com

Chemins de fichiers relatifs en CSS lors de la liaison directe (pas de mise en file d'attente)

Je crée un thème enfant d'une seule page, dans lequel (avec toutes les excuses de la communauté Wordpress), j'essaie fondamentalement d'éviter d'utiliser PHP ou l'API Wordpress autant que possible, car je souhaite simplement déployer une seule page avec ses propres scripts et style.

J'ai des problèmes avec les chemins de fichiers relatifs. J'ai compris qu'en ce qui concerne les pages PHP, je dois utiliser la fonction get_theme_file_uri(), et cela fonctionne correctement dans ma page principale PHP (page-my-slug.php). (En remarque, je préférerais utiliser get_template_directory_uri() mais cela donne le dossier du thème parent. Comment résoudre ce problème? [Edit: cette partie est résolue])

Mais quelle est la solution pour mon fichier CSS (par exemple, pour les images)? Cette page suggère que je devrais pouvoir insérer des liens relatifs, mais cela ne fonctionne pas pour moi.

Je lie ma feuille de style directement dans mon page-my-slug.php, parce que je veux remplacer totalement le style du thème parent et que je ne veux pas entrer dans les détails de la mise en file d'attente:

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
<!-- or, for exactly the same effect... -->
<link rel="stylesheet" type="text/css" href="<?php echo get_theme_file_uri('style.css'); ?>">

Dans mon style.css, j'utilise par exemple:

#ffw {
    background-image: url(images/ffw.png);
}

Mais, lors du chargement de la page, un message d'erreur s'affiche:

GET https://domain.com/images/ffw.png 404 ()

Ce qui suggère qu'il regarde dans le répertoire racine plutôt que par rapport à la feuille de style.

Qu'est-ce que je fais mal? Je me demande si cela a quelque chose à voir avec le fait que j'ai lié mon CSS directement plutôt que de le mettre en file d'attente ...

cssfilesystemwp-filesystem
1
Igid

Les chemins relatifs en CSS sont relatifs au fichier de feuille de style. Donc si vous avez cette structure:

- style.css
- images/
-- logo.png
-- background.jpg

Ensuite, les chemins en CSS pour les images seraient url(images/logo.png) et url(images/background.jpg). En effet, les chemins relatifs dans CSS sont relatifs à la feuille de style elle-même et non au domaine principal (si vous le souhaitez, commencez par une barre oblique: url(/images/logo.png)).

Rien de tout cela n'est affecté par la façon dont vous choisissez de mettre le fichier en file d'attente.

Là où vous risquez de vous tromper, c'est que vous avez mentionné un thème parent. Si vous essayez de charger une image à partir du thème parent, un chemin relatif comme dans l'exemple ci-dessus ne fonctionnera pas. CSS n'a aucune connaissance ni concept d'une relation de thème parent/enfant.

Donc, si votre structure de répertoire ressemble à ceci:

- parent-theme/
-- images/
--- logo.png
- child-theme/
-- style.css
-- images/
--- background.jpg

Donc, si vous voulez remonter un répertoire puis dans le répertoire parent, votre chemin doit ressembler à url(../parent-theme/images/logo.png).

2
Jacob Peattie

Vous devriez utiliser get_stylesheet_directory_uri(). C'est la même fonction que get_template_directory_uri() mais elle utilise le répertoire du thème enfant.

par exemple:

get_template_directory_uri().'/logos/coollogo.png';

tirera le logo du dossier logos dans le thème de votre enfant.

0
rudtek

Je pense que je sais quelle est la réponse. Je viens de cliquer sur le code source de ma feuille de style pour découvrir que le serveur mettait en cache une ancienne version dans laquelle j'avais écrit par erreur url(/images/logo.png) avec la barre oblique initiale qui me dirigeait vers la racine.

Désolé tout le monde, une autre question sur les chemins CSS qui se résume à un problème périphérique idiot.

0
Igid