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 代码的人,我分享下怎么得出这份代码的。可能你也可以照着写。

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

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

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

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

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

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

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

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

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

创建链接分类目录

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

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

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

创建页面

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

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

啥都不用做,发布就行。

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

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

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

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

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到底是多少呢,我的做法是创建个友链的分类目录,然后将鼠标放到编辑上,左下角会有出现。然后替换成你自己的就行。

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

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

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;}

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

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

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

好的 谢谢那位作者

怎么说呢?不管有用没,还是想加上这句
老郭种树原创,转载请加上WordPress制作网站资源导航页面 网址收藏 From 剽窃
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注