Stile delle colonne personalizzate nei pannelli di amministrazione (in particolare per regolare la larghezza delle celle)

Question

Stile delle colonne personalizzate nei pannelli di amministrazione (in particolare per regolare la larghezza delle celle)

16 nov 2011, 14:10:48

Visualizzazioni: 31.3K

Voti: 19

Sto usando WordPress come CMS per un progetto che fa ampio uso di custom post type. Ho bisogno di visualizzare le colonne nei pannelli di amministrazione per ogni custom post type in modo diverso.

Ho già creato le colonne necessarie e le ho popolate. Quello che devo fare è regolare un po' il CSS. In particolare, sto cercando di modificare la larghezza di alcune colonne. Ad esempio, non ho bisogno che una colonna che elenca l'ID del post sia larga quanto il nome del post.

Ho accodato un foglio di stile nei pannelli di amministrazione per i miei custom post type ma non riesco a sistemare correttamente lo stile delle larghezze delle colonne.

Ho provato a regolare la max-width degli elementi th o td, ma non ha effetto. Da Firebug posso vedere che lo stile CSS è presente, ma non sta facendo nulla.

Mentre ho potuto trovare molti tutorial per aggiungere/modificare colonne personalizzate, non ho trovato molte informazioni su come stilizzare tali colonne. Qualche suggerimento?

Grazie!

unfulvio

1.83K

tipi di post personalizzati css cms colonne wp enqueue style

Tutte le risposte alla domanda

Grazie Nicusor: Funziona perfettamente. Sono riuscito a modificare la larghezza delle colonne selezionate nel pannello degli articoli (ad esempio Titolo, Autore, Categorie) con la tua soluzione come segue:

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

Dovresti essere in grado di impostare la larghezza delle colonne utilizzando CSS abbastanza facilmente. Puoi usare la classe .column-{nome} per applicare gli stili alle celle delle colonne (sia th che td). Ad esempio:

.column-miacolonna { width:20%; }

Assicurati che non ci siano altri stili che sovrascrivano la larghezza della colonna a causa delle regole di specificità CSS. Inoltre, parole lunghe senza spazi o immagini grandi potrebbero forzare la colonna ad essere più larga di quanto specificato in alcuni browser.

Geert

6.27K

16 nov 2011 14:32:30

Commenti

ha funzionato! grazie mille! Evidentemente stavo complicando troppo il mio css

unfulvio

16 nov 2011 14:47:48

Ho una colonna chiamata "clicks" e questo codice inserito nel file styles.css del mio childtheme non ha alcun effetto nella lista dei post dell'admin! .column-clicks { width:60px; }

Nicusor Dumbrava

14 apr 2012 05:36:10

Puoi provare questa soluzione ai tuoi problemi:

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

Commenti

nessun punto e virgola alla fine di ogni riga CSS.

northtree

20 dic 2016 12:37:27

Questo è stato molto utile. Per aggiungere, alcuni dei nostri utenti editor utilizzano WordPress anche su dispositivi mobili con schermi grandi, quindi abbiamo aggiunto media query poiché le regole !important sopra riportate interferivano con il design predefinito dell'elenco di amministrazione di WP. Comunque è un suggerimento molto utile. Grazie!

PKHunter

7 feb 2017 03:41:51

Di default, alcune colonne hanno la classe .fixed che risulta in width: 15%;. Questo assicura che a tali colonne venga allocato più spazio rispetto ad altre (che potrebbero andare a capo su più righe). Ma nella pratica, questo può portare a colonne che ricevono più spazio del necessario! Puoi adattare la funzione di Gaurang sopra riportata per evitare di dare spazio extra alle colonne meno importanti. Ad esempio: .column-tags { width: initial !important; }.

Fabien Snauwaert

7 giu 2018 22:30:38

Quando aggiungi colonne personalizzate, puoi anche inserire direttamente un piccolo snippet di stile che puoi usare per dimensionare la colonna. Un po' sporco, ma evita un altro filtro/chiamata:

/**
 * Aggiunge colonne personalizzate alla lista delle submission
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Nome';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Ricevuta<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Stato<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Azione<style>.column-action { width: 225px !important;}</style>';
    // aggiunge la libreria 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

Ho trovato una soluzione che funziona per me!

Ho inserito questo codice nel file 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 apr 2012 06:10:57