尝试解决google造成wordpress博客站打开缓慢的问题(三)
尝试解决google造成wordpress博客站打开缓慢的问题（一）
尝试解决google造成wordpress博客站打开缓慢的问题(二)
在尝试解决google造成wordpress博客站打开缓慢的问题(二)中发现了ribbon主题在chrome与IE中侧边栏显示不正常。这个问题还未解决，我又发现了新的问题：在FireFox浏览器中打开网站或浏览文章时速度挺快的，浏览器状态栏也不会显示加载ajax.googleapis.com，但是只要在小站内执行“刷新”动作后，就开始加载ajax.googleapis.com，加载后(应该是没有加载成功)侧边栏就成了摆设。
侧边栏乱了
我在本地WAMPSERVER上验证了这两个问题点，侧边栏同样成为摆设。所以可以断定，这两个问题点不是我改代码改出来的，似乎都是因为加载ajax.googleapis.com未成功而造成的；而同为MyThemeShop出品的与ribbon主题风格十分接近的主题point在各浏览器中表现均正常。
基于以上线索，作为web代码菜鸟的我决定按照以下顺序来尝试解决这两个问题：
1. point主题代码中是否不需要加载ajax.googleapis.com？
我猜中了，搜遍point主题代码，未见有加载ajax.googleapis.com。
point中仅加载了fonts.googleapis，未加载ajax.googleapis
2. 那么point主题中用什么方式来替代ribbon中的ajax.googleapis.com的功能呢？
在ribbon中加载ajax.googleapis.com的文件是functions.php，其所在函数为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function mts_add_scripts() { $options = get_option('ribbon'); global $data; //get theme options //replace jQuery with Google hosted version wp_deregister_script('jquery'); wp_register_script('jquery', ("//ajax.useso.com/ajax/libs/jquery/1.8.3/jquery.min.js"), false, '1.7.1'); wp_enqueue_script('jquery'); //replace jQuery UI with Google hosted version wp_deregister_script('jquery-ui'); wp_register_script('jquery-ui', ("//ajax.useso.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"), false, '1.8.16'); wp_enqueue_script('jquery-ui'); // Site wide js wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/modernizr.min.js'); wp_enqueue_script('customscript', get_template_directory_uri() . '/js/customscript.js'); } |
point主题中对应的mts_add_scripts()函数为：
|
1 2 3 4 5 6 7 8 9 10 11 |
function mts_add_scripts() { $mts_options = get_option('point'); global $data; //get theme options wp_enqueue_script('jquery'); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } // Site wide js wp_enqueue_script('modernizr', get_stylesheet_directory_uri() . '/js/modernizr.min.js'); wp_enqueue_script('customscript', get_stylesheet_directory_uri() . '/js/customscript.js'); } |
对比上述两段代码后，将ribbon相应函数中加载ajax.googleapis.com的部分注释，并且将其中两处get_template_directory_uri()替换为get_stylesheet_directory_uri()，修改后的mts_add_scripts()函数如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function mts_add_scripts() { $options = get_option('ribbon'); global $data; //get theme options //replace jQuery with Google hosted version //wp_deregister_script('jquery'); //wp_register_script('jquery', ("//ajax.useso.com/ajax/libs/jquery/1.8.3/jquery.min.js"), false, '1.7.1'); //wp_enqueue_script('jquery'); //replace jQuery UI with Google hosted version //wp_deregister_script('jquery-ui'); //wp_register_script('jquery-ui', ("//ajax.useso.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"), false, '1.8.16'); //wp_enqueue_script('jquery-ui'); // Site wide js //wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/modernizr.min.js'); //wp_enqueue_script('customscript', get_template_directory_uri() . '/js/customscript.js'); wp_enqueue_script('modernizr', get_stylesheet_directory_uri() . '/js/modernizr.min.js'); wp_enqueue_script('customscript', get_stylesheet_directory_uri() . '/js/customscript.js'); } |
更新functions.php文件后，再进入小站访问时，上述问题便都没有了。于是我分别查阅了以下几个函数的作用：
wp_register_script：用于注册一个脚本文件（JS文件）并将返回值的句柄提供给函数 wp_enqueue_script() 使用。
wp_enqueue_script：安全的将JavaScript脚本添加到WordPress生成的页面。wp_enqueue_script()函数会加载未被加载的脚本，并安全的处理依赖关系。在上述代码中，get_template_directory_uri和get_stylesheet_directory_uri用于指明要加载的脚本的链接。
get_template_directory_uri与get_stylesheet_directory_uri：有些用户希望修改主题的代码，但问题是当主题升级时会覆盖修改过的文件。解决办法是让他们能够建立子主题 。如果你不想让用户为子主题编写一个特殊的脚本而纠结，就是用“get_template_directory_uri();”功能来引用父文件夹；为了让开发者覆盖这个文件，那就用“get_stylesheet_directory_uri();”来引用子文件夹。
上述几个函数作用的描述是我能找到的对我而言比较好理解的解释，但尽管如此，我仍然不完全理解它们的作用，特别是get_template_directory_uri与get_stylesheet_directory_uri。
我也知道现在的做法把表面上的问题解决了，很可能还有更恐怖的隐藏BUG在小站里。不过我是菜鸟我怕谁，不经历风雨，怎么见彩虹？！兵来将挡，水来土掩嘛！
.png)
