当我的网站加载单个帖子时,一些带有相关统计信息的Facebook按钮(共享、保存等)会显示在三个不同的位置:帖子的顶部和底部,以及网站的侧边栏。我认为,这会减缓网站负载,所以,问题是how to load these buttons and the associated statistics only once (在变量中),然后在多个位置显示它们?
我知道W3 Total Cache和其他类似的插件,但是其他方式呢?可能需要一些PHP代码?
当我的网站加载单个帖子时,一些带有相关统计信息的Facebook按钮(共享、保存等)会显示在三个不同的位置:帖子的顶部和底部,以及网站的侧边栏。我认为,这会减缓网站负载,所以,问题是how to load these buttons and the associated statistics only once (在变量中),然后在多个位置显示它们?
我知道W3 Total Cache和其他类似的插件,但是其他方式呢?可能需要一些PHP代码?
lurie. 我会在前端使用香草Javascript。这样,就不需要使任何服务器缓存无效。这是一个untested 解决方案
\'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\');
重要提示我认为这是你的一个很好的起点。如果有帮助,请告诉我。
我目前将php更新/升级到5.5.11,并希望使用它附带的opcache我启用了缓存,并为php添加了一些设置。ini公司zend_extension=/usr/lib/php5/20131313/opcache.so opcache.memory_consumption=128 opcache.interned_strings_buffer=8 opcache.max_accelerated_files=4000 opcache.revalidate_freq=60&#x