README

一个简单的WordPress类，用于包含脚本和样式，由 WP_Register 修改而来

要求

• PHP >=7.2
• Composer
• WordPress >=5.4

安装

使用Composer安装

在终端中运行以下命令以使用 Composer 安装。

$ composer require oberonlai/wp-asset

WP Option PSR-4 自动加载，并可以使用Composer的自动加载器。以下是基本入门示例，但您的设置可能因使用Composer的方式而有所不同。

require __DIR__ . '/vendor/autoload.php';

use ODS\Asset;

Asset::addScript();

请参阅Composer的 基本使用 指南，了解有关使用Composer和自动加载的详细信息。

基本用法

以下是enqueue JavaScript和CSS的基本示例。

require __DIR__ . '/vendor/autoload.php';

use ODS\Asset;

add_action(
	'init',
	function() {
		Asset::addScript(
			array(
				'name'    => 'my_script',
				'url'     => YOUR_PLUGIN_URL . 'assets/js/script.js',
				'deps'    => array( 'jquery' ),
				'version' => YOUR_PLUGIN_VERSION,
				'footer'  => true,
				'ajax'    => false,
				'admin'   => false,
				'params'  => array()
			)
		)

		Asset::addStyle(
			array(
				'name'    => 'my_style',
				'url'     => YOUR_PLUGIN_URL . 'assets/css/style.css',
				'version' => YOUR_PLUGIN_VERSION,
				'deps'    => array(),
			)
		)
	}
);

在init钩子或WordPress API中调用对象时不起作用。

可用属性

注册Ajax JavaScript

当将ajax设置为true时，WP-Asset将帮助您自动生成变量ajax_url和ajax_nonce。

Asset::addScript(
	array(
		'name'    => 'my_ajax',
		'url'     => YOUR_PLUGIN_URL . 'assets/js/ajax.js',
		'deps'    => array( 'jquery' ),
		'version' => YOUR_PLUGIN_VERSION,
		'footer'  => true,
		'ajax'    => true,
		'params'  => array(
			'data1'  => 'my_data_1',
			'data2'  => 'my_data_2',
		)
	)
)

添加上述脚本后，您可以在脚本之前看到JS变量。

<script id="my_ajax-js-extra">
var my_ajax = {"data1":"my_data_1","data2":"my_data_2","ajax_url":"https:\/\/local.test\/wp-admin\/admin-ajax.php?action=my_ajax","ajax_nonce":"fead4137e4"};
</script>

您可以直接在脚本中使用ajax_url和ajax_nonce。

jQuery(function($){
    $(document).ready(function(){ 
        $('#btn').on('click',function(){
			var data = {
				action: "my_ajax",
				nonce: my_ajax.ajax_nonce,
			};
			$.ajax({
				url: my_ajax.ajax_url,
				data: data,
				type: 'POST',
				dataType: "json",
				success: function(data){
					console.log(data);
				},
				error: function(data){
					console.log(data);
				}
			})
        })
    }) 
})