こんにちは。
毎日WordPressのしごとをやってると、たまによくわからない仕様が届きます。
今回は「投稿・固定ページ・カスタム投稿の全てで見出しタグの装飾が異なる」という面倒くさい状況に加え、「それぞれに応じたエディタスタイルをビジュアルエディタに適用してもらいたい」というものでした。
やりたいことを整理し、仕組みを考える
さっきも言ったとおりで、投稿タイプ毎に異なるエディタスタイルを定義したいのです。
そのためには、
- 現在開いてるエディタが編集しようとしている投稿タイプを調べる
- 1で調べた情報をもとに異なるエディタスタイル用CSSを読み込ませる
というふうにすればOKそうですね。
まずは投稿タイプを調べる方法ですが、これは「get_current_screen()」という関数が有りますのでこれを使います。
この関数は WP Screen オブジェクトか、失敗した場合は null を返します。
実際にどんな内容が返ってくるかは Function Reference/get current screen « WordPress Codex に詳しく載っています。
今回は現在の投稿タイプで振り分けるので、そのうちの「post_type」を利用します。
まとめるとこんな感じです。
1 2 3 4 5 6 7 8 9 |
$current_screen = get_current_screen(); switch ($current_screen->post_type) { case 'post' : // 投稿タイプが投稿(post)のとき break; case 'page' : // 投稿タイプが固定ページ(page)のとき break; } |
続いて、エディタスタイルを読み込ませる方法ですが、これは add_editor_style() でやってることをそのまま再現すれば良さそうです。
Codexで調べてみると、どうやら theme.php のなかに有るらしいです。これがその部分。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function add_editor_style( $stylesheet = 'editor-style.css' ) { add_theme_support( 'editor-style' ); if ( ! is_admin() ) return; global $editor_styles; $editor_styles = (array) $editor_styles; $stylesheet = (array) $stylesheet; if ( is_rtl() ) { $rtl_stylesheet = str_replace('.css', '-rtl.css', $stylesheet[0]); $stylesheet[] = $rtl_stylesheet; } $editor_styles = array_merge( $editor_styles, $stylesheet ); } |
ここから必要なコードを拝借してくれば良さげですね。
フックを作る
ということでさっきの振り分けと組合せて出来上がったのがこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function set_custom_editorstyle() { // editor-style を有効化 add_theme_support('editor-style'); global $editor_styles; $stylesheet = false; $current_screen = get_current_screen(); switch ($current_screen->post_type) { case 'post' : $stylesheet = 'editor-style-post.css'; break; case 'page' : $stylesheet = 'editor-style-page.css'; break; case 'item' : $stylesheet = 'editor-style-item.css'; break; } $editor_styles = (array) $editor_styles; $stylesheet = (array) $stylesheet; $editor_styles = array_merge($editor_styles,$stylesheet); } add_action('current_screen','set_custom_editorstyle'); |
これで投稿タイプごとに異なるCSSを読み込ませることができますので、場所ごとに見た目が異なるスタイルを適用したい場合でもビジュアルエディタ側もそれに合わせることができそうです。
おまけ。
なんかこんな面倒臭いことをしなくても、分岐の後はそれぞれに応じて add_editor_style() を呼んじゃってもOKだったようです。
Killer hacks to enhance WordPress editor | CatsWhoCode.com
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function my_editor_style() { global $current_screen; switch ($current_screen->post_type) { case 'post': add_editor_style('editor-style-post.css'); break; case 'page': add_editor_style('editor-style-page.css'); break; case 'portfolio': add_editor_style('editor-style-portfolio.css'); break; } } add_action( 'admin_head', 'my_editor_style' ); |
はやくいってよねぇ〜(怪傑ギリジン風に)
クリスマスに失礼します。
初歩的な質問だと思いますが、「editor-style-post.css」などのcssファイルはどこに置けばいいのでしょうか。なにとぞよろしくお願い致します。メリークリスマス!!
ryo sakuragiさん、コメントありがとうございます。
読み込ませるエディタスタイル用CSSファイルはテーマフォルダの中、 functions.php と同じ階層に設置すれば大丈夫だったはずです。
それでは良いクリスマスを!