🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
WordPress

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

PHP

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

CSS

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

Q&A

解決済

2回答

597閲覧

急にWPのcssが反映されなくなりました。

skr

総合スコア8

WordPress

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

PHP

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

CSS

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

0グッド

0クリップ

投稿2021/03/24 06:44

編集2021/03/24 07:17

前提・実現したいこと

WPのfunctions.phpを触っている後に、追加した分のcssが反映されなくなってしまいました。
どこか抜けてしまった箇所などありますでしょうか。

該当のソースコード

php

1<?php 2 add_action( 'wp_enqueue_scripts', 'my_enqueue_style_child' ); 3 function my_enqueue_style_child() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri() ); 5 } 6?>

試したこと

jsを反映させようと色々いじったのが原因だと考えています。
とりあえず、js用のコードは消しました。

追加

試しにcssで背景の色を変える、リンクの文字の色を変える、の2つをしていました。
何度か更新を押すと背景の色が5分後くらいに反映されました。
リンクの文字の色は反映されるどころか、初期の青色リンクになりました。

コードの問題ではない感じでしょうか汗
もうよくわかりません。

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

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

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

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

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

K_3578

2021/03/24 06:49

function「s」.phpでは?
skr

2021/03/24 07:19

あ、本当ですね。修正しました。 実際のファイルの方は大丈夫です。
K_3578

2021/03/24 07:21

今回は原因違ったみたいですけどこういうミス一つで動かなくなるのでお気を付けください。
skr

2021/03/24 07:23

ありがとうございます。気をつけます汗
K_3578

2021/03/24 07:27

cssのソースコードとかも書いてないので特に回答出来そうにないのですが、 効いてるかどうかを調べるためにも検証ツール使ってみてはどうでしょうか。
skr

2021/03/24 07:38

