如何在 wordPress 中使用 jquery

Question

我在将 jQuery 添加到 WordPress 时遇到问题。

我觉得我的代码有问题，但如果我运行它正常工作。

$("#newark").click(function() {
      $("#mencontoz").toggle();
 });

#mencontoz{display:none;}
.column {

  float: left;
  width: 20%;
  padding: 10px;
  background-color: #E8EFEF;
  height: 392px;
}

/* Style links inside the columns */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.attopicons{direction:rtl;
padding-top:10px;
align-content:center;
margin-top:10px;
font-size:25px;}
.fa-shopping-basket:hover{ color:#E8EFEF;}
.fomo{
    text-align:center;
    box-sizing: border-box;
width: 20%;
border: solid #fff 4px;
    padding: 5px;
margin-left:40%;
margin-top:2%;
color:#fff; }
.fomo:hover{background-color:#E8EFEF;
color:#000;}
.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.90em;
    left: 0.30em;
    position: relative;
    top: 0.30em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.90em;
    color:#fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newark">
Shop
</div>
<div id="mencontoz" class="drobdown-content">
    <div class="row">
      <div class="column">
        <h3>Category 1</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 6</a>
      </div>
      <div class="column">
        <h3>Category 2</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
      </div>
      <div class="column">
        <h3>Category 3</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
      </div>
      <div class="column">
        <h3>Category 4</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Category 5</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
   </div>
</div>

我试图将一个名为“your-script.js”的文件加入队列，该文件位于我的主题目录 /assets/js/your-script.js.

我用没有任何脚本标签的代码启动文件。

这是我用来使我的脚本排队的 PHP 代码：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', 
        get_template_directory_uri() . '/assets/js/your-script.js', 
        array('jquery') 
    );
}

但我还是没搞定。

我做错了什么？

Answer 1

使用 jQuery 而不是 $。 $ 在 WordPress 环境中默认不可用。这称为安全模式或兼容模式。

在此处阅读更多内容：https://wpengine.com/resources/jquery-wordpress/

注意：这可能不是您的问题 - 但如果不是，则说明您没有提供足够的信息来帮助任何人。

Answer 2

你就快完成了！您只需调整几项即可使其正常工作！

也排队jquery！

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script('jquery'); // Explicitly telling wordpress to load jquery
    wp_enqueue_script(
        'your-script', 
        get_template_directory_uri() . '/assets/js/your-script.js', 
        array('jquery'), 
        1.5, // put the version of your script here
        TRUE // This will make sure that your script will be loaded in the footer
    );
}

从 javascript 文件中的 jquery 获取 $。

jQuery(document).ready($ => {
  $("#newark").click(function () {
    $("#mencontoz").toggle();
  });
});

删除 cdn link 试图在您的 html 模板中引入 jquery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在 wordPress 中使用 jquery

How to use jquery in wordPress

javascript

php

wordpress

jquery

elementor