WordPress Snippet

ワードプレスをカスタマイズしよう

TinyMCE ビジュアルエディタに動的なスタイルを適用する

WordPress4.3になってTinyMCEへの動的な、スタイルシートの差し込みが簡単になったようです。

例えば、投稿フォーマットが、aside である場合には、特別なスタイルを適用して、実際に適用されるスタイルと同様のスタイルに表示するといった事が出来そうです。

add_filter ( 'editor_stylesheets', 'test' );
function test($style){
    $id        = get_query_var( 'post' );
    $format= get_post_format( $id );

    if( 'aside'== $format ) {
        $style[]= get_template_directory_uri(). '/extend.css';
    }
return $style;
}

上記のサンプルコードは、投稿フォーマットをaside に設定した場合に、extend.css を インクルードするというものです。

スタイルの反映には、下書きボタンなどを押すと反映します。

エディタの画面と、実際に適用されるスタイルが大きく異なっている場合、編集者の違和感はかなり大きいと思いますので、使いどころがありそうです。

[emulsion_relate_posts]