引导模式在WordPress中未打开

Question

我已经将我的PHP网站转换为WordPress主题，但是我的Bootstrap模式在WordPress中没有打开。

***Header.php***
<a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user"></i> Sign In/Up</a> 

<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">

<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
<div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
</div>
</div>

<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
<a href="#" class="forgot_password">Forgot password?</a>
</div>

<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>

</section>
</div>

我努力了，但没有找到任何解决办法。我已经导入了所有必要的文件，如Bootstrap和JavaScript，但仍然模态不工作。我有一个header.php文件，其中我有一个锚标记，我想在点击它时打开一个模态。

Answer 1

可能您没有正确地排队引导。首先，将引导CSS和JS排队。对于排队，你的风格& &;JS WordPress有一个动作钩子。

wp_enqueue_scripts

必须在functions。php

中设置

function your_scripts() {
wp_enqueue_style( 'style-name', get_template_directory_uri().'/your_path/your.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/your_path/your.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );

Your_scripts是你的回调函数。你想给它起什么名字都行。Wp_enqueue_style接受5个参数。第一个是唯一id，第二个是SRC或链接，第三个是依赖项，第四个是版本，最后一个是媒体。更多的细节请看下面的链接。[https://developer.wordpress.org/reference/functions/wp_enqueue_style/] [1]Wp_enqueue_script也有5个参数

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle是脚本的名称。$src定义脚本的位置。$deps是一个数组，它可以处理新脚本所依赖的任何脚本，比如jQuery。$ver允许您列出版本号。$in_footer是一个布尔参数(true/false)，它允许您将脚本放在HTML文档的页脚而不是页眉中，这样就不会延迟DOM树的加载。关于Know，更多细节请点击下面的链接。[https://developer.wordpress.org/reference/functions/wp_enqueue_script/] [1]

现在进入你的样式和CSS，并尝试你的模式。

Answer 2

您的<a>标签需要data-toggle="modal"和data-target="#modal"属性。参见Bootstrap 4模式文档。

***Header.php***
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a id="modal_trigger" href="#modal" class="sign-in-up" data-toggle="modal" data-target="#modal"><i class="fa fa-user"></i> Sign In/Up</a> 
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">

<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
<div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
</div>
</div>

<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
<a href="#" class="forgot_password">Forgot password?</a>
</div>

<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>

</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>