WordPress 导航菜单
Loading...
导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.
WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.
可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.
WordPress 导航菜单
点选式导航菜单 (待定话题)
既然菜单由首页和独立页面列表或首页和分类列表所组成, 我们就需要处理两个环节, 即首页菜单项和其他菜单项.
另外, 我们还需要处理菜单项的三个状态, 即一般状态, 当前菜单项状态 (如: 在首页中, 首页菜单项就是当前菜单项) 和选中菜单项状态.
也就是说, 我们共需要处理 3 个事情:
1. 首页外的其他菜单项
2. 首页菜单项
3. 菜单项处于不同状态时的视觉效果
&div id=&menubar&&
&ul class=&menus&&
&li class=&...&&&a href=&http://.../&&Home&/a&&/li&
&li class=&...&&&a href=&http://.../&&菜单项1&/a&&/li&
&li class=&...&&&a href=&http://.../&&菜单项2&/a&&/li&
&li class=&...&&&a href=&http://.../&&菜单项3&/a&&/li&
页面导航菜单
1. 独立页面列表作为菜单项
调用 wp_list_pages 获取独立页面列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
sort_column: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
打印独立页面菜单项的语句是:
&?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?&
2. 首页菜单项
由于一般独立页面的 class 是 page_item, 当前独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其他情况则是 page_item. 为此, 我们需要一段分支代码来为它确定 class:
// 如果是首页, class 是 current_page_item
if (is_home()) {
$home_menu_class = 'current_page_item';
// 如果不是首页, class 是 page_item
} else {
$home_menu_class = 'page_item';
打印首页菜单项的语句是:
&li class=&&?php echo($home_menu_class); ?&&&
&a title=&Home& href=&&?php echo get_settings('home'); ?&/&&Home&/a&
3. 菜单的样式
这是一个从普遍到特殊的处理过程, 一般菜单项的样式放前面, 当前和选中菜单项的样式放在后面, 当后者条件满足就会覆盖前者的样式, 从而改变外观.
/* 菜单项 */
#menubar ul.menus li {
float:left; /* 靠左浮动 */
list-style:none; /* 清空列表风格 */
margin-right:1px; /* 右侧的间隔 */
/* 菜单项链接 */
#menubar ul.menus li a {
padding:5px 10px; /* 内边距 */
display:block; /* 显示为块 */
color:#FFF; /* 文字颜色 */
background:#67ACE5; /* 背景颜色 */
text-decoration:none; /* 没有下横线 */
/* 当前菜单项链接 */
#menubar ul.menus li.current_page_item a {
background:#5495CD; /* 背景颜色 */
/* 选中菜单项链接 */
#menubar ul.menus li a:hover {
background:#4281B7; /* 背景颜色 */
分类导航菜单
1. 分类列表作为菜单项
调用方法 wp_list_categories 获取分类列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
orderby: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
show_count: 是否显示该分类的文章数量, 这里不需要显示, 设为 0
打印分类菜单项的语句是:
&?php wp_list_categories('depth=1&title_li=0&orderby=name&show_count=0'); ?&
2. 首页菜单项
与页面导航菜单相似, 只是菜单项的 class 有所不同.
page_item 更改为 cat-item
current_page_item 更改为 current-cat
3. 菜单的样式
因为菜单项的 class 略有不同, 所以也需稍作修改.
current_page_item 更改为 current-cat
以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css
主题已包含了页面导航菜单和分类导航菜单两个菜单栏. 为了演示方便, 我使用了 class="menubar" 来定义两个菜单栏的样式. 而正式使用只有一个菜单栏, 用 id 定义更为合适.
相关的文章
Loading...
文章浏览记录
正在加载...点击 tag标签 跳转到首页 贴出文件 大家帮看一下吧_Wopus问答
点击 tag标签 跳转到首页 贴出文件 大家帮看一下吧
&?php get_header(); ?&
&!-- BEGIN SLIDER --&
&?php if(get_option('journal_slider')=='yes'){
$slideshowloop = new WP_Query( array( 'post_type' =& 'slideshow', 'order' =& 'ASC' ) ); ?&
&div id=&slider&&
if($slideshowloop -& have_posts()){
while ( $slideshowloop-&have_posts() ) : $slideshowloop-&the_post();
$slideshow_meta = get_post_meta($post-&ID,'_slideshow_meta',TRUE);
&a href=&&?php echo $slideshow_meta['linkto'];?&&&
&?php //the_post_thumbnail('slider-thumbnail',array(&title& =& ''.$slideshow_meta['caption'].''));?&
&img src=&&?php bloginfo('template_directory'); ?&/timthumb.php?src=&?php echo get_image_path($post-&ID); ?&&h=370&w=940&zc=1& alt=&&?php the_title(); ?&& title=&&?php echo $slideshow_meta['caption'];?&&&
&div style=&border:1px solid # background:#000; opacity:0.5;text-align: padding:150px 100px 0; height:219 font-size:14 &&
&span style=&opacity:1;color:#text-shadow:&&这里是幻灯片，进入后台&幻灯片&进入菜单选项建立一个或多个幻灯片。默认图片大小940x370.&/span&
&div style=&width:940 margin:0 auto 30 background:url(&?php bloginfo('template_directory'); ?&/images/bk_shadow_slider.png) 0 -35px no- height:15&&&/div&
&!-- END SLIDER --&
&!-- SLIDER SETTINGS --&
&script type=&text/javascript&&
$(window).load(function() {
$('#slider').nivoSlider({
effect:'&?php if(get_option('journal_slider_effect')==''): echo 'random';
else: echo get_option('journal_slider_effect');
slices:&?php if(get_option('journal_slider_slices')==''): echo '15';
else: echo get_option('journal_slider_slices');
animSpeed:&?php if(get_option('journal_slider_animation_speed')==''): echo '500';
else: echo get_option('journal_slider_animation_speed');
pauseTime:&?php if(get_option('journal_slider_pause_time')==''): echo '3000';
else: echo get_option('journal_slider_pause_time');
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:&?php if(get_option('journal_slider_caption_opacity')==''): echo '0.8';
else: echo get_option('journal_slider_caption_opacity');
?&, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
&?php }else{?&
&!-- Begin #featuredPosts --&
if(get_option('journal_featured_posts')!=''){
query_posts('tag=featured&showposts='.get_option('journal_featured_posts'));
query_posts('tag=featured&showposts=2');
$featuredindex = 1;
if (have_posts()) : ?&
&div id=&featuredPosts&&
&?php while (have_posts()) : the_post(); ?&
&div class=&item &?php if(($featuredindex % 2) == 0){ echo 'lastItem';}?&&&
&h1&&a href=&&?php the_permalink() ?&& title=&Permanent Link to &?php the_title_attribute(); ?&&&&?php the_title(); ?&&/a&&/h1&
if ( has_post_thumbnail() ) {?&
&a href=&&?php the_permalink() ?&& title=&Permanent Link to &?php the_title_attribute(); ?&&&
&?php //the_post_thumbnail('featured-post-thumbnail');?&
&img src=&&?php bloginfo('template_directory'); ?&/timthumb.php?src=&?php echo get_image_path($post-&ID); ?&&h=290&w=430&zc=1& alt=&&?php the_title(); ?&&&
&?php } else {?&
&img src=&&?php bloginfo('template_directory'); ?&/images/nothumb_featured.jpg& alt=&No Thumb&
&?php } ?&
&?php wpe_excerpt('wpe_excerptlength_featured', 'wpe_excerptmore'); ?&
&a href=&&?php the_permalink() ?&& class=&readMore&&阅读全部&/a&
&?php ++$ ?&
wp_reset_query();?&
&!-- End #featuredPosts --&
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$wp_query-&is_archive = $wp_query-&is_home =
$postindex = 1;
if(!query_posts('showposts='.get_option('journal_home_posts').''. '&paged=' . $paged)){
if(get_option('journal_home_posts')!=''){
query_posts('showposts='.get_option('journal_home_posts'). '&paged=' . $paged);
query_posts('showposts=6'. '&paged=' . $paged);
query_posts('showposts='.get_option('journal_home_posts').''. '&paged=' . $paged);
if(get_option('journal_home_posts')!=''){
query_posts('showposts='.get_option('journal_home_posts').''. '&paged=' . $paged);
query_posts('showposts=6'. '&paged=' . $paged);
if (have_posts()) : while (have_posts()) : the_post(); ?&
&div class=&postBox &?php if(($postindex % 3) == 0){ echo 'lastBox';}?&&&
&div class=&postBoxInner&&
if(has_post_thumbnail()) {
//the_post_thumbnail();?&
&img src=&&?php bloginfo('template_directory'); ?&/timthumb.php?src=&?php echo get_image_path($post-&ID); ?&&h=90&w=255&zc=1& alt=&&?php the_title(); ?&&&
&?php } else {
echo '&img src=&'.get_bloginfo(&template_url&).'/images/nothumb.jpg&
alt=&No Thumbnail&/&';
&h2&&a href=&&?php the_permalink() ?&& &&?php echo cut_str($post-&post_title,20); ?&&/a&&/h2&
&div class=&excerpt&&&?php
wpe_excerpt('wpe_excerptlength_index', 'wpe_excerptmore') ?&&/div&
&div class=&meta&& &?php the_time('M j, Y') ?& &&&&img src=&&?php bloginfo('template_directory'); ?&/images/ico_post_comments.png& alt=&& /& &?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?&&/div&
&a href=&&?php the_permalink() ?&& class=&readMore&&阅读全部&/a&
&?php ++$ ?&
&?php else : ?&
&p&不好意思啦，你要观摩的网页已经不在这里了.&/p&
wp_reset_query();?&
&div style=&clear:&&&/div&
&?php if (function_exists(&emm_paginate&)) {
emm_paginate();
&?php get_footer(); ?&
&?php get_header(); ?&
&!-- Begin #colleft --&
&div id=&colLeft&&
&!-- archive-title --&
&?php if(get_option('journal_box_model')!=&normal&){?&
&?php if(is_month()) { ?&
&h1&Archive from &?php the_time('F, Y') ?&&/h1&
&?php } elseif(is_category()){ ?&
&h1&Browsing &&?php $current_category = single_cat_title(&&, true); ?&&&/h1&
&?php } elseif(is_tag()) { ?&
&h1&Tagged with &&?php wp_title('',true,''); ?&&&/h1&
&?php } elseif(is_author()) { ?&
&h1&Articles by &&?php wp_title('',true,''); ?&&&/h1&
&?php }else{?&
&!--&h1&Browsing All Articles&/h1&--&
&?php if(is_month()) { ?&
&div id=&archive-title&&
Archive from &strong&&?php the_time('F, Y') ?&&/strong&
&?php } ?&
&?php if(is_category()) { ?&
&div id=&archive-title&&
Browsing&&strong&&?php $current_category = single_cat_title(&&, true); ?&&/strong&&
&?php } ?&
&?php if(is_tag()) { ?&
&div id=&archive-title&&
Tagged with &&strong&&?php wp_title('',true,''); ?&&/strong&&
&?php } ?&
&?php if(is_author()) { ?&
&div id=&archive-title&&
Articles by &&strong&&?php wp_title('',true,''); ?&&/strong&&
&!-- /archive-title --&
&?php $postindex = 1; ?&
&?php if (have_posts()) : while (have_posts()) : the_post(); ?&
&?php if(get_option('journal_box_model')!=&normal&){?&
&div class=&postBox &?php if(($postindex % 2) == 0){ echo 'lastBox';}?&&&
&div class=&postBoxInner&&
if ( has_post_thumbnail()) {
//the_post_thumbnail();?&
&img src=&&?php bloginfo('template_directory'); ?&/timthumb.php?src=&?php echo get_image_path($post-&ID); ?&&h=90&w=255&zc=1& alt=&&?php the_title(); ?&&&
&?php } else {?&
&img src=&&?php bloginfo('template_directory'); ?&/images/nothumb.jpg& alt=&No Thumbnail&
&?php } ?&
&h2&&a href=&&?php the_permalink() ?&& &&?php the_title(); ?&&/a&&/h2&
&div class=&excerpt&&&?php
wpe_excerpt('wpe_excerptlength_index', 'wpe_excerptmore') ?&&/div&
&div class=&meta&& &?php the_time('M j, Y') ?& &&&&img src=&&?php bloginfo('template_directory'); ?&/images/ico_post_comments.png& alt=&& /& &?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?&&/div&
&a href=&&?php the_permalink() ?&& class=&readMore&&阅读全文&/a&
&?php ++$ ?&
&?php }else{?&
&div id=&singlePost& class=&normal&&
&h1&&a href=&&?php the_permalink() ?&& &&?php the_title(); ?&&/a&&/h1&
&div class=&meta&&
&?php the_content(__('Read more &')); ?&
&?php else : ?&
&p&呀，最近木头这儿白蚁挺多的。页面给吃掉了不少。&/p&
&div style=&clear:&&&/div&
&?php if (function_exists(&emm_paginate&)) {
emm_paginate();
&!-- End #colLeft --&
&?php get_sidebar(); ?&
&?php get_footer(); ?&
共有1个回答
标签页的模板名称是 tag.php 并非 tags.php，所以修改下文件名称就可以了。
做好事要留名，请先再回答，如果还没有帐户请先。