① 在文章内插入的广告
在文章内插入的广告具有相当高的点击率。用 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 😆
博主的文章内代码高亮显示用得是插件还是用的代码?