Comment appliquer un menu différent style de la première page?
-
21-12-2019 - |
Question
Je suis à essayer de comprendre comment obtenir un deuxième menustyling sur un site WordPress que j'utilise fullpage.js sur.
J'ai un custom walker et le menu des œuvres de anchorlinks pour les diapositives.Je suis à essayer de comprendre comment changer le style dans le menu de diapositives, de sorte que la première page a son propre.
Site: http://www.svenssonsbild.se/Svenssonsbild2
Boucle:
<?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;?>">
walker:
<?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);
}
}
?>
La solution
Si vous voulez juste d'appliquer un style différent de la première section (pas de diapositives, de diapositives sont à l'horizontale), vous voudrez probablement le faire en utilisant le plugin rappels tels que afterLoad
ou onLeave
.
Quelque chose comme:
$.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');
}
}
});
Autres conseils
Utiliser wordpress corps de la classe
sur la page d'accueil de la balise body aura une classe de la maison comme <body class="home">
Ainsi, sur la page d'accueil de cibler le menu comme ceci:
.home .your-menu-selector