Стилизация пользовательских колонок в панели администратора (особенно настройка ширины ячеек)

Question

Стилизация пользовательских колонок в панели администратора (особенно настройка ширины ячеек)

16 нояб. 2011 г., 14:10:48

Просмотры: 31.3K

Голосов: 19

Я использую WordPress в качестве CMS для проекта, который активно использует пользовательские типы записей. Мне нужно отображать колонки в панели администратора для каждого пользовательского типа записей по-разному.

Я уже создал необходимые колонки и заполнил их. Теперь мне нужно немного настроить CSS. В первую очередь я пытаюсь изменить ширину определенных колонок. Например, колонка с ID записи не должна быть такой же широкой, как колонка с названием записи.

Я подключил таблицу стилей в панели администратора для моих пользовательских типов записей, но не могу правильно настроить ширину колонок.

Я пытался настроить max-width для элементов th или td, но это не работает. В Firebug я вижу, что CSS-стили присутствуют, но они не оказывают никакого эффекта.

Хотя я нашел много руководств по добавлению/редактированию пользовательских колонок, я не смог найти достаточно информации о том, как стилизовать такие колонки. Есть какие-нибудь подсказки?

Спасибо!

unfulvio

1.83K

пользовательские типы записей css cms колонки wp enqueue style

Все ответы на вопрос

Спасибо, Nicusor: Отлично работает. Мне удалось изменить ширину выбранных колонок на панели записей (например, Заголовок, Автор, Категории) с вашим решением следующим образом:

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 февр. 2013 г. 11:33:21

Вы можете легко задать ширину столбца с помощью CSS. Используйте класс .column-{name}, чтобы применить стили к ячейкам столбца (как th, так и td). Например:

.column-mycolumn { width:20%; }

Убедитесь, что другие стили не переопределяют ширину вашего столбца из-за правил специфичности CSS. Также длинные слова без пробелов или большие изображения могут в некоторых браузерах заставить столбец быть шире, чем указано.

Geert

6.27K

16 нояб. 2011 г. 14:32:30

Комментарии

это сработало! большое спасибо! Я явно усложнял свой css

unfulvio

16 нояб. 2011 г. 14:47:48

У меня есть столбец с названием "clicks", и этот код, размещенный в файле styles.css дочерней темы, не влияет на список записей в админке! .column-clicks { width:60px; }

Nicusor Dumbrava

14 апр. 2012 г. 05:36:10

Это решение может помочь решить ваши проблемы:

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 авг. 2015 г. 14:56:38

Комментарии

нет точки с запятой в конце каждой строки CSS.

northtree

20 дек. 2016 г. 12:37:27

Это было очень полезно. Хочу добавить, что некоторые из наших редакторов используют WordPress на мобильных устройствах с большими экранами, поэтому мы добавили медиазапросы, так как правила с !important выше ломали стандартный дизайн списков в админке WP. Тем не менее, это очень удобное решение. Спасибо!

PKHunter

7 февр. 2017 г. 03:41:51

По умолчанию некоторые колонки имеют класс .fixed, что приводит к width: 15%;. Это гарантирует, что такие колонки получают больше места, чем другие (которые могут занимать несколько строк). Но на практике это может привести к тому, что колонки получают больше места, чем им нужно! Вы можете адаптировать функцию Gaurang, приведенную выше, чтобы избежать выделения лишнего места для менее важных колонок. Например: .column-tags { width: initial !important; }.

Fabien Snauwaert

7 июн. 2018 г. 22:30:38

При добавлении пользовательских колонок вы также можете напрямую вставить небольшой стилевой сниппет, который позволит задать размер колонки. Немного "грязно", но избавляет от необходимости использовать дополнительный фильтр / вызов:

/**
 * Добавляет пользовательские колонки в список заявок
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Имя';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Квитанция<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Статус<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Действие<style>.column-action { width: 225px !important;}</style>';
    // подключаем библиотеку thickbox
    wp_enqueue_style( 'thickbox' );
    wp_enqueue_script( 'thickbox' );

    return $columns;
}

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

ejazz

121

27 мар. 2020 г. 15:39:26

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

Я нашел решение, которое мне подходит!

Я добавил этот код в 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 апр. 2012 г. 06:10:57