当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

ダイナミックハイライト

提供: WordPress Codex 日本語版
2009年2月17日 (火) 14:37時点におけるMizuno (トーク | 投稿記録)による版 (原文をコピー)

(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先: 案内検索

このページ「ダイナミックハイライト」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

Dynamic menu highlighting is a way to give users a reference point with which to navigate. It is like the dot on the map that says "you are here". WordPress.org has utilized dynamic menu highlighting.
This image illustrates that the user is currently looking
at a page under the menu "DOCS".

By looking at the menu list you can, due to the use of the dark thick line easily ascertain that you are currently on a page within the "DOCS" or documentation section of the site.

This article will explain how to go about making a navigation menu that dynamically highlights the currently displayed page, however there are plugins available that can do most of the work for you.


Overview

There are a number of components that make dynamically highlighted navigation work, they include :

  1. highlighting between page loads your current location or navigation position.
  2. highlighting other navigation points on mouse over.
  3. showing submenu's of navigation, leaving a breadcrumb trail.(this is not covered by this article at this time)

There are also many ways to achieve dynamically highlighted navigation these include for example javascript, flash, HTML and CSS along with PHP. You will need to go outside of this article to find help with anything but the CSS/PHP method.


Basic Navigation Lists

The basic navigation list might look something like this:

<ul id="navigation">
<li><a href="#">Page One</a></li>
<li id="current"><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>

And there would likely be some bit of CSS in the page's stylesheet that would specifically style list items with the "current" ID differently from other list items.

This works fine with static HTML pages, but when dealing with dynamic pages, things become a little more complicated. Perhaps this menu is supposed to be in a site's sidebar and the sidebar is contained in a single file that is called from multiple places. Obviously, as written, only one item would ever be highlighted, no matter what page is actually being viewed. That is not what we want at all!

Making the Code Dynamic

PHP allows us to add the desired highlighting effect that reacts to whatever page is being viewed. Coupled with WordPress's is_ functions, we can dynamically test what page is being viewed and then rewrite the code based on the results of that test.

There are two ways to go about this. One requires us to create a variable ($current) that will always equal the page number we're on. It also requires us to put some CSS on each page instead of keeping it all in the main CSS document. The other way means a bit more of a mess with PHP, but it means we get to keep all our styling in a single CSS document.

Method One: With CSS On Each Page

The first step in this method is to remove the one id="current" from the list and then add a unique id attribute to each list item.

<ul id="navigation">
<li id="one"><a href="#">Page One</a></li>
<li id="two"><a href="#">Page Two</a></li>
<li id="three"><a href="#">Page Three</a></li>
<li id="four"><a href="#">Page Four</a></li>
</ul>

The next part is where PHP comes in.

We need to write a conditional statement that will test what page is being viewed and define a variable based on the results of that test.

<?php
if ( is_page('Page One') ) { $current = 'one'; }
elseif ( is_page('Page Two') ) { $current = 'two'; }
elseif ( is_page('Page Three') ) { $current = 'three'; }
elseif ( is_page('Page Four') ) { $current = 'four'; }
?>

This piece of code uses the is_page(); function to check the title of the current page. If the title is "Page One," the variable $current is assigned the value of "one;" if it is "Page Two," $current becomes "two;" etc., etc. On a WordPress template, this would go in the header.php file between the <head></head> tags.

Now, we need to write some CSS that will respond to this and highlight the appropriate list item based on what $current is. We can't do this in a CSS file because we can't put dynamic content in a CSS file. So we need to move the CSS that highlights the list item out of the CSS file and into our page itself where the dynamic content will work.

So, say we just wanted to do a simple highlight by changing the background color of the highlighted item to yellow. Our CSS might look like this:

#current {
background-color: yellow;
}
</style>

We'll move that out of the CSS file and into an inline CSS block in the header of our page.

<style type="text/css">
#current {
background-color: yellow;
}
</style>

Using a WordPress template, this would go in the header.php file, between the <head></head> tags.

