HHTjim'S 部落格

更换主题-freshwp_绝对的小清新

作者：matrix 发布时间：2013-12-06 分类：Wordpress 兼容并蓄

这个主题是之前提到过的NGRO主题，很好看~ freshwp

在NGRO.ORG上看到，绝对是最喜欢的主题，没有之一。可惜NGRO.ORG没有公开，再加上是typecho的更抽了~

不过就算是typecho的，我也愿意为了这主题换博客程序。据说typecho还是超轻型的，比起WordPress好得多。嗯  之后也就到处找此款主题的相关信息，结果是弄到了别人扒下来的皮。不错 很感谢sunhua.me。地址：诡异：TEer扒TE皮NGRO

这主题是由typecho默认主题改过来的，变化很大。想到typecho的轻巧，WordPress又舍不得某些功能 ，纠结。最后妥协于wp的某个JB功能，去找各类关于typecho主题移植到WordPress的方法，结果都是wp到tc的 ，真是恼火。庆幸我的运气不是一般的好，看到winysky.com的 wordpress版本的typecho皮肤 哈哈 有救了。那扒的皮就是源于那tc皮肤，打开一看的确一样的结构设计。这下简单多了，覆盖style，修改简单的css、php代码。一个具有基本功能的wp主题就出现了，哎  我真人才啊，这都鼓捣的出来。还TMD不是学计算机的 ➡ 搞的建筑工程。

这下就整理完善需要的功能到fresh就OK啦，直到这时间才发文。

freshwp：清新-wp

之前用的是自说me话的增强版philna主题（备份下载：http://www.400gb.com/file/40436320）。

后来换的BLUE2.0（七彩之家修改于inv的cms主题），这个相对于以前来还好些。（备份下载：http://www.400gb.com/file/40816608）

这回来就换了这个，小清新  大爱~ 😉

添加wordpress后台验证功能

作者：matrix 发布时间：2013-11-04 分类：Wordpress 兼容并蓄

加强博客后台的登录安全 wowordpress验证码插件曾尝试用在后台的验证功能上面，但这东西不靠谱 也就放弃。

不过看到 乜都讲D 的方法，很不错~  免插件

代码：

<?php

function bd_login_form()  
{  
?>  
    <p>  
        <label for="user_pass_2">身份认证<br />  
        <input type="password" name="pwd_2" id="user_pass_2" value="" size="20" tabindex="20" /></label>  
    </p>  
<?  
}  
add_action('login_form', 'bd_login_form');  

function bd_authenticate_username_password($user, $username = '', $password = '')  
{  
    if ( isset($_POST['log']) )  
    {  
        $bDone = false;  
        if ( isset( $_REQUEST['pwd_2'] ) )  
        {  
            $pwd2 = $_REQUEST['pwd_2'];  
            if ( $pwd2 === '123' ) // 自由修改认证码  
                $bDone = true;  
        }  
        if ( $bDone == false )  
        {  
            remove_filter('authenticate', 'wp_authenticate_username_password', 20, 3);  
            $error = new WP_Error();  
            $error->add('incorrect_password', __('<strong>错误</strong>：身份认证失败。'));  
            return $error;  
        }  
    }  
    return $user;  
}  
add_filter('authenticate', 'bd_authenticate_username_password');  

?> 

说明：

此代码来自向WP登陆页加验证框 ，就改了几个字。

第22行123为认证密码，注意修改~

将上面代码保存到主题目录的functions.php使用。

wowordpress验证码插件-Captcha 小试

作者：matrix 发布时间：2013-10-22 分类：Wordpress 兼容并蓄

找到Captcha插件式由于需要加强博客后台的登录安全。最近这些天，一直都被搞Aamin用户名，TMD  真是找不到事做了。我这小网站也~ ➡

经后面测试，此插件不靠谱。

试试这个

添加wordpress后台验证功能

插件官方地址：

http://wordpress.org/plugins/captcha/

插件设置有后台登录、评论框、注册页面、修改密码页面的验证码开关选项。

非图片输出的数学验证   效果应该不错的~

貌似有些不靠谱~  评论上的未测试

易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画

作者：matrix 发布时间：2013-10-16 分类：Wordpress 兼容并蓄 零零星星

看到易迅网的右侧、下方商品都有的一种效果，原本以为是JS什么的，找了大半天才知道是css3的效果。

DEMO下载:

http://www.400gb.com/file/28915416

http://pan.baidu.com/share/link?shareid=3180343884&uk=3238236832

关键的css代码：

@-webkit-keyframes aniBlink{from{left:-60px}to{left:550px}}/*aniBlink动画执行区域*/  
.TU a:before{content:'';position:absolute;width:30px;height:200px;/*aniBlink动画斜线宽度和高度*/  
top:0;left:-60px;/*aniBlink动画斜线初始停留位置*/  
overflow:hidden;  
background:-webkit-gradient(linear,left top,rightright top,color-stop(0%,rgba(255,255,255,0)),  
color-stop(50%,rgba(255,255,255,0.4)),color-stop(100%,rgba(255,255,255,0)));  
/*linear（线性渐变）*/  
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}/*skewX：定义一个X轴的2D 倾斜*/  
.TU  :hover a:before{-webkit-animation:aniBlink 0.3s ease-out forwards} /*aniBlink动画执行的时间0.3s*/  

说明：.TU为包含图片class（任意命名）的外面一层class（命名为.TU）。

例如：

 <div class="TU">  
<div class="y">  
 <a href="https://www.hhtjim.com" target="_blank" title="易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画 - HHTjim.Com" >  
<img src="https://static.hhtjim.com/wp-content/uploads/2015/bcsfile/20130326192035.jpg" width="505" height="134"></a>  
</div></div>  

