今天觉得自已blog的模板不太好看.. 其实想了很久想改,一直都没动手..
随便弄了一下.就遇到个导航栏标签定位的问题, 本想用css加在bodyid或js判断直接弄.后来发现原来还可以这样.. wp挺不错的.呵
wp原来的就有支持这个. 不过他的css是用在li里面.我要的是椭圆的按钮所以要放在span里面.. 如下面的出来的效果和css:
可以看出原来它的样式是为<li class="page_item page-item-2 current_page_item">而定位后的聚焦为current_page_item.
这是出来的html:
<div id="menu_items">
<ul>
<li><a href="http://***.com/wp/" class=""><span>首页</span></a></li>
<li class="page_item page-item-2 current_page_item"><a class="page_item page-item-2 current_page_item" href="http://***.com/wp/about" title="About"><span>About</span></a></li>
<li class="page_item page-item-45"><a class="page_item page-item-45" href="http://***.com/wp/guestbook" title="Guestbook"><span>Guestbook</span></a></li>
</ul>
<div class="clear"></div>
</div>
这是我的css....
#menu_items{
float:left;
margin-left:20px;
}
#menu_items ul{
list-style:none;
}
#menu_items li{
list-style:none;
display:block;
float:left;
}
#menu_items li a{
display:block;
float:left;
height:43px;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url(images/menu_007_left.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu_items li a span{
display:block;
float:left;
background:url(images/menu_007_right.jpg) no-repeat right;
height:43px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
cursor:pointer;
}
#menu_items li a:hover{
display:block;
float:left;
background:url(images/menu_007_left_h.jpg) no-repeat left;
height:43px;
}
#menu_items li a:hover span{
display:block;
float:left;
background:url(images/menu_007_right_h.jpg) no-repeat right;
color:#fff;
height:43px;
}
#menu_items li a.current_page_item{
display:block;
float:left;
height:43px;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url(images/menu_007_left_h.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu_items li a.current_page_item span{
display:block;
float:left;
background:url(images/menu_007_right_h.jpg) no-repeat right;
height:43px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
呵呵..其实这里才是开始看的东西... 晕
修改方法给首页弄一个
class="<?php if( is_home() ) { ?> current_page_item<?php } ?>
加在链接里面.判断当前是否为主页而聚焦...找不到一个好的词不好意思
而页面列表wp里面就有函数了.直接用
<?php wp_list_pages('title_li=');?>
这是我的代码:
<div id="menu_items">
<ul>
<li><a href="<?php echo get_option('home'); ?>/" class="<?php if( is_home() ) { ?> current_page_item<?php } ?>"><span>首页</span></a></li>
<?php wp_list_pages('title_li=');?>
</ul>
如果你对你的导航栏还有别的要求,比如css应该加在span或a里面 .
你就在wp-includesclasses.php里找到下面这段代码来更改
function start_el(&$output, $page, $depth, $args, $current_page) {
if ( $depth )
$indent = str_repeat("t", $depth);
else
$indent = '';
extract($args, EXTR_SKIP);
$css_class = 'page_item page-item-'.$page->ID;
if ( !empty($current_page) ) {
$_current_page = get_page( $current_page );
if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
$css_class .= ' current_page_ancestor';
if ( $page->ID == $current_page )
$css_class .= ' current_page_item';
elseif ( $_current_page && $page->ID == $_current_page->post_parent )
$css_class .= ' current_page_parent';
} elseif ( $page->ID == get_option('page_for_posts') ) {
$css_class .= ' current_page_parent';
}
$output .= $indent . '<li class="' . $css_class . '"><a class="' . $css_class . '" href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '"><span>' . $link_before . apply_filters('the_title', $page->post_title) . $link_after . '</span></a>';
if ( !empty($show_date) ) {
if ( 'modified' == $show_date )
$time = $page->post_modified;
else
$time = $page->post_date;
$output .= " " . mysql2date($date_format, $time);
}
}
我只在这里为我的a放上个class就好了..
$output .= $indent . '<li class="' . $css_class . '"><a class="' . $css_class . '" href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '"><span>' . $link_before . apply_filters('the_title', $page->post_title) . $link_after . '</span></a>';
