将`active`类添加到当前单个页面的wordpress内容

寻找您的帮助和建议。我有一个在Wordpress中链接到single的列表。我只需将类active仅放置到活动页面的li。将`active`类添加到当前单个页面的wordpress内容

应该是这样的形象

上，但它是：

我的WP-代码：

<ul class="inline-list medium-6 large-4 skill-items"> 
<?php 
    $id = get_the_ID(); 
    // echo $id; 
    $class; 
    $skills = new WP_Query(array(
     'post_type' => 'skills', 
     'order' => 'ASC' 
     )); 
    if ($skills->have_posts()) : while ($skills->have_posts()) : $skills->the_post(); 
    // echo $post->ID; 
    if($id == $post->ID) {$class = 'active';} else {$class = '';} 
    ?> 
    <li class="<?php echo $class; ?>"><a href="<?php echo esc_url(get_permalink()); ?>"><?php the_title(); ?></a></li> 
    <?php endwhile; endif; wp_reset_query(); 
?> 
</ul>

来源

2015-12-21 vladja

您是否尝试过使用WordPress的类'current-menu-item' –

甚至不考虑将您的导航菜单项存储在CPT中并循环播放。只是使用标准的'nav_menu'和我提供的正确答案 – Trix

这不是在Wordpress中执行菜单的正确方法。您应该使用wp_nav_menu而不是自定义WP_Query。

首先，在的functions.php添加以下register a new menu：

add_action('after_setup_theme', 'register_my_menu'); 
function register_my_menu() { 
    register_nav_menu('skills_menu', __('Skills menu', 'your-theme-name')); 
}

然后登录你的管理，你会看到在外观>菜单新的菜单布局。为该展示位置创建一个新菜单 - 您可以自动将顶级新页面添加到该菜单。

然后在你的模板中添加以下以显示菜单：

<?php wp_nav_menu(array('theme_location' => 'skills_menu')); ?>

Wordpress will automatically handle the active class加入current-menu-item到合适的li。不需要任何过滤器。

来源

2015-12-21 15:59:56 vard

-1

你可以试试这个：

function my_alter_classes_on_li($classes, $item){ 
    global $post; 
    if(in_array($post->post_type, $classes)) $classes[] = 'current-menu-item'; 
    return $classes; 
} 
add_filter('nav_menu_css_class', 'my_alter_classes_on_li', 10, 2);

来源

2015-12-21 15:48:18 Trix

他没有使用'wp_nav_menu' ... – vard

找到答案使用jQuery，将发布为答案 – vladja

@vard如果是这样，他/她是错误的。没有理由有人不使用这种有用的东西。我提供的答案并不需要这样愚蠢的东西，jQuery等解决方法。如果他需要正确的答案，我提供了一个 – Trix

发现使用Javascript/jQuery

jQuery(document).ready(function($){ 
var pgurl = window.location.href; 
$("ul.skill-items li").each(function(){ 
    if($(this).find('a').attr("href") == pgurl || $(this).find('a').attr("href") == '') 
    $(this).addClass("active"); 
}) 
});

pgurl包含您目前的网址为我的问题的答案。之后，我们正在寻找每个项目anchor及其链接。然后我们正在comapring这些链接，如果它们是相同的，我们将类active添加到li

来源

2015-12-21 15:56:49 vladja

将`active`类添加到当前单个页面的wordpress内容

回答

相关问题