шрифт, потрясающее меню переключения, не кликабельное в пользовательской теме WordPress - PullRequest
Новая
       16

шрифт, потрясающее меню переключения, не кликабельное в пользовательской теме WordPress

0 голосов
/ 09 июля 2019

мое меню гамбургеров показывает в моей настраиваемой теме 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>

1 Ответ

0 голосов
/ 09 июля 2019

Вы должны сделать это способом WordPress!
Это не то, как JS используется в WordPress или файл называется / добавлен!
Вы должны использовать wp_enqueue_script , чтобы включить скрипты в вашtheme.
Всегда обращайтесь к источнику за достоверной информацией Включая 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 комплектШрифта Awesome.
Так как я не знаю, что внутри него, а что вы включили, а что нет, я дам вам способ работать со всеми JS шрифтами, тогда вы сможете, после пониманияконцепция, тo работать со всеми шрифтами или вашим комплектом ...

a- Скачать шрифт Awesome
Вы найдете папку js иэта папка - файл с именем all.js
В корне вашей темы, того же уровня, что и папка style.css, CREATE a js, если у вас ее еще нет.
Inв эту папку 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- Open 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.
Если ваши цели верны, они должны работать, как ожидалось, или вы должны исправить свои цели.

ЗАКЛЮЧИТЕЛЬНОЕ ВАЖНОЕ ПРИМЕЧАНИЕ
Не забудьте использовать дочернюю тему для всех ваших изменений, или они будут удалены при следующем обновлении темы, которой вы являетесьиспользуя (если вы не разрабатываете тему).

SYA:)

...