web-dev-qa-db-ja.com

メニューリスト項目の2番目のWordにクラスを適用する方法は？

メニューのWordにクラスを適用したいのですが。たとえば、メニューに「私の項目」というリスト項目があるとします。とにかくスタイルを変更できるように、 "Item"という単語にクラスを適用したいと思います。

リストアイテムにスパンを追加してから、このようにCSSにクラスを追加する必要がありますか？

<div id="nav">
    <ul>
        <li><a href="/MyItem">My <span class="dark-blue">Item</span></a></li>
    </ul>
</div>

#nav ul li a.dark-blue {
    color: #00008B;
}
menuscssfilters
3
Brian T

各ナビゲーションメニュー項目のtitleをフィルタリングできます。残念ながら、このフィルタの名前は'the_title'です。単純なフィルタを追加するだけで、ナビゲーションメニュー以外の文字列も検出される可能性があります。

そのため、メニュークラスの開始時にナビゲーションメニュータイトルフィルタをオンにし、終了時にオフにするための2つ目の関数が必要です。

2番目の機能から始めましょう。

add_filter( 'wp_nav_menu_args', 'wpse_14037_filter_switch' );
add_filter( 'wp_nav_menu', 'wpse_14037_filter_switch' );

/**
 * Switches the registration of out title filter on and off.
 *
 * @param  mixed $input Array or string, we just pass it through.
 * @return mixed
 */
function wpse_14037_filter_switch( $input )
{
    $func = 'wp_nav_menu_args' == current_filter() ? 'add_filter' : 'remove_filter';
    $func( 'the_title', 'wpse_14037_filter_title' );
    return $input;
}

'wp_nav_menu_args'はwp_nav_menu()内で非常に早く呼び出されます。このコンテキストでwpse_14037_filter_switch()が実行されているとき（current_filter）、タイトルフィルタをオンにします。

'wp_nav_menu'は、すべてのアイテムがレンダリングされた後に呼び出されます。今度はタイトルフィルタをオフにします。

今、登録したばかりのwpse_14037_filter_title()が必要です。

/**
 * Adds a <span class="partNUMBER"> to each Word of a menu item title.
 *
 * @param  string $title
 * @return string
 */
function wpse_14037_filter_title( $title )
{
    $title = trim( $title );
    $parts = explode( ' ', $title );
    $out   = array ();
    $i     = 1;

    foreach ( $parts as $part )
    {
        $out[] = '<span class="part' . $i++ . '">' . $part . '</span>';
    }

    return join( ' ', $out );
}

私はあなたがそれを望んでいたよりももっと一般的な機能にすることに決めました。他の人々は3番目のWord…または15番目のスタイルを作りたいと思うかもしれません。

スタイルシートの2番目のWordに対処するには、新しいクラスを使用するだけです。

/* Your menu may have the class 'menu'. */
.menu .part2
{
    color: #005;
}
4
fuxia