どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…
今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。
一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。
まずは管理画面で専用のCSSを読み込むようにします。
function my_admin_style(){
wp_enqueue_style( 'my_admin_style', ［管理画面用cssのフルパスURL］);
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );
※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。
これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。
基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。
カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-［ポスト名］」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。
また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_［英数字］」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。
入力項目には
■ 入力項目 「acf-field-［フィールド名］」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。
背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!