Now we need to make it dynamic. So we will replace the #current selector with a bit of PHP:

<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>

This will print the value of $current thus completing the CSS and successfully highlighting the appropriate item.

Method Two: With CSS In One Document

With this method, we will also need to remove the single id="current" from the list, but we won't need to add a unique id attribute to each list item. We'll let PHP do two things to make life easy: decide which page is our current page; display an ID of "current" to make that navigation item stand out.

Let's give it a shot. Here's our list of navigation at the outset:

<ul id="navigation">
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>

Nice and simple. We'll only be editing the beginning of each line, those opening <li> tags. The rest of the list we'll leave alone (for now).

We'll put in a few if statements. This will let PHP determine which page the user is on and allow it to put "current" in the right spot. Here's how one of those <li> elements from above will look:

<li<?php 
if (is_home())
{ 
echo " id=\"current\"";
}
?>><a href="#">Page One</a></li>
</li>

The pair of adjacent greater-than signs in line 6 is there on purpose. The if statement interrupted our beginning <li> tag and that second caret in line 6 will close the tag we opened in line 1.

Remember, this is just one item in the list; you'll need to do something similar to this for every item in your navigation. The good news is that if you're using templates, you'll only need to do this once: in your header.php template.

The result will be that if the user is on the home page, the HTML code WordPress will generate for this one menu item would look like this:

<li id="current"><a href="#">Page One</a></li>

On any other page, it would look like this:

<li><a href="#">Page One</a></li>

Now we can style that link so that when users are on the home page, the navigation item makes it very clear.

Here's an idea of how navigation could look in your header.php document that would allow users to see where they are:

<ul id="menu">

        <!-- To show "current" on the home page -->
        <li<?php 
                if (is_home()) 
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>

        <!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
        <li<?php 
                if (is_page('Archive') || is_single() && !in_category('10'))  
                { 
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/archive">Archive</a>
        </li>

        <!-- To show "current" on any posts in category 10, called Design -->
        <li<?php
                if (is_category('Design') || in_category('10') && !is_single())
                {
                echo " id=\"current\""; 
                }?>>
                <a href="<?php bloginfo('url') ?>/category/design">Design</a>
        </li>

        <!-- To show "current" on the About Page -->
        <li<?php 
                if (is_page('About')) 
                { 
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/about">About</a>
        </li>
</ul>

With some well-placed IDs around our site, users will be sure to know exactly where they are at all times, even when they come to our site from search results.

Using some is_ functions, we can work to determine the identity of any page within WordPress and set our code to show "current" for any of our navigation elements.

As previously mentioned, the CSS declarations would need to be set up to do something to the current menu item:

#current
{
background-color: #336699;
}

That navigation item is sure to stand out, now.

Using this method, all our CSS stays in our main CSS page. We don't have to track down color changes in different templates when we decide to change things around sometime in the future. That was really what made us all fall in love with CSS in the first place, right?

Examples

The method here will only work with Pages created by the new Page feature in WordPress v1.5+. It could be easily expanded to test for other conditions by using different is_ functions. Ryan Boren has a good summary of the different is_ functions and what they test for. You can also check the onsite summary, Conditional Tags.

You can see this method in action at Simple Bits Tabbed Navbar from Listamatic.

Resources

These links have some information that you might find useful in your customization of this method and in the creation of menus and navigation lists in general.

Plugins

These plugins take care of the complicated php coding for you, leaving you to just set up the css.

  • WP-pagesnav plugin - creates a dynamic menu utilizing the normal Page structure. This plugin includes dynamic highlighting and menus of multiple levels with options.
  • dTabs - Dynamic Tabs plugin - enables you to easily set up dynamic tabs for pages, categories, posts, the home page, archives, and bookmarks in the admin panel with optional drop down menus. No coding whatsoever is needed if used with the Kubrick Tabs theme.


最新英語版: WordPress Codex » 最新版との差分

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。