web-dev-qa-db-ja.com

直接リンクする場合（エンキューではない）のCSSの相対ファイルパス

1ページの子テーマを作成しています。（Wordpressコミュニティへの謝罪）私は基本的にPHPまたはWordpress APIをできるだけ使用しないようにしています。独自のスクリプトとスタイルを使用して単一のページを配置します。

相対ファイルパスに問題があります。私はPHPページに関してはget_theme_file_uri()関数を使う必要があることを集めました、そしてそれは私のメインのPHPページ（page-my-slug.php）でうまく働いています。 （補足として、私はget_template_directory_uri()を使うことを望みますが、これは親テーマフォルダを与えることです。これをどうやって回避するか？[編集：この部分は解決されました]）

しかし、私のCSSファイルに対する解決策は何ですか（例えば、画像の場合）。 このページ には相対リンクを挿入することができればいいのですが、それでもうまくいかないことがあります。

私はpage-my-slug.phpの中で私のスタイルシートを直接リンクしています、なぜなら私は親テーマスタイルを完全にオーバーライドしたい、そしてエンキューの詳細に入りたくないからです。

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

私が使っているstyle.cssでは、例えば：

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

しかし、ページをロードするとエラーが発生します。

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

これは、スタイルシートに対する相対パスではなく、ルートディレクトリ内を見ていることを示唆しています。

何がおかしいのですか？ CSSをエンキューするのではなく直接リンクしたという事実と関係があるのでしょうか。

cssfilesystemwp-filesystem
1
Igid

CSSの相対パスは、スタイルシートファイルからの相対パスです。だからあなたはこの構造を持っているなら：

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

その場合、CSSの画像のパスはurl(images/logo.png)とurl(images/background.jpg)になります。これは、CSSの相対パスがメインドメインではなく、スタイルシート自体からの相対パスであるためです（必要に応じて、スラッシュで始まります：url(/images/logo.png)）。

ファイルのエンキュー方法には影響されません。

あなたが間違っているかもしれないところはあなたが親テーマを述べたということです。親テーマから画像を読み込もうとしているのであれば、上の例のような相対パスは機能しません。 CSSには、親子テーマの関係についての知識も概念もありません。

それで、あなたのディレクトリ構造がこのように見えるならば：

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

ですから、ディレクトリを上って親ディレクトリに行きたければ、パスはurl(../parent-theme/images/logo.png)である必要があります。

2
Jacob Peattie

あなたはget_stylesheet_directory_uri()を使うべきです。これはget_template_directory_uri()と同じ機能ですが、子テーマのディレクトリを使用します。

例として：

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

あなたの子供のテーマのロゴフォルダからロゴを引き出します。

0
rudtek

私はその答えが何かを知っていると思います。私はソースコードから私のスタイルシートまでクリックしたところ、サーバーは私が誤ってurl(/images/logo.png)を書いた古いバージョンを最初のスラッシュでルートに連れて行っていることを発見しました。

皆さん、すみません、愚かな周辺問題に至るCSSパスについてのもう一つの質問。

0
Igid