Q&A
editor-style.cssはどこのディレクトリに存在しますか。
前提・実現したいこと
WordPeressでオリジナルテーマを作成していますが、エディタ用のCSSの読み込みができません。
発生している問題・エラーメッセージ
editor-style.cssの取り込みができない。
該当のソースコード
####functions.php
<?php function mytheme_setup() { // (C) のCSSを有効化 add_theme_support( 'wp-block-styles' ); // 縦横比を維持したレスポンシブを有効化 add_theme_support( 'responsive-embeds' ); // (E) のCSSを有効化&エディタに取り込み add_theme_support( "ditor-styles" ); add_editor_style( "editor-style.css" ); } add_action( 'after_setup_theme','mytheme_setup' ); function mytheme_enqueue() { // (D) のCSSを読み込み wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), filemtime(get_theme_file_path('style.css')) ); } add_action( 'wp_enqueue_scripts','mytheme_enqueue' ); ####editor-style.css（読み込みたいCSS） @charset "UTF-8" ; /* 変数 */ :root{ --f1: 2.44em; /* 39.04px */ --f2: 1.95em; /* 31.2px */ --f3: 1.56em; /* 24.96px */ --f4: 1.25em; /* 20px */ --f5: 1em; /* 16px */ --f6: 0.8em; /* 12.8px */ --basecolor: #63a211; /* 基本色 */ } /* フォント */ body{ font-family: sans-serif; } p{ line-height: 1.8; font-size: var(--f5); } h1{ font-size: var(--f1); } h2{ font-size: var(--f2); } h3{ font-size: var(--f3); } h4{ font-size: var(--f4); } h5{ font-size: var(--f5); } h6{ font-size: var(--f6); } h2{ border-left: solid 14px var(--basecolor); padding-left: 14px; } ```ここに言語名を入力 ソースコード PHP ``` ### 試したこと プラグインのキャッシュ機能の削除。 ブラウザにキャッシュの削除(FireFox) サーバーにキャッシュの削除 スーパーリロード 別のブラウザで試す（Chrome） ### 補足情報（FW/ツールのバージョンなど） ・WordPressのテーマエディターを使ってコードを入力してます。 ・OS：macOS Catalina ver.10.15.4 ・PC：MacBookPro (13inch,2017,Two Thunderbolt 3 ports) ・サーバー：Xサーバー ・プラウザ：FireFox FireFoxのデベロッパーツールで、インスペクターからeditor-style.cssに含まれている文字「変数」などを検索しても出てこず、反映されていません。また、functions.phpの add_theme_support( 'responsive-embeds' ); の部分の縦横比を維持したレスポンシブを有効化機能も働いていないため、以下のコードが機能していないと思われます。 function mytheme_setup() { // (C) のCSSを有効化 add_theme_support( 'wp-block-styles' ); // 縦横比を維持したレスポンシブを有効化 add_theme_support( 'responsive-embeds' ); // (E) のCSSを有効化&エディタに取り込み add_theme_support( "ditor-styles" ); add_editor_style( "editor-style.css" ); } アドバイス頂けたら幸いです。
ドメイン/wp-content/public_html/wp-content/themes/mytheme/
に存在してます。editor-style.cssと同じ階層に、functions.php、index.php、style.css と画像ファイルのscreenshot.jpgが存在してます。
ご提示のfunctions.phpとeditor-style.cssを使用してみましたが、正常に動作する（h2が装飾される）ことを確認しましたので、提示のコードの範囲内では問題がないように見受けられます。
ちなみに、Firefoxの開発者ツールの「ネットワーク」タブにもeditor-style.cssは表示されていませんか？
返事が遅くなりすみません。ありがとうございます。
Firefoxの開発者ツールの「ネットワーク」タブにはeditor-style.cssは表示されていません。
style.css?ver=1586595290
というファイルが３つ記載されています。発生源はstylesheetと書いてあります。
転送量の欄にキャッシュ、とかかれているのですが、もしかしてこれが問題なのでしょうか？
質問ではeditor-style.cssを適用させたいという事でしたが、おそらくwordpressレッスンブック5.Xの3-2の内容以降でfunctions.phpが作動しないという事ですよね？私もほぼ同じ日にこの問題に直面し、ネットをさまよい、この質問を見つけ、模索してきました。
それが、たった今解決しました。原因はfunctions.phpが正解なのにアップロードしたファイルがfunction.phpになっていました。(笑) phpのコードでfunctionという単語を繰り返し入力するので、ファイルを作成する際もfunctionになっていたのです。正解はfunctionsです。私はこれでこの教科書の3-2以降に進めました。一度確かめて見て下さい。
全く同じ問題だったので、解決した勢いで書き込んでしまいましたが、上記の記述ではfunctions.phpになっていますね・・・。あくまで私の場合です。参考にして頂けたら幸いです。
何度も失礼します。もう一度hirotoさんの載せているソースコードを確認したところ一つ間違いを見つけました。
// (E) のCSSを有効化&エディタに取り込み
add_theme_support( "ditor-styles" );のところなんですが、
ditor-stylesになっています。正解はeditor-stylesです。
いずれにせよ、どこかの記述ミスではないでしょうか。
どうやらfunction.phpは少しでも間違いあると動かないみたいです。連投失礼致しました。
poyonn様
ありがとうございます！！function.phpとditor-styles"を修正してみようと思います！
ちょっと今すぐ取り組める環境にないので、明日になるかと思いますが、良いご報告ができるよう頑張ります！
本当にありがとうございます！
wordpressレッスンブック5.Xの3-2です。
そこにeditor-style.cssが表示されていないのであれば、そうですね、推察されているとおり、根本的にcssが読み込まれていない状況だと思われます。（他のcssファイルのこと（キャッシュ表記）は今は気にしなくていいと思います）
ひとつ確認ですが、エディタはGutenbergを使ってらっしゃいますよね？
であれば、申し訳ないですが、私はお手上げです。他の方のコメントで進展があることをお祈りします。
連絡が遅くなりすみません。
Gutenbergを使っていました。
function.phpとditor-stylesを修正したのですが、反映されないため、別のところに原因があるような気がします。
アドバイスありがとうございます。
ここが関係あるかわかりませんが、もう一つ教科書とは異なるところを見つけました。
hitoroさんはこのように記載していますが、
(editorは既に修正しているものとみなしています。)
// (E) のCSSを有効化&エディタに取り込み
add_theme_support( "editor-styles" );
add_editor_style( "editor-style.css" );
教科書では、'editor-styles' 'editor-style.css'
と、シングルコーテションで囲っています。
よろしくお願い致します。
返信が遅くなり大変申し訳ありません。
ご指摘いただいた箇所も修正してみたのですが、やはり読み込めないので、まだ別のところを間違えている気がします。
泥沼にはまってしまったので、この本でのテーマ作成は一度やめてべつの学習に切り替えようと思います。
いろいろとアドバイスいただいたにもかかわらず解決できずすみません。
ありがとうございました。
あなたの回答
tips
プレビュー
