兰陵の记事簿

Tech Otakus Save The World

兰陵

2016年10月19日

代码>

自制wordpress时间轴样式说说与归档

长话短说,这两天瞎搞了个时间轴样式的归档页面和说说页面。

食用步骤:创建页面模板->新建页面->选择创建的模板->发布->OK。

虽然这两种网上随便一搜都是模板源码,所以页面我就找了一个常见的时间轴,进行了一些样式修改。

页面模板 8-)

页面模板,在主题目录下新建一个php文件,将下面源码复制到该文件中。具体要根据站点主题的page.php文件进行参考修改。

<?php
/*Template Name: 时间轴
author: 兰陵
url: http://blog.thkira.com/
*/
?>
<?php get_header(); ?>

//此处省略XXX字,以下为<?php the_content(); ?>替换部分
<style type="text/css">
/*时间轴*/
.count {
 text-align: center;
 text-shadow: 0 0 15px #757575;
}

.sp_def {
 padding: 2em 0;
 line-height: 2em;
 font-size: 18px;
 color: #444;
 overflow: hidden;
}

.archive-title {
 border-bottom: 1px #eee solid;
 position: relative;
 padding-bottom: 4px;
 margin-bottom: 10px
}

.archives li a {
 padding: 8px 0;
 display: block
}

.archives li a:hover {
 color: #ff5c43;
 -webkit-transition: color .3s linear;
 -moz-transition: color .3s linear;
 transition: color .3s linear;
}

.archives li a:hover .atitle:after {
 background: #ff5c43
}

.archives li a span {
 display: inline-block;
 width: 100px;
 font-size: 12px;
 text-indent: 20px
}

.archives li a .atitle {
 display: inline-block;
 padding: 0 15px;
 position: relative
}

.archives li a .atitle:after {
 position: absolute;
 left: -8px;
 background: #ccc;
 height: 8px;
 width: 8px;
 border-radius: 6px;
 top: 14px;
 content: ""
}

.archives li a .atitle:before {
 position: absolute;
 left: -10px;
 background: #fff;
 height: 12px;
 width: 12px;
 border-radius: 6px;
 top: 12px;
 content: ""
}

.archives {
 position: relative;
 padding: 10px 0;
 left: 50%;
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
}

.archives:before {
 height: 100%;
 width: 4px;
 background: #eee;
 position: absolute;
 left: 100px;
 content: "";
 top: 0
}

.m-title {
 position: relative;
 margin: 10px 0;
 cursor: pointer
}

.m-title:hover:after {
 background: #ff5c43
}

.m-title:before {
 position: absolute;
 left: 93px;
 background: #fff;
 height: 18px;
 width: 18px;
 border-radius: 9px;
 top: 9px;
 content: ""
}

.m-title:after {
 position: absolute;
 left: 96px;
 background: #ccc;
 height: 12px;
 width: 12px;
 border-radius: 6px;
 top: 12px;
 content: ""
}

.prompt {
 padding: 10px 5px;
 border: 3px solid #beceeb;
 position: relative;
 left: 10px;
 border-radius: 15px;
 background: #ffffff;
 color: #66ccff;
 display: none;
}

.prompt span {
 overflow: hidden;
 position: absolute;
}

.prompt span.bot {
 border-width: 10px;
 border-style: solid dashed dashed;
 border-color: transparent #beceeb transparent transparent;
 left: -122px;
 bottom: 8px;
}

.prompt span.top {
 border-width: 10px;
 border-style: solid dashed dashed;
 border-color: transparent #ffffff transparent transparent;
 left: -118px;
 bottom: 8px;
}

