引導模式未在 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

您必須在您的 fuctions.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 樹的加載。 了解更多詳情，請點擊以下鏈接。 [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>