将JavaScript文件添加到WordPress主题
Adding JavaScript files to a WordPress Theme
这是我第一次使用Bootstrap 3.0创建WordPress主题,当文件只有纯HTML时,一切都正常运行,直到我将其转换为WordPress主题。
JavaScript加载不正确,我不确定是否应该直接通过header.php或footer.php 调用
下面是我使用的代码。
header.php
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
index.php
<?php get_header(); ?>
<!--carousel-->
<div class="container full-width">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="Slide-0">
<div class="cap-right slide-cap">
<img src="img/slide1cap.png">
<a href="#">View Lookbook</a>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Slide-1">
<div class="cap-right slide-cap">
<img src="img/slide2cap.png" alt="SlideCap">
<a href="#">View More</a>
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="Slide-2">
<div class="cap-left slide-cap">
<img src="img/slide3cap.png" alt="SlideCap">
<a href="#">Watch Video</a>
</div>
</div>
<div class="item">
<img src="img/4.jpg" alt="Slide-3">
<div class="cap-left slide-cap">
<img src="img/slide4Cap.png" alt="SlideCap">
<a href="#">Shop Shirts Now</a>
</div>
</div>
</div>
<!--arrows-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--end of carousel-->
<?php get_footer(); ?>
functions.php
<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/bootstrap.min.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
这是我通常在WordPress安装中注册脚本的方式。
<?php
function wpbootstrap_scripts_with_jquery()
{
wp_deregister_script( 'bootstrap-min-js' );
wp_register_script( 'bootstrap-min-js', get_bloginfo('template_directory') . '/js/bootstrap.min.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-min-js' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
您所需要做的就是更改
js/bootstrap.min.js
至
/js/bootstrap.min.js
注意:您需要(从浏览器)查看页面源代码,以确认bootstrap.min.js的路径是否正确,否则将无法工作。
在wp_head();
之后写入此wp_enqueue_script("jquery");
那么它应该起作用。
相关文章:
- .load ajax无法正常工作whitin wordpress主题
- 将prettyPhoto集成到Wordpress主题中
- 将Jquery与wordpress主题一起使用
- 试图让我的引导程序navabar背景淡出滚动在我的wordpress主题
- 在wordpress主题中添加花哨的灯箱,而无需使用插件
- 防止我的自定义WordPress主题被复制
- 我无法在自定义Wordpress主题中成功加载jQuery
- 将JavaScript文件添加到WordPress主题
- Wordpress主题angularJS承诺
- 注册多个脚本取决于 jquery 到 wordpress 主题
- Wordpress主题选项错误
- 需要帮助将一些JavaScript代码添加到我的wordpress主题中
- 在主页上隐藏WordPress主题的一部分
- 您如何对使用 Grunt 的 JS 文件的 WordPress 主题进行更改
- 在响应式 wordpress 主题中的每个字母中添加<跨度>
- 无法让我的下拉菜单在基于引导的 Wordpress 主题中工作
- 带有 Wordpress 主题的 ie8 和 ie9 中的 Jquery 错误.(对象不支持此属性或方法)
- 无法在自定义WordPress主题中运行JS文件
- 使用同位素和帖子视图的WordPress主题
- WordPress主题在IE中显示不正确