Question

由于该框架的大型内置功能库，我正在研究使用Bootstrap的WordPress子主题页面模板。我需要该网站的其余部分使用WordPress，但是此页面是特定的应用程序。我有recently incorporated Bootstrap和以下functions.php文件：

<?php

function enqueue_child_theme_styles() {
    if ( is_page_template( 'stuco-course-manager.php' ) ) {
        //deregister the parent bootstrap style and script  
        wp_deregister_style( 'bootstrap' );
        wp_deregister_script( 'bootstrap' );

        //enqueue my child theme stylesheet
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

        //enqueue bootstrap in the child theme 
        wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
        wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

        //Enqueue the StudyCompanion specific scripts
        wp_enqueue_script('stuco-js', get_stylesheet_directory_uri().'/js/stuco.js', array('jquery'), NULL, true);
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

我知道它可以成功加载Bootstrap类，因为我可以看到其中的一些功能，如果我注释掉functions.php中的行，它会以纯HTML格式呈现并且看起来很糟糕。这就是现在的样子：

注意，我正在测试手风琴功能。问题1：为什么手风琴默认将幻灯片2打开？问题2：为什么JavaScript不能将+更改为-，反之亦然？

还要注意Pop!按钮。这是确保文件stuco.js.正在打开的测试。我使用了与Bootstrap相同的基本函数来进行加载，但似乎无法正常工作。因此，问题3：为什么stuco.php中的javascript无法正常工作？

template.php：

<?php
/**
 *
 * Template Name: Course Manager
 *
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header(); ?>

<main id="main" <?php generate_main_class(); // Page title and content ?>> 
<?php
    do_action( 'generate_before_main_content' ); 
    while ( have_posts() ) : the_post();
    get_template_part( 'content', 'page' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || '0' != get_comments_number() ) : ?>

        <div class="comments-area">
            <?php comments_template(); ?>
        </div>
    <?php endif;
endwhile;
do_action( 'generate_after_main_content' );
?>

<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>

<div class="col-xl-12 offset-x0-0 py-5">
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#AddNewCourseModal">Add New Course</button>          
    <input type="button" onClick="myPopup()" value="POP!">
</div>      
</main><!-- #main -->

<?php
do_action( 'generate_after_primary_content_area' );
get_footer();
?>

stuco.js：

 // Script for the Course Manager accordions
 $(document).ready(function(){
    // Add minus icon for collapse element which is open by default
    $(".collapse.in").each(function(){
        $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
    });

    // Toggle plus minus icon on show hide of collapse element
    $(".collapse").on('show.bs.collapse', function(){
        $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    }).on('hide.bs.collapse', function(){
        $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    });
});

function myPopup() {
window.open( "http://www.google.com/" )
}

Bootstrap和自定义Javascript在WordPress页面模板上无法正常工作

0 个答案: