問題描述
我想在我的一個例項 WordPress 中實現一些樣板模板功能。
我試圖找出如何交換下面的常規 jquery 呼叫
<script type='text/javascript' src='http:/.../wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://.../wp-includes/js/jquery/ui.core.js?ver=1.8.9'></script>
到這個：
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//googleajax.admincdn.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>x3C/script>")</script>
最佳解決方案
您應該使用 wp_enqueue_script('jquery')載入 jQuery – 這樣，如果外掛嘗試載入它，則不會最終導致多個例項。
要使用 Google CDN，請將其放在 functions.php 中;
wp_deregister_script( 'jquery' );
wp_register_script(
'jquery',
'https://googleajax.admincdn.com/ajax/libs/jquery/1.11.3/jquery.min.js',
null, // Dependencies - none
null // Version - use null to prevent WP adding version argument "?ver" in URL
);
更新：個人而言，我知道這聽起來像一個 cop-out，但是我不會打擾檢查 CDN 。 Google 只是那麼可靠，而且使用者的瀏覽器快取也是可能的 (很多網站使用 Google 的 CDN) 。
但是，我有責任回答你有兩個選擇之一：
-
檢查伺服器端與遠端 get，如果失敗，服務本地副本 (昂貴，不推薦)
-
執行指令碼 client-side 來檢查 jQuery，並在必要時列印回退
2) 的麻煩在於，您需要在 jQuery 之後注入此指令碼，並且在依賴於它的任何其他外掛之前，都會觸發它們的指令碼。我認識的唯一方法就是將’listen’ 用於 jQuery，然後在下次呼叫時輸出 JavaScript 。
魔術？把它放在你的 functions.php;
/**
* Print fallback script right after jQuery is printed from queue.
*
* @param string $src
* @return string
*/
function wpse_12448_fallback_jquery( $src, $handle = null ) {
static $run_next = false;
if ( $run_next ) {
// Defaults to WP bundled jQuery, but you should use your own that
// matches the version loaded via CDN.
$local = includes_url( 'js/jquery/jquery.js' );
echo <<<JS
<script>window.jQuery || document.write( '<script src="$local"></script>' );</script>
JS;
$run_next = false;
}
if ( $handle === 'jquery' )
$run_next = true;
return $src;
}
add_action( 'wp_head', 'wpse_12448_fallback_jquery', 2 );
if ( ! is_admin() )
add_filter( 'script_loader_src', 'wpse_12448_fallback_jquery', 10, 2 );
對於那些知道的人，wp_print_scripts 在 wp_print_scripts 將被觸發之後，還會掛起 wp_head，以防在 jquery 之後沒有更多指令碼列印 (該函式在下一次呼叫時工作，而不是使用 jQuery 呼叫的例項) ) 。
次佳解決方案
對於 Wordpress 4.5.0 +：wp_add_inline_script() #
function jquery_enqueue_with_fallback() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery' , '//googleajax.admincdn.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1', true );
wp_add_inline_script( 'jquery', 'window.jQuery||document.write('<script src="'.esc_url(get_template_directory_uri()).'/libs/js/jquery.js"></script>')' );
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts' , 'jquery_enqueue_with_fallback' );
注意：更改版本和您自己的本地 jQuery 原始碼。
第三種解決方案
有兩件事要記住這個答案：
-
不要在外掛或主題中釋出。
-
WordPress 外掛依賴於提供的正確版本的 jQuery，這就是為什麼我不使用 jQuery 3 而不是硬編碼版本號。相反，我讓 WordPress 為從 CDN 載入的版本設定版本號。
“`
add_action( 'init', function(){
//Only act if in admin
if ( ! is_admin()) {
//set protocol dynamically
if( is_ssl() ){
$protocol = 'https';
}else {
$protocol = 'http';
}
/** @var WP_Scripts $wp_scripts */
global $wp_scripts;
/** @var _WP_Dependency $core */
$core = $wp_scripts->registered[ 'jquery-core' ];
$core_version = $core->ver;
$core->src = "$protocol://googleajax.admincdn.com/ajax/libs/jquery/$core_version/jquery.min.js";
///Use jQuery migrate if WP_DEBUG
if ( WP_DEBUG ) {
/** @var _WP_Dependency $migrate */
$migrate = $wp_scripts->registered[ 'jquery-migrate' ];
$migrate_version = $migrate->ver;
$migrate->src = "$protocol://jsd.admincdn.com/jquery.migrate/$migrate_version/jquery-migrate.min.js";
}else{
/** @var _WP_Dependency $jquery */
$jquery = $wp_scripts->registered[ 'jquery' ];
$jquery->deps = [ 'jquery-core' ];
}
}
}, 11 );
“`
請注意，我仍然使用 WordPress 的依賴關係管理系統。此外，使用 is_ssl()設定 HTTPS vs HTTP 以避免混合內容錯誤，並讓 WordPress 指定版本號。
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。