在WordPress中调用外部库

时间:2012-01-02 作者:Louis Stephens

我在一个博客上做一些维护工作,几个月前我被雇来创建这个博客。他们想添加一个滑块,所以我开始实现FlexSlider。但我在滑块上遇到了问题。

我已将所需的依赖项添加到标题中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link rel="stylesheet" href="<?php echo get_bloginfo(\'template_directory\'); ?>/flexslider.css" type="text/css" media="screen" />
<script src="<?php echo get_bloginfo(\'template_directory\'); ?>/jquery.flexslider-min.js"></script>
在我的索引文件中,我有:

<div class="flex-container">
    <div class="flexslider">

        <ul class="slides">         
            <li>
   <?php query_posts(array ( \'posts_per_page\' => 1, \'tag\'=> \'one\' )); ?>
    <?php while (have_posts()) : the_post(); ?>
<?php       $slider_image = get_post_meta($post->ID, \'slider_image\', true);?>
<img src="<?php echo $slider_image[0][\'image\']; ?>" />      


        <div class="info">
        <h1><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1>
            <p><?php the_time(\'F jS, Y\') ?> by <?php the_author() ?></p>

                <p><?php echo excerpt(55); ?></p>
                <p class="read"><a href="<?php the_permalink(); ?>"> Read More ></a></p>
        <?php endwhile; ?> 
   </div>
    </li>






        </ul>
    </div>
</div>
我的问题是,当您查看滑块时,“幻灯片”似乎根本没有样式,jquery文件似乎根本没有功能。我一直看到一个错误:

Uncaught TypeError: Object #<Object> has no method \'slides\'
:1112/:22Uncaught TypeError: Object #<Object> has no method \'flexslider\'
你可以看到我在做什么http://louisstephens.cc/blog (使用我自己的博客,以免弄乱客户的网站)。有没有人看到我在正常工作中遗漏的东西?

2 个回复
最合适的回答,由SO网友:Bouchaala Sabri 整理而成

在您的功能中。php添加此代码

function load_custom_script() {

    wp_deregister_script(\'jquery\');
    wp_register_script(\'jquery\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\', false, \'1.6.2\');
    wp_enqueue_script(\'jquery\');

    wp_register_script(\'jquery.flexslider\', get_bloginfo(\'template_directory\').\'/jquery.flexslider-min.js\', array(\'jquery\'));
    wp_enqueue_script(\'jquery.flexslider\');

}

function load_custom_style() {
    wp_register_style(\'flexslider\', get_bloginfo(\'template_url\').\'/flexslider.css\', array(), \'\');
    wp_enqueue_style(\'flexslider\');
}

add_action(\'wp_print_scripts\', \'load_custom_script\');
add_action(\'wp_print_styles\', \'load_custom_style\');
不要忘记删除代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link rel="stylesheet" href="<?php echo get_bloginfo(\'template_directory\'); ?>/flexslider.css" type="text/css" media="screen" />
<script src="<?php echo get_bloginfo(\'template_directory\'); ?>/jquery.flexslider-min.js"></script>

SO网友:Evan Yeung

您应该使用jQuery 而不是速记$.

你也应该wp_enqueue_script 插入jQuery和FlexSlider脚本。你可以找到一个很好的教程here.

结束

相关推荐

Jquery UI implementation

我必须在函数文件中注册jQuery UI。我不希望它直接出现在标题中。phpfunction my_jquery_ui() { // register your script location, dependencies and version wp_register_script(\'jquery-ui-1.8.16\', get_template_directory_uri().\'/js/jquery-ui-1.8.16.js\', array(\'jquery\'), \'1.8.