Question

我想知道我是否只能在wordpress中的帖子标题中设置一个单词，比如在两者之间添加跨度。但Wordpress将标题作为一个整体呈现，无法找到如何做到这一点。

例如：标题可以像＆＃34;你好，欢迎来到这个世界＆＃34; 在这里，我想设计一个单词，如＃34; welcome＆＃34;只是区别对待。

我的标题HTML模板就像

<h2>Hello, <span>welcome</span> to this world</h2>

但是在wordpress中我们只能使用

完全检索标题

the_title();

标签。输出就像

<h2>Hello, welcome to this world</h2>

我怎么能实现这个目标？

提前致谢

Answer 1

使用原生JavaScript的一种方法：

function h1Words() {
  // finding the first/only <h1> element:
  var h1 = document.querySelector('h1'),
    // working out whether we can use textContent or innerText to access the text:
    textProp = 'textContent' in document ? 'textContent' : 'innerText',
    // a simple counter:
    wordNum = 1;

    // setting the innerHTML of the <h1> element
       // accessing the text of the <h1>,
       // splitting that text on word-boundary characters (/\b/) with
       // split() using a regular expression,
       // iterating over the resuls using map(), 'chars' is the array-element:
       // if the 'chars' variable is a string of alpha-numerics (/^w+$/)
       // we wrap that sequence in a <span> element (with classes),
       // otherwise we return the 'chars' unchanged:
    h1.innerHTML = h1[textProp].split(/\b/).map(function(chars) {
      return (/^\w+$/).test(chars) ? '<span class="word word' + wordNum+++'">' + chars + '</span>' : chars;
    // joining the array-elements back together to re-form a string:
    }).join('');
}

h1Words();

h1 .word {
  color: rgba(200,200,200,0.6);
}

h1 .word3 {
  color: orange;
}

h1 .word:nth-child(1) {
  color: green;
}

<h1>Hello, welcome to this world</h1>

参考文献：

Answer 2

用css我们可以做到这一点。

    h2 > span{color:red;}

如何设置WordPress帖子标题的单个单词的样式

2 个答案: