WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法

Question

WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法

Wordpressの固定ページの問い合わせフォームのみ適用されるスタイルシートを作成の後にアップロードしたのですが、その反映が下記URLサイトで調べた通りにやっても上手くいきませんでした????
https://www.1-firststep.com/archives/5889#link-scroll-2

header.phpに

<?php if ( is_page( 固定ページID) ): ?>

　　<link rel="stylesheet" href="form.css" />

<?php endif; ?>

と書き込んでみたのですが、上手くいかず????

header.phpとform.cssは同じ階層にあるのでパスも合っていると思うのですが、、、

何か原因として推測出来得るようなものがあればご指摘とアドバイスを頂きたいです！

Answer 1

header.phpとform.cssが同じ階層にあるのであれば、以下を試してみてください。

<?php if ( is_page( 固定ページID) ): ?>

　　<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/form.css" />

<?php endif; ?>

<link rel="stylesheet" href="form.css" />だと、Webサイトのトップページの階層 (wp-config.phpや/wp-content/などがある階層) にform.cssを設置する必要があります。)

Comments

[fisher44]

ありがとうございます????
検索ではおそらく解決できなかったです、、、(-_-;)

header.phpに書き込みはするものの相対パスの
起点にはならないという考え方をすれば宜しいのでしょうか？

[new1ro]

PHPはHTMLを出力するためのものと考えると、
「header.phpからの相対パス」ではなく
「header.phpにより生成されたHTMLからの相対パス」と考えるとわかりやすいかもしれません。

WordPressは仕組み上、相対パスをあまり使わないようです。
必要なパスを関数から取得することが多いので、以下の2つを覚えておくといろいろ使えると思います。

<?php echo home_url(); ?>
https://www.xxxx.com/

<?php echo get_template_directory_uri(); ?>
https://www.xxxx.com/wp-content/themes/テーマ名/

[fisher44]

new1ro様

ありがとうございます。
なんとなく視覚的な考え方になってしまう傾向があって、PHPもまだ基礎学習などが不十分だと感じています????

補足的なアドバイスまで頂けてとっても嬉しいです✨