Как добавить скрипт jQuery на отдельную страницу?

Question

Как добавить скрипт jQuery на отдельную страницу?

27 июн. 2013 г., 21:02:38

Просмотры: 37.8K

Голосов: 7

У меня есть этот код, который я хочу добавить на определенную страницу. Я не хочу создавать для него файл и затем подключать его (хотя скажите, если это единственный способ). Также я не хочу, чтобы он был в header, так как тогда он будет включен во все страницы. Вот код:

<script type="text/javascript">
$(function () {
    $('input[name=done]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

Я добавил это в редактор, выбрав режим Текст (не в визуальном режиме). Но это не работает. Есть идеи, что я делаю неправильно?

Спасибо.

ISnoculrucdees

71

страницы jquery

Комментарии

Спасибо, это сработало. Пожалуйста, ответьте как ответ, чтобы я мог принять его.

ISnoculrucdees

27 июн. 2013 г. 21:15:14

Как точно определить, на какой именно странице вы хотите включить этот скрипт?>

Chip Bennett

27 июн. 2013 г. 21:47:30

вы можете использовать функцию WordPress is_page

Rohit Kishore

26 авг. 2016 г. 11:47:28

Все ответы на вопрос

Комментарии

Добавьте суть ответа, а не только ссылку на внешний ресурс.

bravokeyl

26 авг. 2016 г. 09:12:44

Минусую, потому что ответ должен быть на этом сайте, а не на каком-то неизвестном и ненадежном стороннем ресурсе.

Mark Kaplun

26 авг. 2016 г. 09:26:38

Минусую. Это не ответ на вопрос. Это ссылка на ваш внешний сайт, где пользователю еще и нужно подписаться на рассылку, чтобы получить плагин, который вы выдаете за "ответ" на вопрос.

omega33

2 сент. 2017 г. 13:56:20

Brooke. 3.89K · Answer 1 · 2013-06-28T01:00:10Z

Хотя @s_ha_dum прав, что вам ПРИДЁТСЯ использовать jQuery no conflict в WordPress, исходный вопрос остаётся без ответа.

У меня есть этот код, который я хочу добавить на определённую страницу моего сайта.

Есть несколько способов сделать это

На основе имени/слаг страницы WordPress в functions.php темы

Этот метод использует хук WordPress wp_enqueue_scripts

Создайте новый js-файл для вашего скрипта my-nifty-custom.js

В ваш functions.php добавьте следующее

/* Подключение скриптов (и связанных таблиц стилей) */
    add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
/**
 * Регистрирует скрипты для темы и подключает те, что используются на всём сайте.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
    wp_register_script('my-nifty-custom', get_stylesheet_directory_uri() . '/js/my-nifty-custom.js', false, null, true);
if(is_page('page-slug-here')){
    wp_enqueue_script('my-nifty-custom'); 
}}

Примечание: если вы используете дочернюю тему или хотите сделать это более правильно, оберните весь код в after_setup_theme, например:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// функция для скриптов и другие функции, которые должны выполняться после первоначальной настройки темы
}

На основе класса Body (DOM-маршрутизация)

Это немного сложнее. К счастью, Пол Айриш написал отличную статью об этом: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Если вы используете этот метод, ваш кастомный JS будет подключаться на определённых страницах на основе класса Body. Например, <body class="nifty">

Затем вы можете использовать:

//clip 
 nifty : {
    init     : function(){ //здесь ваш кастомный скрипт }
  }
//clip

Единственная проблема в том, что страница должна иметь класс Body, который вы вызываете. Для этого в WordPress есть функция body_class

add_filter('body_class','nifty_class_names');
function nifty_class_names($classes) {
    if(is_page('page-slug-here')){
        $classes[] = 'nifty';
    }

    return $classes;
}

Какой метод следует использовать?

Я рекомендую комбинацию обоих. Создайте один JavaScript-файл, использующий метод Пола. Затем используйте wp_enqueue_scripts для вызова этого метода.

Ленивый метод в header.php

Наконец, есть всегда ленивый способ (который я не рекомендую, но отмечаю для справки).

В вашем header.php можно сделать:

 <?php if(is_page('page-slug-here')){
           echo ('<script type="text/javascript" src="'. get_stylesheet_directory_uri() . '/js/my-nifty-custom.js"> </script>'); 
        } ?>

s_ha_dum 65.5K · Answer 2 · 2013-06-27T21:17:21Z

WordPress загружает jQuery в режиме "No Conflict". Псевдоним "$" не работает. Используйте полное имя "jQuery" — jQuery.$.ajax({... или оберните ваш скрипт, как в примере из документации jQuery...

(function($) { 
  $(function() {
    // код, использующий $ как псевдоним для jQuery
  });
})(jQuery);

Также об этом есть информация в Кодексе.

s_ha_dum

65.5K

27 июн. 2013 г. 21:17:21

John Negoita 9 · Answer 3 · 2016-08-26T09:05:24Z

Я сталкивался с этой проблемой каждый раз, когда хотел использовать jQuery-плагин в своих записях и страницах. Моим решением было создание универсального шорткода для jQuery-плагинов http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

John Negoita

9

26 авг. 2016 г. 09:05:24