Javascript 添加一个<；span>；响应wordpress主题中的每个字母

我想在Wordpress响应主题的标题中为站点描述范围中的每个字母创建单独的背景

我在functions.php中添加了一个函数

<?php
/**
 * Setup Responsive Child Theme Functions
 */


 function site_description_spans() {

 echo 'Text within header'; // Replace this line with code from `https://stackoverflow.com/questions/17517816/color-every-character-differently



}
add_action( 'responsive_in_header', 'site_description_spans' );
?>

这里是指向堆栈交换上javascript函数的链接

有关守则如下：

 $('.site-description').find('span').each(function(){



var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for(var i=0; i<len; i++){
    var bgColor= '#'+ (Math.random() * 0xffffff).toString(16).substr(-6); 
    newCont += '<span style="background:'+bgColor+'">'+ text.charAt(i) +'</span>';
  }

  $el.html(newCont);

});

$（'.site description'）。查找（'span'）。每个（函数（）{
var$el=$（此），
text=$el.text（），
len=text.length，
newCont=''；
对于（var i=0；i现在我对输出的HTML不太确定，但我将大胆猜测，这就是HTML的输出方式：

<span class="site-description">
    Text within header
</span>

选项2-更改jQuery
将jQuery函数更改为如下内容：

$('.site-description').each(function() {



  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for (var i = 0; i < len; i++) {
    var bgColor = '#' + (Math.random() * 0xffffff).toString(16).substr(-6);
    newCont += '<span style="background:' + bgColor + '">' + text.charAt(i) + '</span>';
  }

  $el.html(newCont);

});

$（'.site description'）。每个（函数（）{
var$el=$（此），
text=$el.text（），
len=text.length，
newCont=''；
对于（变量i=0；i

或者通常只修复查询的第一部分，以便找到正确的类或元素。
好

我已经尝试了选项2，只是将其插入到原始函数中，但我不确定我在这里做什么。我理解您在选项2中提出的建议，看起来这会起作用，我只是不确定如何将其作为函数添加到functions.php中

<?php
/**
 * Setup Responsive Child Theme Functions
 */


 function site_description_spans() {

 echo 'Text within header'; // Replace this line with code from `https://stackoverflow.com/questions/17517816/color-every-character-differently



}
add_action( 'responsive_in_header', 'site_description_spans' );
?>

这就是我所拥有的

function site_description_spans() {

$('.site-description').each(function() {



  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for (var i = 0; i < len; i++) {
    var bgColor = '#' + (Math.random() * 0xffffff).toString(16).substr(-6);
    newCont += '<span style="background:' + bgColor + '">' + text.charAt(i) + '</span>';
  }

  $el.html(newCont);

});

}
add_action( 'responsive_in_header', 'site_description_spans' );
?>

控制台中出现了什么错误？这是相关的HTML代码片段，很抱歉我以前忘记发布。`“title=”Site title“rel=”home“>站点标题演示站点以展示新功能
$('.site-description').each(function() {



  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for (var i = 0; i < len; i++) {
    var bgColor = '#' + (Math.random() * 0xffffff).toString(16).substr(-6);
    newCont += '<span style="background:' + bgColor + '">' + text.charAt(i) + '</span>';
  }

  $el.html(newCont);

});

function site_description_spans() {

$('.site-description').each(function() {



  var $el = $(this),
    text = $el.text(),
    len = text.length,
    newCont = '';

  for (var i = 0; i < len; i++) {
    var bgColor = '#' + (Math.random() * 0xffffff).toString(16).substr(-6);
    newCont += '<span style="background:' + bgColor + '">' + text.charAt(i) + '</span>';
  }

  $el.html(newCont);

});

}
add_action( 'responsive_in_header', 'site_description_spans' );
?>

Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /***/*****/public_html/*****/dev/wp-content/themes/responsive_child/functions.php on line 11