如何在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

你就快成功了!你只需要调整一些东西就可以让它工作!

1. 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
);
} 

2. 在javascript文件中从jquery中获取$

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

删除cdn链接，试图在html模板中引入jquery。

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

Answer 2

使用jQuery代替$。默认情况下，$在WordPress环境中不可用。这被称为安全模式或兼容模式。

阅读更多:https://wpengine.com/resources/jquery-wordpress/

---

注意:这可能不是你的问题，但如果不是，你没有包含足够的信息，任何人都可能帮助你。