在创建了一个获取google工作表数据的短代码，然后使用JQuery插件（numscroll）工作，使数字在显示时向上滚动到某个数字之后，我很难将这两个解决方案组合成一个“自定义HTML块”。

这就是我想做的：

<h2 class="has-text-align-center"><strong>

<span class="numscroller" data-min="1" data-max=[get_sheet_value location="\'Summary Page\'!C3"] data-delay="5" data-increment="10">0</span>

</strong></h2>

由于某种原因，会导致默认的“data min”值(1) 正在显示（可能是由于获得结果所需的时间？）而不是正确的值。

我也尝试过“do\\u shortcode”，但这并没有改变结果。

<h2 class="has-text-align-center"><strong>

<span class="numscroller" data-min="1" data-max=do_shortcode(\'[get_sheet_value location="\'Summary Page\'!C3"]\') data-delay="5" data-increment="10">0</span>

</strong></h2>

我的尝试由两部分组成，第一部分（简称）：

[get_sheet_value location="\'Summary Page\'!C3"]

调用此函数以获取单个单元格的值：

/**
 * Aquiring google sheet data (David Stockdale)
 * Shortcode should be something like this: [get_sheet_value location="\'Summary Page\'!C3"]
 */
function sheet_value_shortcode($atts) {
    $API = \'XXX\';
    $google_spreadsheet_ID = \'XXX\';
    $api_key = esc_attr( $API);

    $location = $atts[\'location\'];
    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";  
    $cell_response = $get_cell -> get( $cell_url);
    $json_body = json_decode($cell_response[\'body\'],true);  
    $cell_value = $json_body[\'values\'][0][0];
    return $cell_value;
}

add_shortcode(\'get_sheet_value\', \'sheet_value_shortcode\');

第二部分（在“自定义HTML块”中工作）：

<span class="numscroller" data-min="1" data-max="100" data-delay="5" data-increment="10">0</span>

添加脚本后：

/**
 * Adds script (David Stockdale).
 */
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
/**
 * Adds script for NumScroller (David Stockdale).
 */
function add_my_script() {
    wp_enqueue_script(
        \'numscroller-1.0\', // name your script so that you can attach other scripts and de-register, etc.
        get_stylesheet_directory_uri() . 
        \'/lib/numscroller-1.0.js\', // this is the location of your script file.
        array( \'jquery\' ), // this array lists the scripts upon which your script depends
        \'\', //Not needed with Beans, Required with Genisis.
        true //Not needed with Beans, Required with Genisis.
    );
}

调用此JQuery插件：

/**
* jQuery scroroller Plugin 1.0
* 
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
jQuery(document).ready((function($){
    $(window).on("load",function(){
        $(document).scrollzipInit();
        $(document).rollerInit();
    });
    $(window).on("load scroll resize", function(){
        $(\'.numscroller\').scrollzip({
            showFunction    :   function() {
                                    numberRoller($(this).attr(\'data-slno\'));
                                },
            wholeVisible    :     false,
        });
    });
    $.fn.scrollzipInit=function(){
        $(\'body\').prepend("<div style=\'position:fixed;top:0px;left:0px;width:0;height:0;\' id=\'scrollzipPoint\'></div>" );
    };
    $.fn.rollerInit=function(){
        var i=0;
        $(\'.numscroller\').each(function() {
            i++;
           $(this).attr(\'data-slno\',i); 
           $(this).addClass("roller-title-number-"+i);
        });        
    };
    $.fn.scrollzip = function(options){
        var settings = $.extend({
            showFunction    : null,
            hideFunction    : null,
            showShift       : 0,
            wholeVisible    : false,
            hideShift       : 0,
        }, options);
        return this.each(function(i,obj){
            $(this).addClass(\'scrollzip\');
            if ( $.isFunction( settings.showFunction ) ){
                if(
                    !$(this).hasClass(\'isShown\')&&
                    ($(window).outerHeight()+$(\'#scrollzipPoint\').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
                    ($(\'#scrollzipPoint\').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
                ){
                    $(this).addClass(\'isShown\');
                    settings.showFunction.call( this );
                }
            }
            if ( $.isFunction( settings.hideFunction ) ){
                if(
                    $(this).hasClass(\'isShown\')&&
                    (($(window).outerHeight()+$(\'#scrollzipPoint\').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
                    ($(\'#scrollzipPoint\').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
                ){
                    $(this).removeClass(\'isShown\');
                    settings.hideFunction.call( this );
                }
            }
            return this;
        });
    };
    function numberRoller(slno){
            var min=$(\'.roller-title-number-\'+slno).attr(\'data-min\');
            var max=$(\'.roller-title-number-\'+slno).attr(\'data-max\');
            var timediff=$(\'.roller-title-number-\'+slno).attr(\'data-delay\');
            var increment=$(\'.roller-title-number-\'+slno).attr(\'data-increment\');
            var numdiff=max-min;
            var timeout=(timediff*1000)/numdiff;
            //if(numinc<10){
                //increment=Math.floor((timediff*1000)/10);
            //}//alert(increment);
            numberRoll(slno,min,max,increment,timeout);

    }
    function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
        if(min<=max){
            $(\'.roller-title-number-\'+slno).html(min);
            min=parseInt(min)+parseInt(increment);
            setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
        }else{
            $(\'.roller-title-number-\'+slno).html(max);
        }
    }
}));

这两种解决方案都是独立工作的，我如何将它们结合起来？

如果解决方案很明显，或者应该发布到其他地方，也很抱歉，但我大约2周前才开始使用WordPress，我仍在掌握诀窍。