كيفية تطبيق نمط قائمة مختلف على الصفحة الأولى؟

StackOverflow https://stackoverflow.com//questions/22054929

سؤال

أحاول معرفة كيفية الحصول على ثانية com.menustyling على موقع WordPress الذي أستخدمه fullpage.js على.

لدي مشاية مخصصة والقائمة تعمل حسب روابط مرساة إلى الشرائح.أحاول معرفة كيفية تغيير النمط في قائمة الشرائح، بحيث يكون للصفحة الأولى تصميمها الخاص.

موقع: http://www.svenssonsbild.se/Svenssonsbild2

حلقة: 

<?php

if (($locations = get_nav_menu_locations()) && $locations['slides'] ) {

    $menu = wp_get_nav_menu_object( $locations['slides'] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    $pageID = array();

    foreach($menu_items as $item) {
        if($item->object == 'page')
        $pageID[] = $item->object_id;

    }
    query_posts( array( 'post_type' => 'page','post__in' => $pageID, 'posts_per_page' =>      
    count($pageID), 'orderby' => 'post__in' ) );

}


while(have_posts() ) : the_post();

?> 


<!--     <div id="<?php echo $post->post_name;?>" class="section"> -->

<div id="pageSlide-<?php echo $post->post_name;?>" class="section" data-anchor="<?php echo $post->post_name;?>">

ووكر:

<?php 
class description_walker extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent      = ($depth)?str_repeat("\t", $depth):'';
        $class_names = $value = '';
        $classes     = empty($item->classes)?array():(array) $item->classes;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
        $class_names = ' class="'.esc_attr($class_names).'"';
        $output     .= $indent.'<li id="menu-item-'.$item->ID.'"'.$value.$class_names.'>';
        $attributes  = !empty($item->attr_title)?' title="'.esc_attr($item->attr_title).'"':'';
        $attributes .= !empty($item->target)?' target="'.esc_attr($item->target).'"':'';
        $attributes .= !empty($item->xfn)?' rel="'.esc_attr($item->xfn).'"':'';
        if($item->object == 'page') {
            $varpost = get_post($item->object_id);
            if(is_home()) {
                $attributes .= ' href="#'.$varpost->post_name.'"';
            }
            else {
                $attributes .= ' href="'.home_url().'/#'.$varpost->post_name.'"';
            }
        }
        else 
            $attributes .= !empty($item->url)?' href="'.esc_attr($item->url).'"':'';
        $item_output     = $args->before;
        $item_output    .= '<a'.$attributes.'>';
        $item_output    .= $args->link_before.apply_filters('the_title', $item->title, $item->ID);
        $item_output    .= $args->link_after;
        $item_output    .= '</a>';
        $item_output    .= $args->after;
        $output         .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}
?>
هل كانت مفيدة؟

المحلول

إذا كنت تريد فقط تطبيق نمط مختلف على القسم الأول (وليس الشريحة، فالشرائح أفقية) فربما تريد القيام بذلك باستخدام عمليات الاسترجاعات الإضافية مثل afterLoad أو onLeave.

شيء مثل:

$.fn.fullpage({
    slidesColor: ['red', 'blue'],
    afterLoad: function (anchorLink, index) {
        //if it is not in the 1st section, we apply sectionMenu class
        if (index !=1 ) {
            $('.demo').addClass('sectionMenu');
        }

        //otherwise, we remove it
        else{
            $('.demo').removeClass('sectionMenu');
        }
    }
});

مثال حي

نصائح أخرى

استخدم فئة الجسم في ووردبريس

في الصفحة الرئيسية، سيكون لعلامة الجسم فئة منزلية مثل ذلك <body class="home">

لذا، في الصفحة الرئيسية، استهدف القائمة كما يلي:

.home .your-menu-selector
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top