Блог

Главная - Вопросы по программированию - Как использовать jquery в WordPress

Как использовать jquery в WordPress

#javascript #php #jquery #wordpress #elementor

Вопрос:

Я застрял с проблемой добавления 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 .

Я запустил файл с кодом без какого-либо тега scripts.

Вот 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. Определите «не работает». Что именно происходит? Сценарий не ставится в очередь? Вы видите ошибки на консоли?

Ответ №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
    );
}
  1. Достань $ из jquery своего javascript файла.
 jQuery(document).ready($ => {
  $("#newark").click(function () {
    $("#mencontoz").toggle();
  });
});
  1. Удалите cdn ссылку, которая пытается войти jquery в ваш html шаблон.
 <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/

Примечание: Возможно, это не ваша проблема, но если это не так, вы, скорее всего, не предоставляете достаточно информации, чтобы кто — то мог вам помочь.

Метки: