Diseñe columnas personalizadas en paneles de administración (especialmente para ajustar el ancho de las celdas de las columnas)

14

Estoy usando Wordpress como CMS para un proyecto que hace un uso extensivo de los tipos de publicaciones personalizadas. Necesito mostrar columnas en los paneles de administración para cada tipo de publicación personalizada de una manera diferente.

Ya he creado las columnas necesarias y las he poblado. Lo que necesito hacer es ajustar un poco el CSS. Lo más importante es que estoy tratando de ajustar el ancho de ciertas columnas. Por ejemplo, no necesito una columna que enumere el ID de la publicación para que sea tan ancha como el nombre de la publicación.

Puse en cola una hoja de estilo en los paneles de administración para mis tipos de publicaciones personalizadas, pero no puedo hacerlo correctamente para diseñar los anchos de columna.

Traté de ajustar el ancho máximo de los elementos th o td, pero no es efectivo. Desde firebug puedo ver que el estilo CSS está allí, pero no está haciendo nada.

Si bien pude encontrar muchos tutoriales para agregar / editar columnas personalizadas, realmente no reuní mucha información sobre cómo diseñar esas columnas. Alguna pista?

¡Gracias!

unfulvio
fuente

Respuestas:

25

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

Dejé caer 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
fuente
7

Gracias Nicusor: funciona muy bien. Pude cambiar el ancho de las columnas seleccionadas en el panel Publicaciones (por ejemplo, Título, Autor, Categorías) con su 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
fuente
4

Debería poder establecer el ancho de columna usando CSS con bastante facilidad. Puede usar la .column-{name}clase para aplicar estilos a las celdas de columna (ambos thy td). Por ejemplo:

.column-mycolumn { width:20%; }

Asegúrese de no tener otros estilos que anulen el ancho de su columna debido a las reglas de especificidad de CSS . Además, las 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
fuente
¡funcionó! ¡Muchas gracias! Evidentemente
demasiado
Tengo una columna llamada "clics" y este código colocado en mi archivo childtheme styles.css no tiene ningún efecto en la lista de publicaciones del administrador. .column-clicks {ancho: 60px; }
Nicusor Dumbrava
4

Puedes probar esto resolvió 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;
}
Gaurang P
fuente
sin punto y coma en cada línea CSS.
northtree
Esto fue muy útil. Solo para agregar, Wordpress también se usa en móviles de pantalla grande por algunos de los usuarios de nuestro editor, por lo que agregamos consultas de medios ya que las !importantreglas anteriores rompieron el diseño predeterminado de la lista de administradores de WP. Sin embargo, esta es una sugerencia muy útil. ¡Gracias!
PKHunter
Por defecto, algunas columnas tienen clase .fixedque da como resultado width: 15%; . Esto garantiza que esas columnas tengan más espacio asignado que otras (que probablemente romperán varias líneas). ¡Pero en la práctica, esto puede hacer que las columnas obtengan más espacio del que necesitan! Puede adaptar la función de Gaurang anterior para evitar dar espacio adicional para sus columnas menos importantes. por ejemplo: .column-tags { width: initial !important; }.
Fabien Snauwaert