web-dev-qa-db-ja.com

WordPressエディタTinymceによって作成されたulタグにクラスを追加する方法？

Tinymceによって作成されたulタグのみに特別なスタイルを設定したいのですが、これは投稿とページだけを意味し、このフィルタ tiny_mce_before_init をカスタムスタイルオプションを既存のスタイルドロップダウンに追加する方法の例で見つけました。

ワードプレスエディタで作成したulタグにクラスを追加する方法はありますか？

csstinymceeditor
4
Pierre

尋ねる前にWordpress Codexを見ることは常に良い考えです。 TinyMCEカスタムスタイル

<?php
// Insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Use 'mce_buttons' for button row #1, mce_buttons_3' for button row #3
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_before_init_insert_formats( $init_array ) {
    $style_formats = array(
        array(
            'title' => 'Custom UL class', // Title to show in dropdown
            'selector' => 'ul', // Element to add class to
            'classes' => 'custom-ul-class' // CSS class to add
        )
    );
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

エディタで：最初に番号なしリストを作成してからスタイルを適用します。

受け入れ後に更新 。

TinyMCEを通じて追加されたすべての<ul>要素にクラスを追加したい場合は、データベースに挿入または更新する前にそれを実行できます。

<?php
add_filter('wp_insert_post_data', 'my_add_ul_class_on_insert');
function my_add_ul_class_on_insert( $postarr ) {
    $postarr['post_content'] = str_replace('<ul>', '<ul class="my-custom-class">', $postarr['post_content'] );
    return $postarr;
}

<ul>要素に既に属性が含まれている場合は、str_replace()関数needleを調整します。あるいはpreg_replace()をそこに使ってください。

13
Max Yudin

それは本当に必要ですか？ the_content（）をラップするように、テーマのpage.phpとsingle.phpを変更してみてください。指定されたクラスまたはIDのdivを持つテンプレートタグ。こちらです：

...
<div id="post_content_from_tinymce">
<?php the_content(); ?>
</div>
...

そしてあなたのスタイルシートでそのIDを使用してください：

#post_content_from_tinymces ul{ ... }

これはほとんどの場合に考えられるかもしれません。カスタムクラスをULに追加する可能性を追加するには、tinyMCEプラグインを書く必要がありますが、それでも、投稿/ページを作成するたびに追加のボタンをクリックしてスタイルを設定する必要があります。

3
david.binda