强大的小墙Anti-Spam

作者:matrix 发布时间:2013年9月27日 分类:Wordpress 兼容并蓄

WordPress的垃圾评论是越来越多,by Willin Kan大师的小墙更是相当的强大!

使用:将代码放入主题的functions.php中即是。 阅读剩余部分 »

给wordpress添加title属性的鼠标气泡悬浮窗

作者:matrix 发布时间:2013年9月26日 分类:Wordpress 兼容并蓄

鼠标停留在有title属性上的时候或有提示,但是默认的样式中有觉得不可观的地方。利用js即可实现修改。

NGRO的效果演示:

NGRO的效果演示

css 阅读剩余部分 »

WordPress整合Highslide JS 灯箱效果

作者:matrix 发布时间:2013年9月25日 分类:Wordpress 兼容并蓄

更换主题-七彩之家BLUE2.0以及后续的修改 有提到整合auto-highslide灯箱的功能,这次更加完善。

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

步骤:

1.将下面代码加到主题的functions.php中,方法你懂得。

<?php  
    //////////////START wp highslide picture code  /////////////  
add_filter('the_content', 'hlHighSlide_replace', '99');  

    add_action('wp_head', 'highslide_head');  
    function highslide_head()  
        {  
        $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
        $defaults_javascript =    
        "<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";  
     echo $defaults_javascript;  
        }  

    add_action('wp_footer', 'highslide_footer');  
    function highslide_footer()  
    {  
    $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
    $defaults_javascript =    
    "\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script> 
    <script type='text/javascript'> 
hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/'; 
hs.showCredits = false; 
hs.creditsPosition = 'bottom left'; 
hs.outlineType = 'custom'; 
hs.dimmingOpacity = 0.3; 
hs.fadeInOut = true; 
hs.align = 'center'; 
hs.captionEval = 'this.thumb.alt'; 


// Add the slideshow controller 
hs.addSlideshow({ 
    slideshowGroup: 'group1', 
    interval: 5000, 
    repeat: true, 
    useControls: true, 
    fixedControls: 'fit', 
    overlayOptions: { 
        opacity: 0.75, 
        position: 'bottom center', 
        offsetX: 0, 
        offsetY: -10, 
        hideOnMouseOut: true 
    } 
}); 

// Chinese simplified language strings 
hs.lang = { 
    cssDirection: 'ltr', 
    loadingText: '载入中...', 
    loadingTitle: '正在载入,点击取消', 
    focusTitle: '置于最前', 
    fullExpandTitle: '原始尺寸', 

    previousText: '上一张', 
    nextText: '下一张', 
    moveText: '移动', 
    closeText: '关闭', 
    closeTitle: '关闭 (退出键)', 
    resizeTitle: '调整尺寸', 
    playText: '播放', 
    playTitle: '播放幻灯片 (空格键)', 
    pauseText: '暂停', 
    pauseTitle: '暂停幻灯片 (空格键)', 
    previousTitle: '上一张 (左方向键)', 
    nextTitle: '下一张 (右方向键)', 
    moveTitle: '移动', 
    fullExpandText: '完整尺寸', 
    number: 'Image %1 of %2', 
    restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。' 
}; 

// gallery config object 
var config1 = { 
    slideshowGroup: 'group1', 
    numberPosition: 'caption', 
    transitions: ['expand', 'crossfade'] 
}; 
         </script>";  
 echo $defaults_javascript;  
 }  

//add onclick event   
function add_onclick_replace ($content)  
{   
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";  
$replacement = '<a$1href=$2$3.$4$5 class="highslide"  onclick="return hs.expand(this, config1 )" $6>$7 </a>';  
$content = preg_replace($pattern, $replacement, $content);  
return $content;  
}  

