从画布引导到 WordPress

Question

我正在尝试将画布上的引导程序添加到 wordpress 页面以在 xs 设备上可见，例如这个示例

http://getbootstrap.com/examples/offcanvas/

我的 theme.js 文件夹似乎没有加载到我的 wordpress 页面中。

这是page.php 代码

<?php get_header(); ?>

<div class="container">
  <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-md-9">

    <p class="pull-right visible-xs">
        <button type="button" class="btn btn-primary btn-xs offcanvas-control" data-toggle="offcanvas">Sidebar <span class="glyphicon glyphicon-resize-horizontal"></span></button>
    </p>

     <?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="page-header">
         <h1><?php the_title(); ?></h1>
        </div>

        <?php the_content(); ?>

     <?php endwhile; else: ?>

  <div class="page-header">
         <h1>Oh no!</h1>
        </div>

        <p>No content is appearing for this page!</p>
     <?php endif; ?>

    </div>

   <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

这是sidebar.php

<div class="col-md-3 sidebar sidebar-offcanvas">
    <?php if ( ! dynamic_sidebar( 'page' ) ): ?>
    <h3>Widget Setup</h3>
    <p>Please add widgets to the page widget to have them display here</p>
    <?php endif; ?>
</div>

这是theme.js

jQuery(document).ready(function ( $ ) { 
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');  
    });
});

这是functions.php

// Load the Theme JS
function theme_js() {

    global $wp_scripts;

    wp_register_script( 'html5shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery','bootstrap_js'), '', true );

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

Answer 1

浏览器只加载这个脚本

<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>