如何在wordPress中使用jquery

Posted 2023-05-09

【中文标题】如何在wordPress中使用jquery

【英文标题】：How to use jquery in wordPress

【发布时间】：2021-11-09 23:04:04

【问题描述】：

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

我觉得我的代码有问题，但如果我正常运行它就可以了。

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

#mencontozdisplay: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;

.attopiconsdirection: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:hoverbackground-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>

我尝试将位于我的主题目录/assets/js/your-script.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') 
    );
 

但毕竟我没有让它工作。

我做错了什么？

【问题讨论】：

定义“不工作”。究竟发生了什么？脚本没有排队吗？您是否在控制台上看到错误？

【参考方案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
    );
 

在您的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>  

【参考方案2】：

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

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

---

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