如果要确保数据绕过任何前端缓存,应该使用AJAX请求数据并将其打印在页面上。
我建议保留您的短代码,但使用AJAX进行更新,但创建REST API端点。为此,您需要将API请求抽象为自己的函数,然后让shortcode和API响应都使用该函数:
/**
* Function for retrieving the count from the API.
*/
function wpse_330377_get_count() {
$request = wp_remote_get( \'https://myapi.com/count\' );
if( is_wp_error( $request ) ) {
return false;
}
$body = json_decode( wp_remote_retrieve_body( $request ) );
$statistic = $body->payload->count;
return $statistic;
}
/**
* Shortcode for outputting the count.
*/
function wpse_330377_count_shortcode() {
$statistic = wpse_330377_get_count();
return \'<div id="value" class="number">\'. $statistic . \'</div>\';
}
add_shortcode( \'real_time_count\', \'wpse_330377_count_shortcode\' );
/**
* REST API endpoint for getting the count.
*/
function wpse_330377_register_rest_route() {
register_rest_route(
\'wpse_330377\',
\'count\',
[
\'method\' => \'GET\',
\'callback\' => \'wpse_330377_get_count\'
]
);
}
add_action( \'rest_api_init\', \'wpse_330377_register_rest_route\' );
现在可以使用JavaScript向新的API端点发送请求,
/wp-json/wpse_330377/count
, 这将为我们提供新的值,我们可以使用它来更新
#value
部门。
在主题或插件中创建如下JavaScript文件:
jQuery.get(
{
url: wpse330377.apiUrl,
success: function( data ) {
jQuery( \'#value\' ).html( data );
}
}
);
然后将其排队并传递正确的URL:
function wpse_330377_enqueue_script() {
wp_enqueue_script( \'wpse_330377_count\', \'URL TO SCRIPT GOES HERE\', [ \'jquery\' ], null, true );
wp_localize_script(
\'wpse_330377_count\',
\'wpse330377\',
[
\'apiUrl\' => rest_url( \'wpse_330377/count\' ),
]
);
}
add_action( \'wp_enqueue_scripts\', \'wpse_330377_enqueue_script\' );
只需更换
URL TO SCRIPT GOES HERE
使用实际URL。使用
get_theme_file_uri()
获取主题中文件的URL,或
plugins_url()
如果它在插件中。
PS:注意,我使用了wpse_330377
在许多地方作为前缀和命名空间。您应该使用这样的前缀来防止与WordPress和其他主题或插件发生冲突。理想情况下,它将是特定于您的项目的东西。