创建全宽仪表板小部件

时间:2021-03-11 作者:Álvaro Franz

是否有任何方法可以在WP Admin dashboard中创建全宽仪表板小部件?

因为我想扩展框,使内容有更多的空间:

enter image description here

我当前正在使用wp_add_dashboard_widget(), 但在文档中未找到任何相关参数或设置。

因此,也许这目前不是一个WP功能,但我想知道您是否有任何建议来实现它。

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

这里可能有一种实现全宽仪表板小部件的方法。这里,我们强制第一列(最左边)为100%,并包含我们的自定义小部件。

Step 1

WP将仪表板小部件的可见性和顺序存储为用户特定选项。为了使下面的代码正常工作,我们需要通过过滤相关选项来防止用户的偏好覆盖我们的设置。

// Prevent users from putting anything to first column
// as widget order set by user overrides everything
add_filter(
    \'get_user_option_meta-box-order_dashboard\',
    function($result, $option, $user) {
        // Force custom widget to 1st column
        if ( ! empty( $result[\'normal\'] ) ) {
            $result[\'normal\'] = array(\'dashboard_widget_example\');
        }
        return $result;
    },
    10,
    3
);

Step 2

添加一些样式以更改列宽。

// Style dashboard widget columns
add_action(
    \'admin_head\',
    function() {
        echo "<style type=\'text/css\'>
            #dashboard-widgets .postbox-container {width: 33.333333%;}
            #dashboard-widgets #postbox-container-1 {width: 100%;}
        </style>";
    }
);

Step 3

最后,我们将所有其他小部件从第一列强制到第二列,并注册自定义仪表板小部件以填充第一列。

// Dashboard widget reordering
add_action( \'wp_dashboard_setup\', function(){

  global $wp_meta_boxes;

    // Move all dashboard wigets from 1st to 2nd column
    if ( ! empty( $wp_meta_boxes[\'dashboard\'][\'normal\'] ) ) {
        if ( isset($wp_meta_boxes[\'dashboard\'][\'side\']) ) {
            $wp_meta_boxes[\'dashboard\'][\'side\'] = array_merge_recursive(
                $wp_meta_boxes[\'dashboard\'][\'side\'],
                $wp_meta_boxes[\'dashboard\'][\'normal\']
            );
        } else {
            $wp_meta_boxes[\'dashboard\'][\'side\'] = $wp_meta_boxes[\'dashboard\'][\'normal\'];
        }
        unset( $wp_meta_boxes[\'dashboard\'][\'normal\'] );
    }

  // Add custom dashbboard widget.
  add_meta_box( \'dashboard_widget_example\',
    __( \'Example Widget\', \'example-text-domain\' ),
    \'render_example_widget\',
    \'dashboard\',
    \'normal\',
    \'default\'
  );

} );

function render_example_widget() {
?>
  <p>Do something.</p>
<?php
}