Question

我有一个基于wordpress的网站，其中小部件有像

这样的标题

按类别浏览
购物车
通告
社区民意调查
等

现在，我希望以蓝色显示每个小部件的第一个单词，并以黑色显示剩余的单词我该怎么做？

（即浏览，购物，时事通讯，蓝色社区，黑色）

我想，我们可以使用jQuery做到这一点，但我不知道如何做到这一点。

编辑：

网站：http://granitess.com/wp/

Answer 1

我首选的解决方案是将WordPress钩子用于小部件标题。

function my_widget_title($title) {
    $parts = explode(" ", $title);
    $return = '<span class="first">' . array_shift($parts) . '</span>';
    if (sizeof($parts) > 0)
        $return .= implode(" ", $parts);
    return $return;
}

add_filter('widget_title', 'my_widget_title');

我还没有对它进行测试，但理论上这个函数可以将小部件标题拆分为单词，在第一个单词周围添加<span>并返回新的小部件标题，然后可以用CSS设置样式。 / p>

您可以将这些行添加到主题的functions.php，甚至更好，为您正在使用的主题创建子主题并将其添加到那里。这样，当主题更新时，它不会被覆盖。

Answer 2

您可以尝试此操作，获取所有.widget-title的迭代，获取其文本，按空格拆分并使用<span style='color:blue;'>更改第一个单词，然后加入所有单词并在.widget-title html中设置。像

$('.widget-title').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words.join(' '));
});

<强>编辑：

在你身边你的小部件标题在.widget h3所以试试这个 -

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words[0] + ' <span style="color:black;">' + words.slice(1).join(' ') + '</span>');
});

或者如果你想要与你的页脚一样，那么你可以尝试这个

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    $(this).html(words[0] + ' <span style="color:#333333;">' + words.slice(1).join(' ') + '</span>');
});

JQuery通过拆分段来改变页面中的文本

2 个答案: