我在尝试集成Dropbox的drop in chooser API 我正在写的插件。
API文档指示您放置以下内容script
文件顶部的标记:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>
一切都很好,当我直接将其粘贴到管理部分中调用的页面时,它实际上是有效的。但是,我想使用wp\\u register\\u script()、wp\\u enqueue\\u script()和wp\\u localize\\u script()的一些变体来传递必要的id和数据应用程序密钥。
我尝试了几种不同的方法:
add_action(\'admin_enqueue_scripts\', \'add_dropbox_stuff\');
function add_dropbox_js() {
wp_register_script(\'dropbox.js\',\'https://www.dropbox.com/static/api/1/dropins.js\');
wp_enqueue_script(\'dropbox.js\');
wp_localize_script(\'dropbox.js\',\'dropboxdata\',array(\'id\'=>"dropboxjs",\'data-app-key\'=>"MY_APP_KEY"));
}
以及:
add_action(\'admin_enqueue_scripts\', \'add_dropbox_stuff\');
function add_dropbox_stuff() {
wp_register_script(\'dropbox.js\',\'https://www.dropbox.com/static/api/1/dropins.js\');
wp_enqueue_script(\'dropbox.js\');
wp_localize_script(\'dropbox.js\',\'dropboxdata\',array(array(\'id\'=>"dropboxjs"),array(\'data-app-key\'=>"MY_APP_KEY")));
}
在我的代码中,MY\\u APP\\u密钥将替换为相应的应用程序密钥。如有任何指示,我将不胜感激。谢谢
编辑:也尝试使用一些jquery进行编辑,但没有效果。在文档加载和文档就绪时进行了尝试。我得到一个{“error”:“Invalid app\\u key”}返回。
$(\'script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]\').attr(\'id\',\'dropboxjs\').attr(\'data-multiselect\',\'true\').attr(\'data-app-key\',\'MY_APP_KEY\');
最合适的回答,由SO网友:Bainternet 整理而成
您可以尝试使用script_loader_src
过滤器挂钩,例如:
add_filter(\'script_loader_src\',\'add_id_to_script\',10,2);
function add_id_to_script($src, $handle){
if ($handle != \'dropbox.js\')
return $src;
return $src."\' id=\'dropboxjs\' data-app-key=\'MY_APP_KEY";
}
Update
我自己刚刚发现src是通过esc\\u url转义的,所以再仔细看一下,我发现
clean_url
可用于返回id和应用程序密钥数据值的筛选器:
add_filter(\'clean_url\',\'unclean_url\',10,3);
function unclean_url( $good_protocol_url, $original_url, $_context){
if (false !== strpos($original_url, \'data-app-key\')){
remove_filter(\'clean_url\',\'unclean_url\',10,3);
$url_parts = parse_url($good_protocol_url);
return $url_parts[\'scheme\'] . \'://\' . $url_parts[\'host\'] . $url_parts[\'path\'] . "\' id=\'dropboxjs\' data-app-key=\'MY_APP_KEY";
}
return $good_protocol_url;
}
SO网友:wpNewby
感谢所有的帖子,他们真的很有帮助。我确实推出了自己的版本,为其提供了一些结构,使其更易于阅读和更新。正常情况下使用排队,对CSS文件使用脚本,并在末尾使用假标记,以便在顶部加载。虽然它可能会被简化一些。
add_filter(\'script_loader_tag\', \'add_attributes_to_script\', 10, 3);
function add_attributes_to_script( $tag, $handle, $src ) {
$scripts_to_load = array (
(0) => Array
(
(\'name\') => \'bootstrap_min_css\',
(\'type\') => \'<link rel="stylesheet" href="\',
(\'integrity\') => \'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB\',
(\'close\') => \' type="text/css" media="all">\'
),
(1) => Array
(
(\'name\') => \'popper_min_js\',
(\'type\') => \'<script type="text/javascript" src="\',
(\'integrity\') => \'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49\',
(\'close\') => \'></script>\'
),
(2) => Array
(
(\'name\') => \'bootstrap_min_js\',
(\'type\') => \'<script type="text/javascript" src="\',
(\'integrity\') => \'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T\',
(\'close\') => \'></script>\'
)
);
$key = array_search($handle, array_column($scripts_to_load, \'name\'));
if ( FALSE !== $key){
$tag = $scripts_to_load[$key][\'type\'] . esc_url($src) . \'" integrity="\' . $scripts_to_load[$key][\'integrity\'] .\'" crossorigin="anonymous"\' . $scripts_to_load[$key][\'close\'] . "\\n";
}
return $tag;
}