web-dev-qa-db-ja.com

コメントのためにフロントエンドのwp_editorにeditor-style.cssスタイルを追加する方法

フロントエンドでコメントに使用されているeditor-style.cssに自分のcss（wp_editorに一致させるため）をどのように適用できますか？

現在、コメント用のビジュアルエディタを有効にするために、ここから のコードを使用しています 。

私の実際のコードはfunctions.php：

add_filter( 'comment_form_defaults', 'custom_comment_form_defaults' );
function custom_comment_form_defaults( $args ) {
    if ( is_user_logged_in() ) {
        $mce_plugins = 'inlinepopups, wordpress, wplink, wpdialogs';
    } else {
        $mce_plugins = 'fullscreen, wordpress';
    }
    add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
    ob_start();
    wp_editor( '', 'comment', array(
        'media_buttons' => false,
        'teeny' => true,
        'textarea_rows' => '7',
        'tinymce' => array( 'plugins' => $mce_plugins ),
        'editor_css' => '<style> p { font-family: Arial } </style>'
    ) );
    $args['comment_field'] = ob_get_clean();
    return $args;
}

コードからわかるように、wp_editorパラメーターを使用してeditor_cssにCSSスタイルを渡していますが、iframeの外側でレンダリングされるため、影響はありません。

あなたはここでそのスタイル宣言とiframe を見ることができます 。

commentsvisual-editorwp-editoriframe
1
jb510

実際には、editor-style.css（または他のスタイルシート）をインクルードすることができますが、 "content_css"の値をtinymceに渡してcssファイルを指すようにするだけです。

wp_editor( 
    $content, 
    'editablecontent', 
    array( 
       'tinymce' => array( 
            'content_css' => get_stylesheet_directory_uri() . '/editor-styles.css' 
       ) 
    );

元のポスターコードは次のようになります。

add_filter( 'comment_form_defaults', 'custom_comment_form_defaults' );
function custom_comment_form_defaults( $args ) {
    if ( is_user_logged_in() ) {
        $mce_plugins = 'inlinepopups, wordpress, wplink, wpdialogs';
    } else {
        $mce_plugins = 'fullscreen, wordpress';
    }
    add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
    ob_start();
    wp_editor( '', 'comment', array(
        'media_buttons' => false,
        'teeny' => true,
        'textarea_rows' => '7',
        'tinymce' => array( 
            'plugins' => $mce_plugins, 
            'content_css' => get_stylesheet_directory_uri() . '/editor-styles.css'
        )
    ) );
    $args['comment_field'] = ob_get_clean();
    return $args;
}
6
Randall Runnels

ここではスタイルシートファイルにリンクできません。代わりに次のようにインラインCSSを追加できます。これに加えて、カスタムクラスを追加できます。これを使用してメインCSSファイルにCSSを記述できます。

$mystyle = '<style type="text/css">
           body{margin:0;padding:0}
           </style>';    

$settings = array(
    'editor_css' => $mystyle, 
    'editor_class' => 'myclass'
);
wp_editor($content, $editor_id, $settings );
2
Md Toufiqul Islam

フロントエンドでtinymce設定を渡すとWP 3.9.1でロードに失敗しますinlinepopups何らかの理由でプラグイン。

そのため、グローバル変数を介してエディタスタイルを設定でき、プラグインをロードするために使用するロジックが壊れることはありません。

$GLOBALS['editor_styles'] = array(get_stylesheet_directory_uri() . '/css/editor_style.css');
0
Dan

私はゲスト投稿用に作成した形式でwp_editor（）を使用しています。背景に必要なスタイルを設定するために、CSSに以下を追加しました。

.wp_themeSkin iframe{
    background: #FFF !important;
}

これはフォームに追加されている他のCSSを上書きすることを強制します。

0
Micah