4

WYSIWYG（TinyMCE）エディターにカスタムスタイルを追加するためのチュートリアルをいくつか読みました。それらのどれもWordpressの最新バージョンでは動作しないようです。私はv3.3.2を使用しています。コーデックスからの指示は機能しますが、限られた方法で...

注：100％明確にするために、作成者がカスタムスタイルをテキストに適用するために使用できる[スタイル]ドロップダウンを追加しようとしています。（私の質問を、editor-style.cssを使用してエディター自体のスタイルを設定する方法と混同しないでください...）

私はなんとかコードを機能させることができましたが、のコメントアウトされた行のみを使用しましたmy_mce_before_init()。このバージョンの問題は、ジェネリックを使用してクラスを追加すること<span>です。より強力なバージョンのコード（以下に示す）を使用しようとしていますが、何かが正しくありません。[スタイル]ドロップダウンボックスが表示されますが、空白です。クリックすると、最初の項目は「スタイル」と表示されますが、何もしません。アレイに何か問題があるのではないかと思います。うまくいけば、私よりも知識のある人が私をまっすぐにすることができます。

これが私のテーマのfunctions.phpの関連コードです...

ボタンを追加する方法は次のとおりです。

// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

スタイルを追加する方法は次のとおりです（コメントを外すと機能します）。

//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
    // add classes using a ; separated values
    //$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";

    $temp_array['theme_advanced_styles'] = array(
        array(
            'title' => 'Section Head',
            'block' => 'h3',
            'classes' => 'section-head'
        ),
        array(
            'title' => 'Sub Section Head',
            'block' => 'h4',
            'classes' => 'sub-section-head'
        )       
    );

    $styles_array = json_encode( $temp_array['theme_advanced_styles'] );

            //  THIS IS THE PROBLEM !!!! READ BELOW
    $init_array['theme_advanced_styles'] = $styles_array;

    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

更新：私はそれを理解しました（以下の私の答えを参照してください）。下にスクロールする前に、上のコードでtheme_advanced_styles、間違ったキーであることに注意してください。style_formats私がやっている方法でカスタムスタイルを定義するときです。これはよくある間違いだと思います。

4

3 に答える 3

2

あなたはこの（素晴らしい）チュートリアルを使用しているようです：http
：//alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/ 私にとってはうまくいったので、あなたのコードを私のものと比較しました：それはあなたは

'wrapper' => true

各サブアレイの4番目のパラメーターとして。これは、選択範囲の親要素にクラスを追加し（選択範囲を広げることができます）、クラスを追加する前に正確な選択範囲の周囲に新しい要素を作成しないために必要です。
したがって、段落の一部または2つの段落の一部を選択すると、段落全体が選択されます（2つの段落についてはよくわかりませんが、テストしてください:)が、少なくとも、周囲にインライン要素は作成されません。正確な選択）。

ドキュメント（上記のリンク）から：

wrapper [optional, default = false]
  if set to true, creates a new block-level element
  around any selected block-level elements

私のカスタマイズ：

$style_formats = array(
    array(
        'title' => 'Column',
        'block' => 'div',
        'classes' => 'col',
        'wrapper' => true
    ),
    array(
        'title' => 'Some div with a class',
        'block' => 'div',
        'classes' => 'some_class',
        'wrapper' => true
    ),
    array(
        'title' => 'Title with other CSS',
        'selector' => 'h3',
        'classes' => 'other_style'
    ),
    array(
        'title' => 'Read more link',
        'selector' => 'a',
        'classes' => 'more'
    )
);

それがあなたのために働くことを願っています

于 2012-05-12T20:26:49.667 に答える
2

AHA！

問題が見つかりました。カスタムクラスを定義する2つの異なるバージョンを、設定配列の異なるキーに追加する必要があります。

このバージョン...

"Section Head=section-head;Sub Section Head=sub-section-head";

...の値である必要があります'theme_advanced_styles'。

このバージョンは...

$style_formats = array(
array(
    'title' => 'Column',
    'block' => 'div',
    'classes' => 'col',
    'wrapper' => true
    ),
);

'style_formats'... TinyMCE設定配列のの値である必要があります。

2番目のスタイルに変更しましたが、配列のキーが異なることに気づいていませんでした。

于 2012-05-13T00:48:49.077 に答える
-1

Wordpressは、カスタムスタイルシートをエディターに追加するための関数を提供します：http：//codex.wordpress.org/Function_Reference/add_editor_style

于 2012-05-21T18:24:38.890 に答える