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

时间：2011-11-16 作者：unfulvio

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

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

我在管理面板中为我的自定义帖子类型加入了样式表，但我无法正确设置列宽的样式。

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

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

非常感谢。

5 个回复
最合适的回答,由SO网友:Nicusor Dumbrava 整理而成

我找到了一个适合我的解决方案！

我在函数中删除了此代码。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>\';
}

SO网友:Charles Borden

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

SO网友:Geert

您应该能够很容易地使用CSS设置列宽。您可以使用.column-{name} 类将样式应用于列单元格（两个th 和td). 例如：

.column-mycolumn { width:20%; }
确保没有其他样式因为CSS specificity 规则。此外，没有空格或大图像的长单词可能会迫使列比某些浏览器中指定的更宽。

SO网友:Gaurang P

You can try this solved your problems:

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;
}
SO网友:ejazz

添加自定义列时，还可以直接插入一个小样式段，用于调整列的大小。有点脏，但保存了另一个筛选器/调用：

/**
 * Add custom columns to submission list
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns[\'name\']    = \'Name\';
    $columns[\'iban\']    = \'IBAN<style>.column-iban { width: 150px !important;}</style>\';
    $columns[\'bic\']     = \'BIC<style>.column-bic { width: 100px !important;}</style>\';
    $columns[\'receipt\'] = \'Receipt<style>.column-receipt { width: 175px !important;}</style>\';
    $columns[\'status\']  = \'Status<style>.column-status { width: 75px !important;}</style>\';
    $columns[\'action\']  = \'Action<style>.column-action { width: 225px !important;}</style>\';
    // add the thickbox library
    wp_enqueue_style( \'thickbox\' );
    wp_enqueue_script( \'thickbox\' );

    return $columns;
}

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

结束
标签： custom-post-types   css   cms   columns   wp-enqueue-style   小码农  

相关推荐

WordPress自定义SuPerfish CSS问题

可在此处找到问题：http://themeforward.com/demo2/使用“我的菜单”并导航到“功能”>“短代码”>“排版”。注意边框（ul .sub-menu { border:1px solid #000 } ) 将第三级菜单项（排版）下移一个像素。如何消除一个像素间隙，使第三级菜单项正确对齐？这是我的CSS：/*** DEMO SKIN ***/ .sf-menu { float: left; z-index: 900&#