首页 » WP教程 » 主题教程 » 如何把jCarousel整合进wordpress主题

如何把jCarousel整合进wordpress主题

2012/04/25

jCarousel是一个特色相册解决方案，通过其可以实现特色图片的展示。虽然我们可以通过jCarousel Lite插件来实现，但是如果把jCarousel整合进wordpress主题中是一个非常不错的想法。主题能实现如下所示的图片展示：

要实现这个并不复杂，遵照如下STEP操作步骤即可实现。

需求：

jCarousel Plugin. 通过此获取 script代码
TimThumb Script. 这个是缩略图插件代码
任何一个 WordPress 主题。

本文涉及的内容包括：

Step 1: 修改目录结构
- 要下载的文件
Step 2: 函数文件修改
Step 3: jCarousel开始工作

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使用的图像。解压后，放到设置的主题文件夹的目录下。

要下载的文件

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" 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>

打赏赞