function hlHighSlide_replace($content)  
{  
        global $post;  
        $defaults = array();  
        $defaults['quicktags'] = 'y';  
        $defaults['alt'] = 'Enter ALT Tag Description';  
        $defaults['title'] = 'Enter Caption Text';  
        $defaults['thumbid'] = 'thumb1';  
        $defaults['show_caption'] = 'y';  
        $defaults['show_close'] = 'y';  
        $content=add_onclick_replace($content);  
        $HSVars = array("SRC", "ALT", "TITLE", "WIDTH", "HEIGHT","THUMBID");  
        $HSVals = array($defaults['href'], $defaults['src'], $defaults['alt'], $defaults['title'], $defaults['thumbid']);  
        preg_match_all ('!<img([^>]*)[ ]*[/]{1}>!i', $content, $matches);  
        $HSStrings = $matches[0];  
        $HSAttributes = $matches[1];  
        for ($i = 0; $i < count($HSAttributes); $i++)  
        { preg_match_all('!(src|alt|title|width|height|class)="([^"]*)"!i',$HSAttributes[$i],$matches); 
          $HSSetVars = $HSSetVals = array(); 
          for ($j = 0; $j < count($matches[1]); $j++) 
            { $HSSetVars[$j] = strtoupper($matches[1][$j]); 
              $HSSetVals[$j] = $matches[2][$j];} 
        } 
        $HSClose = <<<EOT 
                <a href="#" onclick="hs.close(this);return false;" class="highslide-close"  title="关闭">Close</a>   
EOT; 
                $HSCaption = <<<EOT 
                <div class='highslide-caption' id='caption-for-%THUMBID%'> 
                {$HSPrvNextLinks}            
                {$HSClose}   
                <div style="clear:both">%TITLE%</div> 
                </div> 
EOT; 
            $HSCode = <<<EOT 
<img id="%THUMBID%" src="%SRC%" alt="%ALT%" title="%TITLE%" width="%WIDTH%"  height="%HEIGHT%" />{$HSCaption}  
EOT;  
          $content = str_replace($HSStrings[$i], $HSCode, $content);  
        return $content;  
    }  



    /////////////////  
?>  

说明:87 行的onclick="return hs.expand(this, config1 )"开启了相册幻灯片功能,如果需要关闭可改为onclick="return hs.expand(this)"

2.下载素材文件,解压到主题目录

下载:

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

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

3.最后完工。

效果:

图片4829-WordPress整合Highslide JS 灯箱效果

使用的Highslide JS 在线编辑,状态保存:

http://highslide.com/editor/?config=%7B%22lang%22%3A+%22zh-s%22,+%22preset%22%3A+%22html-white%22,+%22applyDimming%22%3A+true,+%22dimmingOpacity%22%3A+%220.3%22,+%22hideThumbOnExpand%22%3A+false,+%22alignment%22%3A+%22center%22,+%22captionSource%22%3A+%22thumb.alt%22,+%22captionStyles%22%3A+%22%5Ctpadding%3A+2px;%22,+%22headingSource%22%3A+%22thumb.alt%22,+%22creditsPosition%22%3A+%22bottom+left%22,+%22enableGallery%22%3A+true,+%22numberPosition%22%3A+%22caption%22,+%22enableThumbstrip%22%3A+false,+%22thumbstripMode%22%3A+%22float%22,+%22thumbstripPosition%22%3A+%22below%22,+%22thumbstripRelativeTo%22%3A+%22image%22,+%22thumbstripSize%22%3A+%22280%22,+%22slideshowRepeat%22%3A+true,+%22htmlControlsLayout%22%3A+%22icon-text%22,+%22useTitleBar%22%3A+false,+%22htmlHeadingSource%22%3A+%22a.title%22%7D

参考:http://themeidea.com/highslide.html

Highslide js 在线编辑 http://justcoding.iteye.com/blog/595145

http://highslide.com/editor/

wordpress添加二级导航功能CSS代码

作者:matrix 发布时间:2013年9月21日 分类:Wordpress 零零星星

NGRO主题没有导航菜单,也就只有自己动手了。

最终样式,感觉还不错:

最终样式

步骤: 阅读剩余部分 »

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

作者:matrix 发布时间:2013年9月20日 分类:Wordpress 兼容并蓄

图片4842-添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

onamae.com的25号免费域名没抢到,倒是看到onamae上的一个图片闪光特效好奇,这就扒了。

看头部的meta写的jquery-opacity-rollover.js文件,不知道这是个啥子插件上的东东。

作者:http://h2ham.seesaa.net

实际效果,文字说明:

假设图片被指定加载此js特效阅读剩余部分 »

wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

作者:matrix 发布时间:2013年9月16日 分类:Wordpress 零零星星

用ZeroClipboard跨浏览器实现复制到剪切板,兼容ie、chrome、firefox等等支持flash的浏览器。

图片4869-wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

ZeroClipboard以前在google代码的项目404,发现个神似ZeroClipboard的zClip 项目:http://www.steamdev.com/zclip/

其余项目:可以参考http://zeroclipboard.org/

