WordPress友情链接模板

2018年8月28日Otstar Lin

没错又是一篇水文 （逃

使用此模板需要安装Link Manager插件，模板文件已上传至Github，可以直接取用。

最终效果请自行查看本站友情链接页面

代码部分

Links-Page-Code
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?php
/*
* Template Name: 友情链接
*/
get_header(); ?>
<main class="container">
<div class="page-friends page-common row">
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<h1 class="page-title" style="margin-top:100px;text-align:center;font-size:37px;font-style:italic">
                    <?php the_title(); ?>
                </h1>
<article class="page-content" style="text-align:center;">
<?php the_content(); ?>
</article>
<?php endwhile;  ?>
<?php endif; ?>
<style>
    .clearfix {
        zoom:1;
    }
 
    .clearfix:after {
        content:”.”;
        display:block;
        visibility:hidden;
        height:0;
        clear:both;
    }
 
    .readers-list {
        list-style:none;
    }
 
    .readers-list *{
        margin:0;
        padding:0;
    }
 
    .readers-list li{
        position:relative;
        float:left;
        margin:6px 6px;
        height:205px;!important;
    }
 
    .readers-list li > a {
    border: 1px solid #eee;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    transition:all .5s;
        -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
            box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    }
 
    .readers-list li>a {
        -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);
            transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);
            transition:         box-shadow .25s cubic-bezier(.4, 0, .2, 1);
            transition:         box-shadow .25s cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);
        will-change: box-shadow;
    }
 
    .readers-list li>a:hover,
    .readers-list li>a:focus {
        -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    }
    
    #links_info {
        position: absolute;
        bottom: 0px;
        padding-bottom: 10px;
        background: #000;
        width: 100%;
        height: 200px;
        -webkit-mask : -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.7)));
    }
 
    #links_icon {
        width: 70px;
        height: 70px;
        position: absolute;
        border-radius: 50%;
        top: 15px;
        right: 15px;
    }
    
    .readers-list em{
    position: absolute;
    top: 110px;
    left: 15px;
    font-size: 25px;
    color: #fff;
    }
 
    .readers-list span {
    position: absolute;
    top:155px;
    font-size: 18px;
    left: 15px;
    width: auto;
    color: #fff;
    font-style: italic;
    }
 
    @media(min-width:750px){
        .readers-list {margin: 0px auto;width:750px;}
        .readers-list li{width:355px;}
    }
 
    @media(max-width:749px){
        .readers-list {margin: 0px auto;width:375px;}
        .readers-list li{width:355px;}
    }
</style>
<div>
<?php
    global $wpdb;
                $qlink="select link_url,link_name,link_image,link_notes,link_description,link_rss from wp_links where link_visible='Y' order by link_id";
                $links = $wpdb->get_results($qlink);
                if(empty($links)) {
                    echo '<p>暂无友链数据！</p>';
                }
                foreach ($links as $comment){  
                    $tmp = "<li><a rel=\"nofollow\" title=".$comment->link_url." target=\"_blank\" href=\"$comment->link_url\" style=\"background-image:url($comment->link_image);background-size: cover;\"><div id=\"links_info\"></div><em>".$comment->link_name."</em><span>".$comment->link_notes."</span><img id=\"links_icon\" src=\"$comment->link_rss\"></img></a></li>";  
                    $output1 .= $tmp;  
                }    
                $output1 = "<ul class=\"readers-list clearfix\">".$output1."</ul>";
                echo $output1;
            ?>
</div>
<div style="text-align:center;font-size:18px;margin:10px 0px;">此页模板由<a href="https://www.ixk.me">Otstar-Lin</a>于2018制作,源码已上传至<a href="https://github.com/syfxlin/wp-links-template">Github</a></div>
</div>
</main>
 
<?php get_footer(); ?>

使用方法

安装Link Manager插件并激活，在主题模板的文件夹新建一个PHP文件，将上面的代码复制进去并保存，或者去Github下载已经弄好的文件，并确定文件权限无误，进入WordPress后台，添加一个页面，选择友情链接模板进行创建，之后就可以在链接菜单进行添加了。

图像地址对应背景图
RSS地址对应友人头像
备注对应友链简介

保留the_content()函数，可以在编辑器中添加内容。

说点什么

您将是第一位评论人！

avatar
  Subscribe订阅  
提醒
Prev Post Next Post

分类目录

文章归档

标签

API (1) Aria2 (1) C/C++ (6) debian，香橙派，ap (1) Develop (11) dietpi (1) frp (1) HTML/CSS (1) Java (1) JavaScrip (1) Lab (1) Mysql (2) NAS (1) Nextcloud (1) Nubia Z9Max (1) Orange Pi (9) PHP (3) RR-OS (1) VSCode (3) Web (3) Wordpress (4) 博客记录 (1) 小米4 (1) 年度总结 (1) 开发环境 (2) 断点调试 (2) 算法 (4) 骁龙810 (1)

功能