Как применить другую меню, стайлинг на переднюю страницу?
-
21-12-2019 - |
Вопрос
Я пытаюсь выяснить, как получить секунду Menustyling на сайте WordPress, который я использую Fullpage.js .
У меня есть пользовательский ходунок, а меню работает от onrorlinks для слайдов.Я пытаюсь выяснить, как изменить стайлинг в меню для слайдов, поэтому передняя страница имеет свою собственную.
сайт: 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');
}
}
});
.
Другие советы
Используйте класс кузова WordPress
На главной странице тег для тела будет иметь класс дома, как <body class="home">
Так что на домашней странице нацелена на меню, как так:
.home .your-menu-selector
.