如何把 jCarousel 整合進 WordPress 主題

jCarousel 是一個特色相簿解決方案，透過其可以實現特色圖片的展示。雖然我們可以透過 jCarousel Lite 外掛來實現，但是如果把 jCarousel 整合進 WordPress 主題中是一個非常不錯的想法。

要實現這個並不複雜，遵照如下 STEP 操作步驟即可實現。

需求：

jCarousel Plugin. 透過此獲取 script 程式碼
TimThumb Script. 這個是縮圖外掛程式碼
任何一個 WordPress 主題。

Step 1: 修改目錄結構

在 wp-content 資料夾, 建立 tt-script 資料夾. 在 tt-script 資料夾, 貼上 imbthumb.php 檔案. 同時在此資料夾下建立 cache 資料夾. 然後, 在主題資料夾下建立 js 檔案，把 jCarousel Javascript 檔案放進去. 只是 Javascript 檔案, 不包括影像和 CSS 檔案. 開啟 header.php 檔案. 把下面的程式碼貼上在<head> 標籤前.

<script type="text/javascript" src="<?php%20echo%20get_option('home');%20?>/wp-includes/js/jquery/jquery.js?ver=1.3.2"></script>
<script type="text/javascript" src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.jcarousel.js"></script>

接下來, 下載 jcarousel.css ，並放在你的主題資料夾下。下載 jcarousel-images.zip 檔案. 這包含了 jCarousel 使用的影像。解壓後，放到設定的主題資料夾的目錄下。

要下載的檔案

jCarousel CSS

jCarousel Images

Step 2: 函式檔案修改

開啟 function.php 檔案, 有兩個函式需要新增，第一個是獲取影像的函式。
/** * Capture the first image from the post. * @global object $post * @global object $posts * @return string */ function theme_function_capture_first_image($p=null) { $firstImg = ''; if (empty($p)) { global $post, $posts; $firstImg = ''; ob_start(); ob_end_clean(); $output = preg_match_all('//i', $post->post_content, $matches); $firstImg = $matches[1][0]; } else { $output = preg_match_all('//i', $p->post_content, $matches); $firstImg = $matches[1][0]; } return $firstImg; }

第二個函式是特色影像列表的處理:

<ul id="mycarousel" >
	<li><img src="img1.jpg" alt="Image 1" /></li>
	<li><img src="img2.jpg" alt="Image 2" /></li>
	<li><img src="img3.jpg" alt="Image 3" /></li>
	<li><img src="img4.jpg" alt="Image 4" /></li>
	<li><img src="img5.jpg" alt="Image 5" /></li>
</ul>

我們要做的的是獲取動態相簿的特色內容，則需繼續複製以下程式碼到函式檔案中.

/**
 * Renders the featured images in home page in carousel.
 */
function theme_function_carousel() {
	wp_reset_query();
	$category_id= 1; // Assuming that the category number of "Featured Gallery" is 1. Change the category ID when needed.
	$limit = 6; // Number of posts to be shown at a time. Ideally it should be multiples of 3.
	query_posts('showposts=' . $limit. '&cat=' . $category_id);
	$generator = get_option('home') . '/wp-content/tt-script/timthumb.php?';
?>
<ul id="carousel">
<?php while (have_posts()) : the_post(); ?>
	<?php
		$img = $generator . 'src=' .  theme_function_capture_first_image() . '&w=191&h=191&zc=1';
		$src = get_permalink();
	?>
	<li><a href="<?php%20echo%20$src;%20?>"><img src="<?php%20echo%20$img;%20?>" alt="" /></a></li>
<?php endwhile; ?>
</ul>
	<?php
	wp_reset_query();
}

Step 3: jCarousel 開始工作

開啟 index.php 檔案. 在想要顯示位置新增如下程式碼：

<div id="featuredcontent">
	<?php theme_function_carousel(); ?>
</div>

接下來, 開啟 header.php 檔案. 在<head> 標籤前加入下面的程式碼：

<script type="text/javascript">
function paddCarouselInit(carousel) {
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});

	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});

	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(
		function() {
			carousel.stopAuto();
		},
		function() {
			carousel.startAuto();
		}
	);
}
jQuery(document).ready(function() {
	jQuery.noConflict();

	jQuery('ul#carousel').jcarousel({
		auto: 6,
		wrap: 'last',
		initCallback: paddCarouselInit
	});
});
</script>

如何把 jCarousel 整合進 WordPress 主題