WordPressでビジュアルエディターのスタイルを投稿タイプ毎に変える方法

WordPressではテーマディレクトリ直下に「editor-style.css」を置き、functions.phpに以下の記述をすると、記事編集画面のビジュアルエディター内に「editor-style.css」の内容が反映されます。

function my_add_editor_style() {
  add_editor_style();
}
add_action( 'after_setup_theme', 'my_add_editor_style', 20 );

このような感じになります。より投稿が編集しやすくなりますね。

この設定を行うと管理画面内すべてのビジュアルエディターにスタイルが適応されますが、スタイルを投稿や固定ページ、カスタム投稿タイプ毎に変えたい場合があります。

その場合は、「editor-style.css」で以下の様に記述をしましょう。

.post-type-post p{
/* 投稿のｐのみに適応されるスタイル */
}

.post-type-page p{
/* 固定ページのｐのみに適応されるスタイル */
}

.post-type-movie p{
/* カスタム投稿タイプ「movie」のｐのみに適応されるスタイル */
}

管理画面のbodyには、「post-type-{投稿タイプ名}」という形式のクラスが付与されるので、このクラスを使用してCSSをセレクトすればスタイルの切り分けが可能です。

ところで、functions.phpに記述したeditor_styleアクションでは以下の様に記述することで読み込むcssのファイル名を変更できます。

add_editor_style('custom-editor-style.css');

ですのでCSSは投稿タイプ毎に用意して、管理画面で条件分岐することも可能だと思うのですが、ちょっと試してもうまくいきませんでした。今度きちんと調べてみようと思います。

ではでは