Wordpress博客增加友链页面内页

今天刚刚更新了wordpress博客的Kratos3.0.7主题，突然发现之前博客友链的单独页面功能消失了，于是就来折腾一下给主题增加友链内页，便于友链的管理.

找到所使用主题的的页面模板文件page.php的<?php the_content(); ?>语句前面加入

<div class="linkpage">
  <hr/>
    <ul><?php
       $bookmarks = get_bookmarks(array('orderby'=>'rand'));
       if(!empty($bookmarks)){
         foreach($bookmarks as $bookmark){
           $friendimg = $bookmark->link_image;
           if(empty($friendimg)){
             echo '<li><a href="'.$bookmark->link_url.'" target="_blank"><img src="'.get_template_directory().'/images/avatar.png"><h4>'.$bookmark->link_name.'</h4><p>'.$bookmark->link_description.'</p></a></li>';
           } else {
             echo '<li><a href="'.$bookmark->link_url.'" target="_blank"><img src="'.$bookmark->link_image.'"><h4>'.$bookmark->link_name.'</h4><p>'.$bookmark->link_description.'</p></a></li>';
           }
        }
       } ?>
     </ul>
  <hr/>
</div>

并且在该文件的开头加上

1
2
3

/**
template name: 友情链接模板
*/

其中，名字可以随便取你自己喜欢的。

保存为page-link.php(其他的名字也可以）。
通过ftp上传到你该主题的文件夹中。

在外观-自定义-额外CSS中添加下面代码（这是我所使用的主题的CSS，可以根据自己的喜好修改）

.linkpage ul:after {
  content: " ";
  clear: both;
  display: block
}

.linkpage li {
  float: left;
  width: 48%;
  position: relative;
  transition: all .3s ease-out;
  border-radius: 5px;
  line-height: 1.3;
  height: 90px;
  list-style: none
}

.linkpage h3 {
  margin: 15px -25px;
  padding: 0 25px;
  border-left: 5px solid #51aded;
  background-color: #f7f7f7;
  font-size: 25px;
  line-height: 40px
}

.linkpage li:hover {
  background: rgba(230,244,250,.5);
  cursor: pointer
}

.linkpage li a {
  padding: 0 10px 0 90px
}

.linkpage li a img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 15px;
  cursor: pointer
}

.linkpage li a h4 {
  color: #333;
  font-size: 18px;
  margin: 0 0 7px 0;
  padding-left: 90px;
  transition: .5s
}

.linkpage li a h4:hover {
  color: #51aded
}

.linkpage li a h4,.linkpage li a p {
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.4
}

.linkpage li a p {
  font-size: 12px;
  color: #999;
  padding-left: 90px
}

@media(max-width:460px) {
  .linkpage li {
    width: 97%
  }

  .linkpage ul {
    padding-left: 5px
  }
}