カスタム投稿タイプの投稿画面やビジュアルエディタのcssを調整する

ビジュアルエディタをカスタマイズする案件があったのでメモ。
カスタム投稿タイプごとに効かせるcss振り分けるのかな・・とか思ってましたが今回はcssだけでなんとかなりました。

functions.php

<?php
//カスタム投稿タイプ newsを作る 
register_post_type(
  'news',
  array(
    'label' => 'ニュース',
    'public' => true,
    'menu_position' => 7,
    'has_archive' => true,
    'query_var' => false,
    'rewrite' => array(
      'with_front' => false,
      'slug' => ''
    ),
  )
);
function org_caution_title_head($post)
{
  //カスタム投稿タイプがnewsの時のみにスタイルを効かせる 
  //newsだけメディアを追加ボタンを非表示にしている 
  if ($post->post_type == "news") {
    echo '<style> .insert-media.add_media { display:none } </style>' . PHP_EOL;
  }
}
add_action('edit_form_top', org_caution_title_head);
//ビジュアルエディタcss 
//add_editor_styleで管理画面のビジュアルエディタにcssを効かせられる 
add_editor_style('/css/custom-editor-style.css');
?>

custom-editor-style.css

  /* カスタム投稿タイプにのみ効かせたい場合は .post-type-〇〇〇  〇〇〇にはカスタム投稿タイプが入る */
  .post-type-news {
    font-family: Arial, sans-serif
  }

  .post-type-news h1 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    border-bottom: 2px solid #55b5de;
  }

  .post-type-news ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .post-type-news li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 3px;
  }

  .post-type-news li:before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #55b5de;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

.post-type-〇〇〇でカスタム投稿だけに絞ることができました。
今回はnewsというカスタム投稿タイプを作ったので.post-type-newsとなります。

出力された画面

投稿画面はこんな感じになりました。
 

普通の投稿

 

 

カスタム投稿タイプ ニュース

 

参考サイト

関数リファレンス/add editor style – WordPress Codex 日本語版