Javascript Flickr集合的WordPress快捷码函数返回'；未定义'；错误_Javascript_Php_Jquery_Wordpress

Javascript Flickr集合的WordPress快捷码函数返回'；未定义'；错误

javascript php jquery wordpress

Javascript Flickr集合的WordPress快捷码函数返回'；未定义'；错误,javascript,php,jquery,wordpress,Javascript,Php,Jquery,Wordpress,我正在尝试重新使用WordPress短代码，但我无法让它工作。我检查了逃避问题，这些问题看起来还可以，但没有想法，还有什么可能是错误的以下是WordPress中functions.php文件中的代码： function flickr_collections($atts, $content=null) { extract(shortcode_atts( array( 'user_id' => 'USER-ID', 'collection' =

我正在尝试重新使用WordPress短代码，但我无法让它工作。我检查了逃避问题，这些问题看起来还可以，但没有想法，还有什么可能是错误的

以下是WordPress中

functions.php

文件中的代码：

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');

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>');
                    });
                });
            });
        });
    });

});

jQuery（文档）.ready（函数（$）{
var userId=flickrParams.user\u id；
var apiKey=flickrParams.api_key；
var collectionId=flickrParams.collection；
var url='1〕http://api.flickr.com/services/rest/?&method=flickr.collections.getTree&collection_id=“+collectionId+”&api_-key=”+apiKey+”&user_-id=“+userId+”&format=json&jsoncallback=？”；
$.getJSON（url、函数（数据）{
$.each（data.collections.collection，函数（cid，set）{
var collectionTitle=set.title；
$（“#flickr gallery”）.append（“”）；
$.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，函数（数据）{
$。每个（data.photoset.photo，函数（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+'.\u q.jpg'；
var photoUrlhttp://farm'+farm+'.static.flickr.com/'+server+'/'+photoId+''u'+photoSecret+'ub.jpg'；
$（“#flickr collection”）.append（“”）；
});
});
});
});
});
});

解决了它！

shortcode\u atts（）

extract（）

函数未正确使用，导致参数未正确传递到jQuery脚本。而且

return

被下移了一点。正确的代码：

functions.php：

function flickr_shortcode( $atts, $content=null ) {

    wp_enqueue_script( 'flickr-shortcode', get_template_directory_uri() . '/js/flickr-shortcode.js', array( 'jquery' ), '20131105', true );

    $params = shortcode_atts( array(
        'user_id' => 'USER_ID',
        'api_key' => 'API_KEY',
        'collection_id' => '', /* REQUIRED! */
        'thumb_size' => 'q',
        'pic_size' => 'b',
        'num' => '3'
    ), $atts );
    extract( $params );
    wp_localize_script( 'flickr-shortcode', 'flickrParams', $params );

    return '<div id="flickr-gallery"></div>';
}  
add_shortcode( 'flickr', 'flickr_shortcode' );

jQuery(document).ready(function($) {

    var userId = flickrParams.user_id;
    var apiKey = flickrParams.api_key;
    var collectionId = flickrParams.collection_id;
    var thumbSize = flickrParams.thumb_size;
    var picSize = flickrParams.pic_size;
    var numPerPhotoset = flickrParams.num;

    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('<h2><a href="http://www.flickr.com/photos/' + userId + '/collections/' + collectionId + '/" title="Go to Flickr Gallery Page" target="_blank">' + collectionTitle + ' Gallery</a></h2><ul></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=' + numPerPhotoset;

                $.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 + '_' + thumbSize + '.jpg';
                        var photoUrl = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoId + '_' + photoSecret + '_' + picSize + '.jpg';

                        $('#flickr-gallery ul').append('<li><a href="' + photoUrl + '" title="' + photoTitle + '"><img src="' + thumbUrl + '" /></a></li>');

                    });
                });
            });
        });
    });

});

#flickr-gallery {
    margin: 20px 0;
    background: #eee;
    overflow: hidden;
}

#flickr-gallery ul {
    margin: -3px;
    padding: 0;
    list-style: none;
    clear: both;
}

#flickr-gallery ul li {
    float: left;
    max-width: 31%;
    max-width: -webkit-calc(33.333% - 6px);
    max-width:         calc(33.333% - 6px);
    margin: 3px;
}

#flickr-gallery ul li a {
    display: block;
    border: 4px solid white;
}

#flickr-gallery ul li a:hover {
    border-color: #993c0b;
}

修改以上内容以满足您的需要

WordPress中的用法：

[flickr collection_id="XXX"]
[flickr collection_id="XXX" num="1"]
[flickr collection_id="XXX" thumb_size="m" num="4"]

等等。

您的浏览器控制台中是否有任何错误？是的，它说“TypeError:“undefined”不是一个函数（计算“$（文档）”）。谢谢。您是否在页面上包含Jquery库？默认情况下，Jquery包含在WordPress中。

[flickr collection_id="XXX"]
[flickr collection_id="XXX" num="1"]
[flickr collection_id="XXX" thumb_size="m" num="4"]