免外掛使用 Google jQuery CDN

這篇文章最主要是因為 muki 這位 WP 正妹的網站換了一個新的佈景主題。
而小弟我無聊的在他的佈景主題中,進行雞蛋裡挑骨頭的動作,發現了她的佈景主題會有二次引入 jQuery 的現象。

而二次引入原因是她在寫佈景主題的時候,因為需要使用到 jQuery 而在主題中直接的加入引用指令。
而她所使用的外掛中也有需要使用 jQuery 的,所以利用 WP 內建的 API 進行了 jQuery 的引入,所以才會發生二次引入的現象。
這時需要一些修正了,讓佈景主題也採用 WP API 的方式採入 jQuery 。
不過問題這麼簡單就不會想要寫一篇文章啦!還有需要轉換成使用 CDN 以節省流量。

廢話不多說啦!
要修正這些問題需要有幾個步驟!

首先讓我們將 jQuery 的網址轉向 Google CDN 的網址吧!
開啟你的佈景主題中的 functions.php 檔案,然後加入這一段程式碼

add_action('init', 'wp_jquery_cdn_init');
function wp_jquery_cdn_init() {
	if( !is_admin() ) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, '1.7.1');
	}
}

接下來,就是為你的佈景主題引用 jQuery 進來。
同樣是在 functions.php 檔案中加入以下程式碼

add_action('init', 'need_use_jquery');
function need_use_jquery() {
	if( !is_admin() ) {
		wp_enqueue_script('jquery');
	}
}

到此我就滿意了嗎?當然不是啦!那還剩下什麼東西要處理呢?

要教學當然一次搞定, jQuery UI 也順便轉向給 Google CDN 處理吧,都不要來浪費我寶貴的流量。
繼續在剛剛開啟的 functions.php 檔案中加入以下的程式碼

add_action('init', 'wp_jqueryui_cdn_init');
function wp_jqueryui_cdn_init() {
	if( !is_admin() ) {
		wp_register_script('jquery-ui-all', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', false, '1.8.16');
		wp_deregister_script('jquery-ui-core');
		wp_register_script('jquery-ui-core', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-core');
		wp_register_script('jquery-effects-core', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-blind');
		wp_register_script('jquery-effects-blind', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-bounce');
		wp_register_script('jquery-effects-bounce', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-clip');
		wp_register_script('jquery-effects-clip', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-drop');
		wp_register_script('jquery-effects-drop', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-explode');
		wp_register_script('jquery-effects-explode', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-fade');
		wp_register_script('jquery-effects-fade', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-fold');
		wp_register_script('jquery-effects-fold', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-highlight');
		wp_register_script('jquery-effects-highlight', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-pulsate');
		wp_register_script('jquery-effects-pulsate', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-scale');
		wp_register_script('jquery-effects-scale', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-shake');
		wp_register_script('jquery-effects-shake', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-slide');
		wp_register_script('jquery-effects-slide', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-effects-transfer');
		wp_register_script('jquery-effects-transfer', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-accordion');
		wp_register_script('jquery-ui-accordion', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-autocomplete');
		wp_register_script('jquery-ui-autocomplete', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-button');
		wp_register_script('jquery-ui-button', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-datepicker');
		wp_register_script('jquery-ui-datepicker', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-dialog');
		wp_register_script('jquery-ui-dialog', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-draggable');
		wp_register_script('jquery-ui-draggable', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-droppable');
		wp_register_script('jquery-ui-droppable', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-mouse');
		wp_register_script('jquery-ui-mouse', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-position');
		wp_register_script('jquery-ui-position', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-progressbar');
		wp_register_script('jquery-ui-progressbar', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-resizable');
		wp_register_script('jquery-ui-resizable', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-selectable');
		wp_register_script('jquery-ui-selectable', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-slider');
		wp_register_script('jquery-ui-slider', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-sortable');
		wp_register_script('jquery-ui-sortable', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-tabs');
		wp_register_script('jquery-ui-tabs', false, array('jquery-ui-all'));
		wp_deregister_script('jquery-ui-widget');
		wp_register_script('jquery-ui-widget', false, array('jquery-ui-all'));
	}
}

恭喜你完成了所有需要的修正,請記得存檔。同時將檔案上傳到 伺服器 中讓修改發生實際的作用。

在這些修改與引用的動作之中,都只有針對前台進行修改,後台的部分完全採用 WP 本身提供的 jQuery 與 jQuery UI 檔案。
因為如果讓後台也採用這些修正,會發生一些小小的問題,詳細原因並沒有研究。

至此,感謝各位的收看!

讚~
來簽到~

感謝簽到!~
歡迎服用!~

richer:
請教你對Google Rich Snippets熟悉嗎?

你提起之前我沒有聽過
剛剛查了一下,大致上知道是什麼樣的東西。
不過相關問題就先不要問我吧,因為我也不清楚!~

當然不是廢話啦!謝謝分享!!!

廢話是我很愛讚文章中打一些不相關的東西進去,對於教學文來說啦~

請問將上方的代碼都加入 functions.php之後會造成html5shiv.min.js無法正常運作要如何處理?
因為開啟相容模式在IE6的狀態下html5shiv.min.js無法運作導致dynamic-to-top與FB側邊滑動都消失,
謝謝。