我正在尝试将此 jQuery 代码重用于 WordPress 短代码，但我无法让它工作。我检查了逃避问题，这些问题似乎还可以，但没有其他想法可能是错误的......
这是functions.phpWordPress中文件内的代码：
function flickr_collections($atts, $content=null) {
extract(shortcode_atts( array(
'user_id' => 'USER-ID',
'collection' => 'COLLECTION-ID',
'num' => '12',
'sort' => 'random',
'size' => 's',
'api_key' => 'API-KEY'
), $atts));
return '
<style type="text/css">
</style>
<div id="flickr-photos"></div>
<script type="text/javascript">
$(document).ready(function () {
var url = "http://api.flickr.com/services/rest/?&method=flickr.collections.getTree&collection_id=' . $collection . '&api_key=' . $api_key . '&user_id=' . $user_id . '&format=json&jsoncallback=?";
$.getJSON(url, function (data) {
$.each(data.collections.collection, function (cid, set) {
var collectionTitle = set.title;
$("#flickr-photos").append(\'<ul class="photoset"></ul>\');
$.each(this.set, function () {
var photosetId = this.id;
var photosetTitle = this.title;
var photosetDesc = this.description;
var photosUrl = "http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' . $api_key . '&photoset_id=\' + photosetId + \'&media=photos&format=json&jsoncallback=?&per_page=6";
$.getJSON(photosUrl, function (data) {
$.each(data.photoset.photo, function (pid, photo) {
var photoId = photo.id;
var photoTitle = photo.title;
var photoSecret = photo.secret;
var server = photo.server;
var farm = photo.farm;
var photo_url = "http://farm" + farm + ".static.flickr.com/" + server + "/" + photoId + "_" + photoSecret + "_q.jpg";
var photo_urlm = "http://farm" + farm + ".static.flickr.com/" + server + "/" + photoId + "_" + photoSecret + "_m.jpg";
$(".photoset").append(\'<li><a href="\' + photo_urlm + \'" title="\' + photoTitle + \'"><img src="\' + photo_url + \'" /></a></li>\');
});
});
});
});
});
});
</script>
';
}
add_shortcode('flickr', 'flickr_collections');
然后用[flickr]or调用短代码[flickr collection="COLLECTION-ID"]。
编辑：
我尝试了另一种方法，其中 jQuery 脚本在外部排队，参数通过函数传递给它wp_localize_script。但它仍然不起作用......
函数.php
function flickr_shortcode($atts, $content=null) {
wp_enqueue_script( 'flickr-shortcode', get_template_directory_uri() . '/js/flickr-shortcode.js', array( 'jquery' ), '20131105' );
extract(shortcode_atts( array(
'user_id' => 'USER_ID',
'api_key' => 'API_KEY',
'collection' => 'COLLECTION_ID',
'thumb_size' => 'q',
'pic_size' => 'm',
'num' => '12',
'sort' => 'random'
), $atts));
return '<div id="flickr-gallery"></div>';
wp_localize_script( 'flickr-shortcode', 'flickrParams', $atts );
}
add_shortcode('flickr', 'flickr_shortcode');
jQuery：
jQuery(document).ready(function($) {
var userId = flickrParams.user_id;
var apiKey = flickrParams.api_key;
var collectionId = flickrParams.collection;
var url = 'http://api.flickr.com/services/rest/?&method=flickr.collections.getTree&collection_id=' + collectionId + '&api_key=' + apiKey + '&user_id=' + userId + '&format=json&jsoncallback=?';
$.getJSON(url, function (data) {
$.each(data.collections.collection, function (cid, set) {
var collectionTitle = set.title;
$('#flickr-gallery').append('<ul id="flickr-collection"></ul>');
$.each(this.set, function () {
var photosetId = this.id;
var photosetTitle = this.title;
var photosetDesc = this.description;
var photosUrl = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=' + photosetId + '&media=photos&format=json&jsoncallback=?&per_page=6';
$.getJSON(photosUrl, function (data) {
$.each(data.photoset.photo, function (pid, photo) {
var photoId = photo.id;
var photoTitle = photo.title;
var photoSecret = photo.secret;
var server = photo.server;
var farm = photo.farm;
var thumbUrl = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoId + '_' + photoSecret + '_q.jpg';
var photoUrl = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoId + '_' + photoSecret + '_b.jpg';
$('#flickr-collection').append('<li><a href="' + photoUrl + '" rel="shadowbox" title="' + photoTitle + '"><img src="' + thumbUrl + '" /></a></li>');
});
});
});
});
});
});