Я работаю над шаблоном страницы дочерней темы WordPress, который использует Bootstrap из-за большой встроенной библиотеки фреймворков.Я хочу WordPress для остальной части сайта, но эта страница является конкретным приложением.Я недавно включил 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: почему не работает javascript в stuco.php?
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/" )
}