Не могу включить пользовательские скрипты jQuery в мою тему wp - PullRequest
Новая
       6

Не могу включить пользовательские скрипты jQuery в мою тему wp

0 голосов
/ 31 мая 2018

Так что я некоторое время пытался включить мои jQuery-скрипты (один плагин, один самостоятельно написанный) в мою собственную тему WordPress.Несмотря на то, что я много читал о том, как правильно их включить, я почему-то не могу заставить его работать.Итак, у меня есть один скрипт плагина ( jQuery.fullPage.js ) и пользовательский сценарий ( main.js ), которые ( оба! ) помещены в " assets / scripts /"каталог.

Как описано в инструкциях, я регистрирую их в functions.php : 

   function load_theme_scripts() {
          wp_register_style('fullPageStyle', get_template_directory_uri() . '/custom-css/jquery.fullPage.css');
          wp_enqueue_style( 'fullPageStyle');
          wp_register_script( 'theFullPage', get_template_directory_uri() . '/assets/scripts/jquery.fullPage.js', array('jquery'), false, true );
          wp_enqueue_script( 'theFullPage');
          wp_register_script( 'mainScript', get_template_directory_uri() . '/assets/scripts/main.js', array( 'jquery' ), '1.0.0', true );
          wp_enqueue_script( 'mainScript');
   }
   add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );`

Имея толькоэтот код ничего не случилось вообще.После некоторого прочтения я понял (не знаю, правильно ли это), что мне нужно также вызывать сценарии в HTML-коде <head>.Так что в <head> моего home.html у меня теперь есть следующий код: 

<head>
<title><?php wp_title()?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/jquery.fullPage.js'></script>
    <script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/main.js'></script>
    <?php wp_head(); ?>
</head>

Теперь вызываются скрипты (Пожалуйста, исправьте меня, если что-то не соответствует лучшей практике!), Но я получаю ошибку: Can't find variable: $ в моем main.js .Я думал, вероятно, это из-за режима совместимости jQuery в WordPress, поэтому замените $ на jQuery, но тогда ошибка будет Can't find variable: jQuery.

Код main.js с $: 

   $(document).ready(function() {
      alert("Main script is workin!");
      $('#fullpage').fullpage({
          scrollingSpeed: 1000
      });
      alert("Main script is workin!");
   });

main.js с jQuery вместо: 

jQuery(document).ready(function($) {
    alert("Main script is workin!");
    $('#fullpage').fullpage({
        scrollingSpeed: 1000
    });
    alert("Main script is workin!");
});

Пожалуйста, помогите мне с этим, это действительно сводит меня с ума!Так как я новичок в написании пользовательских тем для wp, приветствуются советы по кодированию этой функциональности в лучшем или более чистом виде!

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Если это js находится в папке плагина, тогда вам нужно использовать путь plugin_url () вместо get_template_directory_uri (). Becuase шаблонная функция каталога используется для найденного пути активированной темы.Я надеюсь, что это полезно для вас.Например: 

add_action( 'wp_enqueue_scripts', 'load_plugin_scripts');
function load_plugin_scripts(){ 
    wp_enqueue_script( 'plugin_custom_lm_js', plugins_url( 'assets/scripts/jquery.fullPage.js', __FILE__ ) );
}
0 голосов
/ 01 июня 2018

Решение найдено!

Итак, я понял, в чем проблема!На самом деле это действительно глупо.Чтобы загрузить jQuery, <?php wp_enqueue_script("jquery"); ?> должен называться перед <?php wp_head(); ?>.Все пользовательские сценарии, например, main.js, должны вызываться так: <script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script> после <?php wp_head(); ?> функции.

Так что теперь мой общий <head> HTML выглядит так:

<head>
<title><?php wp_title()?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/jquery.fullPage.js"></script>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script>

Пост Криса Койера https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ очень помог мне с этой проблемой!Спасибо!

0 голосов
/ 31 мая 2018

Это как раз и пример

Как добавить скрипты из шаблона и плагина. 

function wptuts_scripts_important()
{
    // Register the script like this for a plugin:
    wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
    // or
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...