当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムや WordSlack #docs チャンネルでお知らせください。</p>

関数リファレンス/add editor style

提供: WordPress Codex 日本語版
移動先: 案内、 検索

テーマ開発者は自分のスタイルシートファイルを TinyMCE ビジュアルエディターへ関連付けできます。この関数は $stylesheet 引数に指定されたファイルを現在のテーマディレクトリから相対パスで探し、存在すれば関連付けます。$stylesheet 引数が指定されない場合はテーマディレクトリ内でデフォルトのエディター用スタイルシート editor-style.css を探し、存在すれば関連付けます。

子テーマ が使用されている場合、1回の関数呼び出しで、子テーマと親テーマ両方のテーマディレクトリについて同じ相対パスでファイルを探し、存在すれば両方のファイルと関連付けます。

テーマディレクトリとは別の場所、たとえばプラグインディレクトリ内のスタイルシートと関連付ける場合には、代わりに mce_css フックにアタッチした フィルター を使用してください。

注意: この関数の子テーマに対する動きは バージョン 3.4 で変更され、バージョン 3.5 で戻されました。以下の 参考 セクションを参照してください。

使い方

<?php add_editor_style( $stylesheet ); ?>

パラメータ

$stylesheet
（文字列/配列） （オプション） 現在のテーマディレクトリから相対パスで指定されたスタイルシートファイル、または複数のスタイルシートファイルへのリンクを含む配列。
初期値： 'editor-style.css'

子テーマ が使用されている場合、現在の子テーマと親テーマ両方のテーマディレクトリが調べられます(説明 セクションを参照)。

バージョン3.6以降では、http または https URL (例: http://example/style.css) を使用できます。しかしルートからの相対 URL は機能しません。例えば /editor-style.css は editor-style.css と同じものとして処理されます。

クエリ文字列付きのパス (例: editor-style?ver=…) は追加に失敗します。代わりに同等の http(s) URL を使用してください。例: http://example/editor-style.css?ver=… ("完全な" URL を作成するには、get_stylesheet_directory_uri() や home_url() が便利です)。

追加されたスタイルシートを調べるには get_editor_stylesheets() を呼び出してください。

戻り値

(void) 
この関数は値を戻しません。

用例

基本的な使い方

まず、現在のテーマの functions.php に以下のコードを追加してください。 

<?php
/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
?>

次に、テーマのルートディレクトリにファイル custom-editor-style.css を作成します。このファイルに追加されたすべての CSS ルールが TinyMCE ビジュアルエディターに反映されます。以下はファイル内容の例です。 

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

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

Googleフォントの使用

Google Fonts API では CSSファイルに対して、複数のタイプフェースをコンマで区切って指定できる単一の URL が提供されています。URL 内のコンマは add_editor_style に文字列として渡す前にエンコードする必要があります。 

<?php
/**
 * Registers an editor stylesheet for the current theme.
 */
function wpdocs_theme_add_editor_styles() {
    $font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Lato:300,400,700' );
    add_editor_style( $font_url );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );
?>

テーマのスタイルの再利用

エディター用カスタムスタイルシートファイル内で @import CSS ルールを使用して、テーマスタイルシート ファイルからスタイルを再利用できます。上の例において、custom-editor-style.css ファイル内を次のコードで置き換えてください。 

@import url( 'style.css' );

/* 必要に応じてエディタのフィールドを見た目よく、かつ壊さないように上書きします。*/
body { padding: 0; background: #fff; }

必要であれば、'style.css' を、custom-editor-style.css ファイルからの相対パスで指定したテーマのスタイルシートに変更してください。

投稿タイプによるスタイルの選択

編集する投稿タイプに応じてエディター用カスタムスタイルシートを関連付けるには、テーマの functions.php ファイル内で以下のコードを使用してください。ここでは、editor-style-{投稿タイプ}.css 形式のスタイルシートファイルが、テーマディレクトリ内に存在すると仮定しています。 

<?php
/**
 * Registers an editor stylesheet for the current theme.
 *
 * @global WP_Post $post Global post object.
 */
function wpdocs_theme_add_editor_styles() {
    global $post;
 
    $my_post_type = 'posttype';
 
    // 新規投稿 (initフック).
    if ( stristr( $_SERVER['REQUEST_URI'], 'post-new.php' ) !== false
            && ( isset( $_GET['post_type'] ) === true && $my_post_type == $_GET['post_type'] ) ) {
        add_editor_style( get_stylesheet_directory_uri()
            . '/css/editor-style-' . $my_post_type . '.css' );
    }
 
    // 投稿の編集 (pre_get_postsフック).
    if ( stristr( $_SERVER['REQUEST_URI'], 'post.php' ) !== false
            && is_object( $post )
            && $my_post_type == get_post_type( $post->ID ) ) {
        add_editor_style( get_stylesheet_directory_uri()
            . '/css/editor-style-' . $my_post_type . '.css' );
    }
}
add_action( 'init',          'wpdocs_theme_add_editor_styles' );
add_action( 'pre_get_posts', 'wpdocs_theme_add_editor_styles' );
?>

注意: 投稿タイプがすでに決定していることを pre_get_posts アクションフック で確認していますが、このとき、まだ TinyMCE は構成されていません。pre_get posts フックは新規投稿の作成では実行されないため、既存の投稿の編集と同じ動きを実現するには init フックと組み合わせて使用する必要があります。


参考

  • バージョン 3.4 では、WordPress が file_exists() を使用して $stylesheet 引数で指定されたスタイルシートファイルへのパスを確認できた場合のみファイルを関連付けるため、"editor.css?version=1.0" のような引数は動作しません。バージョン 3.4 以前では、これは子テーマのみに適用されます。
  • バージョン 3.4 では、子テーマからスタイルシートファイルを追加しても、同じ相対パスのスタイルシートファイルが親テーマに追加されている場合は関連付けできませんでした。バージョン 3.5 では修正され、WordPress は親テーマと子テーマ両方のテーマディレクトリでファイルを検索しますす。これはバージョン 3.4 以前と同様の動きです。この変更の詳細については ticket #21026 を参照してください。

変更履歴

ソースファイル

add_editor_style() は wp-includes/theme.php にあります。

リファレンス

リソース


テーマサポート: add_theme_support(), remove_theme_support(), current_theme_supports()
テーマ機能: サイドバー, ナビゲーションメニュー, 投稿フォーマット, 投稿サムネイル, カスタム背景, カスタムヘッダー, 自動フィードリンク, html5, コンテンツ幅, editor-style



関数リファレンス、テンプレートタグ目次もご覧ください。


最新英語版： WordPress Codex » Function Reference/add editor style （最新版との差分）

「http://wpdocs.mobile.osdn.jp/wiki/index.php?title=関数リファレンス/add_editor_style&oldid=12385」から取得