我使用下面的函数给出widget_title 一个数组，但我需要第二个数组来处理标题末尾旁边使用的行。我该怎么做呢？
我想我需要再上一节课$title, 但我试过一百种不同的方法，什么都没有试过。
add_filter(\'widget_title\', my_title);
function my_title($title) {
// Cut the title to 2 parts
$title_parts = explode(\' \', $title, 1);
// Throw first word inside a span
$title = \'<span class="my_class">\'.$title_parts[0].\'</span>\';
// Add the remaining words if any
if(isset($title_parts[1]))
$title .= \' \'.$title_parts[1];
return $title;
}
CSS：
.widget {
margin: 0 0 1.5em;
margin-top: 15px;
width: 350px;
overflow: hidden;
background: #333846;
box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-moz-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-webkit-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
}
.widget-area{
width: 350px;
}
.widget-title {
text-transform: uppercase;
font-size: 1.22rem;
margin-bottom: 15px;
font-weight: bold;
}
.widget-title {
position: relative;
padding: 23px 23px;
z-index: 1;
}
.second_title .widget-title> span {
background-color:#383e4d;
}
.first_title:after {
content: \'\';
position: absolute;
display: inline-block;
top: 28px;
right: 1px;
left: 30px;
height: 3px;
background-color: #fff;
z-index: -1;
}
/* Make sure select elements fit in widgets. */
.widget select {
max-width: 100%;
}
.first_title {
z-index:1;
background: #383e4d;
}
.second_title{
color:#00d5c3;
background: #383e4d;
padding-right: 15px;
z-index:-1;
}
.second_title::before{
background: #383e4d;
z-index: 1;
}
.widget-title{
font-family: "GothamPro" !important;
font-size:1.15em;
color:#fff;
background:#383e4d;
padding-top:15px;
padding-bottom:15px;
z-index: 1;
}
.widget ul{
}
最合适的回答,由SO网友:Jami Gibbs 整理而成
这将包装span 围绕标题中的第一个单词和其余单词。根据需要调整类名：
add_filter(\'widget_title\', \'yourprefix_custom_title\');
function yourprefix_custom_title( $old_title ) {
$title = explode( " ", $old_title, 2 );
if ( isset( $title[0] ) && isset( $title[1] ) ) {
$new_title = "<span class=\'first\'>$title[0]</span> <span class=\'second\'>$title[1]</span>";
} else {
return;
}
return $new_title;
}
UPDATE
下面的CSS将对标题中的第一个单词应用颜色，对其余单词也应用颜色，并在后面添加装饰线。
.widget-title {
position: relative;
display: block;
overflow: hidden;
}
.widget-title:after {
content: "";
position: absolute;
top: 50%;
border-bottom: 1px solid #333333;
width: 100%;
margin: 0 .8em;
}
.widget-title span.first {
color: red;
}
.widget-title span.second {
color: green;
}