@media screen and (max-width: 700px) {
 .sp_def {
 font-size: 14px;
 border: none;
 }

 .archives li a span {
 display: block;
 }

 .count {
 text-shadow: none;
 }

 .archives {
 margin-left: 10px;
 }

 .archives:before {
 left: -6px;
 }

 .m-title {
 padding-left: 10px;
 }

 .m-title:before {
 left: -13px;
 }

 .m-title:after {
 left: -10px;
 }
}
</style>
<?php
$count_posts = wp_count_posts();
echo '<h2 class="count">目前共计'.$count_posts->publish.'篇文章_(•̀ω•́ 」∠)_</h2>';
?>
<div class="archives">
<?php
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
foreach($myposts as $post) :
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date('n', $post->post_date);
$day = mysql2date('j', $post->post_date);
if($year != $previous_year || $month != $previous_month) :
if($ul_open == true) :
echo '</ul>';
endif;
echo '<h4 class="m-title">'; echo the_time('Y-m'); echo '</h4>';
echo '<ul class="archives-monthlisting">';
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>
<li>
<a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span>
<div class="atitle"><?php the_title(); ?><spen class="prompt"><span class="bot"></span><span class="top"></span>( <?php the_views(); ?> & <?php comments_number('0 发吐槽', '① 发吐槽', '% 发吐槽' );?> )</spen></div></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<script type="text/javascript">
$('.archives .m-title').click(function() {
$(this).next().slideToggle('fast');
return false;
});
$(document).ready(function(){
 $(".atitle").each(function(){
 $(this).mouseover(function(){
 $(this).children().css("display","inline");
 })
 $(this).mouseout(function(){
 $(this).children().css("display","none");
 })
 })
})
</script>
</div>
//此处省略XXX字,以下可能有评论模板等

<?php get_footer(); ?>

效果:时光荏苒

自制wordpress时间轴样式说说与归档

PS. 弹出气泡的左边小角的位置样式是.prompt span.bot和.prompt span.top,left好像原本是-22px和-18px还是多少来着,为了适配我的主题,我往左调了很多,需要自己进行适配 ;)

说说模板 8-)

网上的说说模板发说说像发文章一样,要写数据库。我不太想写进数据库(别问我为啥 :cry: )。反正说说的数据量不大,于是我把数据存在了json文本里,自己撸了个后台界面,时间轴样式直接在jquery之家[纯css3响应式3d时间轴效果]找的。后台需要管理员权限,有简单的增加删除功能,带天气,要天气的需到心知天气申请一个API。

说说后台,将该源码复制到文件后放到wordpress站点根目录下,访问地址例如 http://你的域名/shuoshuo.php

<?php
/** WordPress Administration Bootstrap */
require_once('./wp-load.php');
if ( ! current_user_can('activate_plugins') )
	wp_die( __( '您无权在本站点修改说说内容。' ) );
echo "<title>说说管理 &lsaquo; ".get_bloginfo('name')." &#8212; WordPress</title>"
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<style type="text/css">
::-webkit-input-placeholder{color: #3a909e;font-weight: bold;}
::-moz-placeholder{color: #3a909e;font-weight: bold;}
:-moz-placeholder{color: #3a909e;font-weight: bold;}
:-ms-input-placeholder{color: #3a909e;font-weight: bold;}

body{
	margin:0;
	padding:0;
	background:#c2edf4;
	color:#333;
	overflow-x:hidden;
}

.nagging{
	max-width:1300px;
	text-align:center;
	margin:0 auto;
}

.nagging h2{
	padding: 10px 0;
	margin: 0;
	font-size: 62px;
	line-height: 58px;
	color: #fff;
	font-weight: 400;
	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2P8DwSMQMCABBhBgiA+sgRYBboEXBuyBIpZMAkAW1YUAh9deX8AAAAASUVORK5CYII=) repeat-x bottom left;
	text-shadow: 4px 4px 0px #41838e;
}

.nagging h2 span{
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 10px;
	font-size: 18px;
	color: #3a909e;
	text-shadow: none;
}

#xiabb,#xiabb_but {
	max-width:768px;
	width:80%;
	font-size:1.5em;
	font-weight: bold;
	color:#3a909e;
	border-radius: 10px;
	padding: 7px 15px;
}

#xiabb {
	height:118px;
	border: 2px solid #6cf;
	border-width: 1px 1px 2px 1px;
}

#xiabb_but{
	margin-top:5px;
	border: 2px dashed #6cf;
	background: rgba(104, 204, 255, 0.5);
	color:#3a909e;
}

#xiabb_but:hover{
	background: rgba(104, 204, 255, 0.75);
	color:#fff;
}

ul,ol{
	margin:0 auto;
	padding:0;
	max-width:768px;
	list-style-type:none;
}

.list li:nth-child(odd){
	clear: both;
	float: left;
	margin:10px 5px 10px 20px;
}

.list li:nth-child(even){
	float: right;
	margin:10px 20px 10px 5px;
}

.list li{
	width:325px;
	padding:10px;
	list-style-type:none;
	background: rgba(255,255,255,.8);
	border-radius: 15px;
	font-weight: bold;
}

.list li:hover {
	box-shadow: 0 5px 5px 0 rgba(0,0,0,.4);
}

