Estilizar columnas personalizadas en paneles de administración (especialmente para ajustar anchos de celda)

Question

Estilizar columnas personalizadas en paneles de administración (especialmente para ajustar anchos de celda)

16 nov 2011, 14:10:48

Vistas: 31.3K

Votos: 19

Estoy usando WordPress como CMS para un proyecto que hace uso extensivo de custom post types. Necesito mostrar columnas en los paneles de administración para cada tipo de contenido personalizado de manera diferente.

Ya he creado las columnas necesarias y las he poblado. Lo que necesito hacer es ajustar un poco el CSS. Principalmente estoy tratando de modificar el ancho de ciertas columnas. Por ejemplo, no necesito que una columna que muestra el ID del post sea tan ancha como la del nombre del post.

He puesto en cola una hoja de estilos en los paneles de administración para mis custom post types pero no logro conseguir el estilo correcto para los anchos de columna.

Intenté ajustar el max-width de los elementos th o td, pero no es efectivo. Desde Firebug puedo ver que el estilo CSS está ahí, pero no está haciendo nada.

Si bien pude encontrar muchos tutoriales para añadir/editar columnas personalizadas, realmente no encontré mucha información sobre cómo estilizar dichas columnas. ¿Alguna sugerencia?

¡Gracias!

unfulvio

1.83K

tipos de entradas personalizadas css sistema de gestión de contenidos columnas wp enqueue style

Todas las respuestas a la pregunta

Gracias Nicusor: Funciona perfectamente. Pude cambiar el ancho de las columnas seleccionadas en el panel de Entradas (por ejemplo, Título, Autor, Categorías) con tu solución de la siguiente manera:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}

Charles Borden

71

8 feb 2013 11:33:21

Deberías poder establecer el ancho de la columna usando CSS de manera bastante sencilla. Puedes usar la clase .column-{nombre} para aplicar estilos a las celdas de la columna (tanto th como td). Por ejemplo:

.column-micolumna { width:20%; }

Asegúrate de que no haya otros estilos que anulen el ancho de tu columna debido a las reglas de especificidad CSS. Además, palabras largas sin espacios o imágenes grandes podrían forzar que la columna sea más ancha de lo especificado en algunos navegadores.

Geert

6.27K

16 nov 2011 14:32:30

Comentarios

¡funcionó! ¡muchas gracias! Evidentemente estaba complicando demasiado mi css

unfulvio

16 nov 2011 14:47:48

Tengo una columna llamada "clicks" y este código colocado en mi archivo styles.css del childtheme no tiene efecto en la lista de posts del admin! .column-clicks { width:60px; }

Nicusor Dumbrava

14 abr 2012 05:36:10

Puedes probar esto para resolver tus problemas:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}

GIPSSTAR

271

20 ago 2015 14:56:38

Comentarios

sin punto y coma al final de cada línea de CSS.

northtree

20 dic 2016 12:37:27

Esto fue muy útil. Solo para agregar, WordPress también es utilizado en móviles con pantallas grandes por algunos de nuestros usuarios editores, así que añadimos media queries ya que las reglas !important mencionadas rompían el diseño por defecto del listado de administración de WP. Sin embargo, esta es una sugerencia muy práctica. ¡Gracias!

PKHunter

7 feb 2017 03:41:51

Por defecto, algunas columnas tienen la clase .fixed lo que resulta en width: 15%;. Esto asegura que esas columnas tengan más espacio asignado que otras (que probablemente ocupen múltiples líneas). Pero en la práctica, esto puede hacer que las columnas obtengan más espacio del que necesitan. Puedes adaptar la función de Gaurang mencionada anteriormente para evitar dar espacio extra a tus columnas menos importantes. Por ejemplo: .column-tags { width: initial !important; }.

Fabien Snauwaert

7 jun 2018 22:30:38

Al agregar columnas personalizadas, también puedes insertar directamente un pequeño fragmento de estilo que puedes usar para dimensionar la columna. Un poco sucio, pero ahorra otro filtro / llamada:

/**
 * Añadir columnas personalizadas a la lista de envíos
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Nombre';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Recibo<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Estado<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Acción<style>.column-action { width: 225px !important;}</style>';
    // añadir la librería thickbox
    wp_enqueue_style( 'thickbox' );
    wp_enqueue_script( 'thickbox' );

    return $columns;
}

add_filter( 'manage_edit-submissions_columns', 'submission_add_columns' );

ejazz

121

27 mar 2020 15:39:26

Nicusor Dumbrava 529 · Accepted Answer · 2012-04-14T06:10:57Z

¡Encontré una solución que funciona para mí!

Agregué este código en functions.php:

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}

Nicusor Dumbrava

529

14 abr 2012 06:10:57