从去年开始就用了阿里百秀的这个模板,因为和WineShe社区的模板结合地很好,就一直延续到现在,但当时用的XIU 4.1版本,PC端还可以,移动端显示很不友好。之前一直要升级模板,但因为模板部分内容已经有修改,所以等到现在。

昨天有时间,将之前个人博客修改的代码重新找了一遍,这样就准备将个人博客模板更新到5.3。

从4.1到5.3,我的模板修改的内容如下:

1、header文件中的登陆和注册 按钮提到 logo下面:

<?php if( _hui(‘sign_f’) ){
if( is_user_logged_in() ){
global $current_user;
get_currentuserinfo();
?>
<div class=”user-welcome”>
”><?php echo hui_get_avatar($user_id=$current_user->ID, $user_email=$current_user->user_email, $src=true); ?>
<?php echo $current_user->display_name ?><span class=”text-muted”><?php echo __(‘欢迎登录!’, ‘haoui’) ?></span>
</div>
<p class=”user-logout”>
”><?php echo __(‘退出’, ‘haoui’) ?>
</p>
<?php }else{ ?>
<div class=”user-signin”>
<?php echo __(‘登陆’, ‘haoui’) ?>
<?php echo __(‘注册’, ‘haoui’) ?>
</div>
<?php } ?>
<?php } ?>
<?php hui_nav_menu(); ?>

将以上代码移动到以下代码下:

/*

  • 社区热点动态调用
  • ====================================================
    */

newsletter{padding:20px;*padding:35px 20px;background: #E5ECF2;border-radius: 6px;}

newsletter h2{margin:0;}

newsletter dt{width: 100px;}

newsletter dd{margin-left: 200px;}

newsletter dd p{line-height: 30px;}

news_feed ul{color: #636B75;}

news_feed ul li{height:24px;line-height: 24px;margin-bottom: 8px;}

news_feed ul li .date{display: inline-block;float: left;width: 140px;font-size: 13px;}

news_feed ul li a{display: inline-block;max-width: 300px;overflow: hidden;line-height:24px;font-size:14px;text-overflow:ellipsis;white-space: nowrap;}

2、对应的style.css格式的修改

2.1 首先将所有的#FF5E52 替换为?#44a9b2,其次

2.2 评论左对齐的修改.comt-comterinfo ul{padding: 0;margin: 0 auto;width:700px;list-style: none;text-align: left;}

2.3 登陆和注册字颜色的修改.user-signin a:hover{color: #fff;text-decoration: underline;}

2.4 添加社区动态格式代码

2.5 热门词条格式

/*

  • 社区热点词条调用
  • ====================================================
    */

newsletter{padding:20px;*padding:35px 20px;background: #E5ECF2;border-radius: 6px;}

newsletter h2{margin:0;}

newsletter dt{width: 100px;}

newsletter dd{margin-left: 200px;}

newsletter dd p{line-height: 30px;}

news_topic ul#news_topic{overflow: hidden;padding-top: 5px;font-size: 12px;margin-right: -6px;}

news_topic li{float: left;width: 33.33333%;margin-top: 2px;}

news_topic a{color: #777;display: block;margin-right: 6px;background-color: #fafafa;padding: 4px 8px;height: 28px;border-left: 1px solid #ededed;overflow: hidden;}

news_topic a:hover{color: #fff;background-color: #44a9b2;border-left-color: #FED426;border-left-width: 4px;}

/*

  • header
  • ====================================================
    */

3、 footer版权信息修改

© <?php echo date(‘Y’); ?> ”><?php bloginfo(‘name’); ?>   <?php echo __(‘感谢’, ‘haoui’) ?> <?php echo __(‘WordPress’, ‘haoui’) ?> <?php echo __(‘程序’, ‘haoui’) ?>   <?php echo _hui(‘footer_seo’) ?>
<?php echo _hui(‘trackcode’) ?>

4、蒲公英

在footer文件倒数第三行添加如下代码:

<!– 蒲公英 –>
<div class=”dandelion”>
<span class=”smalldan”></span>
<span class=”bigdan”></span>
</div>
<style type=”text/css”>
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
.dandelion .smalldan {
width: 36px;
height: 60px;
left: 21px;
background-position: 0 -90px;
border: 0px solid red;
}
.dandelion span {
-webkit-animation: ball-x 3s linear 2s infinite;
-moz-animation: ball-x 3s linear 2s infinite;
animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
}
.dandelion span {
display: block;
position: fixed;
z-index:9999999999;
bottom: 0px;
background-image: url(https://tmy123.com/pgy.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 47px;
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
0% { transform:rotate(0deg);}
20% { transform:rotate(5deg); }
40% { transform:rotate(0deg);}
60% { transform:rotate(-5deg);}
80% { transform:rotate(0deg);}
100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
0% { -webkit-transform:rotate(0deg);}
20% { -webkit-transform:rotate(5deg); }
40% { -webkit-transform:rotate(0deg);}
60% { -webkit-transform:rotate(-5deg);}
80% { -webkit-transform:rotate(0deg);}
100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
0% { -moz-transform:rotate(0deg);}
20% { -moz-transform:rotate(5deg); }
40% { -moz-transform:rotate(0deg);}
60% { -moz-transform:rotate(-5deg);}
80% { -moz-transform:rotate(0deg);}
100% { -moz-transform:rotate(0deg);}
}
</style>
<!– end 蒲公英 –>

5、全站侧栏小工具

5.1 ?向我提问的代码

5.2 调用社区动态

<div class=”row”>
<div class=”col-md-10″>
<div id=”news_feed”>
<script src=”http://www.wineshe.com/aws_external/js/last_questions/limit-10″ type=”text/javascript” charset=”utf-8″></script>
</div>
</div>
</div>

5.3 时钟代码

<script charset=”Shift_JIS” src=”http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js”></script>

5.4 调用热门词条

<div class=”row”>
<div class=”col-md-10″>
<div id=”news_topic”>
<script src=”http://www.wineshe.com/aws_external/js/hot_topics/limit-18″ type=”text/javascript” charset=”utf-8″></script>
</div>
</div>
</div>

未完待续……

网络

让读书成为一种习惯
上一篇 «
愚人节
» 下一篇
© 2008 - 2020 winegrower
...... visits · ...... visitors · 15.84 W words