Нужна помощь с динамической подсветкой меню навигации по изображениям и спрайтам в WordPress - PullRequest
Новая
       14

Нужна помощь с динамической подсветкой меню навигации по изображениям и спрайтам в WordPress

0 голосов
/ 21 февраля 2011

У меня есть меню на основе изображений на WordPress сайте, которое я создаю, и мне хотелось бы иметь возможность динамически выделять для каждого раздела & , что более важно, выделять, когда каждый посетитель просматривает дочернюю страницу или сообщение на соответствующей странице .

Я разобрался, как сделать так, чтобы каждый раздел хорошо выделялся при просмотре родительской страницы, однако у меня возникли некоторые проблемы с достижением того же эффекта, когда я выбираю просмотр сообщения или подстраницы.

Поскольку Я использую категории для фильтрации контента на определенных страницах Мне удалось заставить каждый раздел выделять все еще при просмотре сообщения, используя: <?php if ( is_page('page-name') || is_category('cat-name') || in_category('cat-name')) { echo ' class="xxxx_highlight" '; } ?>, но, к сожалению, это также вызвало некоторые проблемы.... То, что произошло, было, как только в разделе БЛОГ И МЕДИА был размещен контент - оба раздела будут выделены одновременно, что, очевидно, не то, что здесь происходит.Однако я не мог понять, почему это произошло, поэтому я удалил in_category() & is_category() ...

Я просматривал раздел условных тегов вверх и вниз последние пару недель, но безрезультатно.какие дополнительные теги в моем распоряжении, чтобы достичь этого с помощью спрайтового меню.Что было бы лучше, чем ориентироваться на «категории», было бы, если бы существовал тег для простого поиска, если в меню использовалась страница и подстраница single.php для родителя ... не удалось найти ничего, что сработало бы, однакотак что я надеюсь, что некоторые гуру php / wordpress могут указать правильное направление с надеждой!

Вот моя текущая разметка: МЕНЮ HTML 

<ul id="nav">
    <li>
        <a href="/" id="logo"></a>
    </li>
    <li>
        <a href="/" id="home" <?php if ( is_front_page('events')) { echo ' class="home_highlight" '; } ?>></a><!-- HOME -->
    </li>
    <li>
        <a href="/artists" id="artists" <?php if ( is_page('artists')) { echo ' class="artists_highlight" '; } ?>></a><!-- ARTISTS -->
    </li>
    <li>
        <a href="/media" id="media" <?php if ( is_page('media')) { echo ' class="media_highlight" '; } ?>></a><!-- MEDIA -->
    </li>
    <li>
        <a href="/blog" id="blog" <?php if ( is_home('blog')) { echo ' class="blog_highlight" '; } ?>></a><!-- BLOG -->
    </li>
    <li>
        <a href="/store" id="store" <?php if ( is_page('store')) { echo ' class="store_highlight" '; } ?>></a><!-- STORE -->
    </li>
    <li>
        <a href="/contact" id="contact" <?php if ( is_page('contact')) { echo ' class="contact_highlight" '; } ?>></a><!-- CONTACT -->
    </li>
</ul>

Ответы [ 2 ]

1 голос
/ 21 февраля 2011

Я предлагаю вам использовать echo в "ul", что-то вроде 

<ul id="nav" class="<?php echo $post->ID; ?>">
..... li's and a's here

Так что с помощью CSS вы просто делаете 

.N #home, .M #artists, .X #media { [active styling] } /* where N is home ID, M is artists ID, X is media ID and so on */

Итак, когда вы находитесь на странице,дает ul класс "N", вы знаете, что #home будет активным.Когда вы находитесь в «M», вы знаете, что исполнители активны.

PS: Вы могли бы даже использовать настраиваемое поле, например «classname», для лучшего управления меню.

0 голосов
/ 28 февраля 2011

На тот случай, если кто-то еще столкнется с той же проблемой, с которой я столкнулся здесь, я наконец нашел решение самостоятельно после нескольких часов просеивания кодекса wordpress ...

Получает ответ на этот вопроспроблема гораздо проще, чем я мог себе представить.Все, что вам нужно сделать, это воспользоваться собственным тегом <?php body_class($class); ?> wordpresses ... После того, как вы закодировали это, перейдите к firebug и проверьте выведенные классы, которые генерирует тег, в зависимости от того, на какой странице вы находитесь.Так что теперь на этом этапе очень легко использовать сгенерированные классы (в частности, класс page-template-xxxx) и нацеливать этот класс с помощью CSS, чтобы выделить то, что вам нужно в старом стиле, как на статическом сайте.

Надеюсь, это поможет кому-нибудь еще с той же дилеммой, что и у меня!

...