如何把jCarousel整合进wordpress主题

2012/04/25

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

接下来, 下载 jcarousel.css ,并放在你的主题文件夹下。下载jcarousel-images.zip 文件. 这包含了 jCarousel使用的图像。解压后,放到设置的主题文件夹的目录下。

要下载的文件

  1. jCarousel CSS
  2. 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" class="jcarousel-skin">
	<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 echo $src; ?>"><img src="<?php echo $img; ?>" 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>


One thought on “如何把jCarousel整合进wordpress主题

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注