Jinwen Say » JQuery

简单说一下我的主题展示页面实现方法

Jinwen — Mon, 19 Oct 2009 19:12:16 +0000

昨天周日看着blog的时候，我突然想起还没有为最近发布的黑色WordPress主题－Js Noire做一个访问页面，因为懒。然后又想如是这样不是办法，因为当日后每做一个新主题后，自己除了需要为它添加一个新页面作介绍之外，还得在一个汇总页面上添加上它，以方便访客一览。这样的“手尾”好生麻烦，然后就想了个AUTO一点的办法做了个汇总页面。就象目前大家在导航栏中看到的第二个按钮，点它就会出现我发布过的所有主题汇总。

熟悉一点WordPress的朋友自然会想到利用分类或者标签功能，比如为每一篇发布主题的文章定义一个指定的分类或者标签，然后访问这个分类或标签的页面链接，它自然就是一个汇总页面了。当然我也是基于这个方向来考虑，但我还想在汇总页面上为各个主题添加一个缩略图，这样就更为直观，不是吗？还有就是只显示简略介绍就够了，不用什么日期啊评论啊的信息。所有这些就必须要自己制作一个页面模板了。OK，那就做一个页面模板，然后在后台新建一个页面，选取该模板方法。

如何在WordPress做一个页面模板？熟悉的朋友跳过，不太熟悉的朋友可以参照这篇文章建立一个。因为要筛选显示那些只是发布主题用的日志，所以在模板内的主循环代码部分：

的前面添加筛选用的代码：

$limit = get_option('posts_per_page'); $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts('tag=idesign&showposts=' . $limit=15 . '&paged=' . $paged); $wp_query->is_archive = true; $wp_query->is_home = false; ?>

红字部分是指定筛选标签为“idesign”的所有文章，如果你是通过分类来区别的话，把“tag=”换成“cat=分类ID号”则可。“15”就是指定读取的文章数。

到此是一个筛选功能的完成，至于需要在汇总页面中添加各个主题的图片，我希望它能自动读取该篇日志中的图片。因为发布主题的日志一定（一般情况下）带有主题的预览图，所以直接读取它并显示出来就行了。

在模板的主循环里，在你需要显示图片的位置中添加如下代码：

" alt="" />

建议为该代码前后添加一个

的以方便控制它的样式，比如大小，是否浮动显示等。不要忘记的是，你必须在主题模板的function.php文件内同时添加上下面的功能代码，否则图片不会自动读取：

