lurie. 我会在前端使用香草Javascript。这样,就不需要使任何服务器缓存无效。这是一个untested 解决方案
Javascript文件——在主Javascript文件中使用ES6功能和forEach polyfill
:
\'use strict\';
/**
* @summary Clones social buttons and insert them elsewhere
*
* Clones social buttons and insert them elsewhere in the DOM after the window.load event.
* Can be used to clone anything else, in fact.
*
* @listens window.load
*
* @param string $sourceSelector a CSS3 element selector for the element to be cloned
* @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
* @returns voide
*/
function cloneSocialButtonsES6( sourceSelector = \'\', wrappersSelectors = [] ) {
// get the source element
var originalButtons = document.querySelector( sourceSelector );
// if wrappersSelectors is empty or not-provided, bail and logs to console
if ( wrappersSelectors.length === 0) {
console.error(\'wrappersSelectors must be a non-empty array of CSS3 selectors\');
return;
}
// for each item in wrappersSelectors array, clones the source element
wrappersSelectors.forEach( function( wrapper ){
// get the wrapper element in the DOM
var wrapper = document.querySelector( wrapper );
// for each wrapper in the array, clones the source element and appends it to wrapper
var clone = originalButtons.cloneNode( true );
wrapper.appendChild(clone);
});
}
// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
window.addEventListener(\'load\', cloneSocialButtons, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", cloneSocialButtons);
}
else {
window.onload = cloneSocialButtons;
};
此版本使用了某些ES6特性,如数组的forEach方法和函数参数的默认值。它更干净,但对浏览器的支持更少。
我建议您使用Polyfill之类的服务。或者使用克里斯·费迪南迪的阵法。按照his中的建议,forEach polyfillPocket Guides 您可以在单独的文件中使用可能需要的所有实用程序和多边形填充。
/**
* Array.prototype.forEach() polyfill
* @author Chris Ferdinandi
* @license MIT
*/
if (window.Array && !Array.prototype.forEach) {
Array.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}
Javascript文件-没有forEach polyfill,浏览器支持更好,但更详细;
\'use strict\';
/**
* @summary Clones social buttons and insert them elsewhere
*
* Clones social buttons and insert them elsewhere in the DOM after the window.load event.
* Can be used to clone anything else, in fact.
*
* @listens window.load
*
* @param string $sourceSelector a CSS3 element selector for the element to be cloned
* @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
* @returns voide
*/
function cloneSocialButtons( sourceSelector, wrappersSelectors ) {
sourceSelector = sourceSelector || \'\';
wrappersSelectors = wrappersSelectors || [];
// get the source element
var originalButtons = document.querySelector( sourceSelector );
// if wrappersSelectors is empty or not-provided, bail and logs to console
var wrappersLength = wrappersSelectors.length;
if ( wrappersLength === 0) {
console.error(\'wrappersSelectors must be a non-empty array of CSS3 selectors\');
return;
}
// for each item in wrappersSelectors array, clones the source element
for (var i = 0; i < wrappersLength; i++) {
// get the wrapper element in the DOM
var wrapper = document.querySelector( wrappersSelectors[i] );
// for each wrapper in the array, clones the source element and appends it to wrapper
var clone = originalButtons.cloneNode( true );
wrapper.appendChild(clone);
}
}
// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
window.addEventListener(\'load\', cloneSocialButtons, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", cloneSocialButtons);
}
else {
window.onload = cloneSocialButtons;
};
PHP函数放置在函数中。php或特定于站点的插件。
function wpse_285324_social_scripts() {
wp_register_script( \'wpse_285324_social_buttons_cloner\', $path_to_the_javascript_script, array(\'\'), \'0.1.0\', true);
wp_register_script( \'wpse_285324_social_buttons_cloner\');
};
add_action(\'wp_enqueue_scripts\', \'wpse_285324_social_scripts\');
重要提示我认为这是你的一个很好的起点。
如果有帮助,请告诉我。