网上关于ZeroClipboard的有很多,有些不能用 看着也杂~

下面记录自用ZeroClipboard的代码。点击查看最新版本的简单设置

ZeroClipboard version: "1.0.7"

js和swf下载:
http://www.400gb.com/file/28619600
http://pan.baidu.com/share/link?shareid=3611655227&uk=3238236832

步骤:

1.修改压缩包中zpCOPY.js的第九行:

    moviePath: 'zpCOPY.swf', // URL to movie

确保zpCOPY.swf路径的正确,建议使用绝对地址(形如https://www.hhtjim.com/zpCOPY.swf)。
2.在需要调用复制的页面加入js代码:

<script type="text/javascript" src="https://www.hhtjim.com/zpCOPY.js"></script>
<script type="text/javascript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText($('text').value);
clip.glue('anniu');
clip.addEventListener( "complete", function(){
    alert("复制成功!");
});
clip.addEventListener( "load", function(client) {
    client.movie.title="复制本文固定链接";
});
}
</script>

说明:

第1行的js地址可自定义

第8、9行的text、anniu为第3步代码中对应的id值

第10、11行是复制后的弹窗提示。

3.同上,放在那页面,适当位置添加:

<body onLoad="init()"></body>
<textarea style="display:none" id="text" ><?php the_permalink() ?></textarea>
     <a id="anniu" href='javascript:void(0);' title="复制本文链接">+复制链接</a>

说明:

第1行的onLoad="init()"为打开页面即加载init函数。缺少此行会导致加载flash失败。

第2行为需要复制的文本内容。这里的复制的内容是<textarea里的<?php the_permalink() ?>返回的WordPress文章网址。

经测试无法复制其他标签的文字,只有<textarea标签里的可用。由于文本框有点占位置,所以做了隐藏style="display:none"。

第3行为点击复制的那个按钮。

4.之后就成功了。

经本地测试chrome 版本 28.0.1500.95 m、ie10、firefox 23.0.1 复制成功!

本地测试于NGRO主题  💡

图片4870-wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

弹窗提示

图片4871-wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

参考:http://www.myext.cn/webkf/27383.html

http://keleyi.com/a/bjac/3wjq3xm2.htm

zclip DEMO:http://www.steamdev.com/zclip/

 


最新的v1.1.1版本  更简单

需要调用JQ库和zclip.min.js:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://file.icycat.com/view/js/jquery.zclip.min.js"></script>

然后是复制的按钮和文本代码:

<a type="button" id="anniu" class="btn" > 复制 </a>
<a style="display:none" id="wenben"> 复制:https://www.hhtjim.com </a>
<script type="text/javascript">
$(document).ready(function(){$("#anniu").zclip({path:"http://file.icycat.com/view/js/ZeroClipboard.swf",copy:$("#wenben").text(),afterCopy:function(){$(this).css("color","#777");$(this).text("复制成功")}})});
</script>

说明:第1行 复制按钮为 id="anniu"

第2行 复制的文本是 id="wenben"的内容

3-4行 加载配置的swf文件路径,复制按钮、复制的文本ID以及复制成功后变成“复制成功”的样式。

代码参考来自:http://file.icycat.com/

修改wordpress背景带像素点的颗粒半透明点阵效果

作者:matrix 发布时间:2013年9月13日 分类:Wordpress 兼容并蓄

这里所谓的带像素点的颗粒效果如图,
远观效果(点击扩大):
修改wordpress背景带像素点的颗粒效果-远观

放大后:

修改wordpress背景带像素点的颗粒效果-放大后

阅读剩余部分 »

为wordpress添加google+按钮

作者:matrix 发布时间:2013年9月10日 分类:Wordpress 兼容并蓄

google+已挂~


为wordpress添加google+按钮

WordPress添加google+按钮 实现很简单。

在需要显示的地方添加其中第4行代码:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">  
    {lang: 'zh-CN'}  
    </script>  
    <g:plusone size="small"></g:plusone>  

说明:第1-3行是调用google+的js

第4行是显示google+按钮,size="small"是最小的。除了small以外还有medium、inline、tall尺寸。

除了使用默认的当前所在页面+1还可以指定+1的URL:

<g:plusone href="<?php the_permalink() ?>"></g:plusone>  

更可以自定义:http://www.google.com/webmasters/+1/button/index.html

参考:http://www.isongxia.com/google-1.html