Wordpress投稿画面 カスタムフィールドのレイアウトをカスタマイズしたい

Question

functions.phpに直接書く形で、カスタムフィールドを挿入していますが
各項目inputやtextareaサイズを情報量によって任意に小さくしているので
↓この画面のように、余白が多くなってしまいます。

ソースを見ると該当の部分は class="postbox" というスタイルになっているようですが、
cssに手を加える、または他の方法で、任意にレイアウトを詰めることはできるのでしょうか？
（例）「プロフィール左」の右隣に「プロフィール右」を配置して上部へ詰める

可能であれば、ここもレスポンシブレイアウト対応にしたいと思っています。

<div id="custom-item_name" class="postbox">
中身は省略
</div>
<div id="custom-item_prol" class="postbox">
中身は省略
</div>
<div id="custom-item_pror" class="postbox">
中身は省略
</div>

「custom-item_name」は名前
「custom-item_prol」はプロフィール左
「custom-item_pror」はプロフィール右
カスタムフィールドの値です。

Wordpressカスタマイズ勉強中、プログラミングの知識はありません。
どうぞどなたかご教示のほど宜しくお願いいたします。

Comments

[mamitannyan]

Wordpress　管理画面　投稿画面　functions　カスタムフィールド　postbox　レイアウト変更　カスタマイズ　css　などいろいろな組み合わせで検索して調べましたが、なかなか思うような施策が見つけられず、こちらに質問させていただきました。

Answer 1

他にもやり方は色々あるけど手軽にするのであればadmin_print_stylesをフックして
管理画面のみに任意のsytleタグを出力させます。

functions.php

funciton my_admin_print_styles() {
    echo <<< EOF
<style>
    <div id="custom-item_name" class="postbox">
        中身は省略
    </div>
    ...
</style>
    EOF;
}
add_action('admin_print_styles', 'my_admin_print_styles');

管理画面のみ任意のstylesheetを読み込むという方法もあるので調べてみてください。

Comments

[mamitannyan]

tabuu様　ありがとうございます。
早速、functions.phpにスタイルをご教示いただいたように追記し、各ボックス（項目）のサイズを任意に変更することに成功しました！わかりやすいご指示、本当に感謝いたします。

ただ、ドラッグでそれらの項目を２つ横に並べることができない状況です。
（ドラッグで上下の変更は可能）（各ボックスの横幅は40%にしてみました）

投稿画面は表示オプションで1列か2列か選べるようになっていますが、こちらを3列にしないと横並びにできないのでしょうか？もしご存知でしたらその方法もおわかりになれば教えていただけたら助かります。

[mamitannyan]

自分なりにいろいろ試してみました。
横並びにしたいpostboxはfloatをかけて、postboxの最後はclear:bothするようcssに書き足すことで、投稿画面は希望のレイアウトが完成しました。思い通りにcssが効くことがわかったので、今後はもっとカスタマイズができそうです。tabuuさんのアドバイスのおかげです。ありがとうございました！！

Answer 2

 function add_admin_style(){
      $setUrl = get_template_directory_uri().'/style-admin.css';
      wp_enqueue_style( 'original_admin_style', $setUrl );
    }
    add_action( 'admin_enqueue_scripts', 'add_admin_style' );

#custom-item_name{ width:48%;}
#custom-item_prol, #custom-item_pror
 { width:48%; float:left; margin-right:1%;}

div.postbox:last-of-type{ clear: both;}

この後、タブレット・スマホ用の
レシポンシブレイアウトのcssも追記予定です。