WordPress常用功能代码及主题修改
一、概述
WordPress的强大之处其中之一就是插件和小工具了,但是插件和小工具会拖累速度,能用代码解决的就尽量使用代码解决,本文将本博正在使用的一些功能代码介绍给大家,同时,特别简单说明下主题修改方面的知识。
二、 纯代码-彩色标签云
标签云基本上是是每个WordPress都会有的,WP默认提供了一个标签云,但是只支持单色,在这里给大家提供一下彩色标签云的代码。
1 2 3 4 5 6 7 8 9 10 11 |
function colorCloud($text) { $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text); return $text; } function colorCloudCallback($matches) { $tag_link=$matches[1]; /*颜色集合*/ $colorFull = array('#999','#D8D9A4','#9BB','#EB9','#a3c159','#FEC42D','#6C8C37', '#c2dc15','#3371A3','#888','#00ccff','#FF8080' ); $color=$colorFull[ mt_rand(0, count($colorFull) - 1)]; $pattern = '/style=('|")(.*)('|")/i'; $tag_link= preg_replace($pattern, "style="color:{$color};$2;"", $tag_link); return "<a $tag_link>"; } add_filter('wp_tag_cloud', 'colorCloud', 1); |
将上面这段代码放置到主题的functions.php中,在这段代码中
1 2 3 |
$colorFull = array('#999','#D8D9A4','#9BB','#EB9','#a3c159','#FEC42D','#6C8C37', '#c2dc15','#3371A3','#888','#00ccff','#FF8080' ); |
是标签云颜色的设定,可以根据自己的喜欢来设定颜色。
使用时,将
1 |
<?php wp_tag_cloud('smallest=8&largest=24&number=50'); ?> |
代码放置在sidebar.php中即可。
三、纯代码-热门文章
热门文章的实现代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* $termId:分类目录ID,为0时是检索所有分类目录 $posts_num:显示热评文章的数量 $days:检索多少天内的热评文章 */ // 获得热评文章 function simple_get_most_review($termId=0,$posts_num=10, $days=30) { global $wpdb; //所有热评文章 if($termId==0){ $sql = "SELECT 'ID' , 'post_title' , 'comment_count' FROM $wpdb->posts WHERE 'post_type' = 'post' AND TO_DAYS( now( ) ) - TO_DAYS( 'post_date' ) < $days AND ('wp_posts'.'post_status' = 'publish' OR 'wp_posts'.'post_status' = 'inherit') ORDER BY 'comment_count' DESC LIMIT 0 , $posts_num "; } //分类热评文章 else { $sql="SELECT 'ID' , 'post_title' , 'comment_count' FROM 'wp_posts' INNER JOIN 'wp_term_relationships' ON ('wp_posts'.'ID' = 'wp_term_relationships'.'object_id') INNER JOIN 'wp_term_taxonomy' ON ('wp_term_relationships'.'term_taxonomy_id' = 'wp_term_taxonomy'.'term_taxonomy_id') WHERE 1=1 AND 'wp_term_taxonomy'.'taxonomy' = 'category' AND 'wp_term_taxonomy'.'term_id' = $termId AND 'wp_posts'.'post_type' = 'post' AND ('wp_posts'.'post_status' = 'publish' OR 'wp_posts'.'post_status' = 'inherit') GROUP BY 'wp_posts'.'ID' ORDER BY 'comment_count' DESC LIMIT 0 , 10 "; } $posts = $wpdb->get_results($sql); $output = ""; foreach ($posts as $post){ $overPost=$post->post_title; $output .= "n<li><a href= "".get_permalink($post->ID)."" rel="bookmark" title="".$post->post_title."" >".$overPost."</a></li>"; } echo $output; } |
将上面这段代码放置在functions.php中,使用时将下面这段代码 放置在sidebar.php中。
1 |
<?php if (function_exists('simple_get_most_review')) {simple_get_most_review(0,10,31); } ?> |
四、 纯代码-评论回复邮件
使用这一功能可以使读者尽快知道博主或者其他读者对其评论的反应,有助于形成一定的固定读者。同时这样也可以增强读者的体验。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* comment_mail_notify */ function comment_mail_notify($comment_id) { $admin_notify = '1'; // admin 要不要收回覆通知 ( '1'=要 ; '0'=不要 ) $admin_email = get_bloginfo ('admin_email'); // $admin_email 可改為你指定的 e-mail. $comment = get_comment($comment_id); $comment_author_email = trim($comment->comment_author_email); $parent_id = $comment->comment_parent ? $comment->comment_parent : ''; global $wpdb; if ($wpdb->query("Describe {$wpdb->comments} comment_mail_notify") == '') $wpdb->query("ALTER TABLE {$wpdb->comments} ADD COLUMN comment_mail_notify TINYINT NOT NULL DEFAULT 0;"); if (($comment_author_email != $admin_email && isset($_POST['comment_mail_notify'])) || ($comment_author_email == $admin_email && $admin_notify == '1')) $wpdb->query("UPDATE {$wpdb->comments} SET comment_mail_notify='1' WHERE comment_ID='$comment_id'"); $notify = $parent_id ? get_comment($parent_id)->comment_mail_notify : '0'; $spam_confirmed = $comment->comment_approved; if ($parent_id != '' && $spam_confirmed != 'spam' && $notify == '1') { $wp_email = 'no-reply@' . preg_replace('#^www.#', '', strtolower($_SERVER['SERVER_NAME'])); // e-mail 發出點, no-reply 可改為可用的 e-mail. $to = trim(get_comment($parent_id)->comment_author_email); $subject = '您在 [' . get_option("blogname") . '] 的留言有了回复'; $message = ' <div style="background-color:#eef2fa; border:1px solid #d8e3e8; color:#111; padding:0 15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;"> <p>' . trim(get_comment($parent_id)->comment_author) . ', 您好!</p> <p>您曾在《' . get_the_title($comment->comment_post_ID) . '》的留言:<br />' . nl2br(get_comment($parent_id)->comment_content) . '</p> <p>' . trim($comment->comment_author) . ' 给您的回应:<br />' . nl2br($comment->comment_content) . '<br /></p> <p>您可以点击 <a href="' . htmlspecialchars(get_comment_link($parent_id)) . '">查看回复完整内容</a></p> <p>欢迎您再次访问 <a href="' . get_option('home') . '">' . get_option('blogname') . '</a></p> <p>(此邮件由系统自动发出,请勿回复.)</p> </div>'; $from = "From: "" . get_option('blogname') . "" <$wp_email>"; $headers = "$fromnContent-Type: text/html; charset=" . get_option('blog_charset') . "n"; wp_mail( $to, $subject, $message, $headers ); //echo 'mail to ', $to, '<br/> ' , $subject, $message; // for testing } } add_action('comment_post', 'comment_mail_notify'); /* 自动加勾 */ function add_checkbox() { echo '<input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" style="margin-left:6px;margin-right:6px;" /><label for="comment_mail_notify">有人回复时通知我</label>'; } add_action('comment_form', 'add_checkbox'); // -- END ---------------------------------------- |
将这段代码放置到 functions.php中即可。
五、 纯代码-文章末尾添加版权信息
看到很多站点都使用插件来添加这一信息,使用代码来实现便可以关闭插件,插件少就意味着速度,虽然代码长了也会影响速度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function feed_copyright($content) { if(is_single() or is_feed()) { $content.= "<blockquote>"; $content.= '<div> » 转载保留版权:<a title="大D技研室" href="http://www.dadclab.com">大D技研室</a> » <a rel="bookmark" title="'.get_the_title().'" href="'.get_permalink().'"> 《'.get_the_title().'》</a></div>'; $content.= '<div> » 本文链接地址:<a rel="bookmark" title="'.get_the_title().'" href="'.get_permalink().'">'.get_permalink().'</a></div>'; $content.= '<div> » 本文版权采取:<a title="BY-NC-SA" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"> BY-NC-SA</a> 协议进行授权,转载注明出处。除特别标注,本站所有文章均为原创。</div>'; $content.= '<div> » 如果喜欢可以:<a title="大D技研室" href="http://feed.feedsky.com/derek_s"> 点此订阅本站</a></div>'; $content.= "</blockquote>"; } return $content; } add_filter ('the_content', 'feed_copyright'); |
同样将代码放置到 functions.php中,其中的信息可以根据个人需要进行更改。
六、 纯代码-欢迎第三方站来访者
访问其他站点时经常可以看到“欢迎来自XXX的朋友,欢迎订阅……”这样的浮动窗口。这确实是提高客户体验的方法啊,嘿嘿~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function show_refer_in(){ $refer_info=$_SERVER['HTTP_REFERER']; $ban_list=array($_SERVER["HTTP_HOST"]); for($ii=0;$ii<count($ban_list);$ii++){ if(strpos($refer_info,$ban_list[$ii])){ return; } } if($refer_info){ preg_match("/^(http://)?([^/]+)/i", $refer_info, $matches); $host = $matches[2]; echo "<div id="hellobaby">欢迎来自 ".$host." 的朋友!<br />推荐您 <b><a href="rss" target="_blank">点击这里</a></b> 订阅我的博客 o(∩_∩)o<div class="closebox"><a href="javascript:void(0)" onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a></div></div>"; } } |
将上面这段代码放置到functios.php中,同时,需要您的站点加载jquery库,将下面这行代码添加到header.php文件的</head>标签之前,如果您的主题已经加载过了,就不需要添加这行代码了。
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
加载了jquery库之后,还需要一段代码来实现浮动窗口。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> jQuery(document).ready(function($){ $(window).scroll(function() { var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop } $("#hellobaby").css("top", 250 + bodyTop) }); }); </script> |
添加到Header.php文件中。
有浮动窗口的代码之后,还需要一段CSS代码来帮助起样式化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#hellobaby { background:#000; color:#fff; border:1px solid #B3B3B3; font-size:14px; right:0; position:absolute; top:150px; opacity:.7; filter:alpha(opacity=70); padding:10px; } #hellobaby a { color:orange; text-decoration:none; } .closebox { position:absolute; right:5px; top:0; } |
将上面这段代码放置到style.css文件中,opacity属性是用来更改透明度的,.7表示70%,top属性是调整这个浮动窗口距离页面顶部有多少像素。可以按照自己的需要进行调整。
最后将
1 |
<?php show_refer_in();?> |
这段放置在footer.php中即可。
七、纯代码-浮动文章目录
derek_s经常访问Wikipedia,特别喜欢文章目录来指引derek_s阅读需要阅读的内容,自然就想添加到自己的站点上,因为文章横幅图的问题,添加后总是错位的,影响页面美观,研究了一下,根据上面的代码修改出了浮动的窗口代码。
首先是需要获得需要列出目录的文章,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function article_index($content) { $matches = array(); $ul_li = ''; $r = "/<p class="pnh4">([^<]+)</p>/im"; if(preg_match_all($r, $content, $matches)) { foreach($matches[1] as $num => $title) { $content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</p>', $content); $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n"; } $content ="n<div id="mul" <strong>文章目录</strong> <ul id="index-ul">n" . $ul_li . " </div>n" . $content; } return $content; } add_filter( "the_content", "article_index" ); |
其中,有两个h4标签,这两个h4就是列出需要目录化的问题,四级标题的文字将被目录化,可以根据自己的需要进行修改,放置到functions.php文件中,然后在css文件中添加以下样式代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#mul { background:#000000; color:#ffffff; border:1px solid #B3B3B3; font-size:10px; right:250px; position:absolute; top:90px; opacity:.8; filter:alpha(opacity=70); padding:10px; } #mul a { color:#00ff00; text-decoration:none; } |
添加完样式代码后,在header.php文件中添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> jQuery(document).ready(function($){ $(window).scroll(function() { var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop } $("#mul").css("top", 90 + bodyTop) }); }); </script> |
如果你的主题中包含类似代码,或者使用了对第三站来访者的欢迎代码,只需要将
1 |
$("#mul").css("top", 90 + bodyTop) |
添加到
1 |
$("#hellobaby").css("top", 250 + bodyTop) |
后面即可。
八、纯代码-评论不刷新页面显示(Ajax评论)
首先下载comments-ajax-1.3
传送门:妖妖舞网盘
下载后解压缩,将上传到主题目录中,打开header.php文件,找到如下代码:
1 2 |
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> |
将其修改成
1 2 3 4 |
<?php wp_head(); ?> <?php if ( is_singular() ){ ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script> <?php } ?> |
使用时确保已经加载jquery库。
九、 纯代码-评论表情
很多主题都自带评论表情了,还是把这个功能代码贴出来吧,嘿嘿~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script type="text/javascript" language="javascript"> /* <![CDATA[ */ function grin(tag) { var myField; tag = ' ' + tag + ' '; if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { myField = document.getElementById('comment'); } else { return false; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus(); } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos; } else { myField.value += tag; myField.focus(); } } /* ]]> */ </script> <div class="wp-smiley"> <p class="smilies" style="display:block"> <a href="javascript:grin(':!!!:')"><img src="/wp-content/themes/images/smilies/icon_exclamation.gif" alt="" /></a> <a href="javascript:grin(':ymy:')"><img src="/wp-content/themes/images/smilies/icon_youmuyou.gif" alt="" /></a> <a href="javascript:grin(':sbq:')"><img src="/wp-content/themes/images/smilies/icon_sbq.gif" alt="" /></a> <a href="javascript:grin(':sx:')"><img src="/wp-content/themes/images/smilies/icon_shaoxiang.gif" alt="" /></a> <a href="javascript:grin(':gl:')"><img src="/wp-content/themes/images/smilies/icon_gl.gif" alt="" /></a> <a href="javascript:grin(':bgl:')"><img src="/wp-content/themes/images/smilies/icon_bgl.gif" alt="" /></a> <a href="javascript:grin(':kbz:')"><img src="/wp-content/themes/images/smilies/icon_kbz.gif" alt="" /></a> <a href="javascript:grin(':arrow:')"><img src="/wp-content/themes/images/smilies/icon_arrow.gif" alt="" /></a> <a href="javascript:grin(':lol:')"><img src="/wp-content/themes/images/smilies/icon_lol.gif" alt="" /></a> <a href="javascript:grin(':smile:')"><img src="/wp-content/themes/images/smilies/icon_smile.gif" alt="" /></a> <a href="javascript:grin(':gg:')"><img src="/wp-content/themes/images/smilies/icon_gg.gif" alt="" /></a> <a href="javascript:grin(':?:')"><img src="/wp-content/themes/images/smilies/icon_question.gif" alt="" /></a> <a href="javascript:grin(':razz:')"><img src="/wp-content/themes/images/smilies/icon_razz.gif" alt="" /></a> <a href="javascript:grin(':wink:')"><img src="/wp-content/themes/images/smilies/icon_wink.gif" alt="" /></a> <a href="javascript:grin(':idea:')"><img src="/wp-content/themes/images/smilies/icon_idea.gif" alt="" /></a> <a href="javascript:grin(':see:')"><img src="/wp-content/themes/images/smilies/icon_see.gif" alt="" /></a> <a href="javascript:grin(':evil:')"><img src="/wp-content/themes/images/smilies/icon_evil.gif" alt="" /></a> <a href="javascript:grin(':!:')"><img src="/wp-content/themes/images/smilies/icon_exclaim.gif" alt="" /></a> <a href="javascript:grin(':oops:')"><img src="/wp-content/themes/images/smilies/icon_redface.gif" alt="" /></a> <a href="javascript:grin(':grin:')"><img src="/wp-content/themes/images/smilies/icon_biggrin.gif" alt="" /></a> <a href="javascript:grin(':eek:')"><img src="/wp-content/themes/images/smilies/icon_surprised.gif" alt="" /></a> <a href="javascript:grin(':shock:')"><img src="/wp-content/themes/images/smilies/icon_eek.gif" alt="" /></a> <a href="javascript:grin(':???:')"><img src="/wp-content/themes/images/smilies/icon_confused.gif" alt="" /></a> <a href="javascript:grin(':cool:')"><img src="/wp-content/themes/images/smilies/icon_cool.gif" alt="" /></a> <a href="javascript:grin(':mad:')"><img src="/wp-content/themes/images/smilies/icon_mad.gif" alt="" /></a> <a href="javascript:grin(':twisted:')"><img src="/wp-content/themes/images/smilies/icon_twisted.gif" alt="" /></a> <a href="javascript:grin(':roll:')"><img src="/wp-content/themes/images/smilies/icon_rolleyes.gif" alt="" /></a> <a href="javascript:grin(':neutral:')"><img src="/wp-content/themes/images/smilies/icon_neutral.gif" alt="" /></a> <a href="javascript:grin(':cry:')"><img src="/wp-content/themes/images/smilies/icon_cry.gif" alt="" /></a> <a href="javascript:grin(':mrgreen:')"><img src="/wp-content/themes/images/smilies/icon_mrgreen.gif" alt="" /></a> </p> </div> |
将这段代码保存为smiley.php上传到主题目录,然后再comments.php的适当位置添加:
1 |
<?php include(TEMPLATEPATH . '/smiley.php'); ?> |
WordPress自带的评论表情不太好看,现提供梅花枕雪漆青梦用的表情包
传送门:妖妖舞网盘
下载后将smilies文件夹上传到主题目录的images文件夹下面即可。
十、纯代码-添加Lightbox特效
下面将提供Lightbox特效的代码,这个特效是derek_s从一个主题当中提取出来的……
将以下代码添加到herder.php的</head>标签的前。
1 2 |
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/colorbox/jquery.colorbox-min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory');?>/app.js"></script> |
下载所需要的文件,上传到主题目录。
传送门:妖妖舞网盘
十一、纯代码-网站统计
在本站的底边栏上,有个网页统计,给大家提供下代码:
1 2 3 4 5 6 |
<li>日志总数: <?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?> 篇</li> <li>评论总数: <?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?> 条</li> <li>网站运行: <?php echo floor((time()-strtotime("2011-6-30"))/86400); ?> 天</li> <li>标签总数: <?php echo $count_tags = wp_count_terms('post_tag'); ?> 个</li> <li>页面总数: <?php $count_pages = wp_count_posts('page'); echo $page_posts = $count_pages->publish; ?> 个</li> <li>链接总数: <?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); echo $link; ?> 条</li> |
将这段代码添加到sidebar.php中就可以了。
十二、 主题修改
WordPress主题一般由header.pnp(头部文件)、index.php(界面文件)、sidebar.php(侧边栏)、footbar.php(底边文件)来组成,相对应还有分类页面,文章页面等等,在主题修改中,基本上就是修改这些文件,有时添加一些功能还需要向 functions.php文件中添加代码,该文件是WordPress的自定义函数文件,可以这么解释吧,同时,在上述文件添加代码后,还需要向style.css文件中添加样式代码。
derek_s对主题修改也不是很了解,个人认为,了解了上面这些知识之后就可以开工了,建议使用notepad++来编写代码。
在修改初期 ,如果需要其他主题的功能集成到自己的主题当中来,Opera、Firefox等支持审查元素的浏览器就成了很好的帮手,可以根据
或者
来确定使用的的样式,同时,可以在对应的文件中搜索,找到相关的代码。添加到自己的主题当中就可以了。
已有 13 条评论
发表评论
电子邮件地址不会被公开。 必填项已标注。
好定西啊,学习了、
确实好东西
全全收走
哈哈,好东西~~~
哈哈~收着啦,周末折腾~~~~
总结的比较全,收藏咯!
看着这么多的代码头就晕了,哈哈
评论回复邮件
这个对我而言最实用了,邮件基本和手机短信绑定了...一有消息立马知道
支持代码控,正在努力学习中......
回复0.0?
Pingback: 笨兔兔 - my blog,my life,my town
请到友情链接页面按照要求提交申请,谢谢