如何在wordpress文章中添加js代码

微信公开课小程序热门讨论「如何在wordpress文章中添加js代码」最新回复-首先从网上下载出WordPress的插件Wpsyntax。在编辑文章时，使用HTML的编辑方式插入以下代码prelang=”LANGUAGE”line=”0″//“line为1时表示显示行号”/pre中间插入你的代码即可，LANGUAGE改为语言类型，例如php、java。line为0不显示行号，为1时显示
在制作wordpress主题猴子wordpress插件过程中，经常需要添加样式文件或者js脚本文件，由于大多数用户运行网站上多个插件，可能会加载各式各样的文件，容易引起冲突，所以wordpress系统为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。这篇文章中，主要介绍wordpress中添加Javascript文件与css文件的方法，对那些刚开始学习WordPress主题和插件的开发是特别有用的。　　错误方式　　wordpress中提供了wp_head钩子来帮助在页面的头部添加指定的头部消息，比如常见的关键词与描述，很多人也同样会使用这种方式来添加站点的外部样式文件与脚本文件，添加代码如下：?phpadd_action(wp_head,wpb_bad_script);functionwpb_bad_script(){echoscripttype=text/javascriptsrc=http://www.54ux.com/wp-content/themes/d-simple/js/sidenav.js/script;//添加js文件}?　　这种方式虽然使用简单，但是非常不推荐使用，这种加载方式容易造成wordpress脚本的冲突。　　wordpress脚本排队系统　　1、介绍　　wordpress在全球拥有强大的开发社群，很多人都非常积极的参与到wordpress的主题与插件的开发当中，并且可以免费使用，为了防止各个开发者开发的插件在使用过程总出现脚本冲突的问题，wordpress提供了一个非常强大的脚本加载函数wp_enqueue_script，通过这个函数，可以告诉wordpress在哪加载脚本，脚本依赖哪些框架，而且该函数在利用内置的Javascript库时，可以避免多次加载同一个脚本。这有助于减少页面加载时间，以及避免与其他主题和插件冲突。　　2、使用实例　　wordpress正确加载脚本的使用很简单，代码如下：?phpfunctionwpb_adding_scripts(){wp_register_script(my_amazing_script,plugins_url(amazing_script.js,__FILE__),array(jquery),1.1,true);wp_enqueue_script(my_amazing_script);}add_action(wp_enqueue_scripts,wpb_adding_scripts);?　　可以将以上代码放入你的插件文件中或者你主题的functions.php文件。　　说明：　　实例中首先通过函数wp_register_script(),这个函数接收5个参数：　　$handle　　(string)(必须)脚本名称.名称必须唯一在之后函数wp_enqueue_script()会使用到该名称.　　Default:None　　$src　　(string)(必须)脚本路径，可以使用绝对路径。　　Default:None　　$deps　　(array)(可选)脚本依赖包，依赖包会在脚本加载之前预先加载。　　Default:array()　　$ver　　(string)(可选)脚本版本控制。　　Default:false　　$in_footer　　(boolean)(可选)定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。　　Default:false　　当使用wp_register_script()函数注册脚本文件后，就可以使用函数wp_enqueue_script()函数来加载该注册的脚本文件。　　也许有人会问为什么不直接加载脚本文件，而是先注册后加载，这不是多此一举吗。其实这主要是为了站点其他开发者在其他插件或者主题总方便引用核心脚本文件。　　wordpress如何加载CSS样式文件　　wordpresscss样式文件的加载与以上介绍的脚本文件加载方式是一样的，如下实例：?phpfunctionwpb_adding_styles(){wp_register_script(my_stylesheet,plugins_url(my-stylesheet.css,__FILE__));wp_enqueue_script(my_stylesheet);}add_action(wp_enqueue_scripts,wpb_adding_styles);?　　以上实例用了wp_register_script钩子来加载样式文件。　　实例中使用了plugins_url()来获取样式文件的路径，这个一般在插件开发过程中使用的居多，如果主题中开发使用到wp_register_script()函数则可以使用get_template_directory_uri()来获取样式文件路径，如果是子主题中使用，则可以使用函数get_stylesheet_directory_uri()来获取路径，实例如下：?phpfunctionwpb_adding_scripts(){wp_register_script(my_amazing_script,plugins_url(amazing_script.js,__FILE__),array(jquery),1.1,true);wp_enqueue_script(my_amazing_script);}add_action(wp_enqueue_scripts,wpb_adding_scripts);? 更多有关「如何在wordpress文章中添加js代码」的疑问请扫码关注微信公开课+小程序！了解更多