jCarousel 初始化问题
我曾经有一个 jCarousel 图像，在我的 Wordpress 页面标题中运行得非常好。现在，在添加一些代码以根据正在显示的类别页面更改页面标题后，它无法正常工作。似乎没有初始化并使用正确的代码将图像列表包装在 html 中以将列表放入 jCarousel 中。加载页面时，轮播应该显示的所有内容都是页面下方的图像列表，其中包含项目符号和所有内容。奇怪的是，即使我删除了在轮播上方添加的 PHP if 语句，它也会做同样的事情并且仍然拒绝工作。我没有看到任何我意外添加的破坏轮播的恶意代码。我正在使用的 WordPress 头文件如下。抱歉，如果它的某些部分有点混乱...是否有人也知道如何将代码粘贴到这里而不弄乱它？我基本上必须在每行代码之前手动放置 4 个空格，才能使其合理地显示出来。
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript' src='js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="logo"><a href="http://cayennecreative.com/testing"><img src="images/cayennelogo.png" alt="Cayenne" /></a> <div id="social"><a href="<?php bloginfo('rss2_url'); ?>"><img src="images/1.png" alt="Cayenne's RSS Feed" /></a><br /><a href="http://twitter.com/CayenneCreative"><img src="images/2.png" alt="Cayenne on Twitter" /></a><br /><a href="http://www.facebook.com/CayenneCreative"><img src="images/3.png" alt="Cayenne on Facebook" /></a><br /><a href="http://www.linkedin.com/company/cayenne-creative"><img src="images/4.png" alt="Cayenne on LinkedIn" /></a></div></div>
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<div id="contactinfo">
P: 205.322.4422 E: [email protected]
</div>
</div><!-- #access -->
<div id="branding" role="banner">
<?php if(is_category(3)): ?>
<div id="header1">Hey image slider</div>
<div id="header2">You Need to Work</div>
<?php elseif(is_category(8)): ?>
<div id="header3">Great Work</div>
<div id="header4">is done by people who are not afraid to be great.</div>
<?php elseif(is_category(6)): ?>
<div id="header5">The People</div>
<?php elseif(is_category(9)): ?>
<div id="header1">We solve problems</div>
<div id="header2">With Style</div>
<?php elseif(is_category(7)): ?>
<div id="header1">Change happens by listening and then starting a</div>
<div id="header2">Dialogue</div>
<?php else: ?>
<div id="header1">We solve problems</div>
<div id="header2">With Style</div>
<?php endif; ?>
<div id="carousel-shadow"></div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="images/1large.jpg" title=""><img src="images/1.jpg"alt="" /></a></li>
<li><a href="images/2large.jpg" title=""><img src="images/2.jpg"alt="" /></a></li>
<li><a href="images/3large.jpg" title=""><img src="images/3.jpg"alt="" /></a></li>
<li><a href="images/4large.jpg" title=""><img src="images/4.jpg"alt="" /></a></li>
<li><a href="images/5large.jpg" title=""><img src="images/5.jpg"alt="" /></a></li>
<li><a href="images/6large.jpg" title=""><img src="images/6.jpg"alt="" /></a></li>
<li><a href="images/7large.jpg" title=""><img src="images/7.jpg"alt="" /></a></li>
<li><a href="images/8large.jpg" title=""><img src="images/8.jpg"alt="" /></a></li>
<li><a href="images/9large.jpg" title=""><img src="images/9.jpg"alt="" /></a></li>
<li><a href="images/11large.jpg" title=""><img src="images/11.jpg"alt="" /></a></li>
<li><a href="images/12large.jpg" title=""><img src="images/12.jpg"alt="" /></a></li>
<li><a href="images/13large.jpg" title=""><img src="images/13.jpg"alt="" /></a></li>
<li><a href="images/14large.jpg" title=""><img src="images/14.jpg"alt="" /></a></li>
<li><a href="images/15large.jpg" title=""><img src="images/15.jpg"alt="" /></a></li>
<li><a href="images/16large.jpg" title=""><img src="images/16.jpg"alt="" /></a></li>
<li><a href="images/20large.jpg" title=""><img src="images/20.jpg"alt="" /></a></li>
<li><a href="images/18large.jpg" title=""><img src="images/18.jpg"alt="" /></a></li>
<li><a href="images/19large.jpg" title=""><img src="images/19.jpg"alt="" /></a></li>
</ul>
</div>
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
I used to have a jCarousel of image that worked perfectly fine in the header of my Wordpress pages. Now after adding some code to change the header of the pages based on the category page that is being displayed, it is not working correctly. It seems that is not getting initialized and wrapping the list of images in the html with the correct code to make the list into the jCarousel. When the page is loaded, all that is shown where the carousel is supposed to be is a list of the images going down the page, with bullets and everything. The strange part is that even when I remove the PHP if statements that I added right above the carousel, it does the same thing and still refuses to work. I don't see any rogue code that I accidentally added that is breaking the carousel. The wordpress header file that I'm working with is below. Sorry if parts of it are a bit messy...does anyone also know how to paste code on here without messing it up? I basically had to manually put 4 spaces before each line of the code to get it to show up somewhat reasonably.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript' src='js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="logo"><a href="http://cayennecreative.com/testing"><img src="images/cayennelogo.png" alt="Cayenne" /></a> <div id="social"><a href="<?php bloginfo('rss2_url'); ?>"><img src="images/1.png" alt="Cayenne's RSS Feed" /></a><br /><a href="http://twitter.com/CayenneCreative"><img src="images/2.png" alt="Cayenne on Twitter" /></a><br /><a href="http://www.facebook.com/CayenneCreative"><img src="images/3.png" alt="Cayenne on Facebook" /></a><br /><a href="http://www.linkedin.com/company/cayenne-creative"><img src="images/4.png" alt="Cayenne on LinkedIn" /></a></div></div>
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<div id="contactinfo">
P: 205.322.4422 E: [email protected]
</div>
</div><!-- #access -->
<div id="branding" role="banner">
<?php if(is_category(3)): ?>
<div id="header1">Hey image slider</div>
<div id="header2">You Need to Work</div>
<?php elseif(is_category(8)): ?>
<div id="header3">Great Work</div>
<div id="header4">is done by people who are not afraid to be great.</div>
<?php elseif(is_category(6)): ?>
<div id="header5">The People</div>
<?php elseif(is_category(9)): ?>
<div id="header1">We solve problems</div>
<div id="header2">With Style</div>
<?php elseif(is_category(7)): ?>
<div id="header1">Change happens by listening and then starting a</div>
<div id="header2">Dialogue</div>
<?php else: ?>
<div id="header1">We solve problems</div>
<div id="header2">With Style</div>
<?php endif; ?>
<div id="carousel-shadow"></div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="images/1large.jpg" title=""><img src="images/1.jpg"alt="" /></a></li>
<li><a href="images/2large.jpg" title=""><img src="images/2.jpg"alt="" /></a></li>
<li><a href="images/3large.jpg" title=""><img src="images/3.jpg"alt="" /></a></li>
<li><a href="images/4large.jpg" title=""><img src="images/4.jpg"alt="" /></a></li>
<li><a href="images/5large.jpg" title=""><img src="images/5.jpg"alt="" /></a></li>
<li><a href="images/6large.jpg" title=""><img src="images/6.jpg"alt="" /></a></li>
<li><a href="images/7large.jpg" title=""><img src="images/7.jpg"alt="" /></a></li>
<li><a href="images/8large.jpg" title=""><img src="images/8.jpg"alt="" /></a></li>
<li><a href="images/9large.jpg" title=""><img src="images/9.jpg"alt="" /></a></li>
<li><a href="images/11large.jpg" title=""><img src="images/11.jpg"alt="" /></a></li>
<li><a href="images/12large.jpg" title=""><img src="images/12.jpg"alt="" /></a></li>
<li><a href="images/13large.jpg" title=""><img src="images/13.jpg"alt="" /></a></li>
<li><a href="images/14large.jpg" title=""><img src="images/14.jpg"alt="" /></a></li>
<li><a href="images/15large.jpg" title=""><img src="images/15.jpg"alt="" /></a></li>
<li><a href="images/16large.jpg" title=""><img src="images/16.jpg"alt="" /></a></li>
<li><a href="images/20large.jpg" title=""><img src="images/20.jpg"alt="" /></a></li>
<li><a href="images/18large.jpg" title=""><img src="images/18.jpg"alt="" /></a></li>
<li><a href="images/19large.jpg" title=""><img src="images/19.jpg"alt="" /></a></li>
</ul>
</div>
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的 jCarousel Includes 中存在单引号和双引号的问题...
您有这个...
您需要有这个...
You have an issue with single and double quotes in your jCarousel Includes...
You have this...
You need to have this...
替换
为
不匹配的引号！
Replace
with
Mismatched quotes!