Wordpress导航 - 主动样式（CSS）

Question

The website I'm working on is available at ryanbenson.info/wordpress/

I converted my theme into a WordPress theme, and I'm not quite sure how to make my navigation work the same way.

On the previous version, located at ryanbenson.info, the individual pages call for different CSS documents, fading the navigation.

** note that the navigation is images, the top one fading as you hover

Now that the CSS and the header documents are standard for the whole site, I don't know how to go about styling it.

Answer 1

It somewhat depends on how you're doing things, but a general solution is:

1. Check the current URL.

2. If the link is to that URL, apply a class that makes it faded.

It looks like this menu is baked into your header rather than using any of WordPress's menu functions. So if your code looks something like this:

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/work">Work</a>
<a href="/contact">Contact</a>

You'd instead have something like:

<a <?= is_home() ? 'class="current_page"' : '' ?> href="/">Home</a>
<a <?= is_page('about') ? 'class="current_page"' : '' ?> href="/about">About</a>
<a <?= is_page('work') ? 'class="current_page"' : '' ?> href="/work">Work</a>
<a <?= is_page('contact') ? 'class="current_page"' : '' ?> href="/contact">Contact</a>

Answer 2

A good idea would be to integrate the nav_menu function into your theme.

First you have to register the menu in your functions.php

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

Then you have to replace your current menu in the header.php with this:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Then go to wp-admin -> Appearance -> Menus and add your menu. Now you have a working menu with classes for the current menu item. You can now style your new menu like it was before and have the current menu item highlighted. I would suggest you use css-sprites or even better an icon font instead of the pictures.