it-swarm.com.de

Relative Dateipfade in CSS beim direkten Verknüpfen (nicht in die Warteschlange stellen)

Ich erstelle ein einseitiges untergeordnetes Thema, bei dem ich (ich entschuldige mich bei der Wordpress-Community) grundsätzlich versuche, die Verwendung von PHP oder der Wordpress-API so weit wie möglich zu vermeiden, weil ich wirklich nur möchte Stellen Sie eine einzelne Seite mit eigenen Skripten und Stilen bereit.

Ich habe Probleme mit relativen Dateipfaden. Ich habe festgestellt, dass ich für PHP Seiten die Funktion get_theme_file_uri() verwenden muss, und das funktioniert auch auf meiner Hauptseite PHP (page-my-slug.php). (Als Randnotiz würde ich get_template_directory_uri() bevorzugen, aber dies gibt den übergeordneten Themenordner an. Wie kann man das umgehen? [Bearbeiten: Dieser Teil ist gelöst])

Aber was ist die Lösung für meine CSS-Datei (zB für Bilder)? Diese Seite schlägt vor, ich sollte nur in der Lage sein, relative Links dort einzufügen, aber das funktioniert bei mir nicht.

Ich verlinke mein Stylesheet direkt in meinem page-my-slug.php, weil ich den übergeordneten Designstil vollständig überschreiben und nicht auf die Details des Einreihens eingehen möchte:

<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'); ?>">

In meinem style.css verwende ich zum Beispiel:

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

Beim Laden der Seite erhalte ich jedoch eine Fehlermeldung:

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

Was darauf hindeutet, dass es im Stammverzeichnis und nicht relativ zum Stylesheet gesucht wird.

Was mache ich falsch? Ich frage mich, ob es etwas damit zu tun hat, dass ich mein CSS direkt verlinkt habe, anstatt es in die Warteschlange zu stellen ...

1
Igid

Relative Pfade in CSS sind relativ zur Stylesheet-Datei. Also, wenn Sie diese Struktur haben:

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

Dann wären die Pfade in CSS für die Bilder url(images/logo.png) und url(images/background.jpg). Dies liegt daran, dass die relativen Pfade in CSS relativ zum Stylesheet selbst und nicht zur Hauptdomäne sind (wenn Sie dies möchten, beginnen Sie mit einem Schrägstrich: url(/images/logo.png)).

Nichts davon hängt davon ab, wie Sie die Datei in die Warteschlange stellen.

Was Sie möglicherweise falsch machen, ist, dass Sie ein übergeordnetes Thema erwähnt haben. Wenn Sie versuchen, ein Bild aus dem übergeordneten Thema zu laden, funktioniert ein relativer Pfad wie im obigen Beispiel nicht. CSS hat keine Kenntnis oder Vorstellung von einer Eltern-Kind-Beziehung.

Also, wenn Ihre Verzeichnisstruktur so aussieht:

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

Wenn Sie also in ein Verzeichnis und dann in das übergeordnete Verzeichnis wechseln möchten, muss Ihr Pfad folgendermaßen aussehen: url(../parent-theme/images/logo.png).

2
Jacob Peattie

Sie sollten get_stylesheet_directory_uri() verwenden. Dies ist dieselbe Funktion wie get_template_directory_uri(), verwendet jedoch das Verzeichnis des untergeordneten Themas.

als Beispiel:

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

das Logo wird aus dem Ordner "logos" in Ihrem untergeordneten Thema gezogen.

0
rudtek

Ich glaube zu wissen, wie die Antwort lautet. Ich habe mich gerade vom Quellcode zu meinem Stylesheet durchgeklickt und festgestellt, dass der Server eine alte Version zwischenspeichert, in der ich fälschlicherweise url(/images/logo.png) geschrieben habe, wobei der anfängliche Schrägstrich mich zum Stammverzeichnis führte.

Entschuldigen Sie alle, eine weitere Frage zu CSS-Pfaden, die auf ein dummes Randproblem zurückzuführen ist.

0
Igid