时间戳

首页 > 解决方案 > 字体真棒切换菜单在自定义 wordpress 主题中不可点击

wordpress - 字体真棒切换菜单在自定义 wordpress 主题中不可点击

问题描述

我的汉堡菜单显示在我的自定义 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>

标签： wordpressfont-awesomecustom-theme

解决方案

你应该用 WordPress 的方式来做！
这不是 JS 在 WordPress 中的使用方式或文件被调用/添加的方式！
您必须使用wp_enqueue_script在主题中包含脚本。
始终参考来源以获取可靠信息，包括 CSS 和 JavaScript
在您尝试了 WordPress 方式后，如果您无法使其工作，请更新您尝试使用 WordPress 方式的方式，我会帮助您:)

**

--- 编辑 ---
承诺就是承诺！
我会一路指导你 :)
1- REMOVE :
a- FROMfunctions.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的 Font Awesome 套件。
因为我不知道里面有什么以及你包含了什么，我会给你一种使用所有JS字体的方法，然后你就可以在理解这个概念后使用所有字体或你的套件...

a- 下载 Font Awesome
您会找到一个js文件夹，在该文件夹下有一个名为all.js
At the root of your theme，与 相同级别的文件，如果您还没有文件夹style.css，请创建一个文件夹。 在此文件夹中，添加下载的文件并在此文件夹中创建一个名为. js
jsall.jsjsmy-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。
如果您的目标是正确的，它应该按预期工作，或者您应该纠正您的目标。

最后重要注意事项
记住对所有修改使用子主题，否则它们将在您使用的主题的下一次更新时被删除（除非您正在开发主题）。

赛亚 :)

推荐阅读