Wenden Sie zwei verschiedene Stile auf Wiget-Titel zusammen mit einer dekorativen Linie an

Ich verwende die function unten, um dem widget_title ein Array zu geben, aber ich brauche ein zweites Array, um mit einer Zeile widget_title , die ich am Ende des Titels verwende. Wie gehe ich vor?

Ich gehe davon aus, dass ich eine andere class und einen zweiten $title , aber ich habe hundert verschiedene Wege und nichts ausprobiert.

 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 = ''.$title_parts[0].''; // 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{ } 

Solutions Collecting From Web of "Wenden Sie zwei verschiedene Stile auf Wiget-Titel zusammen mit einer dekorativen Linie an"

Dadurch wird ein Bereich um das erste Wort und die restlichen Wörter im Titel eingefügt. Passen Sie die classnnamen nach Bedarf an:

 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 = "$title[0] $title[1]"; } else { return; } return $new_title; } 

AKTUALISIEREN

Das folgende CSS wendet eine Farbe auf das erste Wort und eine Farbe auf die restlichen Wörter im Titel an und fügt eine dekorative Linie hinzu.

  .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; }