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

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

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

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

PHP

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

CSS

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

Q&A

解決済

2回答

10155閲覧

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

roid10

総合スコア8

WordPress

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

PHP

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

CSS

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

0グッド

1クリップ

投稿2019/08/22 10:53

編集2019/08/22 11:39

よろしくお願いします。

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

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が表示されます。通常、この部分のリンクをクリックすると画面にはスタイルシートのソースコードが表示されるような気がするのですが、浅学のため思い違いかもしれません...
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/08/22 15:46

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

2019/08/22 15:47

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

回答2

0

自己解決

header.phpに

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">と書く

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

投稿2019/08/22 15:50

roid10

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

テーマフォルダまでのパスを指定する必要があります。また、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

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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が表示された?)。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問