如何做像John Chow那样的滑动重点文章

看到John Chow的首页是不是有5篇文章的图片及说明在那边滑来滑去，ㄚ琪从原始码看到，很有可能是jquery.jcarousel.pack.js，这个javascript档在运作，所以就Google了一下，发现Jesse，的这一篇Featured Post Slider Like The Pros Using jCarousel How To得到很大的帮助，特别情商Jesse允许我翻成中文，供华人同胞使用。

以下是译文：

最近我在写关于文章的重点及其对你的SEO工作的重要性，要完成这个需求我在站上使用一个外挂称作featured content gallery，它是有效的但却很臃肿、很慢并且跟我在我的站上所测试的很多其他的东西相冲，所以我开始结束这个测试并寻找更有效、更快并且干净的的方式来显示我的重点内容，我搜寻了网路结果没有找到我想要的，所以我决定自己动手来解决我自己的问题。

现在我已经可以在这个站上执行，而且我将分享如何操作，这样有这样需求的人就可以找到并且从中获益，这个灵感是来自 johnchow.com显示他的重点文章的方式，所以我开始看它如何在他的站上如何作，这个引导我找到jCarousel以及其他的历史，只要按照下面的步骤你就可以在你的WordPress使用这个解决方案来让你的部落格很有威力，就像我在AdminDaily.com这里所做的这样。

1. 下载 jCarousel 按这里
2. 解压缩zip档，然后将javascript档 jquery.jcarousel.pack.js上传到你的伺服器上根目录下的js资料夹中，（ㄚ琪加注：根据JohnChow的原始码，其实我另外下载了jquery-1.2.6.pack.js，好像要这样才能go）
3. 照着下面的指示新增档案及修改你的布景，在做这之前一定要先备份，如果你不备份，错了，你会死得很惨，哈哈！

首先，我们要新增一个featured.php，然后放在你的wp-content/themes/你要用的布景/includes的资料夹下，这个档案有下面的程式，我会个别解释涵是的每个部份。

在档案的最上面，我们需要见一个容器给重点文章滑块用，所以你有一个开头的div及开头的无序列表像这样：

<div id=”featured”>
<ul id=”posts”>

在下面，我们将使用自订的WordPress查询来获得我们想要的文章，开始一个counter计数器来追踪文章编号，然后开始回圈来显示我们的文章，在这个例子里，我会从Featured类别使用最后5篇文章，你改成你喜欢的。（ㄚ琪注：我又自己改程式为最多人点阅的为重点文章）

<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>
<?php $count = 0; ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $count++; ?>

继续往下面走，我们将要含括程式码，这个程式码是回圈要显示每篇文章用的，再说一次这只是个范例你可以改成适合你的特殊需求，这是我用在我站上的也是我需要的。

就如你所见，上面的程式码会从Featured类别查询最后5篇文章，然后使用while回圈叙述显示每篇文章，然后结尾有一个endwhile叙述，假如你想要看看每一段的程式码，就像这样：

<li id=”post-<?php echo $count ?>”>
<a href=”<?php the_permalink() ?>”><img src=”<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>” alt=”<?php the_title(); ?>” /></a>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<div>
<p><?php echo get_post_meta($post->ID, ‘feat_txt’,true) ?></p>
</div>
<div></div>
<a href=”<?php the_permalink() ?>”>read more &raquo;</a>
</li>
<?php endwhile; ?>
</ul>

最后，我们加入最后的吴续列表到最后，这会显示编号按钮来点击以显示文章在滑块中，编号从1到5，像这样：

<ul>
<li><a href=”#post-5″>5</a></li>
<li><a href=”#post-4″>4</a></li>
<li><a href=”#post-3″>3</a></li>
<li><a href=”#post-2″>2</a></li>
<li><a href=”#post-1″>1</a></li>
</ul>
</div>

按这里 来下载完整的featured.php档来储存你的的复制上

目前为止都很简单吧？现在我们移到我们的布景档案这里作编辑，首先我们要先开始动header.php档，在这个档案里我们需要增加 jCarousel程式，这个程式是我们之前上传到根目录下的 js资料夹中的，然后新增特别的函式来控制页面滑块的动作，我们也需要限制这个在首页这里来节省页面载入的时间，可以在前面这里用if (is_home())叙述，要完成这个，只要放下面的程式码在你的header.php档的</head>标签前。 (很明显的要更改src的部份来配合你的网域)

