web-dev-qa-db-ja.com

Add_editor_style（）をソースコードにロードするのが難しい

私はadd_editor_style()を私のサイトのソースコードにうまくロードさせるためにさまざまなことを試みました。私のWordPress WYSIWYGのCSSプロパティをカスタマイズするためにeditor-style.cssを使いたいのですが。しかし、私はそれを動かすことができません。 Chrome Inspectorの[リソース]タブで[スタイルシート]までスクロールしても、editor-style.cssの一覧が表示されません。

これが私がこれまでに試したことです：

  1. 私のテーマディレクトリのルートにeditor-style.cssを置きました
  2. 私のテーマでは<?php add_editor_style(); ?>が私のfunctions.phpファイルに置かれています（これがうまくいくかどうかを確認するために、この関数呼び出しを私のfunctions.phpのeditorスタイルに移動しました。
  3. 私のすべてのCSSとJavaScriptは、私のfunctions.phpファイルに登録されています。

私が気付いていないことに進行中のある種の上書きはありますか？

wysiwygadd-editor-style
2
Matt

functions.phpファイルで直接add_editor_style()を呼び出すべきではありません。代わりに、プラグインとテーマがロードされるまで待つ必要があります。

add_action( 'after_setup_theme', 'add_editor_style' );

after_setup_themeにフックされた関数が既にある場合は、代わりにその中でadd_editor_style()を呼び出すことができます。

それからeditor-style.cssという名前のファイルを作成し、それをあなたのテーマディレクトリに置く必要があります。サブフォルダーに入れてはいけません。それ以外の場合は見つかりません。 editor-style.cssでこのコードを使ってみてください。

body#tinymce.wp-editor { 
    font-family: Arial, Helvetica, sans-serif; 
    margin:10px; 
}

body#tinymce.wp-editor a {
    color: #ffa500;
}

エディタがオレンジ色のリンク付きの別のフォントで表示されている場合は、正しく機能しています。

editor-style.cssはChromeの開発者向けツールの "Stylesheets"セクションにnotと表示されます。これはビジュアルエディタが<iframe>要素にロードされているためです。基本的には新しい投稿ページに埋め込まれている別のWebページにあります。この外部ページにはeditor-style.cssスタイルシートがロードされている場所があります。

editor-style.cssがロードされているかどうか本当にチェックしたい場合は、ビジュアルエディタ本体を右クリックしてInspect Elementfromを選択しますコンテキストメニュー強調表示されている行のすぐ上に、あなたの<link>ファイルを指しているeditor-style.css要素があるはずです。

Screenshot of using Chrome Developer Tools on my own dev site

add_editor_style()のコーデックスページ も読むべきです。

3
shea

parent theme was calling add_editor_style()を見つけるまでに苦労しました

これは、親のremove_actionを編集するのではなく、functions.phpで呼び出しをデキューすることができるようにするためです。

0
s6712