WordPressの自作テーマでstyle.cssの内容が反映されない。

よろしくお願いします。

発生している問題・エラーメッセージ

フォルダ構成

【現在地】
~/Users/（ユーザー名）/（Flywheel設定フォルダ）/（サイト名）/app/public/wp-content/themes/welldone←※テーマ名称

###ソースコード
index.php

PHP
1	<?php get_header(); ?>
2	<main>
3		MAIN
4	</main>
5	<?php get_footer(); ?>

header.php

PHP
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>sample</title>
6	<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
7	<link rel="stylesheet" href="style.css">
8</head>
9<body>
10	<header>
11		HEADER
12	</header><!-- /header -->

style.css

css
1/*
2Theme name: welldone
3Author: xxx
4Version: 1.0
5*/
6
7@charset "utf-8";
8body{
9	background-color: red;
10}
11/*# sourceMappingURL=style.css.map */

試したこと

・functions.phpは空
・ブラウザのキャシュクリア→NG
・index.php[ページのソースを表示]→style.cssをクリックすると、style.cssの内容ではなくindex.phpが表示される ※画像参照

・index.php,header.php内の文言変更などは反映される。style.cssのみが読み込まれていない様子

補足情報（FW/ツールのバージョンなど）

・ブラウザ：Chrome,Safari
・Local by Flywheelを使用

＝＝【追記】以下、試したが解決せず＝＝＝＝＝

functions.phpに以下を入力→NG

PHP
1<?php
2
3define("DIRE", get_template_directory_uri());
4function add_files(){
5    wp_enqueue_style('welldone_styles', DIRE.'/style.css'); 
6}
7
8add_action('wp_enqueue_scripts', 'add_files');
9?>

※index.phpのソース表示は以下のように変化しましたが、style.cssのリンクをクリックするとやはりindex.phpが表示されます。通常、この部分のリンクをクリックすると画面にはスタイルシートのソースコードが表示されるような気がするのですが、浅学のため思い違いかもしれません...

kei344

2019/08/22 15:46

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

roid10

2019/08/22 15:47

そうですね。ありがとうございました。

行動規範の内容に同意します

回答2件

自己解決

header.phpに

または、wp_enqueue_styleを使用する
※<?php wp_head(); ?>の記述必須

投稿2019/08/22 15:50

roid10

総合スコア8

テーマフォルダまでのパスを指定する必要があります。また、wp_enqueue_style を利用するほうがよいです。

【WordPressでURL（パス）を取得する場合はget_template_directory_uriよりget_theme_file_uriが便利 | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット】
https://glatchdesign.com/blog/web/wordpress/1849

【WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法 | HPcode】
https://haniwaman.com/load-css-js/

【WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。 | WEMO】
https://wemo.tech/205

投稿2019/08/22 11:01

kei344

総合スコア69583

roid10

2019/08/22 11:41

kei344さんありがとうございます。いただいたリンクを参考に、試してみたのですがやはり変化がありません。コメント欄では画像が貼れないようなので、質問の補足情報欄に追記してあります。

kei344

2019/08/22 12:32

get_template_directory_uri はURLを出力する物ですが、提示されたスクリーンショットにはサーバのファイルパスが出力されていますね。 WordPressの管理画面＞設定＞一般のページにある「WordPress アドレス (URL)」にはhttpから始まるURLが設定されていますか？

roid10

2019/08/22 13:04

コメントありがとうございます。該当の欄には、 http://(サイト名).local　と表示されています。

kei344

2019/08/22 13:22

get_stylesheet_directory_uri() でも同じくサーバパスが出ますか。

roid10

2019/08/22 15:35

何度もありがとうございます。結論からいいますと、解決いたしました。 header.phpに <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> と書くことで、style.cssが反映されるようになりました。また、functions.php と wp_enqueue_style を使う方法では、 header.phpでスタイルシートのパスを指定しておかなくても <?php wp_head(); ?>を記述しておけば style.cssが正常に反映されるということも確認いたしました。ヒントをいただけたので、解決までたどり着けました。ありがとうございます。 --- 以下参考 --- ※自分用のまとめと整理も兼ねています【追記の画像でサーバーパスが表示されていた原因について】初めにいただいた以下コメント「テーマフォルダまでのパスを指定する必要があります」を私は「テーマフォルダまでのパスを指定すれば解決する」のだと解釈したので、それにより、header.php内、style.cssの場所を指定するlinkタグのhref欄にPC内での物理的パス（/Users/User/hoge/hogesite/wp-content/〜という形式の）を書いていました。つまり、単に自分で書いたものがそのまま表示されていただけの事でした。誠に申し訳ございません...。【ソース表示してstyle.cssのリンクをクリックすると、index.phpが表示される現象について】今回、サイトの表示確認をローカルwebサーバー(Flywheel)で行っておりますがローカルwebサーバー使用時、「ファイルの場所を直接指定」する時は・PC内での物理的な場所のパス表記（例　/Users/User/hoge/hogesite/wp-content/〜) ではなく・ローカルwebサーバーのURIを使用したパスの表記（例　http://xxxx.local〜）である必要があるということがわかりました。物理的なパス表記ですと、ファイルの場所を認識してくれないらしく最初の質問に書いた「ソース表示してstyle.cssのリンクをクリックすると、index.phpが表示される」というのはその為だったのではないかと予想しました（style.cssの場所が不明となり、そのかわりにindex.phpが表示された？）。

行動規範の内容に同意します

あなたの回答