Stilizarea coloanelor personalizate în panoul de administrare (în special pentru ajustarea lățimii celulelor)

Question

Stilizarea coloanelor personalizate în panoul de administrare (în special pentru ajustarea lățimii celulelor)

16 nov. 2011, 14:10:48

Vizualizări: 31.3K

Voturi: 19

Folosesc WordPress ca CMS pentru un proiect care utilizează extensiv tipuri de postări personalizate. Am nevoie să afișez coloanele în panourile de administrare pentru fiecare tip de postare personalizată într-un mod diferit.

Am creat deja coloanele necesare și le-am populat. Ce trebuie să fac este să ajustez puțin CSS-ul. Cel mai important încerc să modific lățimea anumitor coloane. De exemplu, nu am nevoie ca o coloană care listează ID-ul postării să fie la fel de lată ca numele postării.

Am încărcat un stylesheet în panourile de administrare pentru tipurile mele de postări personalizate, dar nu reușesc să stilizez corect lățimea coloanelor.

Am încercat să ajustez max-width pentru elementele th sau td, dar nu are efect. Din Firebug pot vedea că stilul CSS este acolo, dar nu face nimic.

În timp ce am putut găsi multe tutoriale pentru adăugarea/editarea coloanelor personalizate, nu am găsit prea multe informații despre cum să stilizez astfel de coloane. Aveți vreo sugestie?

Mulțumesc!

unfulvio

1.83K

tipuri de postare personalizate css cms coloane wp enqueue style

Toate răspunsurile la întrebare

Mulțumesc Nicușor: Funcționează perfect. Am reușit să modific lățimea coloanelor selectate din panoul Articole (de exemplu Titlu, Autor, Categorii) cu soluția ta, astfel:

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

Ar trebui să poți seta lățimea coloanei folosind CSS destul de ușor. Poți folosi clasa .column-{name} pentru a aplica stiluri celulelor coloanei (atât th cât și td). De exemplu:

.column-mycolumn { width:20%; }

Asigură-te că nu ai alte stiluri care să suprascrie lățimea coloanei din cauza regulilor de specificitate CSS. De asemenea, cuvinte lungi fără spații sau imagini mari pot forța coloana să fie mai largă decât cea specificată în unele browsere.

Geert

6.27K

16 nov. 2011 14:32:30

Comentarii

a funcționat! mulțumesc mult! Evident, am complicat inutil CSS-ul meu

unfulvio

16 nov. 2011 14:47:48

Am o coloană numită "clicks" și acest cod plasat în fișierul styles.css al child theme-ului meu nu are niciun efect în lista de postări din admin! .column-clicks { width:60px; }

Nicusor Dumbrava

14 apr. 2012 05:36:10

Puteți încerca această soluție pentru a vă rezolva problemele:

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 aug. 2015 14:56:38

Comentarii

nici un punct și virgulă la fiecare linie de CSS.

northtree

20 dec. 2016 12:37:27

Aceasta a fost foarte util. Doar pentru a adăuga, WordPress este folosit și pe telefoane mobile cu ecrane mari de către unii dintre utilizatorii noștri editori, așa că am adăugat media queries deoarece regulile !important de mai sus au stricat designul implicit al listării din administrarea WP. Aceasta este totuși o sugestie foarte utilă. Mulțumesc!

PKHunter

7 feb. 2017 03:41:51

Implicit, unele coloane au clasa .fixed care rezultă în width: 15%;. Aceasta asigură că acele coloane au mai mult spațiu alocat decât altele (care probabil se vor întinde pe mai multe linii.) Dar în practică, acest lucru poate duce la coloane care primesc mai mult spațiu decât au nevoie! Puteți adapta funcția lui Gaurang de mai sus pentru a evita acordarea de spațiu suplimentar coloanelor dumneavoastră mai puțin importante. de exemplu: .column-tags { width: initial !important; }.

Fabien Snauwaert

7 iun. 2018 22:30:38

Când adăugați coloane personalizate, puteți insera direct un mic fragment de stil pe care îl puteți folosi pentru a dimensiona coloana. Un pic murdar, dar evită un alt filtru / apel:

/**
 * Adaugă coloane personalizate la lista de trimiteri
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Nume';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Chitanță<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Status<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Acțiune<style>.column-action { width: 225px !important;}</style>';
    // încarcă biblioteca 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

Am găsit o soluție care funcționează pentru mine!

Am adăugat acest cod în 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