使用Wordpress实施jQuery-Wizard的问题

Question

我正在尝试使用以下https://github.com/kflorence/jquery-wizard

代码在Wordpress页面上放置一个简单的点击向导。

我对jQuery没有经验，因此可以提供任何帮助。

当我将“向导”放在WordPress之外的静态页面上时，它完全可以正常工作，但是一旦将其添加到自定义页面模板中，它就不再起作用。

我尝试通过标题插入jQuery，并通过functions.php文件将脚本排入队列，但是每次在控制台中都遇到相同的错误。我不确定这是我网站上的另一个插件是否有问题，或者我在页面上调用jQuery的次数过多而没有意识到，还是我需要更改代码以使其在CMS中正常工作。

functions.php ：

function woodhouse_theme_styles()  { 
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'flexslider_css', get_template_directory_uri() . '/css/style.css' );

    wp_enqueue_script('wizard', get_template_directory_uri() . '/js/jquery.wizard.js', array( 'jquery' ), '1.1.3', true);

}
add_action('wp_enqueue_scripts', 'woodhouse_theme_styles');

/// IF 我在标题中调用脚本，而不是functions.php，而是使用以下脚本：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ui/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.wizard.js"></script>

向导：

<div id="wizard">
        <h3>Wizard Title</h3>
        <form name="wizard"> 
             <div class="step">
                  <p>This is a branching wizard. You will see different steps depending on your answers.</p>
             </div>

             <div class="step" data-state="color">
                    <p>Which color do you like best?</p>
                        <label for="colorPink"><input type="radio" name="color" value="pink" id="colorPink" />Pink</label>
                        <label for="colorBlue"><input type="radio" name="color" value="blue" id="colorBlue" />Blue</label>
             </div>

            <div class="branch" id="pink">
                 <div class="step" data-state="end">
                        <p>Pink, it was love at first sight</p>
                 </div>
            </div>

            <div class="branch" id="blue">
                  <div class="step" id="blue-1" data-state="blue-2">
                        <p>I'm blue da ba dee da ba die...</p>
                  </div>
            <div class="step" id="blue-2" data-state="blue-3">
            <p>blue 2</p>
            </div>

             <div class="step" id="blue-3" data-state="weather-branch">
                   <p>blue 3</p>
             </div>

</div>

<div class="step" id="animals">
      <p>Animals are important</p>
</div>

<div class="step" id="weather-branch" data-state="weather">
        <p>What is your favorite weather?</p>
        <label><input type="radio" name="weather" value="sunny" id="colorPink" />Sunny</label>
        <label><input type="radio" name="weather" value="rain" id="colorBlue" />Rain</label>
</div>

<div class="branch" id="sunny">
    <div class="step" data-state="end">
        <p>Sunny for days!</p>
    </div>
</div>

<div class="branch" id="rain">
    <div class="step" data-state="end">
         <p>Showers bring flowers!</p>
    </div>
</div>

<div class="step" id="end">
    <p>FIN.</p>
</div>

<div class="navigation">
    <ul class="clearfix">
         <li><button type="button" name="backward" class="backward">Backward</button></li>
         <li><button type="button" name="forward" class="forward">Forward</button></li>
    </ul>
</div>
</form>
</div>

<script type="text/javascript">
            jQuery(function($) {
                var validate = {
                    errorPlacement: function( error, element ) {
                        if ( element.is( ":radio" ) || element.is( ":checkbox" ) ) {
                            error.insertBefore( element.next() );

                        } else {
                            error.insertAfter( element );
                        }
                    }
                };

                // Example 3: Basic branching wizard
                jQuery( "#wizard" ).wizard({
                    transitions: {
                        color: function( state, action ) {
                            var branch = state.step.find( "[name=color]:checked" ).val();

                            if ( !branch ) {
                                alert( "Please select a value to continue." );
                            }

                            return branch;
                        },

                         weather: function( state, action ) {
                            var branch = state.step.find( "[name=weather]:checked" ).val();

                            if ( !branch ) {
                                alert( "Please select a value to continue." );
                            }

                            return branch;
                        },  
                    }
                });
            });
</script> 

我应该得到一个可以引导您完成向导的工作表格，但是，当我在functions.php中调用脚本时，却在控制台中收到此错误：

    jquery.wizard.js?ver=1.1.3:60 Uncaught TypeError: $.widget is not a function
    at jquery.wizard.js?ver=1.1.3:60
    at jquery.wizard.js?ver=1.1.3:723

    (anonymous) @ jquery.wizard.js?ver=1.1.3:60
    (anonymous) @ jquery.wizard.js?ver=1.1.3:723
    (index):592 Uncaught TypeError: jQuery(...).wizard is not a function
    at HTMLDocument.<anonymous> ((index):592)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

如果我在标题中调用脚本，则会得到以下信息：

    (index):595 Uncaught TypeError: jQuery(...).wizard is not a function
    at HTMLDocument.<anonymous> ((index):595)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

我不确定100％我做错了什么，甚至不确定如何调试此问题。