如何把 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 主題