0

ウィジェット用のタイトルが次のようなワードプレスベースのサイトを持っています

  • カテゴリ別に閲覧
  • ショッピングカート
  • ニュースレター
  • コミュニティ投票
  • 等

ここで、各ウィジェットの最初の単語を青色で表示し、残りの単語を黒色で表示したいと考えています。
それ、どうやったら出来るの？

(つまり、閲覧、ショッピング、ニュースレター、青色のコミュニティは黒色で残ります)

jQueryを使用してこれを行うことができると思いますが、その方法がわかりません。

編集：

サイト: http://granitess.com/wp/

4

2 に答える 2

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 でスタイルを設定できます。

これらの行をfunctions.phpテーマに追加するか、使用しているテーマの子テーマを作成してそこに追加することもできます。そうすれば、テーマが更新されても上書きされません。

于 2012-11-29T13:28:01.107 に答える
1

これを試して、 iterate all.widget-titleを取得し、そのテキストを取得し、スペースで分割し、最初の単語を で変更して<span style='color:blue;'>から、すべての単語を結合して.widget-titlehtml に設定できます。お気に入り

$('.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>');
});
于 2012-11-29T13:32:49.397 に答える