有没有办法在管理区域中编辑Wordpress Widgets的标题栏？

Question

我正在为我正在创建的所有自定义小部件中的移动窗口小部件和桌面窗口小部件提供一种方法，所以我认为在后端的窗口小部件区域的标题中指示窗口小部件是否为移动/桌面是个好主意以帮助使这一部分更加用户友好。

是否有可用于在窗口小部件标题栏内（窗口小部件标题左侧）加载图像的过滤器，以包含移动/桌面图标，以便能够识别哪些活动窗口小部件是桌面的，哪些是活动小部件是移动的，而不必打开小部件来查看它的选项吗？

在wordpress中是否有一个钩子只能在后端admin widgets.php页面中捕获它？想在页面加载时使用php hook。当选项从移动设备更改为桌面时，已经使用jQuery，反之亦然。它是我需要执行此操作的小部件页面的初始加载。

可能的？

下面的示例，如果可以在初始widgets.php页面上轻松地从内部和扩展的WP_Widgets类文件中加载？或者过滤器，操作等......

所以，我试图在扩展WP_Widget的Widget类中执行以下操作：

function __construct() {

        parent::__construct(
            'social_media_widget',
            __('Social Media Widget', 'mydomain')
        );

        add_filter('dynamic_sidebar_params', array($this, 'my_sidebar_params'), 10, 1);

    }

    function my_sidebar_params($params) {

        $sidebar_id = $params[0]['id'];

        if (is_admin() && $params[0]['widget_name'] == 'Social Media Widget')
        {
            $_widget = get_option('widget_social_media_widget');

            if (!empty($_widget) && isset($_widget[$params[1]['number']]))
            {
                // $platform is being set in here as "desktop" because if I do a var_dump, it gives me "desktop", however, the image is not showing in the titlebar using before_title below... why?
                $platform = isset($_widget[$params[1]['number']]['platform']) ? $_widget[$params[1]['number']]['platform'] : '';
            }

            if (!empty($platform))
            {
                $params[0]['before_title'] = '<img src="' . get_stylesheet_directory_uri() . '/img/' . $platform . '-icon.png" alt="' . $platform . ' menu" class="menu-icon ' . $platform . '-icon" />';
            }
        }
    return $params;
}

所以，$ platform现在是正确的值，但是在管理窗口小部件区域的标题栏中标题之前没有附加图像，所以我不确定它为什么没有显示...如果我回显$params[0]['before_title']图片显示，但不是在正确的地方。如果可能，我需要在窗口小部件标题的<h3>标记内显示图像。有什么想法吗？

Answer 1

如果你窥探WP代码，你会看到两件事：

1. WordPress正在将标签从标题中删除，这就是为什么你的图像被删除了。这来自WP Core文件＆＃34; widgets.php＆＃34;：

   $widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) );
   

2. 没有钩子，动作或过滤器可以让你操纵它们。

所以，你必须要有创意。

一种方法是尝试利用小部件的ID。然而，这有点棘手，因为WP代码故意管理ID，因此即使您多次添加相同的小部件，它也会使它们保持唯一。

所以，让我们来看看＆＃34;最近的评论＆＃34;小部件作为您可以如何处理此问题的示例：

第一个＆＃34;最近评论＆＃34;的ID界面中显示的小部件是widget-17_recent-comments-2，第二个＆＃34;最近评论＆＃34;小部件是widget-9_recent-comments-3等等。你明白了。

让我们利用recent-comments。

要做到这一点，我们需要深入了解一些＆＃34; funner＆＃34; CSS选择器：contains选择器。在这种情况下，我会建议[id*="_recent-comments-"]。 特别关注到开始_和结束- - 这有助于确保您的风格不适用于其他可能带有ID的小部件包含选择器的一部分。

通过这些小信息，我们现在可以在h3作为背景显示图片：

div[id*="_recent-comments-"] h3 {
    color: red; /* if you want to manipulate the title color */
    padding-left: 35px; /* to create some space for our image */
    /* obviously adjust this as needed */
    background: transparent url(http://placehold.it/20x20) 5px center no-repeat;
    /* your other styles here ... */
}