将prettyPhoto整合到Wordpress主题中

时间:2016-05-09 21:47:24

标签: javascript php jquery wordpress prettyphoto

我正在尝试将prettyPhoto整合到我的Wordpress主题中(我正在使用悉尼主题)。我做了以下事情:

  1. 将prettyPhoto.css文件上传到/ css目录
  2. 将jquery-1.3.2.min.js和jquery.prettyPhoto.js文件上传到/ js目录
  3. 将所有图像文件夹(全屏,漂亮照片,缩略图)上传到/ images目录
  4. 然后,我添加了

    <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。该视频无法在灯箱中打开。

    我在哪里弄错了?

    非常感谢你的帮助!!

1 个答案:

答案 0 :(得分:0)

我终于设法解决了这个问题。链接是错误的,总新秀错误。我道歉!