カスタム投稿タイプの投稿画面やビジュアルエディタの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となります。
出力された画面
投稿画面はこんな感じになりました。