カスタム投稿タイプの投稿画面やビジュアルエディタの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 日本語版

  • コーダーのための計算機