velep.com成长之路19—增加导航功能即创建独立友情链接导航页面

3月 292012

原创文章，转载请注册出处，本文地址：http://velep.com/archives/256

摘要：具有基本导航功能是当初建站规划功能之一，初宗是收集自己经常去的比较有价值的网站和博客，方便自己访问。此外，通过交换友情链接可以提高网站的影响力，增加谷歌百度收录和排名。

本来可以在边栏上添加链接小工具就可以实现友情链接，不过，我决定不在边栏上挂出来至少当前还没打算，而是采用单独页面来实现。

友情链接导航页面不采用插件实现，不采用内置页面模板实现（内置页面模板主要用于博客文章，有太多附属东西），也不用手工去添加链接，而是采用自定义页面模板（即源码形式）实现，页面读取数据库中的链接，自动按照设计的样式添加到的该页面中。这样，减少了插件使用，后续维护起来也方便，所要做的事情就是在后台增加链接。

1. 创建模板文件links.php

以主题带的默认模板文件page.php为蓝本，创建links.php模板文件。page.php文件主要用来显示博客文章内容和相关信息的，我们不需要，所以去除这部分代码，增加读取链接表数据的代码。

在主题文件夹下面找到page.php文件，打开后另存为links.php，代码如下（不同主题稍有不同，本站suffusion主题，版本：4.0.0）：

<?php
/**
* Default template for a page
*
* @package Suffusion
* @subpackage Templates
*/

get_header();
?>

<div id="main-col">
<?php
suffusion_page_navigation();
suffusion_before_begin_content();
?>
<div id="content">
<?php
global $post;
if (have_posts()) {
while (have_posts()) {
the_post();
$original_post = $post;
?>
<div <?php post_class('fix'); ?> id="post-<?php the_ID(); ?>">
<?php suffusion_after_begin_post(); ?>
<div class="entry-container fix">
<div class="entry fix">
<?php suffusion_content(); ?>
</div>
<?php
// Due to the inclusion of Ad Hoc Widgets the global variable $post might have got changed. We will reset it to the original value.
$post = $original_post;
suffusion_after_content();
?>
</div>
<?php
suffusion_before_end_post();
comments_template();
?>

</div>

<?php
}
}
?>
</div></div>
<?php get_footer(); ?>

上述代码中，
1) 第3行是模板名称；
2) 第29行是文章内容；
3) 第38行显示暑名、发表时间等信息，而第39行显示评论；

新模板文件links.php里面应该去掉显示标题和内容的循环部分，去掉评论部分，加入读取链接表的代码，最后links.php文件代码如下：

<?php
/**
Template Name: Links Page
*
* @package Suffusion
* @subpackage Templates
*/

get_header();
?>

<div id="main-col">
<?php
suffusion_page_navigation();
suffusion_before_begin_content();
?>
<div id="content">
<?php
global $post;
if (have_posts()) {
while (have_posts()) {
the_post();
$original_post = $post;
?>
<div <?php post_class('fix'); ?> id="post-<?php the_ID(); ?>">
<?php suffusion_after_begin_post(); ?>
<div class="entry-container fix">
<div class="entry fix">
<ul id="inlinks">
<?php
$bookmarks = get_bookmarks( array(
'orderby' => 'link_id',
'order' => 'ASC',
'category_name' => 'link_01'
));
// Loop through each bookmark and print formatted output
foreach ( $bookmarks as $bm ) {
$img='<img src="'.$bm->link_image.'"> ';
printf( '<li>%s<a href="%s" title="%s">%s</a></li>', $img, $bm->link_url, __($bm->link_description), __($bm->link_name) );
}
?>
</ul>
<div class="clear"></div>
</div>
<?php
// Due to the inclusion of Ad Hoc Widgets the global variable $post might have got changed. We will reset it to the original value.
$post = $original_post;
suffusion_after_content();
?>
</div>
<?php
//suffusion_before_end_post();
//comments_template();
?>

</div>

<?php
}
}
?>
</div></div>
<?php get_footer(); ?>

主要是更改了原模板文件page.php的第3行，第29行，屏蔽了第38行和第39行。links.php中的29行到43行替换了page.php的第29行内容。所以不管是什么主题，注意了这三点，就可创建links.php页面模板Links Page成功。
这里要说下links.php的第34行和第38行。
links.php第34行中的”link_01″要换成你链接所属的分类名称。
links.php第38行是获取链接的图标，这个图标的地址要在链接中指定，如下图所示：

在高级选项中指定链接的图像地址

2. 为Links Page页面模板指定样式表CSS

本来我是想单独创建一个CSS文件，但引用不成功，所以只好加入到主题目录下的style.css中了。CSS样式表如下（根据需要进行修改）：

#inlinks {
margin-left:0 !important;
font-size:14px;
}
#inlinks li {
list-style:none;
float:left;
margin: 0 10px 10px 0 ;
padding:1px 5px;
border: 1px solid #ddd;
background: #ececec;
}
#inlinks li a:link,#inlinks li a:visited{
display:block;
width:138px;
padding:1px;
margin-top:4px;
text-decoration: none;
color: #222;
}
#inlinks li:hover{
border: 1px solid #7BB64A;
background: #efefef;
}
#inlinks img {
border:0;
float:left;
margin:5px 3px 0 0;
}

3. 新建“友链导航”页面

在wordpress后台，新建一个页面，设置好相关配置项，这里要提的是，页面模板选择是在1步骤中创建的Links Page模板，如下图所示：

Links Php页面模板

另外，别忘了给连接指定一个图标，这样使连接样式更好看，更美观。

设定好之后，预览一下效果，具体效果可参见本站的友链导航页面。

» 本文地址： http://velep.com/archives/256.html

» 文章出处： reille博客—http://velep.com , 如果没有特别声明，文章均为reille博客原创作品

» 郑重声明： 原创作品未经允许不得转载，如需转载请联系reille#qq.com(#换成@)

分享到：