我可以在后端小部件列表中单独设置项目的样式吗？

时间：2016-10-24 作者：cjbj

UPDATE 重新提出问题

在后端小部件页面上widgets.php, 有可用小部件的列表。此列表中的项目具有相同的类和dynamically generated ID, 如果在列表中插入新的小部件（按字母顺序），则会发生变化。因此，没有可靠的方法将css指向列表中的各个项目。

是否有其他方法可以设置小部件列表中各个项目的样式？

Old, more narrow question

我有一个主题，其中包括font icon 以其全名。全球定义如下：

$theme_data      = wp_get_theme(); // Retrieves the theme data from style.css
$theme_name      = $theme_data[\'Name\'];
$theme_icon      = \'<i class="fa fa-wrench" style="font-family:FontAwesome;"></i>\';
$theme_full_name = $theme_icon . \' \' . $theme_name;

我可以使用$theme_full_name 在菜单、页面标题等中。然而，有一个例外。该主题包括两个小部件，它们还具有$theme_full_name 以其名称（第二个参数in the constructor). 在widgets.php 页面中只显示主题名称。显然，图标被剥离了（据推测，小部件名称中可能包含的所有html都是如此）。

有没有办法在小部件名称中保留字体图标？

2 个回复

最合适的回答,由SO网友:birgire 整理而成

正如@MarkKaplenmentioned 在注释中，可以使用CSS。也可以使用Javascript。

CSS方法让我们以日历小部件为例。

在可用小部件列表中，小部件的id如下：

widget-{integer}_calendar-__i__

在侧边栏中：

widget-{integer}_calendar-{integer}

如果要显示calendar dashicon 在widget标题之前，我们可以为widgets.php 文件，类似于：

div[id*="_calendar-"].widget .widget-title h3:before{ 
    content: "\\f145"; font-family: dashicons; margin-right: 0.5rem; 
}

这里我们使用*= 在id选择器中查找子字符串匹配。

它将显示如下：

如果需要，我们可以将其进一步限制在右侧或左侧部分：

#widgets-right
#widgets-left

或可用的小部件：

#available-widgets

Thewidgets.php 页面还将具有body.widgets-php 如果通用样式表需要。

SO网友:cjbj

实际上，所有html都是通过wp_widget_control 功能：

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

现在，没有明显的方法来拦截strip_tags, 因为它是一个php函数，但是esc_html 是一个具有过滤器的WP函数。因此，我们无法阻止图标/html被剥离，但我们可以使用过滤器将其重新添加。像这样：

add_filter (\'esc_html\',\'wpse243718_add_icon_to_widget_name\');

function wpse243718_add_icon_to_widget_name ($safe_text) {
    global $theme_icon;
    global $theme_name;
    global $pagenow;
    if ( ($pagenow == \'widgets.php\') && (substr($safe_text, 0, strlen($theme_name)) == $theme_name) )
        return $theme_icon  . \' \' . $safe_text;
    else
        return $safe_text;
    }

此代码假定小部件名称以开头$theme_name, 当然，您也可以使用其他检测方法，或者用各种html填充标题。

在将代码添加到函数后无法登录WordPress wp-admin。php

我在函数末尾添加以下代码。php文件，用于根据自定义帖子的帖子标题填充分类法。问题是，当我添加代码时，尝试登录wp admin时会出现以下错误。非常感谢您能帮助我们弄清楚为什么会发生这种情况。Error:错误：由于意外输出，Cookie被阻止。有关帮助，请参阅此文档或尝试支持论坛。Code: <?php function update_custom_terms($post_id) { // only update terms if

小码农CODE

我可以在后端小部件列表中单独设置项目的样式吗？

相关推荐

在将代码添加到函数后无法登录WordPress wp-admin。php