.list li,.list li:hover,#xiabb_but,#xiabb_but:hover{
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.id{
	float:left;
	width:20%;
	height:50px;
	display:block;
	text-align: center;
	font-size: 3em;
	opacity: .5;
}

.data{
	font-size:1em;
}

.data,.cont span {
	color:#6cf;
}

.list li a{
	clear:both;
	width:50px;
	font-size:1em;
	text-align:center;
	margin: 5px auto;
	padding: 5px 10px;
	border: 2px dashed #6cf;
	border-radius: 7px;
	background: rgba(104, 204, 255, 0.5);
	color:#3a909e;
	display:block;
}

.list li a:hover{
	background: rgba(104, 204, 255, 0.75);
	color:#fff;
}

.list li .data time,.list li .data span{
	display: inline-block;
}

.cont{
	width:75%;
	float:right;
	font-size:1.5em;
	color:#4a4a4a;
	word-wrap: break-word;
}

.cont img{
	max-width:200px;
}

.copyright{
	width: 100%;
	clear: both;
	position:relative;
	bottom:5px;
	text-align:center;
	font-weight: bold;
	color:#3a909e;
}

@media screen and (max-width: 750px){
.list li{
	float: none!important;
	width:80%;
	margin:10px auto!important;
}
}
</style>
<div class="nagging">
<form method="post" action="">
  <label for="xiabb"><h2>碎碎念<span>日常瞎逼逼</span></h2></label><br>
  <textarea id="xiabb" name="say" required="required" aria-required="true" placeholder="随便说两句~"></textarea>
  <input id="xiabb_but" type="submit" value="发♂射" />
</textarea>
</form>
</div>
<div class="list"><ul>
<?php
if($say=$_POST['say'])add(stripslashes($say));//防止双层转义
if($del=$_GET['del'])del($del);
//类
class xiabb{
	public $id;
	public $content;
	public $time;
	public $weather;
	
	function __construct($id,$content,$time,$weather){
		$this->id = $id;
		$this->content = $content;
		$this->time = $time;
		$this->weather = $weather;
	}
}

//浏览
function view() {
$xiabb = file_get_contents("xiabb.json");
$json = json_decode("[".rtrim($xiabb,",\n")."]");
for($id=0,$i=0;$i<count($json);$i++){
	$id++;
	$content=$json[$i]->content;
	$time=$json[$i]->time;
	$weather=$json[$i]->weather;
	echo "<li><p class=\"id\">#".$id."</p><p class=\"data\"><time>".$time."</time>-><span>".$weather."</span></p><p class=\"cont\"><span>#</span>".$content."<span>#</span></p><a href=\"?del=".$id."\">删除</a></li>"."\n";
	}
}
view();

//天气接口
function forecast($url){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL,$url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
	$weather = curl_exec($ch);
	curl_close($ch);
	return $weather;
}

//IP
function ip(){
	if(getenv('HTTP_CLIENT_IP')) { 
	$ip = getenv('HTTP_CLIENT_IP'); 
	} elseif(getenv('HTTP_X_FORWARDED_FOR')) { 
	$ip = getenv('HTTP_X_FORWARDED_FOR'); 
	} elseif(getenv('REMOTE_ADDR')) { 
	$ip = getenv('REMOTE_ADDR'); 
	} else { 
	$ip = $HTTP_SERVER_VARS['REMOTE_ADDR']; 
	}
	return $ip; 
}

//增加
function add($word) {
	$xiabb = file_get_contents("xiabb.json");
	$json = json_decode("[".rtrim($xiabb,",\n")."]");
	//天气
	$weather = json_decode(forecast("https://api.thinkpage.cn/v3/weather/now.json?key=此处应有key=".ip()."&language=zh-Hans&unit=c"))->results[0]->now->text;
	//时间
	date_default_timezone_set('PRC');
	$time = strftime("%Y-%m-%d %H:%M:%S",time());
	$id=$json[0]->id+1;
	$new_xiabb = new xiabb($id,$word,$time,$weather);
	//备份历史版本
	copy("xiabb.json","xiabb.json.old");
	$fp = fopen("xiabb.json","w");
	flock($fp, LOCK_EX);
	fwrite($fp,json_encode($new_xiabb).",\n".$xiabb);
	flock($fp, LOCK_UN);
	fclose($fp);
	//备份
	copy("xiabb.json","xiabb.json.bak");
	header("Location:shuoshuo.php");
}
//为什么会有两个备份呢,因为之前想弄一个误删恢复,但是好像没什么必要

