wordpress开发:正确加载css和js

禁用WordPress里的脚本和样式

WordPress有一个内置系统,通过这个系统我们可以取消注册插件所添加的脚本和样式。 但同时WordPress是一个开源软件,其插件由WordPress用户自行开发。

这些插件开发者里有专家级开发者,也有开发新手。

这意味着, 不是所有插件都使用正确的方法加载脚本和样式,这就增加了禁用脚本和样式的难度。正确的方式是利用wp_enqueue_script()和wp_enqueue_style()这两个WordPress函数注册样式表和脚本。

[php]
//Code from http://seavia.com/
wp_enqueue_style( ‘cleaner-gallery’, CLEANER_GALLERY_URL .
‘cleaner-gallery.css’, false, 0.8, ‘all’ );
[/php]

 

从代码中可以看出负责样式表的句柄为“cleaner-gallery”。然后打开主题中的functions.php文件,添加以下代码:

[php]
add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
function my_deregister_styles() {
wp_deregister_style( ‘cleaner-gallery’ );
}
[/php]

 

你可以利用这个函数决定所取消的样式表操作次数。如果你需要取消注册多个插件的样式表,那么可以使用下面这段代码:

[php]
add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
function my_deregister_styles() {
wp_deregister_style( ‘cleaner-gallery’ );
wp_deregister_style( ‘Plugin Style Handle’ );
wp_deregister_style( ‘Plugin Style Handle’ ); }
[/php]

 

但是删除本该加载到所有页面的样式表后,Cleaner Gallery插件的功能就会受到影响。

例如你的图集的样式和结构会崩坏。要修复这个问题,请打开主题的style.css文件,将插件的CSS代码粘贴到文件的最下方。这里我们用的是Cleaner Gallery插件,那么就将插件文件夹中的cleaner-gallery.css文件复制到主题的style.css文件里。这样不仅可以定制图集的样式,也减少了一次HTTP请求。

禁用JavaScripts

出于对功能性的考虑,有些插件会向页面添加JavaScript文件,例如Contact Form 7。

和处理样式文件一样,我们需要在插件文件里找到JS脚本句柄。

在Contact Form 7里,脚本句柄为”contact-form-7″。

复制以下函数并粘贴到主题的functions.php文件:

[php]
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() {
wp_deregister_script( ‘contact-form-7’ );
}
[/php]

 

如果有必要,你也可以在这个函数里取消注册多个脚本。删除JS脚本后会影响插件的功能。你可以把所有JS组合在一起,但有时未必起作用,所以请谨慎操作。

在特定页面加载脚本如果你确实需要Contact Form脚本文件,而又不愿意将它和其他脚本混合。你可以选择只在联系页面加载这些脚本,只需要用到下面这个函数:

[php]
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() {
if ( !is_page(‘Contact’) ) {
wp_deregister_script( ‘contact-form-7’ );
}
}
[/php]

这样就可以避免在非联系表单页面上加载多余脚本了。对提高网站速度来说这是个实用的方法。我们也可以使用!is_single等其他参数。

其实按需加载JS还有一个好处就是可以加快WordPress的运行速度,试想一般情况下每个页面需要调用的 JS 不都一样,如果我们强制一些不需要所有JS 文件的页面也加载整个all.js,那岂不是浪费资源拖慢速度?

所以,让不同的页面加载不同js还可以对WordPress进行提速,一举两得。按需加载CSS其实道理也和按需加载JS一样:加载CSS文件也是同理:

[php]
<?php if (is_home()) { ?>;
<?php } elseif( is_single() ) { ?>;
<?php } elseif( is_category() || is_archive() || is_search() ) { ?>;
<?php } elseif( is_page(1072) ) { ?>;
<?php } else { ?>;
<?php } ?>;
[/php]

 

上面这段代码什么意思呢?就是当打开的是首页时加载style-index.css这个CSS文件,打开文章页时加载style-single.css,打开文章页、归档页或者搜索结果页时加载style-category.css,打开页面且其ID=1072时加载style-links.css,其它页面加载style.css。

只在首页加载首页的幻灯片和动画播放脚本 不是全局必须。

[php]
function enqueue_my_script()
{
if ( is_home() )
{
wp_enqueue_script( ‘my_awesome_script’, get_template_directory_uri() . ‘/js/jquery-1.4.min.js’, array( ‘jquery’ ) ,’1.4′ , ture);
wp_enqueue_script( ‘my_pic_script’, get_template_directory_uri() . ‘/js/indexpic.js’, array( ‘jquery’ ) ,’1.0′ , ture);
}
}
add_action(‘wp_enqueue_scripts’,’enqueue_my_script’);

/**
* 在首页和内容页加入JS
*/
function enqueue_my_script()
{
if ( is_home() )
{
wp_enqueue_script( ‘SuperSlide’, get_template_directory_uri() . ‘/js/jquery.SuperSlide.2.1.1.js’, array( ‘jquery’ ) ,’2.1.1′ , false);
}
}
add_action(‘wp_enqueue_scripts’,’enqueue_my_script’);

[/php]

[php]
function my_enqueue_scripts_frontpage() {
wp_enqueue_script(
‘custom-script’,
get_template_directory_uri() . ‘/js/jquery.min.js’,
array(‘jquery’),
‘1.8.2’
);
[/php]

[php]
wp_enqueue_script(
‘lanrenzhijia-script’,
get_template_directory_uri() . ‘/js/lanrenzhijia.js’,
array(‘jquery’),
‘1.0’,
ture
);
[/php]

[php]
wp_enqueue_script(
‘myscript-script’,
get_template_directory_uri() . ‘/js/myscript.js’,
array(‘jquery’),
‘1.0’,
ture
);

}
add_action(‘wp_enqueue_scripts’, ‘my_enqueue_scripts_frontpage’);
[/php]

[php]
//##判断网页中一个元素是否存在的方法
var $selector = $(‘.my-element’);
if ( $selector.length &gt; 0 ) {
// 如果存在,引入jQuery库,或做其他操作
}
[/php]

 

按需加载jQuery插件的例子,在这里,我们先判断一下页面是是否有`.slideshow`,如果有, 说明这个页面有幻灯,我们加载jquery.cycle.min.js这个jQuery幻灯插件。

[php]
var $slideshow = $(‘.slideshow’);
if ( $slideshow.length &gt; 0 ) {
$.getScript("js/jquery.cycle.min.js").done(function() {
$slideshow.cycle();
});
}
[/php]

http://www.seavia.com/wordpress/let-wordpress-load-javascript-and-ss-files-quickly-and-correctly.html

http://www.seavia.com/wordpress/wordpress-choose-which-pages-load-which-css-and-js-files.html

http://www.seavia.com/jianzhan/run-your-statistic-code-quickly-and-correctly.html

发表评论

邮箱地址不会被公开。 必填项已用*标注