在管理面板中设置自定义列的样式(尤其是调整列单元格的宽度)


14

我正在将Wordpress用作广泛使用自定义帖子类型的项目的CMS。我需要以不同的方式在管理面板中为每种自定义帖子类型显示列。

我已经创建了必要的列并填充了它们。我需要做的是稍微调整CSS。最重要的是,我正在尝试调整某些列的宽度。例如,我不需要列出帖子ID的列就可以与帖子名称一样宽。

我在管理面板中为自己的自定义帖子类型排队了一个样式表,但无法正确设置列宽的样式。

我试图调整th或td元素的最大宽度,但这是无效的。从firebug中,我可以看到css样式存在,但是它什么也没做。

虽然我可以找到很多教程来添加/编辑自定义列,但是我并没有真正收集有关如何设置此类列样式的信息。有什么提示吗?

谢谢!

Answers:


25

我找到了适合我的解决方案!

我将这段代码放在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>';
}

7

感谢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>';
}

4

您应该能够使用CSS轻松设置列宽。您可以使用.column-{name}该类将样式应用于列单元格(thtd)。例如:

.column-mycolumn { width:20%; }

确保没有其他样式因CSS特殊性规则而影响列宽。同样,没有空格或大图像的长单词可能会迫使列宽到某些浏览器中指定的宽度。


有效!非常感谢!我显然过于复杂我的CSS
unfulvio

我有一列名为“ clicks”的列,此代码放在childtheme styles.css文件中,对管理员帖子列表无效!.column-clicks {{width:60px; }
Nicusor Dumbrava 2012年

4

您可以尝试这样做解决您的问题:

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;
}

每行CSS都没有分号。
northtree '16

这非常有用。只是要补充一点,我们的一些编辑器用户还在大屏幕手机上使用了Wordpress,因此我们添加了媒体查询,因为上述!important规则打破了WP管理员列表的默认设计。不过,这是一个非常方便的建议。谢谢!
PKHunter

默认情况下,某些列的类.fixed会导致width: 15%; 。这样可以确保为这些列分配的空间比其他列更多(可能会破坏多行)。但是实际上,这可能导致列获得的空间超出了他们的需要!您可以调整上面的Gaurang函数,以避免为次要的列留出多余的空间。例如:.column-tags { width: initial !important; }
Fabien Snauwaert,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.