可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

在wordpress中添加说说/微博/推特/空间功能

News tysonrapz1984 51℃ 0评论
在wordpress中添加说说/微博/推特/空间功能

emmmm.最近在访问土豆的主站的时候,看到了有个碎碎念的link,感觉还是不错的,原本想要上上周吧…….(恩,应该是),去把这个功能实现到自己的博客中,但是看那么多的代码,双手已经瑟瑟发抖了,觉得还是算了吧,恩,就算了吧。因为我是一个真的很懒很懒的人,能从网上使用插件的绝对不写代码,能够用代码的绝不自己写。

——————————————–我是分割线————————————

最近这几天一直在对博客和VPS进行着细微的修改,上周?恩!是上周,感觉VPN的速度慢了好多,于是可能觉得自己自从买来就一直在使用,也没有像别人优化过,所以于是心血来潮想优化一下,Google了一下什么软件对于ss有加速效果,看到了锐速(但是在网上查了一下,这个锐速貌似被和谐了),然后又找到了google bbr,开始下载shell脚本,运行。后来提示已经安装,黑人???

后来去了bandwagon的control panel查看了一下,当时我这个vps的系统安装的就是x86_64 bbr的,自带加速效果,好吧。

——————————————–我是分割线————————————

前天想法产生,这两天实施。

代码来源

主要看了以下几位的说说功能,查看了前端代码,并在几位的基础上进行了修改,感谢几位!

土豆不好吃 https://www.bennythink.com/

秋叶网络 http://www.mizuiren.com/

王柏元的博客 http://wangbaiyuan.cn/

言曌博客  https://liuyanzhao.com/

思路

看了上面几位的文章还有前端代码之后,我深深的陷入了沉思。。。。。

为啥要和自己过不去啊~~~摔!!!

没办法,写吧。

大体思路了解了,基本上都是在主题的fuctions.php中把说说的功能写入进去,然后需要一个说说的显示界面,但是说说的显示界面又和普通的页面不一样,不能有小工具侧边栏等等。需要专门有一个说说的模板。

模板有了,功能也有了,下面就是美化了,字体、格式、颜色、交互等等。

Q1:模板在哪里?在使用主题的根目录中,即:……./wordpress/wp-content/themes/主题名称  根目录中扔着就可以了

Q2:美化文件在哪里?同上。

实施

从上面几位的代码中彻底整合了一下,选取了“言曌博客”作为我美化的主题。

①把以下代码加入到使用的主题的fucntions.php中

functions

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
//新建说说功能
add_action(‘init’, ‘by_shuoshuo’);
function by_shuoshuo()
{ $labels = array( ‘name’ => ‘说说’,
‘singular_name’ => ‘说说’,
‘add_new’ => ‘发表说说’,
‘add_new_item’ => ‘发表说说’,
‘edit_item’ => ‘编辑说说’,
‘new_item’ => ‘新说说’,
‘view_item’ => ‘查看说说’,
‘search_items’ => ‘搜索说说’,
‘not_found’ => ‘暂无说说’,
‘not_found_in_trash’ => ‘没有已遗弃的说说’,
‘parent_item_colon’ => , ‘menu_name’ => ‘说说’ );
$args = array( ‘labels’ => $labels,
‘public’ => true,
‘publicly_queryable’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘exclude_from_search’ =>true,
‘query_var’ => true,
‘rewrite’ => true,
‘capability_type’ => ‘post’,
‘has_archive’ => true, ‘hierarchical’ => false,
‘menu_position’ => null, ‘supports’ => array(‘editor’,‘author’,‘title’,‘comments’) );
register_post_type(‘shuoshuo’,$args);
}
 
