質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.04%

Wordpressの固定ページにのみ、cssを適用したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 217

feeling_jumper

score 17

タイトル通りなのですが、ググると、
固定ページに個別のCSSを適用するには、
・Header.phpに記述する
・function.phoに記述する
・カスタムフィールドを使う
など、色々なやり方があり、どれも試してみたのですが、
CSSが全くききませんでした。。

固定ページに自分の作成した下記の「works.css」を適用するには、
どのようにするとよろしいのでしょうか。
教えていただけますと大変助かります。

イメージ説明

上記の、luxechというのがluxeritasの子テーマです。
子テーマの中に、works.cssを入れ、それを固定ページで適用させたいです。

イメージ説明

上記header.phpを子テーマのフォルダに入れ、

<?php if ( is_page( 'works' ) ): ?>
<link rel="stylesheet" href="works.css" />
<?php endif; ?>


上記の記述でworks.cssを読み込もうとしましたが、
適用されません。

初心者で理解力がないので大変恐縮ですが、
宜しくお願いします。


追記2020/4/8/15:10
親テーマのheader.phpにworks.cssを読み込ませる記述をしてみますと、
イメージ説明
↑ページのソースを表示はこういう形に
イメージ説明
↑変えたい部分はここなのですが、
イメージ説明
↑エラーがでています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2020/04/08 07:48 編集

    どのようなコードを試したのかを記載していただけないでしょうか。

    また、画像の中に works.css ファイルが無いようですがどのディレクトリにありますか?

    キャンセル

  • feeling_jumper

    2020/04/08 13:54

    早速ありがとうございます。大変助かります。
    色々試している途中でしたので、works.css削除後のスクショを載せておりましたが、スクショも修正し、取り組んだ内容の時のディレクトリ内容にしました。

    試したことですが、まず、ググると、固定ページにcssを適用させるには、header.phpにcssを記述するという記事がありましたので、そちらを参考に、

    親テーマにあるheader.phpをコピーし、<head>内にcssを読み込ませるコードを書いたのですが、うまく適用されませんでした。

    キャンセル

回答 1

+2

テーマにあるならパスを指定すれば良いと思います。

<?php if ( is_page( 'works' ) ): ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/works.css" />
<?php endif; ?>

【get_stylesheet_directory_uri() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/

【WordPress » URL・ディレクトリの取得まとめ | MORILOG】
http://morilog.com/wordpress/template/url_and_directory_functions/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/08 17:40

    エラー文から「luxeritas」がテーマとして選択されているようですが、そちらが子テーマではなかったのですね。

    キャンセル

  • 2020/04/08 18:03

    説明がうまくできておらず申し訳ないです。。
    親テーマがluxeritas、
    子テーマがluxech
    です。

    キャンセル

  • 2020/04/08 19:27

    get_stylesheet_directory_uriは子テーマのURLを取得するものなので、親テーマのものに変えましょう。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る