Thêm các lớp CSS đầu tiên / cuối cùng vào các menu

điều đó là có thể, mà không cần hack javascript? như thế này:

<ul class="my_menu">
  <li class="first"> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li class"with_sub"> ... 
    <ul class="my_menu_sub">
      <li class="first"> ... </li>
      <li> ... </li>
      <li> ... </li>
      <li class="last"> ... </li>
    </ul>
  </li>
  <li> ... </li>
  <li> ... </li>
  <li class="last"> ... </li>
</ul>

Một cách tiếp cận tốt hơn và đơn giản hơn:

function add_first_and_last($items) {
  $items[1]->classes[] = 'first-menu-item';
  $items[count($items)]->classes[] = 'last-menu-item';
  return $items;
}

add_filter('wp_nav_menu_objects', 'add_first_and_last');

Đây là đoạn mã thô đảm nhiệm việc sửa đổi đầu ra menu và thêm lớp đầu tiên / cuối cùng vào lớp đầu tiên và lớp cuối cùng (bên ngoài ulkhông được áp dụng ở giai đoạn này vì vậy không được tính). Lưu ý - yêu cầu PHP5 chostrripos()

add_filter( 'wp_nav_menu_items', 'first_last_class' );

function first_last_class( $items ) {

    $first = strpos( $items, 'class=' );

    if( false !== $first )
         $items = substr_replace( $items, 'first ', $first+7, 0 );

    $last = strripos( $items, 'class=');

    if( false !== $last )
         $items = substr_replace( $items, 'last ', $last+7, 0 );

    return $items;
}

Tôi hơi bế tắc với cách làm cho nó xử lý các danh sách lồng nhau, nhưng nó sẽ giúp bạn bắt đầu ít nhất.

Đây là một chức năng chỉ thêm các lớp đầu tiên / cuối cùng vào các mục menu cha. Đối với hầu hết các kiểu CSS, đây là tất cả những gì cần thiết.

function nav_menu_add_classes( $items, $args ) {
    //Add first item class
    $items[1]->classes[] = 'menu-item-first';

    //Add last item class
    $i = count($items);
    while($items[$i]->menu_item_parent != 0 && $i > 0) {
        $i--;
    }
    $items[$i]->classes[] = 'menu-item-last';

    return $items;
}
add_filter( 'wp_nav_menu_objects', 'nav_menu_add_classes', 10, 2 );

Tìm hiểu thêm về API Menu mới trong wordpress 3. Bạn có thể cung cấp bất kỳ phần tử nào theo cách thủ công. Ngoài ra, một khi thành thạo, nó làm cho các menu trở thành một niềm vui để chỉnh sửa.

Nếu bạn có các menu lồng nhau

function add_first_and_last($items) {
    // first class on parent most level
    $items[1]->classes[] = 'first';
    // separate parents and children
    $parents = $children = array();
    foreach($items as $k => $item){
        if($item->menu_item_parent == '0'){
            $parents[] = $k;
        } else {
            $children[$item->menu_item_parent] = $k;
        }
    }
    // last class on parent most level
    $last = end(array_keys($parents));
    foreach ($parents as $k => $parent) {
        if ($k == $last) {
            $items[$parent]->classes[] = 'last';
        }
    }
    // last class on children levels
    foreach($children as $child){
        $items[$child]->classes[] = 'last';
    }
    // first class on children levels
    $r_items = array_reverse($items, true);
    foreach($r_items as $k => $item){
        if($item->menu_item_parent !== '0'){
            $children[$item->menu_item_parent] = $k;
        }
    }
    foreach($children as $child){
        $items[$child]->classes[] = 'first';
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_first_and_last');

Tôi thích sự đơn giản trong câu trả lời của Ismaelj, nhưng cần phải có nhiều hơn nếu bạn muốn các lớp menu phụ.

Nếu bạn không cần hỗ trợ cho IE8 hoặc thấp hơn, đừng quên rằng bạn cũng có thể sử dụng CSS thuần túy:

.my_menu > :first-child,
.my_menu > :last-child {
    /* some styles */
}

Hỗ trợ trình duyệt jQuery thậm chí còn tốt hơn, nhưng có vẻ như bạn đang cố tránh điều đó.

Dưới đây là một số mã tốt hơn để thêm các lớp mục menu đầu tiên và cuối cùng bao gồm hỗ trợ cho các menu con lồng nhau.

add_filter( 'wp_nav_menu_objects', 'tgm_filter_menu_class', 10, 2 );
/**
 * Filters the first and last nav menu objects in your menus
 * to add custom classes.
 *
 * This also supports nested menus.
 *
 * @since 1.0.0
 *
 * @param array $objects An array of nav menu objects
 * @param object $args Nav menu object args
 * @return object $objects Amended array of nav menu objects with new class
 */
function tgm_filter_menu_class( $objects, $args ) {

    // Add first/last classes to nested menu items
    $ids        = array();
    $parent_ids = array();
    $top_ids    = array();
    foreach ( $objects as $i => $object ) {
        // If there is no menu item parent, store the ID and skip over the object
        if ( 0 == $object->menu_item_parent ) {
            $top_ids[$i] = $object;
            continue;
        }

        // Add first item class to nested menus
        if ( ! in_array( $object->menu_item_parent, $ids ) ) {
            $objects[$i]->classes[] = 'first-menu-item';
            $ids[]          = $object->menu_item_parent;
        }

        // If we have just added the first menu item class, skip over adding the ID
        if ( in_array( 'first-menu-item', $object->classes ) )
            continue;

        // Store the menu parent IDs in an array
        $parent_ids[$i] = $object->menu_item_parent;
    }

    // Remove any duplicate values and pull out the last menu item
    $sanitized_parent_ids = array_unique( array_reverse( $parent_ids, true ) );

    // Loop through the IDs and add the last menu item class to the appropriate objects
    foreach ( $sanitized_parent_ids as $i => $id )
        $objects[$i]->classes[] = 'last-menu-item';

    // Finish it off by adding classes to the top level menu items
    $objects[1]->classes[] = 'first-menu-item'; // We can be assured 1 will be the first item in the menu :-)
    $objects[end( array_keys( $top_ids ) )]->classes[] = 'last-menu-item';

    // Return the menu objects
    return $objects;

}

Bạn có thể tìm thấy ý chính ở đây và hướng dẫn liên quan ở đây .

Làm thế nào về:

 ul li:last-child{
     // do something with the last li
 }

và có thể một số http://selectivizr.com/

CSS thuần túy, hoạt động với tôi. Điều này cũng sẽ làm việc với các menu con

ul.nav>li:last-of-type a