Zhouyao's Blog

Do Something Big With Us

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

《在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中

//新建说说功能 
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的代码写到了模板中

<?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>Zhouyao's 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>
    <!-- .site-main -->
</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

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

<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

点赞

发表评论

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

+ 21 = 23

This site uses Akismet to reduce spam. Learn how your comment data is processed.