Вопрос или проблема
ИЗМЕНЕНИЕ – Это решено, спасибо за вашу помощь, после того как предложенные ниже решения не помогли, я обновил кэш своего браузера, и теперь мои функции работают… Однако я тогда понял, что они работают только на главной странице. Создаю отдельную тему для этого. Спасибо за вашу помощь!!!
Новая тема здесь jQuery функции работают только на главной странице
Я пытаюсь сделать текст с подчеркиванием: underline; для активной функции на спане “испанский | английский” в WordPress. Я сделал это здесь в этом jsfiddle https://jsfiddle.net/TonyTheOnly/k92ayp24/
Тот же html и css, что и в jsfiddle, вот jQuery, который я использую для WP.
jQuery(document).ready(function () {
"use strict";
jQuery('.toggles span').click(function () {
jQuery(".toggles span").removeClass("active");
jQuery(this).addClass("active");
});
});
Любая помощь будет очень appreciated, спасибо за ваше время.
ИЗМЕНЕНИЕ
Вот мои полные функции
<?php
function paramo_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/paramo.css', array(), '1.0.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'paramo_script_enqueue');
function paramo_theme_setup() {
add_theme_support('menus');
register_nav_menu('primary', 'Основная навигация');
register_nav_menu('secondary', 'Навигация подвала');
}
add_action('init', 'paramo_theme_setup');
add_theme_support('custom-header');
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');
Полный файл js
/*global $, jQuery, alert*/
jQuery.noConflict();
jQuery(document).ready(function () {
"use strict";
jQuery(".burger-nav").on("click", function () {
jQuery("nav ul").toggleClass("open");
});
jQuery(".spanish").on("click", function () {
jQuery(".englishNav").hide();
jQuery(".spanishNav").show();
});
jQuery(".english").on("click", function () {
jQuery(".englishNav").show();
jQuery(".spanishNav").hide();
});
jQuery('.toggles span').click(function () {
jQuery(".toggles span").removeClass("active");
jQuery(this).addClass("active");
});
});
Полный заголовок
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paramo Galeria</title>
<?php wp_head(); ?>
</head>
<body <?php body_class( $awesome_classes ); ?>>
<section>
<div class="topBar">
<img src="https://wordpress.stackexchange.com/questions/284997/<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
<div class="topBarMiddle">
<p class="toggles"><span class="spanish">español</span> | <span class="english">english</span></p>
<div class="topBarRight">
<nav>
<a class="burger-nav"></a>
<ul class="englishNav">
<li><a href="http://localhost:8888/ParamoGaleria/home">Главная</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/artists">Художники</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Выставки</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/offsite">Вне компании</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/shop">Магазин</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/contact"> Контакт</a></li>
<li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
</ul>
<ul class="spanishNav">
<li><a href="http://localhost:8888/ParamoGaleria/home">Главная</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/artists">Художники</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Выставки</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/offsite">Вне компании</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/shop">Магазин</a></li>
<li><a href="http://localhost:8888/ParamoGaleria/contact"> Контакт</a></li>
<li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
</ul>
</nav>
</div>
</div>
</section>
индекс
<?php get_header(); ?>
<?php
if( have_posts() ):
while( have_posts() ): the_post(); ?>
<p><?php the_content(); ?></p>
<?php endwhile;
endif;
?>
<?php get_footer(); ?>
Существует несколько возможных причин вашей проблемы:
-
Если файл скрипта для этой функции загружается до загрузки jQuery, вы можете увидеть ошибку jQuery не определен в отладчике/консоли. Если это так, просто измените порядок загрузки скриптов, чтобы убедиться, что зависимости загружены первыми.
-
Если функция добавляется напрямую в область тела wysiwyg или в файл шаблона, а не в js файл для темы, вам может потребоваться вызвать
jQuery.noConflict(). Смотрите документацию jQuery о том, когда и почему вы будете это использовать.
Также стоит отметить, что у вас есть ошибка в коде javascript, который вы здесь разместили. Перед именем класса, передаваемым в addClass или removeClass, не должно быть точки.
Не добавляйте точку в addClass и removeClass. Вот так:
До:
jQuery(".toggles span").removeClass(".active");
jQuery(this).addClass(".active");
После:
jQuery(".toggles span").removeClass("active");
jQuery(this).addClass("active");
Это решено, спасибо за вашу помощь. После того, как предложения не решили проблему, я обновил кэш браузера, и теперь мои функции работают… Однако я тогда понял, что они работают только на главной странице. Создаю отдельную тему для этого.
Ответ или решение
Вопрос, касающийся работы функций jQuery в WordPress, который не проявляется на всех страницах, может быть вызван несколькими основными факторами. Рассмотрим возможные причины и решения, опираясь на предоставленную информацию.
1. Проблемы с подключением скриптов
Одной из основных причин, по которой jQuery может не работать должным образом в WordPress, является порядок загрузки скриптов. В WordPress важен правильный порядок подключения библиотек, поскольку некоторые скрипты могут загружаться до jQuery, что приводит к ошибкам.
Решение:
Убедитесь, что вы правильно добавили зависимости в функции wp_enqueue_script(), как ниже:
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jquery'), '1.0.0', true);Обратите внимание на наличие array('jquery') в качестве третьего параметра, что указывает на то, что jQuery должен загружаться перед вашим скриптом.
2. Использование jQuery в конфликтующем режиме
Если вы непосредственно вставляете JavaScript-код в шаблоны или в редактор контента WordPress, jQuery может конфликтовать с другими библиотеками. Использование jQuery.noConflict() может помочь избежать таких проблем.
Решение:
Убедитесь, что вы обернули ваши функции в jQuery.noConflict() и используете объект jQuery:
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('.toggles span').click(function () {
jQuery(".toggles span").removeClass("active");
jQuery(this).addClass("active");
});
});3. Очистка кеша
После обновления кода может возникнуть необходимость очистки кеша браузера. Иногда обновления не проявляются, так как старый код сохраняется в кеше.
Решение:
Как вы уже заметили, обновление кеша решило проблему. Рекомендуется регулярно очищать кеш, чтобы избежать получения устаревших данных.
4. Ошибки в коде
Проверка синтаксиса кода также важна. Обратите внимание на опечатки, такие как добавление точки перед классом в методах addClass() и removeClass().
Правильный пример:
jQuery(".toggles span").removeClass("active"); // Без точки перед 'active'
jQuery(this).addClass("active"); // Без точки перед 'active'5. Проблемы с доступностью jQuery на разных страницах
Если код работает только на главной странице, возможно, скрипты не загружаются на других страницах.
Решение:
Проверьте, загружаете ли вы скрипты на всех необходимых страницах. Убедитесь, что ваш код присутствует в правильном шаблоне страниц. Если необходимо, добавьте дополнительные проверки или функции.
Заключение
Работа с jQuery в WordPress требует внимательного подхода к подключению и управлению скриптами. Очистка кеша, внимательная работа с синтаксисом и правильное подключение — ключевые моменты для обеспечения корректной работы всех функций. Если у вас остались вопросы, не стесняйтесь запрашивать помощь на специализированных форумах, таких как WordPress Stack Exchange.