我如何包装第三方jQuery脚本，以便它们在WordPress中工作？

时间：2014-05-12 作者：user658182

我试图在标题中包含一个jQuery自动完成脚本。我的主题的php文件。

wordpress之外的脚本使用这种结构非常有效（与jQuery自动完成演示相同）：

<script>
  $(function() {
     .....
  });
  </script>

我试过这样包装它：

 <script>
jQuery().ready(function($) {
            $(function() {

            });
        });

      </script>

原稿很好用。除了wordpress，我没有问题。当我尝试将其添加到标题时。php文件，该文件无法运行。甚至站点上的其他自动完成脚本也停止工作。

此外，我还在函数中添加了以下内容。php文件：

function add_qa_scripts(){
  wp_enqueue_script( \'jquery-ui-autocomplete\' );
}
add_action(\'wp_enqueue_scripts\', \'add_qa_scripts\');

我可以看到我的主题页脚中包含的脚本。但是，无论如何，我都无法让自动完成功能正常工作。我做错了什么？

编辑：由于我不确定评论中的结构问题，这里是供参考的页面-类别标签应自动完成：

http://bluepresley.com/qa/tag-search/

2 个回复

最合适的回答,由SO网友:Jeremy 整理而成

正如我在评论中所说的那样。您需要加载jQuery和jQuery UI才能使用自动完成UI。我修改了您的挂钩，使其依赖于所需的库。现在，您需要做的就是设置自定义js文件的路径，以初始化自动完成。依赖项将加载所需的文件，因为这是内置到WordPress中的。您可以在此处查看可用的库：wp_enqueue_script

function add_qa_scripts(){
    wp_enqueue_script(
        \'my-autocomplete\',
        PATH_TO_CUSTOM_JS_FILE,
        array(
            \'jquery\',
            \'jquery-ui-core\',
            \'jquery-ui-autocomplete\'
        ),
        \'1.0.0\', // version of custom js file
        true // always load in footer unless absolutely necessary
    );
}
add_action(\'wp_enqueue_scripts\', \'add_qa_scripts\');

SO网友:Pieter Goosen

有几种方法可以实现这一点。我认为以下方法是最好的使用方法。

Method 1

只需将脚本代码直接添加到函数文件中，并将该函数挂接到wp_enqueue_scripts

    function enqueue_my_script() {
?>
<script>
  (function($){   
     $("#to").autocomplete({
      var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#tags" )
      // don\'t navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
     });
 })(jQuery);
</script>
<?php
}

add_action( \'wp_enqueue_scripts\', \'enqueue_my_script\', 999 );

Method 2

创建一个名为“my script”的文件。js\'位于根目录或js文件夹中。打开它并添加jquery，而不使用<script></script> 标签。下面是要添加到js文件中的代码

 (function($){   
     $("#to").autocomplete({
      var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#tags" )
      // don\'t navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
     });
 })(jQuery);

现在，使用wp_enqueue_script(), 注册jquery并将其挂接到wp_enqueue_scripts 钩

function enqueue_my_script() {
     wp_enqueue_script( \'script-name\', get_template_directory_uri() . \'/js/my-script.js\', );
}

add_action( \'wp_enqueue_scripts\', \'enqueue_my_script\', 100 );

记住要改变get_template_directory_uri() 到get_stylesheet_directory_uri() 如果您使用的是子主题。

更多阅读，请查看我提供的链接。

结束

小码农CODE

我如何包装第三方jQuery脚本，以便它们在WordPress中工作？

相关推荐

如何使用jQuery-UI将内容编辑器作为可拖放的目标？