//删除
function del($line) {
	$filename="xiabb.json";
	$farray=file($filename);
	for($i=0;$i<count($farray);$i++) {   
		if(strcmp($i+1,$line)==0) {   
		continue;
		}   
	if(trim($farray[$i])<>"") {   
		$newfp.=$farray[$i];
		}   
	}   
	$fp=fopen($filename,"w");
	flock($fp, LOCK_EX);
	fwrite($fp,$newfp);
	flock($fp, LOCK_UN);
	fclose($fp);
	header("Location:shuoshuo.php");
}
?>
</ul></div>
<footer class="copyright">©兰陵</footer>

效果:

自制wordpress时间轴样式说说与归档

说说模板,和页面模板的操作类似,先到jquery之家下载那个时间轴源码,引入css文件夹即可,js不要。css可能会和主题样式冲突,要自己修改css哦~。还有我弄了50个图标,随机显示,需要在时间轴的style.css里的“.user-1 {background-image: url(../images/1.jpg);}”进行修改

<?php
/*Template Name: 说说
author: 兰陵
url: http://blog.thkira.com/
*/
?>
<?php get_header(); ?>

//此处省略XXX字,以下为<?php the_content(); ?>部分
		<div class="container">				
			<header class="clearfix">
				<h2>碎碎念<span>日常瞎逼逼</span></h2>
				<div class="support-note">
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">

				<ul class="timeline">
<?php
function view() {
$xiabb = file_get_contents(esc_url( home_url( '/xiabb.json' ) ));
$json = json_decode("[".rtrim($xiabb,",\n")."]");
$arr=range(1,50);//此处我弄了50个图标随机显示
shuffle($arr);
for($id=0,$i=0;$i<count($json);$i++){
	$id++;
	if($id==1)$checked=" checked";else $checked="";
	$content=$json[$i]->content;
	$time=$json[$i]->time;
	$weather=$json[$i]->weather;
	echo '
					<li class="event" id="xiabb'.$id.'">
						<input type="radio" name="tl-group"'.$checked.'/>
						<label></label>
						<div class="thumb user-'.$arr[$i].'"><span>#'.$id.'</span></div>
						<div class="content-perspective">
							<div class="content">
								<div class="content-inner">
									<h3>'.$content.'</h3>
									<p>时间:'.$time.' >天气:'.$weather.'</p>
								</div>
							</div>
						</div>
					</li>'."\n";
	}
}
view();
?>
					
				</ul>
			</section>
		</div>
//此处省略XXX字,以下可能有评论模板等

<?php get_footer(); ?>

效果:碎碎念

自制wordpress时间轴样式说说与归档

到此,就完成了,我也可以睡觉了 :?:

附:东方系列图标

之前没写,应该坑了些人吧 :cry:

#一言#

来一发吐槽

    1. 兰陵 #28
      変態

      @Ice-Hazymoon 不好意思,这是我以前瞎搞的好像有很多问题
      原因:PHP(哪些版本忘了)对 GET、POST、COOKIE 过来的数据自动运行 addslashes() 函数,会在 “、’、\、NULL 字符之前添加反斜杠。然后我的 json 编码又对反斜杠\进行了转移,导致双层转义。于是图片 src= 后的”和’接收时变成了\”和\’,json 编码时变成了\\\”和\\\’,解码时变成了\”和\’,导致图片无法查看。我的锅_(:3」∠❀)_
      解决办法:使用 stripslashes() 函数删除由 addslashes() 函数添加的反斜杠。将189行的代码 if($say=$_POST[‘say’])add($say); 改成 if($say=$_POST[‘say’])add(stripslashes($say));

    1. 兰陵 #22
      変態

      @Hazymoon 我看了一下,.user-1 {background-image: url(../../images/xiabb/1.png);}的图片地址你还没替换,可以自己找圆形图标素材进行替换。
      如果要不了这么多图标,可以修改说说模板里的$arr=range(1,50);减少图标数量,对应的css样式也可以少写。
      我的图标素材我在有篇文章里分享过,东方系列图标
      配色和布局定位需要根据自己的情况进行适配(๑•̀ㅂ•́)و✧

        1. 兰陵 #19
          変態

          @逸香阁 那个是因为我弄了始终居中,鼠标进过时显示的内容让archives的div宽度增加了,重新居中显示了,看着就会往左偏移
          .archives {
          position: relative;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%);
          }

Title - Artist
0:00