function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('//i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "在这里指定如果没有图片则显示的默认图片路径"; } return $first_img; }

这样，系统就能自动读取在该篇文章中的第一个图片，注意是第一个；所以请把需要作为缩略图显示的图片放在日志中的首位。

所有上面操作都完成后，在后台新建页面，选取刚建立的页面模板，也不用写什么内容的了，存档后访问该页面，就会显示那些需要显示的文章，还有文章内的第一个图片。

因为我这里是利用JQuery直接读取这个模板，如果你也需要这样，你需要把上述的模板文件更改一下。在其开头位置添加：

if ($_SERVER["REQUEST_METHOD"] != "POST") { header('Allow: POST'); header("HTTP/1.1 405 Method Not Allowed"); header("Content-type: text/plain"); exit; } $db_check = true; function kill_data() { return ''; } function check_db() { global $wpdb, $db_check; if($db_check) { // Check DB if(!$wpdb->dbh) { echo('Our database has issues. Try again later.'); } else { echo('We\'re currently having site problems. Try again later.'); } die(); } } ob_start('kill_data'); register_shutdown_function('check_db'); require_once(dirname(__FILE__)."/../../../wp-config.php"); $db_check = false; ob_end_clean(); nocache_headers(); function fail($s) { header('HTTP/1.0 500 Internal Server Error'); echo $s; exit; } ?>

然后指定一个激活的js效果，比如通过点击动作后读取这个页面；在你的模板js文件中添加：

$('激活链接的样式名字').click(function(){ $.ajax({ url : "/wp-content/themes/主题文件夹名字/上面制作的模板文件.php", type: 'POST', beforeSend: function() { /* 这里是读取数据前的一系列动作，比如要隐藏什么，显示什么的，根据主题不同不同 */ }, success : function (data) { /*下面一行是读取成功后数据显示方式。比如我是把数据附加到一个名称为"#qs-area"区块内并通过"slideDown"的方式显示出来。*/ $("#qs-area").html(data).slideDown('slow'); } }); return false; });

在这里关于AJax的方法我写得较为简单，因为并不是本文的重点；或者大家需要折腾的话，有问题也可以在这里说下，看我能否帮上忙好了。通过上面的方法后，日后当我有新主题发布，我就只需要在撰写该篇文章的同时为它添加一个指定的标签后，它就会自动被添加到我的主题汇总页面中去，当然还带了张缩略图。一个很适合我的懒方法，呵呵。当然，如果你也需要汇总一些带图片的文章，此方法也适用，按需灵活处理一下则可。

发布Js O4w主题配套使用的Ajax嵌套评论功能

Jinwen — Tue, 18 Aug 2009 16:47:20 +0000

如文章标题所言，现在把与WordPress主题Js O4w配套使用的Ajax嵌套评论功能。这个功能简单来说就是为了让Js O4w这个主题使用上Ajax的评论提交，支持WordPress自带的嵌套回复并且与@reply相结合使用。

可能大家已经在这里体现过了，效果如本站，样式截图如下：

使用的方法：

1. 首先请下载WordPress主题Js O4w；因为这个功能只能在该主题上使用。

2. 然后下载这个功能加强包：ajax_package_for_theme_js_o4w_ver_a

3. 解压上面文件，把其包含的所有文件上传到主题目录js-o4w，覆盖旧有文件则可。（注，目录名字必须是js-o4w，也就是主题安装后的默认目录名）

4. 在WordPress的后台设置允许嵌套的层数为2层。（注，由于引入@reply的功能，所以嵌套为2层即可）

关于这套嵌套评论的设计，有兴趣的朋友可以重看这篇文章：《利用JQuery为WordPress的嵌套回复添加@reply功能》

另外，在替换文件前，最好还是先备份，如果你已经对上面需要替换的文件修改过的话；因为自己测试有限，使用过并发现问题的朋友跟我说一下，谢谢啦。

© Jinwen for Jinwen Say, 2009. | Permalink | 41 comments | Add to del.icio.us
Post tags: ajax, JQuery, Js-O4-theme, WordPress, 下载, 主题

WordPress theme Js O4w released

Jinwen — Thu, 13 Aug 2009 04:43:22 +0000

Js O4w是Jinwen个人的第四款WordPress主题，也就是现在自己正在使用的“圈圈”主题，现在可以提供给喜欢它的各位下载使用了。

主题的什么特点介绍之类的，我也懒得去写了。简单的就是能通过W3C的CSS和HTML的认证；支持widget（小工具）；然后就是基本上各个浏览器的显示效果是一样的，我知道至少有25%的访客是使用IE6来访问这里的，所以这款主题也能保证在IE6下的浏览效果与其它无异（不过还是多说一句，何不升级一下你们的IE6呢；这样世界才美）。

关于主题的细节，因为我觉得自己是个很唯美主义外加博客洁癖的人，所以在这方面你们就不用担心的了，我可能比你们都来得挑剔。

对于上一次preview时候说到不满意的页脚还有评论样式部分，我也已经进行了修改。页脚部分的样式如上面的截图；而评论的部分样式则改为下图样子，与主题的圆角及圈圈配合一点。

大家都知道我自己使用的版本是加上JQuery的一些效果；而在本次发布于官方目录中的主题文件则暂时不带这些效果。但请放心，不是我吝啬抽起这些效果；而是我会把它们作为加强包的形式发布需要替换的文件。

简单的解释就是由于上一个主题Js O3 Lite的发布经验，我觉得并不是所有人都喜欢主题中大量的js效果，尤其是大量的国外用户。另外，当大家使用更多的带js效果的插件时候，不可避免地与主题自带的效果冲突，这也影响对主题的使用。我不想让大家出现要不选择插件要不选择主题的情况，希望大家理解。

第一个js效果的加强包也将于近期发布，到时大家只要替换一下当中的文件则可。现在大家就先纯纯地使用一下这个主题吧。希望大家喜欢它，这样Jinwen也欢喜了。

P.S. 第五款主题将是黑色版本的，估计要再晚点时候才能发布，因为我需要参照一下大家对这款白色的意见。现在只能让大家在本站搜索栏旁边的切换按钮预览着。

Click here: Js O4w 官方下载链接

© Jinwen for Jinwen Say, 2009. | Permalink | 118 comments | Add to del.icio.us
Post tags: JQuery, Js-O4-theme, WordPress, 主题

利用JQuery为WordPress的嵌套回复添加@reply功能

Jinwen — Sat, 18 Jul 2009 21:40:17 +0000

在WordPress的评论中两种主流样式：嵌套回复和@回复的选择取舍上是不是经常让你难以决定？嵌套回复让评论的上下文清晰明瞭但样式混乱，@回复让评论样式整洁但对讨论前后模糊。我想这些应该是大家当然也包括我都会感觉到的，而Jinwen希望的是尽量能把它们的优点都整合，也就有了本文将要介绍的方法。

1. 本文讨论的前提

对于未被回复的评论，也就是初始评论，我称为主评论；而每个回复主评论的评论，也就是应用了嵌套样式的评论，我称为从属评论。

另外是我使用的嵌套回复仅限一层。如果在第二层的嵌套中再应用@回复样式，那就失去本文的讨论初衷，因为那样的评论样式只会更乱。

最后也就是如文章题目一样，需要利用到JQuery的帮助，也就是说你的主题中必需首先加载了JQuery。

2. 设计的思路

如果要实现上图的样式，归根就是对评论中回复按钮的功能设计。简单来说就是：当点击主评论的回复按钮，会产生嵌套回复，回复的内容紧跟在主评论后；当点击从属评论的回复按钮，则在回复的内容中添加@XXX的字样，回复的内容也是紧跟在主评论之后。

3. 实验的方法

（1）主评论的回复按钮

Jinwen在这里不说了。因为它是WordPress中嵌套回复中默认就存在了。（如果你想知道嵌套回复的实现请看文末的参考）

（2）从属评论回复按钮

它的实现，也就是本文介绍的重点。按上面设计的思路，通过它产生的回复评论是需要紧跟在主评论之后的，这不就是和主评论的回复按钮一样吗？那么我们就把主评论的回复按钮分别复制到每一个属于它的从属评论中就行了，在主题的js中（ready function内）添加：

//这里假设你的评论样式是.commentlist $('.commentlist li').each(function() { //设置一个变量zzz，用来定义从属评论的按钮将要被复制到何位置，本例它将被得到到ul.children li内 var zzz = $(this).find('ul.children li .message_head'); //查找主评论按钮的设置样式，这个会因主题不同而不同（本例是.re_icon）； //然后把它复制，去除原有样式re_icon，重新对其定义一个样式atclass（如果你的主-从属两回复按钮样式将不一样，建议这样做） //最后把复制的内容分别插入到变量“zzz”中 $(this).find(".re_icon:first").clone().removeClass("re_icon").addClass("atclass").appendTo(zzz); });

这样我们就会在每一个从属评论后得到一个复制而来的按钮。当然这个通过复制得来的按钮其实与主评论的回复按钮是一样的！只是它比主评论的回复还多了一个功能：就是往评论框内发送@XXX的字样。我们接下来把它实现，在主题的js中（ready function内）添加：

//定义从属评论回复按钮被点击后的动作 $('.atclass').click(function() { //定义一个变量atname //查找在每条从属评论中留言者名称的样式（本例是cite），然后记录它的文字内容，也就是留言都的名字了 //你可以预先为评论的留言名称用一个包起，而这个“hisname”也就与本例的cite了。 var atname = $(this).parents(".message_head").find("cite").text(); //然后向留言框中输入@XXX的字样。需要指定留言框的ID，这里是#comment //最后通过.focus()顺便激活留言框的输入状态 $("#comment").append("@" + atname + " ").focus(); });

其实也就是通过上面两段代码就可以了，并不复杂。实现的难点是你必需知道自己主题模板中评论部分的结构关系。如上面代码中的红字部分就是一个难点，因为它分别受插入按钮的位置和这个位置与留言者名称之间的位置关系决定。Jinwen在这里就不能将其总结，必需由大家自己多折腾一下了。

由于往留言框输入的@XXX可能在“取消回复”后依然存在，所以Jinwen建议再加上一段代码，作一点点清洁，保证点击“取消回复”后清除留言框内的文字内容：

$('#cancel-comment-reply-link').click(function() { $("#comment").empty(); });

要实现本文开始时候介绍的样式，方法当然并不局限上我上面所介绍的。无论如何，Jinwen还是希望上面的思路能让大家对嵌套回复的设计有点启发，那就很荣幸了。

4. 留言的邮件回复通知

这可能又是大家关心的问题了，Jinwen这里推荐通过国人两个精彩插件就可以实现了。

对于嵌套回复的邮件通知，建议通过Comment Reply Notification这个插件实现。在后台激活使用就可以了。

而@reply回复的邮件通知，则建议通过Mail To Commenter这个插件实现。由于这个插件是能自动检测评论中带@的字段而自动发送通知邮件的，所以我们同样只要在后台激活这个插件就可以了。

5. 结语

嵌套回复是会让访客了解到已有留言中的相关，从而更容易加入其讨论；这样，也就大大增加了博客中的讨论热度。另外一个很重要的是，Jinwen想让每一个被回复的主评论都能成为一个小的讨论区。就是说，对一些有价值的评论，大家可以通过嵌套继续延伸对其的讨论；而加入@reply的回复样式会让那些有价值的评论（主评论）下的讨论（从属评论）更加有序和可追索。就目前来说本站所用的评论样式，基本想能达到Jinwen所设想的。不知大家意见如何？

6. 参考

下面的一些文章链接，或者能让你更为了解嵌套和@reply各自精彩的讨论和用法，谢谢下面文章的各位作者。

利用JQuery前台切换网站的样式实现

Jinwen — Thu, 11 Jun 2009 19:10:19 +0000

本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要，因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。但如果你想为网站添加多一些样式，让访客选择；又或者你想调整一下网站的样式，而在决定前让访客先体现的话，这也是一个很好的办法，省去总是切换主题的痛苦。

切换效果参照本站。

1. 切换样式的按钮代码：





Day


Night

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。

2. 样式引用代码：

在这里我简单说明一下：

因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”，所以在这里我会让浏览器根据记录进行样式的调用（这里为两个样式，一个“white”，另一个“black”）。
当浏览器存在“style”的cookie记录，并记录为“black”时候，则先读取black.css文件，这可以说是主样式文件；及后再读取辅助样式（就是供需要切换的样式），white.css。
如果浏览器没有任何“style”的样式cookie记录，或者“style”的样式cookie记录为“white”时候，则主题先读取white.css文件，再读取black.css文件。
在这里需要补充的是，使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作，但由于js的加载还是需要那么一点时间，所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后，再浏览页面，会出现先是一瞬间的白色主题，然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。

3. Javascript部分代码：（注意前提是你已经在网站中调用了JQuery库）

(function($) { $(document).ready(function() { $('.styleswitch').click(function() { $('body').append('

');

$('#overlay')

.css({

display: 'none',

position: 'absolute',

top:0,

left: 0,

width: '100%',

height: '2000%',

zIndex: 1000,

background: 'black'

})

.fadeIn(500);

switchStylestyle(this.getAttribute("rel"));

$('#overlay').fadeOut(500);

return false;

});

});

function switchStylestyle(styleName)

{setTimeout(function() {

$('link[@rel*=style][title]').each(function(i)

{

this.disabled = true;

if (this.getAttribute('title') == styleName) this.disabled = false;

});}, 500);

createCookie('style', styleName, 365);

}

})(jQuery);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果，这样会比突然的切换来得更为自然。

然后还需要添加产生cookie记录的功能代码：

function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }

还有添加删除cookie记录的功能代码：

function eraseCookie(name) { createCookie(name,"",-1); }

到此，完成上面三部后就可以了，希望大家看得明白。

不困惑，主题黑白共存

Jinwen — Mon, 08 Jun 2009 21:10:33 +0000

前天发出的主题困惑：白的好，还是黑的好？这个问题就算了，因为今晚我把主题多做了一个白色的版本；然后再用JQuery让各位自己切换，当然包括我也可以了。切换的记录会保存，所以你只会在这里看到自己喜欢的白，或者黑；当然你也可以白天时候选白色的，晚上时候选黑色的。这样就OK啦。

主题的切换效果我还想做得炫点，不过暂时也能工作了。感兴趣的朋友就来自己切换一下，切换的按钮在标题旁边。大家顺便帮我看看有什么问题，因为实在做得很一般，可能还有很多细节没修改过来。

这样，皆大欢喜。

简单利用JQuery为搜索栏增加tag提示

Jinwen — Fri, 22 May 2009 17:40:12 +0000

其实我认为这个功能用处未必大，因为我在自己的网站搜索栏上添加这个功能已经两周了，居然还没有人发现的样子。很简单的一个功能，就是当用户在搜索栏输入搜索字符时候，利用JQuery的功能把一些预设好的关键字浮现出来，除了让用户意外一下，还有就是让用户简化输入。比如象下图的样子：

实现的方法很简单，首先是要在你的网站上加载JQuery，然后再加载下面的JS文件，下载之：

tag.js

接着就是编辑你自己的关键字。这里的做法是你自己自行编辑，还有很多方法是直接查询WordPress的数据库的。但那样做就显得很专业的样子。对于我自己来说，本来站内的搜索功能就不是很受用，为了那没多被使用过几次的搜索而复杂这个提示功能显然不值，所以还是自己来编辑一些重要的关键字好了。下面的代码也要整合到网站的JS文件中：

能看出上面的关键字编辑了吧。

然后最后一步就是需要指定相应的搜索栏，如上面代码中的"#tags"就是决定这个东西。修改搜索栏的ID，让其适应则可。也就是说为搜索栏的input内添加一个id="tags"则可。或者你也可以修改上面的代码内的ID，让其适应你原有的搜索栏内input的ID。

当然还有对关键字的样式设定，这个就随大家爱好了，我这里不列出。

WordPress中利用JQuery处理沙发头像

Jinwen — Wed, 22 Apr 2009 19:41:22 +0000

因为我的留言板是倒序，默认又只会展开最新的5条留言，对于较旧留言甚至是沙发的同学，很容易被忽略掉。我想这对沙发同学不太公平吧。昨天在看yinheli同学的《鼠标悬浮实现显示留言内容》一文（建议看看，好文章），就想到我何不把沙发的头像copy出来然后放在显眼的位置上呢，如下截图效果。

做法首先是你的网站加载了JQuery，然后在你需要放置沙发头像的地方添加一个

，内容为空即可：

然后要做的就是利用js复制沙发的头像，并把复制的内容填入上面设定的

内：

$(document).ready(function() {
$(".commentlist .avatar:last img").clone().appendTo("#shafa");
});

这样就可以啦，注意上面的avatar假设是你主题模板中包含头像图片的样式名称；然后:last这一处是对于象我一样的倒序留言板设定的，因为沙发的同学是在留言列表的最后；而对于顺序留言板，则改为:first。

还有就是不要忘记进行CSS的样式定义。再有的是利用相同的方法你可以复制指定的内容，如沙发的留言内容，名字等，只要对应一下它们的样式名称则可。

WordPress中照片lightbox效果的运用几点

Jinwen — Mon, 20 Apr 2009 21:47:55 +0000

应该大家都知晓lightbox这类灯箱效果了，它一般更多地被运用在网站照片的显示上。当然还有更推广的应用，如facebox这种更漂亮全面的效果。如果你的网站上已经使用了lightbox这类效果，或者下面的几点运用经验你也会觉合适（前提是使用JQuery实现）。

1. 指定哪些条件下运用Lightbox效果

在网站的js文件中添加如下语句：

$(function() {
$('a[@rel*=lightbox]').lightBox();
$('.gallery a').lightBox();
});

这样就决定只有在链接中添加“rel=lightbox”后，该链接才会出现lightbox效果；第二行中的'.gallery a'则是针对WordPress中原生相册，添加该句后，相册中的图片也会出现lightbox的效果了。

2. 自动添加rel=lightbox属性

因为在上述定义中只有带“rel=lightbox”的链接才会有效果，一般我们是需要对每个上传图片都手动添加“rel=lightbox”这一句。但这样显得麻烦，我们可以让它自动针对带链接的图片自动添加。

首先为每一个带图片的p段落自动添加一个样式：

$("#content p:has(img)").addClass("imgbg");

比如上面一句就是指定在#content这个区域内，只要段落中带有img的话，则添加样式“imgbg”，使其原无样式的p段落变为

的带样式了；

然后对

这一段中的链接自动添加“rel=lightbox”属性：

$(".imgbg a").attr({
rel: "lightbox"
});

经过上面两部步，所有在文中带链接的图片就会自动执行lightbox的效果了。

3. 选择性地加载lightbox

我们没有必要全站加载lightbox的效果。一般来说我们是在单独的文章页面中才用到这种效果。所以我们可以把lightbox的js代码单独出来，然后在WordPress中header.php中这样设置：

更进一步，如果你想对只有照片的文章才执行该效果，则你可以准确地只为标有“照片”标签的文章才加载lightbox，设置改为：

上面几点就是我对lightbox的运用了，希望对各位有所帮助啦。

再说我在站内的广告设计

Jinwen — Mon, 06 Apr 2009 22:44:44 +0000

因为想在站内再次添加一下Google的广告，但又不想简单地添加就了事。我在意在网站添加广告的效果。怎么说，一个是怕访客不喜欢；另一个是用心设计好的广告样式给浏览器的广告过滤后荡然全无，觉得可惜。今天在浏览leeiio同学的blog发现他提供访客隐藏广告的按钮，这个意思不错，所以我也以此为基础改动一下。

简单地在现在主题的侧栏添加一个广告的DIV

，然后再添加一个的样式作为按钮，就是你们看到的那一个“X”了，如果你不喜欢的话就点一下它，广告就消失了；当然我没有做成leeiio一样的历史记录，因为我还是想广告出现的机会多一点，效果如下图：

隐藏广告的还是使用JQuery，代码很简单：

$(".closead").click(function(){
$("#ad23460").slideUp(500);
});

当然你还需要为按钮选一个图片，我在这里就不说了。如果你喜欢本站所使用的小图标，你可以到【这里】下载的。

再说的就是我不喜欢给浏览器过滤我的广告，所以我把广告用的DIV添加一个背景。在广告没有被过滤的情况下那背景是被遮挡的；但当你过滤我的广告（*_*）后，你会看到象下面的：

怎样？广告后还是广告，哈哈。我喜欢这样，嗯。补充的是，如果你想控制一下广告的位置，可以再看看【这篇文章】的。