Como formatar campos personalizados ao editar um anexo?

Estou adicionando alguns campos personalizados aos anexos, fazendo aproximadamente isso em um plugin (com base neste tutorial ):

function myplugin_add_attachment_fields( $form_fields, $post ) { $fields = array( 'myplugin_credit' => array( 'label' => 'Credit', 'input' => 'text', 'application' => 'image', 'exclusions' => array('audio', 'video'), 'helps' => "eg 'Bob Ferris'" ) // More fields here. ); foreach($fields as $name => $field_data) { if ( preg_match( "/" . $field_data['application'] . "/", $post->post_mime_type) && ! in_array( $post->post_mime_type, $field_data['exclusions'] ) ) { $field_data['value'] = get_post_meta( $post->ID, '_' . $name, true ); $form_fields[$name] = $field_data; } } return $form_fields; } add_filter( 'attachment_fields_to_edit', 'myplugin_add_attachment_fields', 11, 2 ); 

Tudo isso funciona bem, mas os campos se parecem com isso ao editar um item de mídia:

insira a descrição da imagem aqui

Duas questões:

  1. Como posso fazer com que as etiquetas (“Crédito”, “Editor”) se alinhem verticalmente com o próprio campo de input?

  2. Como posso fazer o campo de input tão amplo quanto os campos padrão na página?

Eu sei como usar o CSS para fazer isso funcionar, mas não sei como fazer isso em um bom WordPress, desde o meu plugin.

ATUALIZAÇÃO: no caso de ajudar alguém, depois de usar a resposta do socki03 para adicionar meu próprio arquivo CSS, coloquei isso dentro para corrigir o problema de layout:

 .compat-attachment-fields th.label { vertical-align: top; } .compat-attachment-fields, .compat-attachment-fields input.text { width: 100%; } .compat-attachment-fields p.help { margin-top: 0.2em; margin-left: 5px; } 

Solutions Collecting From Web of "Como formatar campos personalizados ao editar um anexo?"

Você terá que include e enqueue um novo arquivo CSS para seu plugin no lado do administrador usando admin_enqueue_scripts . E como você pode querer carregar isso em todas as páginas, eu seguiria o primeiro exemplo no Codex (colado aqui):

 function load_custom_wp_admin_style() { wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); wp_enqueue_style( 'custom_wp_admin_css' ); } add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' ); 

Mas em vez da function get_template_directory , você deseja usar a function plugin_dir_url , eu acredito.

 function load_custom_wp_admin_style() { wp_register_style( 'custom_wp_admin_css', plugin_dir_url(__FILE__) . '/admin-style.css', false, '1.0.0' ); wp_enqueue_style( 'custom_wp_admin_css' ); } add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' ); 

Para responder suas duas perguntas, parece que os labels estão alinhados verticalmente em um formato de tabela. Então, se for esse o caso, você precisará alinhar verticalmente o conteúdo até o topo e, em seguida, alterar a largura da tabela e todas as inputs subseqüentes para 100% ou algo assim. Sem inspeção, estou apenas adivinhando a imagem …