Question

我的汉堡包菜单也显示在我的自定义wordpress主题上，它也具有响应性，但是您不能单击它作为下拉菜单

我在函数php中的代码-

function wpb_hook_javascript() {
    ?>
        <script>

            let mainNav = document.getElementById('js-menu');
            let navBarToggle = document.getElementById('js-navbar-toggle');

           navBarToggle.addEventListener('click', function () {
           mainNav.classList.toggle('active');
            });
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');


in header.php - 

  <!--TOGGLE-->
    <script src="https://kit.fontawesome.com/721c0cc9d7.js"></script>

<!-- HEADER -->

<header role ="banner">
<nav class="navbar">
        <span class="navbar-toggle" id="js-navbar-toggle">
             <i class="fas fa-bars"></i>
        </span>

Answer 1

您应该使用WordPress方式！
这不是在WordPress中使用JS的方式，也不是调用/添加文件的方式！
您必须使用wp_enqueue_script在主题中包含脚本。
请始终参阅来源以获取可靠的信息Including CSS & JavaScript
在尝试使用WordPress方式后，如果无法正常工作，请更新您尝试使用WordPress方式的方式，我将为您提供帮助:)

**

---编辑---
一个承诺就是一个承诺！
我会一直指导你的:)
1- 删除：
a-来自functions.php

    function wpb_hook_javascript() {
        ?>
            <script>

                let mainNav = document.getElementById('js-menu');
                let navBarToggle = document.getElementById('js-navbar-toggle');

               navBarToggle.addEventListener('click', function () {
               mainNav.classList.toggle('active');
                });
            </script>
        <?php
    }
    add_action('wp_head', 'wpb_hook_javascript');

b-来自header.php

<script src="https://kit.fontawesome.com/721c0cc9d7.js"></script>

2-
我可以看到您已经生成了一个定制的JS工具包，它非常棒。
由于我不知道其中的内容以及不包含的内容，因此，我将为您提供使用所有JS字体的方式，然后您可以在理解了概念之后就可以使用带有所有字体或您的套件...

a- Download Font Awesome
您会找到一个js文件夹，并在该文件夹下找到一个名为all.js的文件
在主题的根目录下，与style.css处于同一级别，如果您还没有文件夹，请创建一个js文件夹。
在此js文件夹中，添加下载的all.js文件，并在此js文件夹中创建一个名为my-js-file.js的新文件。

b-在您的functions.php中添加以下内容：

/**
 * Enqueue Font Awesome & Custom Scripts.
 */
function enqueue_my_scripts() {
    wp_enqueue_script( 'font-awesome', get_theme_file_uri( '/js/all.js' ), array(), filemtime( get_theme_file_path( '/js/all.js' ) ), false );
    wp_enqueue_script( 'my-js-file', get_theme_file_uri( '/js/my-js-file.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/my-js-file.js' ) ), true );

add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );


/**
 * Filter the HTML script tag of font-awesome script to add data-auto-replace-svg attribute.
 *
 * @param string $tag    The <script> tag for the enqueued script.
 * @param string $handle The script's registered handle.
 *
 * @return   Filtered HTML script tag.
 */
function add_data_attribute( $tag, $handle ) {

    if ( 'font-awesome' === $handle ) {
        $tag = str_replace( ' src', ' data-auto-replace-svg="nest" src', $tag );
    }

    return $tag;

}
add_filter( 'script_loader_tag', 'add_data_attribute', 10, 2 );

3- 打开my-js-file.js并添加以下内容：

(function ($) {

    let mainNav = $( '#js-menu' );
    let navBarToggle = $( '#js-navbar-toggle' );
    navBarToggle.click( function( e ) {
        e.preventDefault();
        mainNav.toggleClass('active');
    });

})(jQuery);

在您提供的id="js-menu"中看不到任何HTML。
如果您的目标是正确的，它应该可以按预期工作，或者您应该纠正目标。

最后重要提示
请记住对所有修改都使用child theme，否则它们将在您正在使用的主题的下一次更新时被删除（除非您正在开发主题）。

SYA：）

字体真棒切换菜单无法在自定义wordpress主题中单击

1 个答案: