WordPress制作网站资源导航页面网址收藏 From 剽窃

一直想给网站做一个资源导航网站，但是自己又不会。用过Wordpress网址导航的插件，但是发现特别不好用，而且也不符合我要求。偶然发现博客吧的这个资源导航挺好看，很符合我要求。所以想着能不能跟着做出来。

刚好它网站也分享了wordpress制作单页网站导航页面模板代码，虽然有点老，但里面很多东西也还是能用的。

结合它的文章，我「抄」了一份同样的导航网页可以看下。这里记录下过程，可能会帮到有同样需求的你，又或者我担心忘记。

创建 fav.php

首先创建一个 fav.php。注意不要用编辑，编码格式不对，上传后可能会乱码。

<?php
/**
template name: 导航网址模版
*/
$page_side_bar = kratos_option('page_side_bar');
$page_side_bar = (empty($page_side_bar)) ? 'right_side' : $page_side_bar;
get_header();
get_header('banner'); ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fav.css" type="text/css" media="screen" />
<div id="kratos-blog-post" style="background:<?php echo kratos_option('background_index_color', '#f5f5f5'); ?>">
	<div class="container">
		<div class="row">
			<?php if( $page_side_bar == 'left_side' ){ ?>
				<aside id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm scrollspy">
	                <div id="sidebar">
	                    <?php dynamic_sidebar('sidebar_tool'); ?>
	                </div>
	            </aside>
			<?php } ?>
            <section id="main" class='<?php echo ($page_side_bar == 'single') ? 'col-md-12' : 'col-md-8'; ?>'>


            <div id="header">
                <div class="title">图片工具网址导航 - 老郭种树(guozh.net)</div>
            </div>
            <div id="bar">
                <div class="notice">
                    <div class="des">每个网址都与图片处理有关，每个工具使用视频介绍
                        <div>
                            <a rel="nofollow" href="https://www.youtube.com/channel/UCj7hwd3wEYYp5l9LRPAo7YA" target="_blank">YouTube(推荐)</a>
                        </div>
                        <div>
                            <a rel="nofollow" href="https://space.bilibili.com/471849682" target="_blank">bilib</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="container">
                <?php                                       wp_list_bookmarks('show_description=1&show_name=1&show_images=0&title_li=&categorize=1&exclude_category=172&category_before=<div class="box">&category_after=</div>&category_orderby=id&orderby=rand&title_before=<h3><span>&title_after=</span></h3>&limit=13');
                ?>
            </div>
			</section>
			<?php if($page_side_bar == 'right_side'){ ?>
			<aside id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm scrollspy">
                <div id="sidebar">
                    <?php dynamic_sidebar('sidebar_tool'); ?>
                </div>
            </aside>
			<?php } ?>
		</div>
	</div>
</div>
<?php get_footer(); ?>

这份代码是我用的，和前面那个作者不太一样了。准确的说只有中间核心代码是一样的。

作为一个不会写 WP 代码的人，我分享下怎么得出这份代码的。可能你也可以照着写。

我复制了一份友情链接页面模版，不知道你的主题是否含有。如果没有，复制主题种其他页面。将中间部分代码去掉，只留头部和底部。

至于到底删除中间哪些？从哪里开始删，可能要你自己把握，我上面代码明显中间隔了一行，我是从那开始删除的。

接着是 header bar container ，可以发现，前面两个 div 中代码都很好改，就是简单的 html 。所以我改成我自己需要的了。

然后 container 是重点，里面有很多函数，我都是原本的复制。

接着是最上方的引入样式代码要有，可以参考我放的位置。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fav.css" type="text/css" media="screen" />

这个文件基本是这样，一些细节，后面再改。

然后将这个文件上传到 主题目录的根目录 。

创建链接分类目录

创建一个链接分类目录，如果你Wordpress后台没有这个链接功能区块，可以参考这篇文章。

再添加链接，这里不截图了，记得将链接放到分类目录中就是了。

创建页面

新建一个页面，取好名字，比如我这里的「图片交给它」，然后选择好页面模版，找到刚才新上传的导航页面。

啥都不用做，发布就行。

不出意外的话，就能在页面上看到这些链接。只是有点难看而已，到这一步能调通，说明只剩下样式的问题了。

但是这里一般会有三个问题，如果看原作者评论的话，也会发现。

1、这些链接都没 nofollow 属性，这是我提出的评论，作者也很快给了回复。用他的方法很快就可以解决。

2、并不想所有链接都显示在导航网页中，因为有些可能是友情链接。

评论中也提到了方法，添加个参数 exclude_category=友情链接分类ID 排除友情链接分类

也就是加在中间的函数中，可以看下面我添加的。

 <?php                                       wp_list_bookmarks('show_description=1&show_name=1&show_images=0&title_li=&categorize=1&exclude_category=172&category_before=<div class="box">&category_after=</div>&category_orderby=id&orderby=rand&title_before=<h3><span>&title_after=</span></h3>&limit=13');
                ?>
            </div>

但是这里有个疑问，友链的分类ID到底是多少呢，我的做法是创建个友链的分类目录，然后将鼠标放到编辑上，左下角会有出现。然后替换成你自己的就行。

记得将友情链接的链接分配到刚才创建的友链目录中。

3、图片是否显示？默认上面的函数是显示图片的。但是可能不好看，反正我觉得不好看，将里面的 show_images=1 改成 show_images=0 。

4、描述是否显示？show_description=1 和 0 自己选择吧。1代表显示，0表示不显示，现在默认我将它显示了。

fav.css

上面都搞定后，就剩下调整 css，创建一个 fav.css文件。下面是我的样式。

/*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 {}
.title {    font-size: 32px;
    line-height: 1.5em;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #34495e;
    letter-spacing: 2px;}
#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;font-size: 16px;}
.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,.box ul {overflow:hidden; clear:both;}
.box h3 {font-size:1.720em; font-weight:normal; margin:10px 0; border-bottom:2px solid #eee; padding-bottom:5px; color:#555;}
.box h3 span {border-bottom:2px solid #00ad35; padding-bottom:8px;}
.box ul {width:101%;}
.box ul li {float:left; width:22%; color:#777; font-size:0.75em; padding:10px 1%; margin:5px 1% 5px 0; height:88px; overflow:hidden; background-color:#f9f9f9; display:inline-block;}
.box ul li a {display:block; width:100%; margin-bottom:5px; color:#00ad35; font-size:1.45em;}

我觉得原作者现在的导航样式很好看，所以通过检查器将样式复制过来。然后自己修改了一些地方。

同样将文件上传到主题的根目录。

将浏览器缓存清除，再次刷新页面，应该页面显示就变了，记得清除缓存。

好的谢谢那位作者。

本文由老郭种树原创，转载请注明：https://guozh.net/wordpress-links-collect-library/