无法让我的下拉菜单在基于引导的 Wordpress 主题中工作

Can't get my dropdown working in a Bootstrap based Wordpress theme

本文关键字：Wordpress 工作 于引导 我的 下拉菜单      更新时间：2023-09-26

我在这个网站上尝试了很多例子。还有一对夫妇工作了。但只有当我在 html 文件中使用它们时，而不是像 Wordpress 索引那样使用 php。

有趣的是感觉这是javascript没有加载。

另外，我无法使崩溃正常工作。只是让整个菜单消失。

使用最新版本的引导程序。

这是我的代码：

<link href = "<?php bloginfo ('stylesheet_url'); ?>" rel = "stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.video-ui.js"></script>
<script type="text/javascript">  $('#demo1').videoUI(); </script>


<div class="container">
  <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
       <span class = "icon-bar"></span>
       <span class = "icon-bar"></span>
       <span class = "icon-bar"></span>
  </button>
  <div class = "collapse navbar-collapse navHeaderCollapse">
  <div class="header">                        
    <ul class="nav nav-pills pull-right">
      <li><a href = "#">Home</a></li>
      <li><a href = "#">Blog</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Social Media<span class="caret"></span></a>
            <ul class = "dropdown-menu">
              <li><a href = "#">Twitter</a></li>
              <li><a href = "#">Facebook</a></li>
              <li><a href = "#">Google+</a></li>
              <li><a href = "#">Instagram</a></li>
            </ul>
      </li>
      <li><a href = "#">About</a></li>
      <li><a href = "#">Contact</a></li>
    </ul>
    <h3 class="text-muted"><small>Jumbotron Narrow</small></h3>
  </div>
  </div>

谢谢你的时间。

安 迪

既然你在哪里使用wordpress肯定你走错了路..将您的JS存储在您的主题文件夹中，然后只需在src中添加<?php bloginfo('template_directory'); ?>/即可。您的标题将如下所示：

<link href = "<?php bloginfo ('stylesheet_url'); ?>" rel = "stylesheet">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.video-ui.js"></script>
<script type="text/javascript">  $('#demo1').videoUI(); </script>

wordpress中的另一种方式是这样的：

function sudo_plugin_scripts() {
    wp_enqueue_script('jquery_script', plugin_dir_url( __FILE__ ).'js/jquery-1.10.2.js');
    wp_enqueue_script('bootstrap_script', plugin_dir_url( __FILE__ ).'js/bootstrap.min.js');
    wp_enqueue_style('video_script', plugin_dir_url( __FILE__ ).'js/jquery.video-ui.js');
}
add_action('wp_enqueue_scripts','sudo_plugin_scripts');

在函数中添加这些脚本.php

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

相关文章：