aniBlink为动画名称。如要修改，确保第一和第九行相同。

空间坐标系是以窗口右上角为原点，从左到右为X轴正方向，从上到下为Y轴正方向，垂直屏幕向外为Z轴正方向进行建系。

基本上都注释了。还有其他不知道的可参考度娘。

效果，就那中间的白条东跑西跑的：chrome、safari、firefox都看到效果，IE10不行！其余须自测。

参考：

http://www.w3cplus.com/content/css3-gradient

http://www.mxria.com/css3/c20120121810.htm

CSS3效果在线编辑工具

添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

作者：matrix 发布时间：2013-10-13 分类：Wordpress 零零星星

测试是用于NGRO主题的首页文章列表上，配合起之前的窗口小列表 不错~

带8px白色边框鼠标停留后还有放大效果，如图：

.Indexpost img {  
    padding: 8px;  
    background-color: #FFF;  
    box-shadow: 0px 0px 18px rgba(0,0,0,.4);  
    -webkit-transition: all ease .3s;  
    transition: all ease .3s  
}  

.Indexpost img {  
margin-right: 10px;  
    width:140px;  
    height:100px;  
    overflow:hidden;  
float: left;  
}  
.Indexpost img:hover {  
    -webkit-transform: scale(1.05);  
    transform: scale(1.05);  
    box-shadow: 0px 0px 18px rgba(0,0,0,.5);  
}  

说明：这是笔者自己主题的css代码。

6行.3s为放大过程的时间0.3秒

17行1.05为放大的值。

其他的参数我也不清楚，不管谦虚还是其他的来说我很菜。

我这原本首页样式是post的，改成.Indexpost样式也为了独立修改的方便。大致样式跟.post一样，只是修改了.Indexpost img。

如果你也感觉到此效果不错，不嫌弃的话可以参考我这的css代码。

建议参考：图片呼吸灯，CSS3图片阴影+鼠标移上放大图片

刷新页面后让WordPress背景随机切换

作者：matrix 发布时间：2013-10-10 分类：Wordpress 零零星星

只需要几行php代码就可以让WordPress主题背景随机切换，每次刷新切换不同的图片。这需要按F5刷新页面或者到新页面时背景才会自动变换。

更新的>>用BACKSTRETCH实现定时切换背景 可以实现定时自动切换背景。

<?php $random_image = rand(1, 5); ?>  
<div id="div1">  
    <img src="<?php bloginfo('stylesheet_directory');?>/bg/<?php echo $random_image; ?>.jpg"/>  
</div>  

说明：

1行中的5代表有5张图片可供切换

2行中div1为背景css样式id 阅读剩余部分 »

用BACKSTRETCH实现定时自动切换背景

作者：matrix 发布时间：2013-10-09 分类：Wordpress 兼容并蓄 零零星星

jquery-backstretch可以实现之前>>刷新页面后让WordPress背景随机切换  不能到达的动态切换背景功能。 用jquery-backstretch就算你不按F5刷新页面背景也可以自动切换，带有淡入淡出的缓慢加载那种效果，很好看。

github地址：https://github.com/srobbin/jquery-backstretch

官网：http://srobbin.com/jquery-plugins/backstretch/

目前最新版本 Backstretch - v2.0.4 - 2013-06-19 阅读剩余部分 »

添加WordPress开启关闭侧边栏功能

作者：matrix 发布时间：2013-10-01 分类：Wordpress

此功能有点鸡肋，不过还是在折腾出来了。

1.加载JQ库，有了的跳过。

2.主题的header上加入js代码：

<script>  
jQuery(document).ready(function($){  
(function(){  
function SetCookie(c_name,value,expiredays){  
var exdate=new Date();  
exdate.setDate(exdate.getDate()+expiredays);  
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/";  
//如果你希望每个页面都有个独立的 Cookies 设置的话请去掉+";path=/"，这样的话leeiio.me/xxx/ 和leeiio.me/yyy/ 的侧边栏状态都将是独立的  
}  
window['RootCookies'] = {};  
window['RootCookies']['SetCookie'] = SetCookie;  
//JavaScript 的命名空间，假使你已有一个 SetCookie 的函数的话将不会与之冲突，通过 RootCookie.SetCookie() 调用  
})();  
//Toggle Sidebar  
$('#close-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', 7);$('#close-sidebar').hide();$('#show-sidebar').show();$('#celan').hide();$('.grid_10').animate({width: "870px"}, 1000);});  
$('#show-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', -1);$('#show-sidebar').hide();$('#close-sidebar,#celan').show();$('.grid_10').animate({width: "640px"}, 800);$('#celan').delay(800).show(0);});  
});  
</script>  

上面的代码也可保存为*.js加载，需要去掉<script>标签。

3.显示开关侧边栏的代码，需要在哪显示就添加到哪：

<div style="position: absolute;right: 0px;">  
          <?php if(!$_COOKIE['show_sidebar']=='no'):?>  
            <li id="close-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" style="display:none;"title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php else: ?>  
            <li id="close-sidebar" style="display:none;" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php endif;?>  
            <?php if($_COOKIE['show_sidebar']=='no'): ?>  
<style type="text/css">  
#content {width:870px;}  
.grid_10 {width:870px;}  
#celan {display:none;}  
</style>  
        <?php endif; ?>  
</div>        

说明：第一行的样式可自定义。

#celan为侧边栏样式，#content和.grid_10为文章内容边框的样式。主题不同，此样式也就需要更改。

其他代码我也不懂，记录END。

参考：http://cnsunbin.com/wordpress/wordpress-close-or-show-sidebar.html

http://isayme.com/2011/09/make-the-theme-thiner.html

http://code.google.com/p/jieim/downloads/detail?name=all.zip&can=2&q=