将 prettyPhoto 集成到 Wordpress 主题中答案

【问题标题】：Integrating prettyPhoto into Wordpress theme将 prettyPhoto 集成到 Wordpress 主题中
【发布时间】：2016-05-09 21:47:23
【问题描述】：

我正在尝试将 prettyPhoto 集成到我的 Wordpress 主题中（我使用的是 Sydney 主题）。我做了以下事情：

将 prettyPhoto.css 文件上传到 /css 目录
已将 jquery-1.3.2.min.js 和 jquery.prettyPhoto.js 文件上传到 /js 目录
已将所有图像文件夹（全屏、漂亮照片、缩略图）上传到 /images 目录

然后，我添加了

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

到 header.php 文件，就在开始标记之后，如下所示：

?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Sydney
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) : ?>
	<?php if ( get_theme_mod('site_favicon') ) : ?>
		<link rel="shortcut icon" href="<?php echo esc_url(get_theme_mod('site_favicon')); ?>" />
	<?php endif; ?>
<?php endif; ?>

<?php wp_head(); ?>

<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $('#button').click(function(e) {  
        var inputvalue3 = $("#input").val();
        

    });
});
</script> 
-->


</head>

然后，为了初始化 prettyPhoto，我添加了

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

进入footer.php文件，就在结束标签之前，像这样：

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Sydney
 */
?>
			</div>
		</div>
	</div><!-- #content -->

	<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
		<?php get_sidebar('footer'); ?>
	<?php endif; ?>

    <a class="go-top"><i class="fa fa-angle-up"></i></a>

	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info container">
			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'sydney' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'sydney' ), 'WordPress' ); ?></a>
			<span class="sep"> | </span>
			<?php printf( __( 'Theme: %2$s by %1$s.', 'sydney' ), 'aThemes', '<a href="http://athemes.com/theme/sydney" rel="designer">Sydney</a>' ); ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
</body>

现在，在我的 wordpress 页面上，有一个部分，由一个名为“fp-call-to-action.php”的文件描述

此文件包含一个按钮。单击按钮后，我希望使用 prettyPhoto 在灯箱中打开 youtube 视频：

<div>
                        <a href="http://www.youtube.com/watch?v=40wYKjSd9r0" rel="prettyPhoto" title="youtube">
                        <button type="button" id="button">Jetzt anschauen!</button>
                        </a>
                        </div>

但是，每次我点击按钮时，我都会被重定向到 youtube。视频无法在灯箱中打开。

我在哪里做错了？

非常感谢您的帮助！！

【问题讨论】：

标签： javascript php jquery wordpress prettyphoto

【解决方案1】：

我终于设法解决了这个问题。链接是错误的，完全是菜鸟的错误。抱歉！

【讨论】：