如何在WordPress上正确加载Javascript和CSS

html-css027

如何在WordPress上正确加载Javascript和CSS,第1张

init: 确保始终为您的网站头部加载脚本和CSS(如果使用home.php,index.php或一个模板文件),以及其他“前端”文章、页面和模板样式。加载外部 jQuery 库和主题自定义的脚本、样式

使用if ( !is_admin() )是为了确保这些脚本和css只在前端加载,不会再后台管理界面加载。

/** Google jQuery Library, Custom jQuery and CSS Files */  

function myScripts() {  

        wp_register_script( 'google', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js' )  

        wp_register_script( 'default', get_template_directory_uri() . '/jquery.js' )  

        wp_register_style( 'default', get_template_directory_uri() . '/style.css' )  

    if ( !is_admin() ) { /** Load Scripts and Style on Website Only */  

        wp_deregister_script( 'jquery' )  

        wp_enqueue_script( 'google' )  

        wp_enqueue_script( 'default' )  

        wp_enqueue_style( 'default' )  

    }  

}  

add_action( 'init', 'myScripts' )

加载WP默认 jQuery 库和主题自定义的脚本、样式

第3行:使用 array(‘jquery’) 是为了告诉 WordPress 这个 jquery.js 是依赖WordPress 的jQuery库文件,从而使 jquery.js 在WordPress jQuery库文件后加载。

/** Add Custom jQuery and CSS files to a Theme */  

function myScripts() {  

        wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' )  

        wp_register_style( 'default', get_template_directory_uri() . '/style.css' )  

    if ( !is_admin() ) { /** Load Scripts and Style on Website Only */  

        wp_enqueue_script( 'default' )  

        wp_enqueue_style( 'default' )  

    }  

}  

add_action( 'init', 'myScripts' )

1.首先找到wordpress菜单中的class类名

2.在wordpress模版目录下一般在wp-content\themes\主题名,找到style.css

3.在style.css中为类名添加样式,如下:

.menu-item:{color:red}

这样就可以设计菜单css样式了