WORDPRESS带头像的最新留言
提供下侧边栏的最新留言
显示头像为主,类似代码很多,我也只是加了一个JS的提示效果~简单写下我的方法。在需要插入最新留言的地方加入:
1 | <ul id="recentcomments"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php global $wpdb, $comments, $comment; $comments = $wpdb->get_results("SELECT comment_author, comment_author_email, comment_author_url, comment_ID, comment_post_ID, SUBSTRING(comment_content,1,65) AS comment_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 18"); if ($comments): foreach ($comments as $comment): $comment_author_19 = $comment->comment_author; if ($comment_author_19 == "") {$comment_author_19 = "Anonymous";} $order = array ("\r\n","\n","\r"); $order2 = array ("\"","\'"); $replace = ''; $tmpstr = str_replace($order2, "", str_replace($order, $replace, sprintf('%s', strip_tags($comment->comment_excerpt)))); $content = '<span class=\'recentcommentslink_author\'>' . $comment_author_19 . '</span> <span class=\'recentcommentslink_on\'>on</span> <span class=\'recentcommentslink_title\'>' . get_the_title($comment->comment_post_ID) . '</span><div class=\'recentcommentslink_excerpt\'>' . $tmpstr . '</div>'; echo '<li class="recentcomments"><div id="C_' . $comment->comment_ID . '_d" style="display:none">' . $content . '</div>' . '<a title="' . $comment_author_19 . ' on ' . get_the_title($comment->comment_post_ID) . '" id="C_' . $comment->comment_ID . '" class="recentcommentslink" href="' . get_permalink($comment->comment_post_ID) . '#comment-' . $comment->comment_ID . '" >' . get_avatar($comment->comment_author_email, 40) . '</a></li>'; endforeach; endif; ?> |
1 | </ul> |
1 | <script type="text/javascript">jQuery(document).ready(function(){new tooltip_19(".recentcommentslink");})</script> |
修改DESC LIMIT 18来调整最新评论数量,或者你也可以自己写成函数调用,之后加入下面的JS和CSS就行了:
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> |
1 2 3 4 5 6 7 8 9 10 11 | jQuery.noConflict(); var tooltip_19 = function(tid) { var xOffset = 10; var yOffset = 20; var t; jQuery("a" + tid).hover(function(e) { var aid = jQuery(this).attr("id"); t = jQuery("#" + aid + "_d").html(); jQuery("body").append("<div id='tooltip_19'>" + t + "</div>"); jQuery("#tooltip_19").css("top", (e.pageY + yOffset) + "px").css("right", (jQuery(window).width() - e.pageX + xOffset) + "px").fadeIn("fast").show(); }, function() {jQuery("#tooltip_19").remove();}); jQuery("a" + tid).mousemove(function(e) {jQuery("#tooltip_19").css("top", (e.pageY + yOffset) + "px").css("right", (jQuery(window).width() - e.pageX + xOffset) + "px").show();}); }; |
1 2 3 4 5 6 7 | #tooltip_19{position:absolute;border:1px solid #222222;background:#FFFFFF;padding:5px;color:#222222;display:none; z-index:23;} #recentcomments li{float: left; padding:0px;} .recentcommentslink_author{ font-weight:bold; font-size:1.2em;} .recentcommentslink_on { padding: 0px 5px 0px 5px; font-style:italic;} .recentcommentslink_title { color:#666666; font-size:0.8em;} .recentcommentslink_excerpt {clear:both; color:#333333; font-size:0.9em; width:200px; padding:10px;} .avatar {border: 1px solid #d3d3d3; background-color: #fff;padding: 1px; margin-bottom: 2px; margin-right: 10px;} |
动态加载的TREE
FLEX开发的一个简单的动态加载子节点的TREE.
做了一个动态加载子节点的TREE,可以通过XML中节点的属性来完成加载和执行操作。用法:TREE需要设置两个地址,第一次访问地址和每次点击节点响应地址,可以通过传入参数设置:
第一次访问的地址参数为“u”,默认每次响应地址是“./19TreeRequest”,也可以通过传入treeRequest参数来改变,比如这个演示的FLASH的地址就是:
http://www.ll19.com/up/19_tree/main.swf?u=http://www.ll19.com/up/19_tree/first.xml&treeRequest=http://www.ll19.com/up/19_tree/request.php
每次响应都应该生成类似下面的XML:
1 2 3 4 5 6 7 8 9 10 | < ?xml version="1.0" encoding="UTF-8"?> <root label="文章分类" title="LL19.com的文章" child="yes"> <!--child用来判断是否动态加载字节点 value值的是执行时候需要的值--> <node label="空目录演示" child="maybe" value="c_0"/> <node label="日志" child="maybe" value="c_1"/> <node label="喜欢的" child="maybe" value="c_2"/> <node label="收集" child="maybe" value="c_3"/> <node label="页面文章-tags" child="no" value="page_1"/> <node label="页面文章-blogRoll" child="no" value="page_2"/> </root> |
XML说明:
1 2 | <root label="文章分类" title="LL19.com的文章" child="yes"> </root> |
第一次响应需要生成两个标题属性,之后每次只需要生成child属性,一般来说设置为yes就行了。
1 | <node label="空目录演示" child="maybe" value="c_0"/> |
child=maybe就是指需要再次读取,tree以文件夹显示,点击后会向treeRequest设置的地址传入后面的value的值,即value=c_0,之后treeRequest应该根据此参数来再次生成XML返回。
child=”no”表示下面没有子节点了,TREE以文件的形式显示,点击后会调用页面的JS。
1 2 3 | function fileCall (value) { //根据value来执行操作 比如打开页面等 } |
这里的例子演示,具体可以下载参考。
FLASH源文件目录下的图片src\images,分别代表未加载文件夹、加载后的文件夹、加载的文件和加载中读取的FLASH(GIF无法播放,只能显示一帧,所以用SWF代替)。