nav a { color: #555555; } に三角の注意マークが表示され、コードが線で消されています。 こちらの原因を更に調べる方法がありますでしょうか。(Chromeです) 他にエラー、警告、ログ等はありませんでした。
K_3578

2021/03/24 07:42

注意マークでコードに打ち消し線が入ってるのは恐らく記述ミスか何かでそのstyleが適用されてないって事です。実物を私が見ているわけではないのでこれ以上はわかりません。
skr

2021/03/24 07:52

この調子だと記述ミスな気がするので、もう一度よく見てみます。 ご丁寧にありがとうございました!
K_3578

2021/03/24 07:54

はい。一応前もって言っておきますが仮にご自分で解決出来た場合は「第三者が理解出来る内容」で 自己解決としてクローズお願いします。
skr

2021/03/24 08:00

ありがとうございます。 念の為検証画面もスクショしながら行っております。 早く解決できますように汗
K_3578

2021/05/26 06:10

一体何が聞きたかったんだろうなぁ・・・。 (たまたま過去質問漁ってて見かけたので質問者に届けばと思ってのコメント)
guest

回答2

0

自己解決

amiya-se様のおっしゃる通り、キャッシュが原因だったようです。
headに記入したstyle.cssの読み込み箇所を自動更新へ変更すると反映されるようになりました。
====================

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" />

====================
WordPressでstyle.cssが反映されない時の対処法

投稿2021/03/24 16:14

編集2021/03/24 16:22
skr

総合スコア8

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

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

K_3578

2021/04/02 03:35 編集

>@K_3578様 よろしけば、こちらのコメント欄で一度確認させて頂いても宜しいでしょうか。 私用がありますので、4日以内に返させて頂くことになるのですが、、、汗(こちらの都合で申し訳ございません。@K_3578様が面倒でなければ是非ご意見頂きたいです。) (amiya-seさんの回答欄だと本人様に通知行って邪魔だと思われるのでこちらにコメントしますね) ちょっと言ってることが理解出来ないですが、何か確認したいことがあるならどうぞ、私の分かる範囲で ならお答えします。
K_3578

2021/07/20 03:24 編集

必要ないコメントなので削除
guest

0

何度か更新を押すと背景の色が5分後くらいに反映されました。

CSSの変更を確認するときはキャッシュクリアしながら作業していますよ。
chromeの場合は「Ctrl+F5」を押すなどです。

colorで適用されない場合は全角半角の打ち間違い、全角スペース、桁数が違う(今回は大丈夫そう)
あとはスペースくらいでしょうか。
動く場所でCSSを書いてコピペすると動くこともあります。(気づけないミスをしているケースです)

投稿2021/03/24 09:14

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

skr

2021/03/24 16:25 編集

colorの前スペースの空き具合でした。他のスペースからコピペしました。 nav a { --color: #555555; } ↓ nav a { ----color: #555555; } ご丁寧にご回答ありがとうございます。 今後このようなことがあった場合、まずは「半角全角、スペース、桁数、:、;」等をよく見返してみます。
skr

2021/03/24 15:11

キャッシュクリアはしたことがなかったです。 「Ctrl+5」使っていきます!
skr

2021/03/24 15:29

度々コメント申し訳ございません。 キャッシュクリアをした後、cssを変更したのですが反映されませんでした。 ファイルの全コードをvs codeにコピペすると反映しました。 どこか記入ミスがないか、もう一度探してみます。
退会済みユーザー

退会済みユーザー

2021/03/25 03:24

@skr様 問題解消されたのですね。おめでとうございます! 解決方法も載せていただき、ありがとうございます! 夜中に返信できなくてすみません。 chromeだともう一個上のちょっとめんどくさい方法があって、 検証ツール(F12)を出してからリロードボタンの上で右クリック、 「キャッシュの消去とハード再読み込み」 僕はいつもこちらを使っているのですが、 使用ブラウザを聞き忘れたのでお伝えし忘れておりました。 自動更新を見つけられたようなので、結果的に良かったみたいですね。
K_3578

2021/03/25 03:29

流石にキャッシュじゃないだろうと思って指摘してなかったんですけど まさかの結末。疑問に思ったらとりあえず言っとくもんですな。(+1)
退会済みユーザー

退会済みユーザー

2021/03/25 03:51

@K_3578様 > 何度か更新を押すと背景の色が5分後くらいに反映されました。 ここかなぁ、更新押してるだけで反映されたみたいなので、 キャッシュの有効時間が5分くらいなのかな?と。 とりあえず言ったもん勝ちですよっ※勝ってないけどもw
skr

2021/03/25 06:53

@amiya-se様 私こそ深夜に何度もすみませんでした! ご返信ありがとうございます! 私もChromeなので 検証ツール(F12)を出してからリロードボタンの上で右クリック、 「キャッシュの消去とハード再読み込み」 教えて頂きありがたいです。 ちなみに、自動更新とどのように使い分けたら良いでしょうか。
K_3578

2021/03/25 07:08

amiya-seさんじゃないですけど普段は自動更新に任せて、今回みたいにcss反映されなくなったら手動 試したら良いのでは。 余談ですが 因みになんで自動更新される仕組みになってるかは解りますか?
skr

2021/03/25 07:16

なるほど。 お恥ずかしながら、仕組みは理解していません。
K_3578

2021/03/25 07:24

ヒントは変更後に使用されているfilemtime関数です。 この関数がどういう事をしてくれるか理解すれば自ずと答えは見えてきますよ。
退会済みユーザー

退会済みユーザー

2021/03/25 07:24

@skr様 いえいえ、ふつうに寝ているので大丈夫ですw 自動更新との違いですが、 自動更新はパラメータを付与して「違うファイルだと認識させて」読み込みさせるはずなので、 パラメータが変わるたびにファイルがどんどん増えていくデメリットがあったと思います。 メリットは「おきゃくさんに『キャッシュクリアしてください』と言わなくても済む」 「キャッシュの消去とハード再読み込み」 こちらはデータを消してから読み込むのでファイルが増えないというメリットがあったはず。 デメリットは「手動なのでめんどくさい、他の人にも『キャッシュクリアして』と伝える必要がある」 使い分けは、開発中は手動にして、運用段階になったら自動にするとかかな。 逆でも良いのだけどね。開発中は頻繁に変えるから自動読み込み、 運用中はほぼ変えないだろうから手動にする…とか。
退会済みユーザー

退会済みユーザー

2021/03/25 07:28

@K_3578様 いつもありがとうございます! 増加する通信量と端末への不要なデータの蓄積を考えると、 手動の方が色々とやさしいのかなぁとか考えたりします。
K_3578

2021/03/25 07:32

@amiya-seさん まぁ手間といってもcss書き換えたらちょちょいとやる程度なので自分も手動でいい気はします。 なんか記事見る感じ「こうすれば解決します!」しか書いてないので、 正直微妙な記事だなぁと思ったので質問者さんに理解を深めて貰おうと思ってます(お節介)
退会済みユーザー

退会済みユーザー

2021/03/25 07:52

@K_3578様 teratailの過去記事で問題解決したことが無いので、僕はこういうものだと思ってました。 ※蓄積型ではなく、消費型に近い認識です。まぁ勿体ないオバケが出そうだなぁと感じていますが。 こちらの質問者様のお節介はお任せして他の方のお節介をして参りますね~ ではではっ
K_3578

2021/03/25 07:58

@amiya-seさん 勘違いされているかもしれないので一応言っておきますが・・・。 自分が微妙な記事と言ったのは質問者さんが自己解決で貼っていたサイトの内容です。 amiya-seさんの回答を批判している訳ではないのでご了承ください・・・。 (わかりにくい表現で申し訳ないです!)
退会済みユーザー

退会済みユーザー

2021/03/25 08:18

@K_3578様 なるほどっ、なんか珍しく辛口だと思ったら、参照先の記事でしたか~。 勘違いしておりましたっ、ご指摘ありがとうございます! 参照先の記事はおそらく、自分用のメモくらいの感覚なのかなぁと感じました。 あまり伸びるとログ見るのが大変になるでしょうから、 この辺りで自重しておきますね~ ではではっ
skr

2021/03/25 15:49

お返事遅くなり申し訳ございません。 お二方の丁寧なご説明に感謝しています!わかりやすいご説明をヒントに、もう少し自分なりに噛み砕いて使いこなせるように整理していきますね。 今後ともよろしくお願いします。
K_3578

2021/03/26 00:46

@質問者さん 自動更新される仕組み わかりましたかー?
skr

2021/03/26 01:04

失礼しました。まだfilemtime関数について調べておりません。 理解次第、回答に追加します! @K_3578様 よろしけば、こちらのコメント欄で一度確認させて頂いても宜しいでしょうか。 私用がありますので、4日以内に返させて頂くことになるのですが、、、汗(こちらの都合で申し訳ございません。@K_3578様が面倒でなければ是非ご意見頂きたいです。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問