/* 分页导航
/* ————-*/  
function by_pagenavi( $before = , $after = , $p = 2 ) {
    if ( is_singular() ) return;
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 )
        return;
    if ( empty( $paged ) )
        $paged = 1;
     // $before = “<span class=’pg-item’><a href='”.esc_html( get_pagenum_link( $i ) ).”‘>{$i}</a></span>”;
    echo $before;
    if ( $paged > 1)
        by_p_link( $paged 1, ‘上一页’, ‘<span class=”pg-item pg-nav-item pg-prev”>’ ,‘上一页’ );
    if ( $paged > $p + 1 )
        by_p_link( 1, ‘首页’,‘<span class=”pg-item”>’,1 );
    for( $i = $paged $p; $i <= $paged + $p; $i++ ) {
        if ( $i > 0 && $i <= $max_page )
            $i == $paged ? print “<span class=’pg-item pg-item-current’><span class=’current’>{$i}</span></span>” : by_p_link( $i,, ‘<span class=”pg-item”>’,$i);
    }
    if ( $paged < $max_page $p ) by_p_link( $max_page,  ‘末页’ ,‘<span class=”pg-item”> … </span><span class=”pg-item”>’,$max_page );
    if ( $paged < $max_page ) by_p_link( $paged + 1,‘下一页’, ‘<span class=”pg-item pg-nav-item pg-next”>’ , ‘下一页’ );
    echo $after;
}
 
function by_p_link( $i, $title = , $linktype = , $prevnext=) {
    if ( $title == ) $title =“浏览第{$i}页” ;
    if ( $linktype == ) { $linktext = $i; } else { $linktext = $linktype; }
    echo “{$linktext}<a href='”, esc_html( get_pagenum_link( $i ) ), “‘ title='{$title}’ class=’navbutton’>{$prevnext}</a></span>”;
}
 
?>

②模板和美化  //原本我是写了css,然后在PHP中直接引用css,但是试了好几次,都失败了,于是我直接把css的代码写到了模板中

shuoshuo.php

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<?php get_header(); ?>
 
<div class=“kratos-start kratos-hero-2”>/**前面引用的header有问题,于是在下面手写了一个**/
<div class=“kratos-overlay”></div>
<div class=“kratos-cover kratos-cover_2 text-center” style=“background-image: url(https://www.akillii.com/wp-content/themes/Kratos-master/images/background.jpg);”>
<div class=“desc desc2 animate-box”>
<h2>Zhouyaos Blog</h2>
       <span>Do Something Big With Us</span>
     </div>
</div>
</div>
 
<div class=“kratos-hentry kratos-post-inner clearfix”>/**在横幅和说说界面加上一个分隔,原本想缩小说说的大小的,然后失败了,求前端大神**/
  <div id=“content” class=“site-content”>/**代码正文**/
    <style type=”text/css”>
        #shuoshuo_content {
background-color: #fff;
padding: 10px;
min-height: 500px;
        }
        /* shuo */
        body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06);
        }
 
        ul.cbp_tmtimeline {
padding: 0;
        }
 
        div class.cdp_tmlabel > li .cbp_tmlabel {
margin-bottom: 0;
        }
 
        .cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
        }
 
        /* The line */
        .cbp_tmtimeline:before {
content: ;
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: RGBA(0, 0, 0, 0.02);
left: 80px;
margin-left: 10px;
        }
 
        /* The date/time */
        .cbp_tmtimeline > li .cbp_tmtime {
display: block;
/* width: 29%; */
/* padding-right: 110px; */
max-width: 70px;
position: absolute;
        }
 
        .cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
        }
 
        .cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
        }
 
        .cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #9BCD9B;
        }
 
        .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75);
        }
 
        div.cbp_tmlabel > p {
margin-bottom: 0;
        }
 
        /* Right content */
        .cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 65px;
background: #9BCD9B;
color: #fff;
padding: .8em 1.2em .4em 1.2em;
/* font-size: 1.2em; */
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
transition: all 0.3s ease 0s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
display: block;
        }
 
        .cbp_tmlabel:hover {
/* transform:scale(1.05); */
transform: translateY(-3px);
z-index: 1;
-webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important
        }
 
        .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: RGBA(255, 125, 73, 0.75);
        }
 
        /* The triangle */
        .cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #9BCD9B;
border-width: 10px;
top: 4px;
        }
 
        .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: RGBA(255, 125, 73, 0.75);
        }
 
        p.shuoshuo_time {
margin-top: 10px;
border-top: 1px dashed #fff;
padding-top: 5px;
        }
 
        /* Media */
        @media screen and (max-width: 65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
}
        }
 
        .shuoshuo_author_img img {
border: 1px solid #ddd;
padding: 2px;
float: left;
border-radius: 64px;
transition: all 1.0s;
        }
 
        .avatar {
-webkit-border-radius: 100% !important;
-moz-border-radius: 100% !important;
box-shadow: inset 0 -1px 0 #3333sf;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
        }
 
        .zhuan {
transform: rotateZ(720deg);
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
        }
 
        /* end */
    </style>
  </div>
