Как подсветить активный пункт в произвольном меню wordpress?

Question

[Nikitos08]

Есть простое меню не прикручено к админке wordpress как сделать так, что бы активный пункт подсвечивался? Не используя wp_nav_menu и.т.д

Answer 1

[Immortal_pony]

Предположу, что вывод этого меню выглядит как-то так:

<ul>
    <? foreach ($menu as $item) { ?>
        <li>
            <a href="<?= $item->link ?>"><?= $item-title ?></a>
        </li>
    <? } ?>
</ul>

Тогда его надо изменить примерно так:

<ul>
    <? $current_url = add_query_arg($wp->query_string, "", home_url( $wp->request)) ?>
    <? foreach ($menu as $item) { ?>
        <li <?= $current_url == $item->link ? "class='current'" : ""?>
            <a href="<?= $item->link ?>"><?= $item-title ?></a>
       </li>
    <? } ?>
</ul>

Comments

[Nikitos08]

Нет, меню реализовано стандартным списком html/css , я нуб того даже элементарное доходит пока тяжело

[Immortal_pony]

Для выделения активного пункта меню необходимо сравнить текущий url с url пункта меню. Если они совпадают, добавить класс "current" к необходимому пункту меню и потом с помощью CSS его декорировать.
Выше я указал решение на PHP. Оно также подойдет, если все меню уже реализовано статично, только смотреться будет чуть хуже:

<? $current_url = add_query_arg($wp->query_string, "", home_url( $wp->request)) ?>
<ul>        
        <li <?= $current_url == "http://item1-link" ? "class='current'" : ""?>>
             <a href="http://item1-link">Item Title 1</a>
        </li>

        <li <?= $current_url == "http://item2-link" ? "class='current'" : ""?>>
             <a href="http://item1-link2">Item Title 2</a>
        </li>
</ul>

Также можно реализовать с помощью JS:

<ul class="menu">        
        <li>
             <a href="http://item1-link">Item Title 1</a>
        </li>

        <li>
             <a href="http://item1-link2">Item Title 2</a>
        </li>
</ul>

<script>
$(function () {                                      // Когда страница загрузится
    $('ul.menu li a').each(function () {             // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;                // получаем адрес ссылки
        if(location == link) {               // при совпадении адреса ссылки и адреса окна
            $(this).addClass('current');  //добавляем класс
        }
    });
});
</script>

[Nikitos08]

Immortal_pony: Не могу я побороть проблему (

#main-menu {
position: relative;
padding: 0;
margin-top: 15px;
float: right;
font-size: 14pt;
}

#main-menu ul {
overflow: hidden;
zoom: 1;
}
#main-menu li {
list-style: none;
float: left;
border-left: 1px solid #BCBCBC;
padding: 0 20px;
margin: 0 1px 0 -1px;
position: relative;
z-index: 2;


}

#main-menu li ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
}

#main-menu li ul li {
float: none;
margin: 0;
text-align: left;
font-size: 11pt;
background: #fff;
width: 130px;
padding-top: 3px;
padding-bottom: 3px;
border: 0;
}
#main-menu li a {
display: block;
color: #333333;
text-decoration: none;
}
#main-menu li a:hover {
color: #b2b935;
text-decoration: none;
}
#main-menu li:active {
color: #b2b935;
text-decoration: none;
}

#main-menu li:hover ul, #menu li.jshover ul {
display: block;
border-radius: 10px;
box-shadow: 0 5px 5px #b7b7b7;
z-index: 2;

}

#main-menu li:first-child {
border: inherit;
}

.current {
color: #b2b935;
text-decoration: none;
}

$(function () {
$('#menu li a').each(function () {
var location = window.location.href;
var link = this.href;
if(location == link) {
$(this).addClass('current');
}
});
});

// Стили и JS

function enqueue_styles() {

wp_register_style( 'screen-style', THEME_DIR . '/style.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );

}

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function greenhouse_enqueue_js() {
wp_enqueue_script('resize', THEME_DIR . '/js/main-menu.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'greenhouse_enqueue_js');

Answer 2

[Nikitos08]

fImmortal_pony:
Не могу я побороть проблему (

<ul id="main-menu">
				<li><a href="/">Главная</a></li>
				<li>

				<a href="/about">О компании</a>

					<ul>
						<li><a href="/our-manufacturing">Наше производство</a></li>
						<li><a href="/cooperation">Сотрудничество</a></li>
						<li><a href="/guarantee-сertificates">Гарантия, Сертификаты</a></li>
						<li><a href="/news">Новости</a></li>
						<li><a href="/our-clients">Наши клиенты</a></li>
					</ul>

				</li>
				<li><a href="/about-technology">О технологии</a></li>
				<li><a href="/objects">Обьекты</a></li>
				<li><a href="/goods_caregory/all/">Проекты</a></li>
				<li>
				<a href="/services">Услуги</a>

					<ul>
						<li><a href="/calculate-project">Рассчитать проект</a></li>
						<li><a href="/individual-project">Индивидуальный проект</a></li>
						<li><a href="/landscaping">Ландшафтный дизайн</a></li>

					</ul>

				</li>
				<li>
				<a href="">Цены</a>
					<ul>
						<li><a href="/domokomplekt">Домокомплект</a></li>
						<li><a href="/box-house">Коробка дома</a></li>
						<li><a href="/turnkey">Под ключ</a></li>

					</ul>
				</li>
				<li><a href="/contacts">Контакты</a></li>
			</ul>

#main-menu {
	position: relative;
	padding: 0;
	margin-top: 15px;
	float: right;
	font-size: 14pt;
}	

#main-menu ul {
	overflow: hidden; 
	zoom: 1;
}
#main-menu li {
	list-style: none; 
	float: left; 
	border-left: 1px solid #BCBCBC; 
	padding: 0 20px; 
	margin: 0 1px 0 -1px;
	position: relative;
	z-index: 2;
	

}

#main-menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: none;
	position: absolute;
	left: 0;
	}

#main-menu li ul li {
	float: none;
	margin: 0;
	text-align: left;
	font-size: 11pt;
	background: #fff;
	width: 130px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 0;
	}
#main-menu li a {
	display: block;
	color: #333333;
	text-decoration: none;
	}
#main-menu li a:hover {
	color: #b2b935;
	text-decoration: none;
	}	
#main-menu li:active {
	color: #b2b935;
	text-decoration: none;
}

#main-menu li:hover ul, #menu li.jshover ul {
	display: block;
	border-radius: 10px;
	box-shadow: 0 5px 5px #b7b7b7;
	z-index: 2;
	
}

#main-menu li:first-child {
            border: inherit;
}

.current {
	color: #b2b935;
	text-decoration: none;
}

$(function () {
  $('#menu li a').each(function () {
    var location = window.location.href;
    var link = this.href;                
    if(location == link) {
      $(this).addClass('current');
    }
  });
});

// Стили и JS

function enqueue_styles() {

wp_register_style( 'screen-style', THEME_DIR . '/style.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );

}

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function greenhouse_enqueue_js() {
wp_enqueue_script('resize', THEME_DIR . '/js/main-menu.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'greenhouse_enqueue_js');

Comments

[Immortal_pony]

Ну так скрипт-то поправить необходимо с учетом разметки.
Вот реализация на jsfiddle под данную разметку ("выделенный" url прописан пункту "Цены").
jsfiddle.net/xv6Lw6st/1

И все равно перед использованием, необходимо будет поменять домен в скрипте.