18May

wpressmonster模板为底部加上自定义菜单

时间: 2013-5-18 分类: WordPress教程 作者: 鱼小委 5886 次浏览

TAGS:

最近在给公司做一个子公司的产品专题网站,使用的是wpressmonster企业模板,原先的模板内置是通过每个页面的排序生成导航菜单的,不支持自定义菜单这样非常不方便。今天修改了一下代码加入了后台自定菜单,可通过自定义菜单进行网站底部的菜单设置。

1.首先打开模板文件中的footer.php文件,找到并删除以下代码

<!-- copyright -->
<div class="copyright_text">
<?php echo get_option('copyright_text', $wp_copyright_text); ?>
</div>
<!-- begin social network icons -->
<div class="social_icons">
<?php echo get_option('social_icons', $wp_social_networks); ?>
Downloaded This theme from by <a href="http://crshare.com">CRSHARE</a></div>
<!-- end social network icons -->

2.然后在footer.php文件中找到以下代码

<div class="footer_content">

在上述代码的后面加入下面的代码

<div id="footer-l">
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu', 'before' => ' | ','after' => ' | ', 'depth' => 1 )); ?>
</div>
<div id="footer-c">
<div>
<?php if ( $options['footer_description'] ) { ?>
<?php echo $options['footer_description_content']; ?>
<?php }else{ ?>
<div class="copyright_text">
<?php echo get_option('copyright_text', $wp_copyright_text); ?>
</div>
<?php } ?>
<?php if ( $options['analytics'] ) { ?>
<?php echo $options['analytics_content']; ?>
<?php } ?>
</div>
</div>
<!-- begin social network icons -->
<div class="social_icons">
<?php echo get_option('social_icons', $wp_social_networks); ?>
</div>
<!-- end social network icons -->

3.找到模板中的functions.php文件,在< ?php ?>之间加入以下代码

/* 自定义菜单 */
register_nav_menus(
	array(
		'header-menu' => __( '导航自定义菜单' ),
		'footer-menu' => __( '底部自定义菜单' )
	)
);

4.最后我们要加入底部菜单的CSS代码,找到wpressmonster模板中的style.css(这个模板比较特殊,这里的style.ss文件在一个名为css的文件夹下),在文件的最后加入以下代码

/* 底部 */
#footer{width:100%; line-height:20px; padding:0; margin-top:-12px; color:#999;clear:both;}
#footer a{color:#999;}
.center{margin:0 auto;}
.linkz ul li{float:left; margin-right:5px;white-space: nowrap;}
.linkz ul li a{color:#999;}
#footer-content{border-top:1px solid #e9e9e9;background:#000000;padding:15px 0 15px 0;clear:both;}
#footer-l {_margin-bottom: 10px;}
#footer-l ul {text-align: center;}
#footer-l ul li {display: inline;padding: 0 5px;}
#footer-l em{color:#666;}
#footer-c{text-align:center;}
#footer-c ul{height:24px;list-style:none outside none;margin:0}
#footer-c ul li{float:left;height:24px;text-align:left;vertical-align:top;width:auto}
#footer-c ul li span{color:#9D9D9D;padding:0 13px}
#footer-c ul li a{color:#6B6B6B;font-weight:bold}
#footer-r{float:right}

#article-author{border:1px solid #DDDDDD;background:#F9F9F9; padding:10px; margin:20px 0;}
#article-author #author-image{float:left;margin-right:15px;}
#entry-page{border-top:1px solid #ddd; margin:20px 0 20px 0}
.category .item_box{margin:0 0 20px 0; line-height:24px;}
.sma-nav li{float:left; margin-right:15px;}
.sma-nav li a{color:#006633}

加入这段底部CSS代码可能会和原先模板的底部CSS代码产生冲突,我们只需将原先的底部CSS代码删除即可。

原模板的底部CSS代码
/* begin footer */
#footer{
	color:#999999;
	width:950px;
	margin-left:auto;
	margin-right:auto;
	font-size:10px;
}
#footer .footer_content{
	width:950px;
	display:table;
	padding-bottom:15px;
}

#footer .footer_content .copyright_text{
	float:left;
}

#footer .footer_content .copyright_text a{
	color:#999999;
}

#footer .footer_content .copyright_text a:hover{
	color:#333333;
}

#footer .footer_content .social_icons{
	float:right;
}
#footer .footer_content .social_icons ul li{
	list-style:none;
	float:left;
	padding-left:5px;
}
/* end footer */

这样就大功告成了!!看似复杂其实很简单呵呵!!自己记录一下!

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前有 5 条精彩评论

  1. i be live 发表于: 2013 年 7 月 8 日 23:01:59

    860397#gmail.com
    你把原版和修改过各发一份呀!
    谢谢!

    • 鱼小委 发表于: 2013 年 7 月 9 日 09:42:23

      发给你了!

  2. i be live 发表于: 2013 年 7 月 7 日 19:06:57

    博主能不能把这套修改过的主题分享一下呀。

    • 鱼小委 发表于: 2013 年 7 月 7 日 20:30:19

      你好啊,可以共享啊,不过我这个模板改动比较大, 而且添加了一些功能,关于一个用短代码实现按钮的功能加了之后,模板后台多了一些没用的设置,这个我还没去掉,不过总体的功能都能实现。
      最近比较忙,你要的话我发到你邮箱里,你给我一个可以正常收发的邮件吧!!

    • 鱼小委 发表于: 2013 年 7 月 7 日 20:31:55

      目前这个模板修改之后的具体样式你可以看一下这个网站http://www.ichem.com.cn

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部