</div>
 
<body>
<div id=“primary” class=“content-area” style=“”>
    <main id=“main” class=“site-main” role=“main”>
        <div id=“shuoshuo_content”>
            <ul class=“cbp_tmtimeline”>
                <?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1”);if (have_posts()) : while (have_posts()) : the_post(); ?>
                <li> <span class=“shuoshuo_author_img”><img src=“https://www.akillii.com/wp-content/uploads/2017/08/touxiang.jpg” class=“avatar avatar-48” width=“48” height=“48”></span>
                    <a class=“cbp_tmlabel” href=“javascript:void(0)”>
                        <p></p>
                        <p><?php the_content(); ?></p>
                        <p></p>
                        <p class=“shuoshuo_time”><i class=“fa fa-clock-o”></i>
                            <?php the_time(‘Y年n月j日 l G:i’); ?>/**加了星期,不喜欢的可以去掉**/
                        </p>
                    </a>
                    <?php endwhile;endif; ?>
                </li>
            </ul>
        </div>
    </main>
    <! .sitemain >
</div>
<script type=“text/javascript”>
    $(function () {
        var oldClass = “”;
        var Obj = “”;
        $(“.cbp_tmtimeline li”).hover(function () {
            Obj = $(this).children(“.shuoshuo_author_img”);
            Obj = Obj.children(“img”);
            oldClass = Obj.attr(“class”);
            var newClass = oldClass + ” zhuan”;
            Obj.attr(“class”, newClass);
        }, function () {
            Obj.attr(“class”, oldClass);
        })
    })
</script>
<?php get_footer();?>

总结

如果对这个主题无感的话,类似于土豆或者秋叶的比较喜欢的话,传送门:http://www.mizuiren.com/141.html

下面的代码是我自己根据自己主题修改的:

shoushuo.php

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<div id=“container”>
<!begin container>
<style>
.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
position: relative;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f2f2f2;
border:1px #ccc solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 30px;
color: #666;
min-height:60px;
position: relative;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
}
  
.shuoshuo-content p{margin:0;}
/*作者*/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.7em;}
.shuoshuo li em{
    background: url(“/wp-content/themes/Kratos-master/imagesbolangxian.png”) no-repeat;
    width: 28px;
    height: 10px;
    position: absolute;
    left: -30px;
    top: 42px;
    z-index: 0;
}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*头像*/
.shuoshuo .touxiang{    
border-radius: 50%;
    padding: 2px;
    border: 1px #ddd solid;
    display: block;
    transition: .5s;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    right: 78px;
    top: 34px;
    z-index: 2;
}
.shuoshuo li:hover .touxiang {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: “”;
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: “”;
box-shadow: inset 0 0 2px #0c0;
z-index:1;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: “”;
z-index:2;
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的轴*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: “”;
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: “”;
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: “”;
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) {
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{    
width: 130px;
    height: 20px;
    position: absolute;
    left: 66px;
    z-index: 1;
    bottom: 10px;
}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}
 
.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}
 
.shuoshuo .touxiang{
right: 5px;
    top: 25px;
}
.shuoshuo li em{width: 18px;left: -19px;top: 32px;}
}
</div>
</style>
<div class=“shuoshuo”>
<ul class=“archives-monthlisting”>
<?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1”);if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><span class=“tt”><?php the_time(‘Y年n月j日G:i’); ?></span>
<img src=“https://www.akillii.com/wp-content/uploads/2017/08/touxiang.jpg” class=“touxiang” alt=“作者头像” height=’64’ width=’64’/>
<div class=“shuoshuo-content”><?php the_content(); ?><br/><div class=“shuoshuo-meta”><span ><?php the_author() ?></span></div></div><?php endwhile;endif; ?>
</li>
</ul>
</div>

To Do List

修改说说width

转载请注明:逗比根据地 » 在wordpress中添加说说/微博/推特/空间功能

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址