有什么方法可以在管理区域中编辑 Wordpress Widgets 的标题栏?
Any way to edit the titlebar of Wordpress Widgets in the Admin area?
我正在为我创建的所有自定义小部件中的移动小部件和桌面小部件提供一种方法,因此我认为最好在小部件的标题中指明小部件是否为 mobile/desktop后端区域,以帮助使该部分更加用户友好。
是否有一个过滤器可用于在小部件的标题栏(小部件标题的左侧)加载图像,以包含一个 mobile/desktop 图标以便能够识别哪些活动小部件是桌面的,哪些活动的小部件是移动的,无需打开小部件即可在其选项中查看?
wordpress 中是否有一个钩子可以仅在后端管理 widgets.php
页面中捕获此内容?想在页面加载时使用 php 挂钩。 Already using jQuery for when option changes from mobile to desktop and vice versa.这是我需要执行此操作的小部件页面的初始加载。
可能吗?
下面的示例,如果可能的话,可以轻松地从 WP_Widgets class 文件中轻松加载初始 widgets.php 页面?或过滤器、操作等...
因此,我尝试在扩展 WP_Widget:
的 Widget class 中执行以下操作
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>
标签内。有什么想法吗?
如果你窥探 WP 代码,你会看到两件事:
WordPress 正在从标题中剥离标签,这就是您的图片被删除的原因。这是来自 WP Core 文件 "widgets.php":
$widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) );
没有钩子、动作或过滤器可让您操纵它们。
因此,您必须发挥创意。
一种方法是尝试利用小部件的 ID。然而,这有点棘手,因为 WP 代码有意管理 ID,以使其保持唯一,即使您多次添加相同的小部件也是如此。
所以,让我们以 "recent-comments" 小部件为例,说明您可以如何处理此问题:
界面中显示的第一个"recent-comments"小部件的ID是widget-17_recent-comments-2
,第二个"recent-comments"小部件的ID是widget-9_recent-comments-3
,等等。你得到想法。
让我们利用 recent-comments
.
的文章
为此,我们需要利用一些 "funner" 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 ... */
}
我正在为我创建的所有自定义小部件中的移动小部件和桌面小部件提供一种方法,因此我认为最好在小部件的标题中指明小部件是否为 mobile/desktop后端区域,以帮助使该部分更加用户友好。
是否有一个过滤器可用于在小部件的标题栏(小部件标题的左侧)加载图像,以包含一个 mobile/desktop 图标以便能够识别哪些活动小部件是桌面的,哪些活动的小部件是移动的,无需打开小部件即可在其选项中查看?
wordpress 中是否有一个钩子可以仅在后端管理 widgets.php
页面中捕获此内容?想在页面加载时使用 php 挂钩。 Already using jQuery for when option changes from mobile to desktop and vice versa.这是我需要执行此操作的小部件页面的初始加载。
可能吗?
下面的示例,如果可能的话,可以轻松地从 WP_Widgets class 文件中轻松加载初始 widgets.php 页面?或过滤器、操作等...
因此,我尝试在扩展 WP_Widget:
的 Widget class 中执行以下操作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>
标签内。有什么想法吗?
如果你窥探 WP 代码,你会看到两件事:
WordPress 正在从标题中剥离标签,这就是您的图片被删除的原因。这是来自 WP Core 文件 "widgets.php":
$widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) );
没有钩子、动作或过滤器可让您操纵它们。
因此,您必须发挥创意。
一种方法是尝试利用小部件的 ID。然而,这有点棘手,因为 WP 代码有意管理 ID,以使其保持唯一,即使您多次添加相同的小部件也是如此。
所以,让我们以 "recent-comments" 小部件为例,说明您可以如何处理此问题:
界面中显示的第一个"recent-comments"小部件的ID是widget-17_recent-comments-2
,第二个"recent-comments"小部件的ID是widget-9_recent-comments-3
,等等。你得到想法。
让我们利用 recent-comments
.
为此,我们需要利用一些 "funner" 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 ... */
}