Разработка темы Wordpress: Javascript код не выполняется при нажатии кнопки - PullRequest
Новая
       1

Разработка темы Wordpress: Javascript код не выполняется при нажатии кнопки

0 голосов
/ 21 марта 2020

Я изучал, как разработать собственную тему Wordpress, используя php, html, css и javascript. Я использую инструмент разработки Wordpress Local для просмотра своего веб-сайта при внесении изменений. Я новичок во всех этих языках, и у меня возникла проблема с выполнением функции javascript при нажатии кнопки в навигации. Кнопка должна отображать выпадающее меню после нажатия. Я не уверен, является ли это проблемой с моим синтаксисом html и javascript или я неправильно связываю их (либо в файле html, либо в файле функций. php). Во всяком случае, это то, что я до сих пор, что может быть причиной проблемы.

header. php

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <?php wp_head(); ?>
    <script src="js/main.js"></script>
</head> 
<body>
    <div id ="slideout-menu">
        <ul>
            <li> 
              list items
            </li>
        </ul>
    </div>
<nav>
    <ul>
        <li><a href ="#">Home</a></li>
        <li><a href ="#">About</a></li>
        <li><button onclick="showSlideOutMenu();">Projects</button></li>
    </ul>
</nav>

main. js

const slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu(){
    if(slideoutMenu.style.opacity == "1"){
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    }
    else{
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

functions. php

<?php

function js_css_setup(){
    wp_enqueue_style('style', get_stylesheet_uri(), '/css/style.css');
    wp_enqueue_script("main", get_theme_file_uri() .'/js/main.js', NULL,microtime(),false);

}

add_action('wp_enqueue_scripts','js_css_setup');
?>

Стиль . css работает и отображает меню, когда непрозрачность установлена ​​на 1, поэтому я исключил это. Моя веб-страница также может отображать предупреждающее сообщение, если оно добавлено на главную. js. Выделяется ли что-нибудь еще, что может вызывать проблему?

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Измените свою очередь сценариев на эту 

 wp_enqueue_script("main", get_template_directory_uri().'/js/main.js', NULL,microtime(),false);
0 голосов
/ 21 марта 2020

Во-первых, вы должны установить для параметра in_footer значение true в функции wp_enqueue_script

Ваш код JS запускается до полной загрузки страницы и делает ее ошибкой в ​​консоли браузера

для загрузки основного стиля Вы можете использовать функцию get_stylesheet_uri () в wp_enqueue_style 

<?php
function js_css_setup() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( "main-js", get_theme_file_uri() . '/js/main.js', null, microtime(), true );
}

add_action( 'wp_enqueue_scripts', 'js_css_setup' );

const или в ES6, и вы не можете использовать напрямую в браузере, вы должны использовать var.

https://tylermcginnis.com/var-let-const/

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

var slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu() {
    console.log(slideoutMenu.style.opacity);

    if (slideoutMenu.style.opacity === "1") {
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    } else {
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

index. php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <?php wp_head(); ?>
</head>
<body>
<?php wp_body_open(); ?>
<div id="slideout-menu">
    <ul>
        <li>
            list items
        </li>
    </ul>
</div>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <button onclick="showSlideOutMenu();">Projects</button>
        </li>
    </ul>
</nav>
<?php wp_footer(); ?>
</body>
</html>

Я рекомендовал сначала изучить HTML и CSS, потом учи JS (ES5 / ES6)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...