質問編集履歴

2 「【追記】以下、試したが解決せず」を追加

roid10

roid10 score 0

2019/08/22 20:39  投稿

WordPressの自作テーマでstyle.cssの内容が反映されない。
よろしくお願いします。
### 発生している問題・エラーメッセージ
WordPressの自作テーマでstyle.cssの内容が反映されない。
### フォルダ構成
【現在地】
~/Users/(ユーザー名)/(Flywheel設定フォルダ)/(サイト名)/app/public/wp-content/themes/welldone←※テーマ名称
![イメージ説明](39b6b7db0c880b5895dfd82e6d187f18.png)
###ソースコード
index.php
```PHP
   <?php get_header(); ?>
   <main>
       MAIN
   </main>
   <?php get_footer(); ?>
```
header.php
```PHP
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>sample</title>
   <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <header>
       HEADER
   </header><!-- /header -->
```
style.css
```css
/*
Theme name: welldone
Author: xxx
Version: 1.0
*/
@charset "utf-8";
body{
   background-color: red;
}
/*# sourceMappingURL=style.css.map */
```
### 試したこと
・functions.phpは空
・ブラウザのキャシュクリア→NG
・index.php[ページのソースを表示]→style.cssをクリックすると、style.cssの内容ではなくindex.phpが表示される ※画像参照
![イメージ説明](7ee1e07a64afb16cc7e3e5f13d1c839e.gif)
・index.php,header.php内の文言変更などは反映される。style.cssのみが読み込まれていない様子
### 補足情報(FW/ツールのバージョンなど)
・ブラウザ:Chrome,Safari
・Local by Flywheelを使用
・Local by Flywheelを使用
==【追記】以下、試したが解決せず=====
functions.phpに以下を入力→NG
```PHP
<?php
define("DIRE", get_template_directory_uri());
function add_files(){
   wp_enqueue_style('welldone_styles', DIRE.'/style.css');
}
add_action('wp_enqueue_scripts', 'add_files');
?>
```
※index.phpのソース表示は以下のように変化しましたが、style.cssのリンクをクリックするとやはりindex.phpが表示されます。通常、この部分のリンクをクリックすると画面にはスタイルシートのソースコードが表示されるような気がするのですが、浅学のため思い違いかもしれません...
![イメージ説明](c8a205887cbe6f02a0143623ace7b726.png)
  • PHP

    27961 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CSS

    9820 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • WordPress

    10670 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1 【現在地】表記を修正

roid10

roid10 score 0

2019/08/22 19:57  投稿

WordPressの自作テーマでstyle.cssの内容が反映されない。
よろしくお願いします。
### 発生している問題・エラーメッセージ
WordPressの自作テーマでstyle.cssの内容が反映されない。
### フォルダ構成
【現在地】
~/Users/(ユーザー名)/(Flywheelインストールフォルダ)/(サイト名)/app/public/wp-content/themes/welldone←※テーマ名称
~/Users/(ユーザー名)/(Flywheel設定フォルダ)/(サイト名)/app/public/wp-content/themes/welldone←※テーマ名称
![イメージ説明](39b6b7db0c880b5895dfd82e6d187f18.png)
###ソースコード
index.php
```PHP
   <?php get_header(); ?>
   <main>
       MAIN
   </main>
   <?php get_footer(); ?>
```
header.php
```PHP
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>sample</title>
   <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <header>
       HEADER
   </header><!-- /header -->
```
style.css
```css
/*
Theme name: welldone
Author: xxx
Version: 1.0
*/
@charset "utf-8";
body{
   background-color: red;
}
/*# sourceMappingURL=style.css.map */
```
### 試したこと
・functions.phpは空
・ブラウザのキャシュクリア→NG
・index.php[ページのソースを表示]→style.cssをクリックすると、style.cssの内容ではなくindex.phpが表示される ※画像参照
![イメージ説明](7ee1e07a64afb16cc7e3e5f13d1c839e.gif)
・index.php,header.php内の文言変更などは反映される。style.cssのみが読み込まれていない様子
### 補足情報(FW/ツールのバージョンなど)
・ブラウザ:Chrome,Safari
・Local by Flywheelを使用
  • PHP

    27961 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CSS

    9820 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • WordPress

    10670 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る