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