كيفية تطبيق نمط قائمة مختلف على الصفحة الأولى؟
-
21-12-2019 - |
سؤال
أحاول معرفة كيفية الحصول على ثانية 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
لا تنتمي إلى StackOverflow