首页 » WordPress教程 » 正文内容

wordpress制作单页网站导航页面模板代码

2013-11-11 18,092 ℃ 36 条评论

前几天在wordpress论坛看到有博主咨询某站的博客导航页面是怎么做的，访问后发现界面挺简洁美观，考虑到博客吧之前的网站收藏界面实在寒碜，于是就把页面仿过来了嵌套进去，博客吧这个页面是使用wordpress友情链接函数代码wp_list_bookmarks实现的，通过div+CSS控制样式美化，跟之前博客吧介绍的《WordPress 博客单页面调用友情链接的方法》是一样的，只是样式和函数参数有变化。

wordpress制作单页网站导航页面模板代码

基于wordpress制作的网址导航模板：https://www.boke8.net/wpwebsite.html

操作方法：

创建一个php文件，命名为fav.php，把下面代码添加进去，然后上传到当前主题目录的根目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?php
/*
Template Name: 资源导航
Template author: boke8.net
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_single() || is_page() ) { single_post_title(); echo "_"; bloginfo('name'); } ?></title>
<meta name="description" content="博客吧网站资源收藏夹，博主站长常用网站资源导航网站，网络资源目录导航页面模板，wordpress导航网站页面模板下载！"/>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fav.css" type="text/css" media="screen" />
<?php wp_head();?>
</head>
<body>
<div id="header">
	<div class="title">建站资源网站收藏目录 - BOKE8.NET</div>
</div>
<div id="bar">
	<div class="notice">
		<div class="logo"><a href="<?php the_permalink() ?>">首页</a></div>
		<div class="des">博客吧日常学习使用资源网站收藏平台，收集常用资源网站！注意：以下资源使用过程中产生的问题，本站概不负责！
		</div>
		<div class="back">
			<li><a href="<?php bloginfo('url');?>">返回主站</a></li>
		</div>
	</div>
</div>
<div id="container">	
	<?php //By boke8.net
		wp_list_bookmarks('show_description=0&show_name=1&show_images=1&title_li=&categorize=1&category_before=<div class="box">&category_after=</div>&category_orderby=id&orderby=rand&title_before=<h3><span>&title_after=</span></h3>&limit=13'); 
	?>	
</div>
<div id="footer">
	<div class="copyright">
		<p>Copyright &copy; 2013 <a href="#">boke8.net</a> All rights reserved.</p>
		<p>Powered by <a rel="nofollow" href="http://wordpress.org" target="_blank">wordpress</a></p>		
	</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

创建一个css文件，命名为fav.css，把下面样式代码添加进去，然后上传到当前主题的根目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*www.boke8.net/fav*/
div,html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin:0; padding:0;}
body {background:#fff; font:12px/1.5 tahoma,Arial,'宋体B8B\4F53';}
a {text-decoration:none;}
li {list-style:none;}
.clear {clear:both;}
img {border:none;}
 
/*header By boke8.net*/
#header {background:#2B7DAD; width:100%; line-height:30px; border-bottom:1px solid #166796; padding:16px 0px;}
.title {width:90%; margin:0 auto; color:#fff; font-family:'Microsoft Yahei'; font-size:1.8em; text-align:center; font-weight:bold; text-shadow:0 1px 0 #016F92; letter-spacing:1px; overflow:hidden;}
#bar {width:100%; zoom:1; background:#f8f8f8; line-height:30px; border-bottom:1px solid #eee;}
.notice {width:90%; margin:0 auto; position:relative;}
.logo {width:225px; height:124px; background:url(images/fav-logo.png) no-repeat left top; float:left; position:absolute; top:-68px; left:0; z-index:9; zoom:1;}
.logo a {display:block; width:225px; height:124px; text-indent:-9999px; outline:none;}
.des {text-align:center; color:#bcbcbc;}
.back {float:left; position:absolute; top:-32px; right:20px; width:100px; height:32px;}
.back a {background:#FF8610; display:block; width:100px; height:32px; color:#fff; font-weight:bold; line-height:32px; text-align:center;}
 
#container {background:#fff; width:90%; height:auto; margin:0 auto; overflow:hidden; position:relative;}
.box {float:left; width:46.3%; margin:45px 1.8% 0; border-top:3px solid #eee; position:relative; padding-top:30px;}
.box h3 {text-align:center; width:100%; position:absolute; top:-15px; left:0;}
.box h3 span {display:inline-block; background:#fff; width:100px; height:30px; text-align:center;}
.box ul {width:110%; overflow:hidden;}
.box ul li {float:left; width:22%; margin:0 1% 15px 0; display:inline;}
.box ul li a {display:block; width:88%; color:#000; background:#F8F8F8; border:1px solid #eee; height:115px; padding:5%; text-align:center;}
.box ul li a:hover {background:#FF8610; color:#fff;}
.box ul li img {width:92%; height:auto; padding:4%; background:#fff;}
.box ul li h4 {font-weight:normal; text-align:center;}
 
#footer {background:#1E5372; padding:30px 0; width:100%; margin-top:30px;}
#footer a {color:#fff;}
.copyright {width:80%; margin:0 auto; text-align:center; color:#fff; font-size:0.8em; font-family:verdana,Arial; position:relative;}

博客后台——页面——新建页面，页面标题为资源导航；右下角的属性中的模板选项，在下拉菜单中选择导航模板，然后发表页面即可。

PS：CSS样式可以根据自己的需要调整！

除非注明，文章均由 整理发布，欢迎转载。

转载请注明本文地址：https://www.boke8.net/wordpress-site-navigation-page.html

如果喜欢，可以：点此订阅本站

相关推荐：

网友留言：

  1. ha
    2019-10-17回复

    谢谢，我照着你的做出来了。现在有个问题，请问这些链接没有 nofollow 属性，有办法加上没。

    • 博主回复
      2019-10-18回复

      参考教程https://www.boke8.net/add-nofollow-to-xfn.html

      • ha
        2019-10-18回复

        有用 有用，很感谢

  2. 学乐教育
    2017-12-21回复

    本站正需要这个，感谢博主的分享！

  3. 北京烤鸭王师傅
    2017-07-18回复

    不错，我的网站也需要这样一个精美的页面。

  4. 王胜达
    2016-09-23回复

    本人草根站长，在校学生，自己从小喜欢计算机，想找您学点技术，

  5. 伊尔
    2016-09-22回复

    请问怎么把双栏改成单栏显示？就是把现在的横排两个分类改成一排只显示一个分类

  6. 桃花岛主

    2016-07-15回复

    博主，你好，问个事情，我如想在想在这些链接列表标签后面加一个class标签，该怎么加啊，我不懂代码wp_list_bookmarks(‘show_description=0&show_name=1&show_images=1&title_li=&categorize=1&category_before=&category_after=&category_orderby=id&orderby=rand&title_before=&title_after=&limit=13′); 能告诉我嘛，谢谢

    • 博主回复
      2016-07-15回复

      不明白你的意思

      • 桃花岛主

        2016-07-16回复

        就像你的这个导航页上，教程学习下面不是有一批链接吗，他们不是有个标签li吗，在li后加一个clss标签，我不能写代码，好像你的禁用了，显示不出来

        • 博主回复
          2016-07-16回复

          没有这个参数

  7. VR智库
    2016-06-01回复

    怎么样能把这个页面的网址跟友情链接网址区分开呢？
    我不想让友情链接显示到这个页面上

    • 博主回复
      2016-06-01回复

      你可以再添加个参数 exclude_category=友情链接分类ID 排除友情链接分类

  8. simon.chen
    2016-03-08回复

    无尖不商。百度则是无商不尖，在把网址Hao123搞糟蹋透了后，这两天又把原本简单的site.baidu.com搞得不纯洁了。今次有空，参考您的方法，专门做了一个基于WordPress平台的网址导航，干净利落的。

    只是网页用了twentyten+responsivetwentyten主题，能实现手机，电脑自动分辨率，形成电脑版，手机版，只是这个页面不成手机版，要加上什么代码吗，求告知，感谢！

    • 博主回复
      2016-04-15回复

      用@media

  9. 滕绍武博客
    2015-11-05回复

    怎样实现不显示图片。直接就是文字的类型呢？

  10. 云上文艺
    2015-05-17回复

    使用了之后出现乱码，编辑格式已经改成网站的还是不行，是什么问题呢？

    • 博主回复
      2015-05-17回复

      建议使用notepad++软件，格式选择UTF8无Bom格式

  11. 同盟源
    2015-01-10回复

    学习了，超赞的技巧

  12. 静心定气

    2014-06-06回复

    页面已经建完了，但是怎么使用啊？
    怎么往这个页面里面添加网址呢，还得能出来你网站演示那样的效果

    • 博主回复
      2014-06-09回复

      在链接里添加链接分类，然后修改categorize=1后面的数字为你的链接分类ID，接着在这个链接分类里添加链接就可以了

      • 狮子
        2015-04-08回复

        页面可以了，就是不知道怎么才能把内容放到页面上。最后是图文的，网站后台不能？要自己修改吗？

        • 博主回复
          2015-04-08回复

          这个是通过wordpress链接功能实现，通过“后台——链接”添加内容

          • 狮子

            2015-04-08回复

            我的主题后台没有链接，就添加菜单的地方能添加链接。

            • 博主回复
              2015-04-08回复

              打开https://www.boke8.net/wordpress-3-5-get-back-link.html，按教程添加代码

              • 狮子

                2015-04-10回复

                谢谢了。我等会看看。昨天没看到邮件提醒。

              • 狮子

                2015-04-10回复

                谢谢。问题已经解决了。好想还有一点小小的问题。网站分类的字在横线下面，不是将横线分开的样式。不知道这个怎么解决谢谢。categorize=1这个在哪改呢？

  13. 谢小北
    2014-04-10回复

    你好，新做的一个网站使用的你这个模板（主题中的某一页）
    因为本人是小白，所以那个header不知道怎么调用成自己的模板中的header

    就擅自做主把你的宝贝修改了一下颜色之类的。
    现在还有一个问题就是想问一下 我不想做成带图片的，或者说不想都是带图片的，我想一些不是很重要的，只做一个文字连接，现在的也可以，但是单纯文字也占了一个很大的空，弱弱的问一下，能破吗？ 我主题用的X-clean 里面一个页面想做一个网址导航页，刚开始时友情链接，这个可以用你做的这个，我每一个做一下图片，但是其他的不想这样麻烦。
    小白说的你能听懂吗？

    • 博主回复
      2014-04-11回复

      这个单页是一整个文件，不需要再调用header.php文件；把show_images=1的1改为0，然后再修改一下css就可以了去掉图片和正常显示了。

      • 设享网
        2014-04-12回复

        非常感谢！！！！
        程序员也相当不容易啊 今天晚上熬夜修改了一下其他的地方，问题很小，可是等到最后才找到根源。。。

        • 狮子
          2015-04-24回复

          你知道怎么把导航分类的字放到横线上面吗？

          • 热互联
            2015-08-16回复

            需要修改CSS，改成：
            .box h3 {text-align:center; width:100%; position:absolute; top:-35px; left:0; }

      • 小杜

        2018-10-06回复

        怎么修改一下css 去掉图片？

发表留言

更多WordPress教程