Добавить класс `active` для текущей текущей страницы wordpress

Question

Ищет вашу помощь и советы. У меня есть список ссылок на single в Wordpress. Мне нужно разместить класс active только на личную страницу.

Должно быть как на этом

изображение Но:

Мой сор-код:

<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> 

Answer 1

Это не правильный способ сделать меню в 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. Для этого не требуется никакого фильтра.

Answer 2

Вы можете попробовать это:

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); 

Answer 3

нашел ответ на мой вопрос, используя 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 содержит текущую URL. После этого для каждого элемента мы ищем anchor и его ссылку. Затем мы сопоставляем эти ссылки, и если они равны, мы добавляем класс active в li