如何做像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清除，重新執行也就可以正確顯示了！這是山寨化很成功的第一步喔！

感謝你看到這裡，很快就可以離開了，但最好的獎勵行動就是按一下幫我分享或留言，感恩喔～