如何在管理中更改注册小工具区域的颜色？

时间：2013-09-25 作者：Derfder

现在它们都是灰色的。

如何更改颜色？

我的意思是，如何将类或id添加到管理区域中显示的已注册小部件区域？

这是您在我的功能中注册管理区域的方式。php当前：

register_sidebar( array(
        \'name\' => __( \'Main Sidebar\', \'twentyeleven\' ),
        \'id\' => \'sidebar-1\',
        \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
        \'after_widget\' => "</aside>",
        \'before_title\' => \'<h3 class="widget-title">\',
        \'after_title\' => \'</h3>\',
    ) );
如何在admin中添加一些属性来添加类，以便稍后通过CSS对其进行样式化？

1 个回复
SO网友:gmazzap

如果要在后端设置提要栏的样式，则无需执行任何其他操作。使用发布的代码时，WordPress为侧栏创建的html包含一个div，其id属性等于侧栏的id。

考虑以下代码：

function custom_colored_sidebar() {

  register_sidebar( array(
    \'name\' => \'Test Sidebar\',
    \'id\' => \'sidebar-test\',
    \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
    \'after_widget\' => "</aside>",
    \'before_title\' => \'<h3 class="widget-title">\',
    \'after_title\' => \'</h3>\',
  ) );

  add_action(\'admin_enqueue_scripts\', \'widget_style\');

}

function widget_style( $page ) {
  if ( $page == \'widgets.php\' ) {
    echo \'<style>div#sidebar-test { background-color:#f00; }</style>\';
  }
}

add_action(\'init\', \'custom_colored_sidebar\');
如您所见，我注册了一个带有id的侧栏\'sidebar-test\' 然后我用\'admin_enqueue_scripts\' 在id为的div上添加一些样式\'sidebar-test\' 仅当当前管理页为\'widgets.php\'.

正确的方法是将外部css排队，但为了简单起见，我只是附和了这种风格。

结果如下：

colored sidebar

正如您所看到的，我为侧边栏小部件设计了样式，没有其他功能。

您可以注意到，id等于边栏id的div位于小部件内部，如果要设置小部件包装器或标题的样式，唯一的方法是使用javascript，类似于：

jQuery( document ).ready(function($) {
  $(\'#sidebar-test\').closest(\'.widgets-holder-wrap\').addClass(\'sidebar-test-wrapper\');
});
使用此代码（应仅在widgets.php 第页，附加类\'sidebar-test-wrapper\' 到目标侧栏的容器中，以便您可以对其进行样式设置。

如果要设置提要栏名称的样式，可以使用类\'sidebar-name\', 在这种情况下：

.sidebar-test-wrapper div.sidebar-name { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name h3 { /* some css here */ }
.sidebar-test-wrapper div.sidebar-name .sidebar-name-arrow { /* some css here */ }

结束
标签： widgets   admin   小码农  

相关推荐

如何在页面内容中使用is_admin？

我试图在一些Wordpress页面中添加“单击此处编辑此页面”按钮。此按钮应仅在用户为admin时出现，这是在用户为admin时应出现的代码：if ( current_user_can( \'manage_options\' ) ) { <div class=\"action\"> <div class=\"pe-container\"><section class=\"row-fluid\"> <div class=\"span