① 在文章内插入的广告
在文章内插入的广告具有相当高的点击率。用 WordPress 自带的 add_filter 函数将广告插入more标签后面
打开主题的 function.php ,插入下面的代码:
/**
* The filter to insert the ads
*/
function bl_insert_ad_code_filter( $content ) {
global $id;
// 只在文章页面显示
if ( !is_single() ) {
return $content;
}
// 首先插入广告代码
$html = '<div class="single_ads">你的广告代码</div>';
// more 标签在 WordPress 2.3 前是一个 a 标签,2.3 后是一个 span 标签
// 保证兼容性
return preg_replace("#\<(a|span) id\=\"more-$id\"\>\</\\1\>#", $html."$0", $content, 1);
return $content;
}
add_filter('the_content', 'bl_insert_ad_code_filter', 50);
利用这个 filter 我们还可以在文章任意的地方插入广告,或者添加其他的应用,大家可以尽情发挥创意。
② jRumble–让你的博客都动起来
使用方法:
下载 jRumble ,将其中的 jquery.jrumble.1.3.min.js 放到你的主题所在jS目录中。
接着编辑你的页面,首先找到 head 部分,并进入编辑状态。
将以下代码粘贴过去:
<script type="text/javascript" src="http://getfile.duapp.com/typecho/theme/typesimple/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/jquery.jrumble.1.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#DivName').jrumble({
x: 3,
y: 3,
rotation: 0
});
$('#DivName').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
});
</script>
注意,这当中第一行我已经写入了引用 JQuery 的代码,如果将此行去掉,将会失去抖动效果。[当然也可以自己加入js目录中,只不过影响网页加载速度...]
粘贴过去之后,我们需要将上面这段代码中的“DivName”改成任意一个你想要让它抖动的 HTML 元素 ID 即可。
好了,上传你的网页,试试效果吧!效果请看本站logo效果
③ WP主评论加上楼层号的方法(支持评论分页)
直接讲实现方法,具体见本站评论楼层效果演示:
将下面代码
global $commentcount;
if(!$commentcount) { //初始化楼层计数器
$page = get_query_var('cpage')-1;
$cpp=get_option('comments_per_page');//获取每页评论数
$commentcount = $cpp * $page;
}
加到
function muzzzcomment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
后面
------------------------ 我是分隔线 ---------------------------------
将下面代码
<span class="floor"><!-- 主评论楼层号 by zwwooooo -->
<?php
if(!$parent_id = $comment->comment_parent){
switch ($commentcount){
case 0 :echo "<font style='color:#cc0000'>请自行修改内容</font>";++$commentcount;break;
case 1 :echo "<font style='color:#93BF20'>请自行修改内容</font>";++$commentcount;break;
case 2 :echo "<font style='color:#000000'>请自行修改内容</font>";++$commentcount;break;
default:printf('%1$s楼', ++$commentcount);
}
}
?>
</span>
加到
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('reply_text' => 'Reply','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
后面
---------------------------- 我是分隔线 ---------------------------------
最后将
.floor{position:absolute;top:0;right:0;font-size:14px;font-weight:bold;color:#999;font-family:'JosefinSansRegular',"Microsoft Yahei";}
加到style.css中
PS:此效果是从大發那里COPY过来的,感谢大發,zwwooooo....
④ 边栏划过变色,划过移动效果
此代码是从大头那里扒来的,哈哈...
首先是划过变色,这个很简单,只需要在相应的css中加入以下代码
@@@:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);}
@@@ a{-webkit-transition: all 1s ease-in-out;}
@@@:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;}
@@@:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;}
@@@:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;}
@@@:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;}
PS:把“@@@”替换成你想要让它变色的元素,如"sidebar""topnavi"等等。。。
------------------------------- 我是分隔线 ----------------------------------
其次是鼠标滑过元素平移,这个是采用JS代码来实现:
代码一:
$(document).ready(function() {
$('@@@').hover(function() { //mouse in
$(this).animate({ paddingLeft: '8px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
代码二:
jQuery(document).ready(function($){
$('@@@').hover(function() {
$(this).stop().animate({'left': '6px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
});
PS:同样,你需要把代码中的“@@@”替换成你需要变化的元素。。
另外分享几个:
★ 给WordPress评论用户加上评论之星VIP等级
★ 给wordpress添加广告位置
★ 无插件实现WordPress评论表情
★ WordPress酷炫读者墙
★ WordPress评论回复邮件通知
★ 移动版主题:Mobile pack
★ 代码高亮插件SyntaxHighlighter
代码白痴飘过! ❗
@吾乐吧软件站:这个可以有。。。
都是好代码,。
🙁 收藏 留备用 博主有才啊 还懂这个
吖,评论很colorful啊!
插入广告好赚钱啊 呵呵
瞬间成为知识分子了啊。。
备忘录啊。。
暂时还是用着emlog,什么时候emlog不够用了我再换WP 😆
博主的文章内代码高亮显示用得是插件还是用的代码?