<?php if ( is_home() ) { ?>
<script src=”http://your.<a href=”http://admindaily.com/recommends/godaddy” style=”” target=”_blank” rel=”nofollow” onmouseover=”self.status=’domain’;return true;” onmouseout=”self.status=””>domain</a>.com/js/jquery.jcarousel.pack.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function mycarousel_initCallback(carousel) {
jQuery(‘#featured .list li a’).bind(‘click’, function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery(document).ready(function() {
jQuery(“#posts”).jcarousel({
wrap: “both”,
auto: 10,
scroll: 1,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<?php } ?>

接下来，我们含括 featured.php档在你想要显示的地方使用php include 叙述像这样：

<?php include (TEMPLATEPATH . ‘/includes/featured.php’); ?>

你可能会想要 featured.php含括在你的index.php布景档中，但是欢迎你调整你的品味来修改。

现在我们有上传档案，需要修改的东西也好了，我们只要修改我们布景的css档新增一些样式元素，这个部份是最要注意的，我放在这里的程式码适合用在我的站上来显示我要的，你势必修改这样式才能适合你的需要，除非你的需要跟我的网站有一样的宽度及颜色，在这里另外要注意的，你必须检查任何相冲的的元素来确认不会跟你现在站上的配置搞混 (只要改变featured.php的名称及css档的内容即可)

#featured {
width:100%;
height: 199px;
margin:0 0 25px;
font:1.25em/1.5 georgia,serif;
overflow: hidden;
}
#featured:after {
content:”.”;
display:block;
height:0;
font:0/0 serif;
clear:both;
visibility:hidden;
}
#featured h3 {
font:1.47em/1.1 georgia,serif;
margin:0 0 10px;
color:#1e1e1e;
}
#featured h3 a {
color:#4a8393;
}
#featured h3 a:visited {
color:#4a8393;
}
#featured h3 a:hover,
#featured h3 a:focus {
text-decoration:underline;
}
#posts {
width:636px;
clear:both;
overflow:hidden;
}
#posts li {
float:left;
width:636px;
width/**/:/**/626px;
padding:0 10px 0 0;
}
#posts li.first {
margin:0;
}
#featured .thumb {
float:left;
border:1px solid #d7d7d7;
margin:5px 10px 11px 0;
}
#featured p {
padding:0 0 10px;
}
#featured .more-link {
float:right;
font-size:1.2em;
padding:0 10px;
margin:0 -10px -10px 0;
position:relative;
color:#fff;
background:#404040;
border:1px solid #333333;
}
#featured .list {
float:left;
display:inline;
position:relative;
font-size:.88em;
line-height:2.1;
font-family:arial,sans-serif;
z-index:5;
color:#333;
width:527px;
padding: 0px;
margin:-30px 0 0 0px;
background:#ffffff;
border-bottom: 1px solid #eeeeee;
}
#featured .list li {
float:right;
}
#featured .list li a {
float:left;
color:#333;
background:#f6f6f6;
border:1px solid #eaeaea;
border-right:none;
padding:0 8px;
}
#featured .list li a:visited {
color:#444;
}
#featured .list li a:hover,
#featured .list li a:focus {
color:#fff;
border:1px solid #333333;
border-right:none;
background:#404040;
text-decoration:none;
}
#featured .jcarousel-container {
width:646px;
width/**/:/**/636px;
padding:6px 0 0 10px;
margin:0px;
background:#ffffff;
position:relative;
float:left;
display:inline;
}
#featured .jcarousel-clip {
z-index:2;
position:relative;
overflow:hidden;
width:636px;
}
#featured .jcarousel-list {
z-index:1;
overflow:hidden;
position:relative;
top:0;
}
.oops {
clear:both;
font-size:0;
line-height:0;
width:100%;
overflow:hidden;
display:block;
}

现在我们已经作完了，我们几乎可以储存所有的档案并且开始使用jCarousel显示这非常cool的重点文章滑动功能，现在要做的就是新增或编辑文章，将文章加到Featured类别，并且在每篇文章里作一些简单的设定来提供重点文章滑块需要的资讯，只要每篇文章照着下面的步骤你就可以显示你想要的文章在滑块中。

1. 新增新的或编辑现有的文章到Featured类别里 (假如你没有这个类别就新增它)
2. 在新增自订栏位这里点击输入新的名称，新增一个自订栏位叫 feat_txt，这样来显示你要在滑块中显示的文字 (我建议大约20-30个字左右)
3. 新增另一个图档的栏位叫thumbnail，用来显示你要在重点文章滑块中显示的图档，并在栏位内容中放入你的图档完整 url，在我提供的这篇教学中我使用135px ＊ 135px大小的尺寸来显示图档。

就是这样了，假如你有任何问题，请不要犹豫在这里留言，我会很高兴进我所能我会很高兴进我所能来帮你。

ㄚ琪因为在使用JohnChow跟这里的教学混用的时候，会造成滑块的文章位置错误，造成显示有问题，后来经Jesse的指点，修改样式元素的名称，虽然一开始没有看到正确的显示，但是后来到别的电脑上看，发现式正常的，才想到可能浏览器有cache的问题，所以无法正常显示，所以将浏览器的cache清除，重新执行也就可以正确显示了！这是山寨化很成功的第一步喔！