• 首页
  • 车闻

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

    \u5982\u4f55\u5728WordPress\u4e0a\u6b63\u786e\u52a0\u8f7dJavascript\u548cCSS

    \u3000\u3000\u6709\u4e24\u79cd\u5e38\u7528\u7684 add_action \u94a9\u5b50\u53ef\u4ee5\u52a0\u8f7d \u811a\u672c\u548cCSS\u5230WordPress\uff1a

    \u3000\u3000init\uff1a \u786e\u4fdd\u59cb\u7ec8\u4e3a\u60a8\u7684\u7f51\u7ad9\u5934\u90e8\u52a0\u8f7d\u811a\u672c\u548cCSS\uff08\u5982\u679c\u4f7f\u7528home.php\uff0cindex.php\u6216\u4e00\u4e2a\u6a21\u677f\u6587\u4ef6\uff09\uff0c\u4ee5\u53ca\u5176\u4ed6\u201c\u524d\u7aef\u201d\u6587\u7ae0\u3001\u9875\u9762\u548c\u6a21\u677f\u6837\u5f0f\u3002
    \u3000\u3000wp_enqueue_scripts\uff1a\u201c\u9002\u5f53\u201d\u7684\u94a9\u5b50\u65b9\u6cd5\uff0c\u5e76\u4e0d\u603b\u662f\u6709\u6548\u7684\uff0c\u6839\u636e\u4f60\u7684WordPress\u8bbe\u7f6e\u3002
    \u3000\u3000\u4e0b\u9762\u7684\u6240\u6709\u4f8b\u5b50\u90fd\u5728WordPress\u591a\u7ad9\u70b9\u6a21\u5f0f\u3001WordPress 3.4.2 \u901a\u8fc7\u6d4b\u8bd5\uff08\u5982\u679c\u4e0d\u652f\u6301\u540e\u7eed\u7248\u672c\uff0c\u8bf7\u7559\u8a00\u544a\u77e5\uff09

    \u3000\u3000\u52a0\u8f7d\u5916\u90e8 jQuery \u5e93\u548c\u4e3b\u9898\u81ea\u5b9a\u4e49\u7684\u811a\u672c\u3001\u6837\u5f0f

    \u3000\u3000\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\u5728 add_action \u94a9\u5b50\u4e2d\u4f7f\u7528 init\u3002\u4f7f\u7528 init \u6709\u4e24\u4e2a\u539f\u56e0\uff0c\u4e00\u662f\u56e0\u4e3a\u6211\u4eec\u6b63\u5728\u6ce8\u9500WordPress\u9ed8\u8ba4\u7684jQuery\u5e93\uff0c\u7136\u540e\u52a0\u8f7d\u8c37\u6b4c\u7684jQuery\u5e93\uff1b\u4e8c\u662f\u786e\u4fdd\u5728WordPress\u7684\u5934\u90e8\u5c31\u52a0\u8f7d\u811a\u672c\u548cCSS\u3002

    \u3000\u3000\u4f7f\u7528if ( !is_admin() )\u662f\u4e3a\u4e86\u786e\u4fdd\u8fd9\u4e9b\u811a\u672c\u548ccss\u53ea\u5728\u524d\u7aef\u52a0\u8f7d\uff0c\u4e0d\u4f1a\u518d\u540e\u53f0\u7ba1\u7406\u754c\u9762\u52a0\u8f7d\u3002

    \u3000\u3000/** Google jQuery Library, Custom jQuery and CSS Files */
    \u3000\u3000function myScripts() {
    \u3000\u3000wp_register_script( 'google', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js' );
    \u3000\u3000wp_register_script( 'default', get_template_directory_uri() . '/jquery.js' );
    \u3000\u3000wp_register_style( 'default', get_template_directory_uri() . '/style.css' );
    \u3000\u3000if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
    \u3000\u3000wp_deregister_script( 'jquery' );
    \u3000\u3000wp_enqueue_script( 'google' );
    \u3000\u3000wp_enqueue_script( 'default' );
    \u3000\u3000wp_enqueue_style( 'default' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'init', 'myScripts' );
    \u3000\u3000\u52a0\u8f7dWP\u9ed8\u8ba4 jQuery \u5e93\u548c\u4e3b\u9898\u81ea\u5b9a\u4e49\u7684\u811a\u672c\u3001\u6837\u5f0f

    \u3000\u3000\u7b2c3\u884c\uff1a\u4f7f\u7528 array(\u2018jquery\u2019) \u662f\u4e3a\u4e86\u544a\u8bc9 WordPress \u8fd9\u4e2a jquery.js \u662f\u4f9d\u8d56WordPress \u7684jQuery\u5e93\u6587\u4ef6\uff0c\u4ece\u800c\u4f7f jquery.js \u5728WordPress jQuery\u5e93\u6587\u4ef6\u540e\u52a0\u8f7d\u3002

    \u3000\u3000/** Add Custom jQuery and CSS files to a Theme */
    \u3000\u3000function myScripts() {
    \u3000\u3000wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
    \u3000\u3000wp_register_style( 'default', get_template_directory_uri() . '/style.css' );
    \u3000\u3000if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
    \u3000\u3000wp_enqueue_script( 'default' );
    \u3000\u3000wp_enqueue_style( 'default' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'init', 'myScripts' );
    \u3000\u3000\u52a0\u8f7d print.css \u5230\u4f60\u7684WordPress\u4e3b\u9898

    \u3000\u3000\u7b2c 3 \u884c\uff1a\u6700\u540e\u7684 \u2018print\u2019\u662f\u5a92\u4f53\u5c4f\u5e55\u8c03\u7528\uff0c\u786e\u4fdd print.css \u5728\u7f51\u7ad9\u7684\u6253\u5370\u673a\u4e2d\u7684\u6587\u4ef6\u52a0\u8f7d\u65f6\u624d\u52a0\u8f7d\u3002

    \u3000\u3000/** Adding a Print Stylesheet to a Theme */
    \u3000\u3000function myPrintCss() {
    \u3000\u3000wp_register_style( 'print', get_template_directory_uri() . '/print.css', '', '', 'print' );
    \u3000\u3000if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
    \u3000\u3000wp_enqueue_style( 'print' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'init', 'myPrintCss' );
    \u3000\u3000\u4f7f\u7528 wp_enqueue_scripts \u66ff\u6362 init

    \u3000\u3000\u5982\u679c\u4f60\u8981\u5728\u6587\u7ae0\u6216\u9875\u9762\u52a0\u8f7d\u552f\u4e00\u7684\u811a\u672c\uff0c\u90a3\u5c31\u5e94\u8be5\u4f7f\u7528 wp_enqueue_scripts \u66ff\u6362 init\u3002\u4f7f\u7528 wp_enqueue_scripts \u4ec5\u4ec5\u53ea\u4f1a\u5728\u524d\u53f0\u52a0\u8f7d\u811a\u672c\u548cCSS\uff0c\u4e0d\u4f1a\u5728\u540e\u53f0\u7ba1\u7406\u754c\u9762\u52a0\u8f7d\uff0c\u6240\u4ee5\u6ca1\u5fc5\u8981\u4f7f\u7528 !is_admin() \u5224\u65ad\u3002

    \u3000\u3000\u4f7f\u7528 is_single() \u53ea\u5728\u6587\u7ae0\u52a0\u8f7d\u811a\u672c\u6216CSS

    \u3000\u3000\u7b2c 3 \u884c\u7684 # \u66ff\u6362\u4e3a\u6587\u7ae0\u7684ID\u5c31\u53ef\u4ee5\u8ba9\u811a\u672c\u548ccss\u53ea\u52a0\u8f7d\u5230\u90a3\u7bc7\u6587\u7ae0\u3002\u5f53\u7136\uff0c\u5982\u679c\u76f4\u63a5\u4f7f\u7528 is_single() \uff08\u4e0d\u586bID\uff09\uff0c\u5c31\u4f1a\u5728\u6240\u6709\u6587\u7ae0\u52a0\u8f7d\u811a\u672c\u548cCSS\u3002

    \u3000\u3000/** Adding Scripts To A Unique Post */
    \u3000\u3000function myScripts() {
    \u3000\u3000if ( is_single(#) ) { /** Load Scripts and Style on Posts Only */
    \u3000\u3000/** Add jQuery and/or CSS Enqueue */
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'wp_enqueue_scripts', 'myScripts' );
    \u3000\u3000\u4f7f\u7528 is_page() \u53ea\u5728\u9875\u9762\u52a0\u8f7d\u811a\u672c\u6216CSS

    \u3000\u3000\u7b2c 3 \u884c\u7684 # \u66ff\u6362\u4e3a\u9875\u9762\u7684ID\u5c31\u53ef\u4ee5\u8ba9\u811a\u672c\u548ccss\u53ea\u52a0\u8f7d\u5230\u90a3\u4e2a\u9875\u9762\u3002\u5f53\u7136\uff0c\u5982\u679c\u76f4\u63a5\u4f7f\u7528 is_single() \uff08\u4e0d\u586bID\uff09\uff0c\u5c31\u4f1a\u5728\u6240\u6709\u9875\u9762\u52a0\u8f7d\u811a\u672c\u548cCSS\u3002

    \u3000\u3000/** Adding Scripts To A Unique Page */
    \u3000\u3000function myScripts() {
    \u3000\u3000if ( is_page(#) ) { /** Load Scripts and Style on Pages Only */
    \u3000\u3000/** Add jQuery and/or CSS Enqueue */
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'wp_enqueue_scripts', 'myScripts' );
    \u3000\u3000\u4f7f\u7528 admin_enqueue_scripts \u52a0\u8f7d\u811a\u672c\u5230\u540e\u53f0

    \u3000\u3000\u8fd9\u4e2a\u4f8b\u5b50\u5c06\u5728\u6574\u4e2a\u540e\u53f0\u7ba1\u7406\u754c\u9762\u52a0\u8f7d\u811a\u672c\u548cCSS\u3002\u8fd9\u4e2a\u65b9\u6cd5\u4e0d\u63a8\u8350\u7528\u5728\u63d2\u4ef6\u4e0a\uff0c\u9664\u975e\u63d2\u4ef6\u91cd\u5efa\u4e86\u6574\u4e2a\u540e\u53f0\u7ba1\u7406\u533a\u3002

    \u3000\u3000\u7b2c 10 \u884c\u4f7f\u7528 admin_enqueue_scripts \u66ff\u6362\u4e86 init \u6216 wp_enqueue_scripts

    \u3000\u3000\u7b2c 5\u30016 \u884c\uff0c\u5982\u679c\u4f60\u8981\u81ea\u5b9a\u4e49\u540e\u53f0\u7ba1\u7406\u533a\uff0c\u4f60\u53ef\u4ee5\u9700\u8981\u7981\u7528\u9ed8\u8ba4\u7684WordPress CSS\u8c03\u7528\u3002

    \u3000\u3000/** Adding Scripts To The WordPress Admin Area Only */
    \u3000\u3000function myAdminScripts() {
    \u3000\u3000wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
    \u3000\u3000wp_enqueue_script( 'default' );
    \u3000\u3000//wp_deregister_style( 'ie' ); /** removes ie stylesheet */
    \u3000\u3000//wp_deregister_style( 'colors' ); /** disables default css */
    \u3000\u3000wp_register_style( 'default', get_template_directory_uri() . '/style.css', array(), '', 'all' );
    \u3000\u3000wp_enqueue_style( 'default' );
    \u3000\u3000}
    \u3000\u3000add_action( 'admin_enqueue_scripts', 'myAdminScripts' );
    \u3000\u3000\u52a0\u8f7d\u811a\u672c\u548cCSS\u5230WordPress\u767b\u5f55\u754c\u9762

    \u3000\u3000\u7b2c 6 \u884c\uff1a\u6211\u65e0\u6cd5\u5f04\u6e05\u695a\u5982\u4f55\u5728\u5728\u767b\u5f55\u9875\u9762\u6ce8\u518c/\u6392\u5e8f CSS\u6587\u4ef6\uff0c\u6240\u4ee5\u8fd9\u884c\u624b\u52a8\u6dfb\u52a0\u6837\u5f0f\u8868\u3002

    \u3000\u3000\u7b2c 10-14\u884c\uff1a\u7528\u6765\u79fb\u9664WordPress\u9ed8\u8ba4\u7684\u6837\u5f0f\u8868\u3002

    \u3000\u3000/** Adding Scripts To The WordPress Login Page */
    \u3000\u3000function myLoginScripts() {
    \u3000\u3000wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
    \u3000\u3000wp_enqueue_script( 'default' );
    \u3000\u3000?>
    \u3000\u3000' type='text/css' media='all' />
    \u3000\u3000<?php }
    \u3000\u3000add_action( 'login_enqueue_scripts', 'myLoginScripts' );
    \u3000\u3000/** Deregister the login css files */
    \u3000\u3000function removeScripts() {
    \u3000\u3000wp_deregister_style( 'wp-admin' );
    \u3000\u3000wp_deregister_style( 'colors-fresh' );
    \u3000\u3000}
    \u3000\u3000add_action( 'login_init', 'removeScripts' );
    \u3000\u3000\u52a0\u8f7d\u811a\u672c\u548cCSS\u5230WordPress\u63d2\u4ef6

    \u3000\u3000WordPress\u63d2\u4ef6\u52a0\u8f7d\u811a\u672c\u548cCSS\u4e5f\u662f\u5e38\u89c1\u7684\u3002\u4e3b\u8981\u7684\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\u6587\u4ef6\u7684 URL\u3002\u4e3b\u9898\u4f7f\u7528\u7684\u662f get_template_directory_uri \uff0c\u800c\u63d2\u4ef6\u5e94\u8be5\u7528 plugins_url \uff0c\u56e0\u4e3a\u6587\u4ef6\u662f\u4ece\u63d2\u4ef6\u76ee\u5f55\u8fdb\u884c\u52a0\u8f7d\u7684\u3002

    \u3000\u3000\u4ece\u63d2\u4ef6\u52a0\u8f7d\u811a\u672c\u548cCSS

    \u3000\u3000\u8fd9\u4e2a\u4f8b\u5b50\u5c06\u5728\u6574\u4e2a\u7f51\u7ad9\u524d\u7aef\u52a0\u8f7d\u811a\u672c\u548cCSS\u3002

    \u3000\u3000/** Global Plugin Scripts for Outside of Website */
    \u3000\u3000function pluginScripts() {
    \u3000\u3000wp_register_script( 'plugin', plugins_url( 'jquery.js' , __FILE__ ), array('jquery'), '' );
    \u3000\u3000wp_register_style( 'plugin', plugins_url( 'style.css' , __FILE__ ) );
    \u3000\u3000if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
    \u3000\u3000wp_enqueue_script( 'plugin' );
    \u3000\u3000wp_enqueue_style( 'plugin' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'init', 'pluginScripts' );
    \u3000\u3000\u4ece\u63d2\u4ef6\u52a0\u8f7d\u811a\u672c\u548cCSS\u5230\u540e\u53f0\u7ba1\u7406\u533a

    \u3000\u3000\u5982\u679c\u4f60\u9700\u8981\u5728\u6574\u4e2a\u540e\u53f0\u7ba1\u7406\u533a\u52a0\u8f7d\u811a\u672c\u548cCSS\uff0c\u5c31\u4f7f\u7528 admin_enqueue_scripts \u66ff\u6362 init\u3002

    \u3000\u3000/** Global Plugin Scripts for The WordPress Admin Area */
    \u3000\u3000function pluginScripts() {
    \u3000\u3000wp_register_script( 'plugin', plugins_url( 'jquery1.js' , __FILE__ ), array('jquery'), '' );
    \u3000\u3000wp_enqueue_script( 'plugin' );
    \u3000\u3000wp_register_style( 'plugin', plugins_url( 'style1.css' , __FILE__ ) );
    \u3000\u3000wp_enqueue_style( 'plugin' );
    \u3000\u3000}
    \u3000\u3000add_action( 'admin_enqueue_scripts', 'pluginScripts' );
    \u3000\u3000\u4ece\u63d2\u4ef6\u52a0\u8f7d\u811a\u672c\u548cCSS\u5230\u63d2\u4ef6\u8bbe\u7f6e\u9875\u9762

    \u3000\u3000\u4f8b\u5b50\u53ea\u4f1a\u52a0\u8f7d\u6240\u9700\u7684\u811a\u672c\u548cCSS\u5230\u63d2\u4ef6\u8bbe\u7f6e\u9875\u9762\uff0c\u4e0d\u4f1a\u5728\u7ba1\u7406\u533a\u7684\u5176\u4ed6\u9875\u9762\u52a0\u8f7d\u3002

    \u3000\u3000\u7b2c 3 \u884c\uff1a\u81ea\u5b9a\u4e49 page= \u540e\u9762\u7684\u503c\u4e3a\u4f60\u7684\u63d2\u4ef6\u8bbe\u7f6e\u9875\u9762

    \u3000\u3000/** Adding Scripts On A Plugins Settings Page */
    \u3000\u3000function pluginScripts() {
    \u3000\u3000if ( $_GET['page'] == "plugin_page_name.php" ) {
    \u3000\u3000wp_register_script( 'plugin', plugins_url( 'jquery.js' , __FILE__ ), array('jquery'), '' );
    \u3000\u3000wp_enqueue_script( 'plugin' );
    \u3000\u3000wp_register_style( 'plugin', plugins_url( 'style.css' , __FILE__ ) );
    \u3000\u3000wp_enqueue_style( 'plugin' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'admin_enqueue_scripts', 'pluginScripts' );
    \u3000\u3000\u5c06 jQuery \u5e93\u79fb\u52a8\u5230\u9875\u811a

    \u3000\u3000\u4f60\u4e0d\u80fd\u5c06WordPress\u9ed8\u8ba4\u7684jQuery \u5e93\u79fb\u52a8\u5230\u9875\u9762\u5e95\u90e8\uff0c\u4f46\u662f\u4f60\u53ef\u4ee5\u5c06\u81ea\u5b9a\u4e49\u7684jQuery \u6216\u5176\u4ed6\u5916\u90e8jQuery \u5e93\uff08\u6bd4\u5982Google\u7684\uff09\u79fb\u52a8\u5230\u5e95\u90e8\u3002\u4e0d\u8981\u5c06CSS\u79fb\u52a8\u5230\u9875\u9762\u5e95\u90e8\u3002

    \u3000\u3000\u7b2c 3\u30014 \u884c\uff1a\u6700\u540e\u7684 \u2018true\u2019\u544a\u8bc9WordPress\u5728\u9875\u9762\u5e95\u90e8\u52a0\u8f7d\u8fd9\u4e9b\u811a\u672c\u3002

    \u3000\u3000/** Moves jQuery to Footer */
    \u3000\u3000function footerScript() {
    \u3000\u3000wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"), false, '', true );
    \u3000\u3000wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', false, '', true );
    \u3000\u3000if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
    \u3000\u3000wp_deregister_script( 'jquery' );
    \u3000\u3000wp_enqueue_script( 'jquery' );
    \u3000\u3000wp_enqueue_script( 'default' );
    \u3000\u3000}
    \u3000\u3000}
    \u3000\u3000add_action( 'init', 'footerScript' );

    \u73b0\u5728\u8bb8\u591aWordPress\u7f51\u7ad9\u90fd\u5f00\u59cb\u8bb2\u8981\u6b63\u786e\u52a0\u8f7d jQuery\u3001Javascript \u548c CSS \u5230\u4f60\u7684WordPress\u7f51\u7ad9\u3002\u4eca\u5929\u6765\u4e00\u7bc7\u66f4\u8be6\u7ec6\u8bb2\u89e3\u5982\u4f55\u4f7f\u7528WordPress\u5b98\u65b9\u63a8\u8350\u7684\u65b9\u5f0f\u6765\u52a0\u8f7d\u811a\u672c/ CSS\u7684\u6587\u7ae0\u3002 \u6709\u4e24\u79cd\u5e38\u7528\u7684 add_action \u94a9\u5b50\u53ef\u4ee5\u52a0\u8f7d \u811a\u672c\u548cCSS\u5230WordPress\uff1a init...

    现在许多WordPress网站都开始讲要正确加载 jQuery、Javascript 和 CSS 到你的WordPress网站。今天来一篇更详细讲解如何使用WordPress官方推荐的方式来加载脚本/ CSS的文章。

    有两种常用的 add_action 钩子可以加载 脚本和CSS到WordPress：

    init： 确保始终为您的网站头部加载脚本和CSS（如果使用home.php，index.php或一个模板文件），以及其他“前端”文章、页面和模板样式。

    wp_enqueue_scripts：“适当”的钩子方法，并不总是有效的，根据你的WordPress设置。

    下面的所有例子都在WordPress多站点模式、WordPress 3.4.2 通过测试（如果不支持后续版本，请留言告知）

    加载外部 jQuery 库和主题自定义的脚本、样式

    下面这个例子在 add_action 钩子中使用 init。使用 init 有两个原因，一是因为我们正在注销WordPress默认的jQuery库，然后加载谷歌的jQuery库；二是确保在WordPress的头部就加载脚本和CSS。

    使用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' );

    加载 print.css 到你的WordPress主题

    第 3 行：最后的 ‘print’是媒体屏幕调用，确保 print.css 在网站的打印机中的文件加载时才加载。

    /** Adding a Print Stylesheet to a Theme */  
    function myPrintCss() {  
           wp_register_style( 'print', get_template_directory_uri() . '/print.css', '', '', 'print' );  
       if ( !is_admin() ) { /** Load Scripts and Style on Website Only */  
           wp_enqueue_style( 'print' );  
       }  
    }  
    add_action( 'init', 'myPrintCss' );

    使用 wp_enqueue_scripts 替换 init

    如果你要在文章或页面加载唯一的脚本，那就应该使用 wp_enqueue_scripts 替换 init。使用 wp_enqueue_scripts 仅仅只会在前台加载脚本和CSS，不会在后台管理界面加载，所以没必要使用 !is_admin() 判断。

    使用 is_single() 只在文章加载脚本或CSS

    第 3 行的 # 替换为文章的ID就可以让脚本和css只加载到那篇文章。当然，如果直接使用 is_single() （不填ID），就会在所有文章加载脚本和CSS。

    /** Adding Scripts To A Unique Post */  
    function myScripts() {  
       if ( is_single(#) ) { /** Load Scripts and Style on Posts Only */  
           /** Add jQuery and/or CSS Enqueue */  
       }  
    }  
    add_action( 'wp_enqueue_scripts', 'myScripts' );

    使用 is_page() 只在页面加载脚本或CSS

    第 3 行的 # 替换为页面的ID就可以让脚本和css只加载到那个页面。当然，如果直接使用 is_single() （不填ID），就会在所有页面加载脚本和CSS。

    /** Adding Scripts To A Unique Page */  
    function myScripts() {  
       if ( is_page(#) ) { /** Load Scripts and Style on Pages Only */  
           /** Add jQuery and/or CSS Enqueue */  
       }  
    }  
    add_action( 'wp_enqueue_scripts', 'myScripts' );

    使用 admin_enqueue_scripts 加载脚本到后台

    这个例子将在整个后台管理界面加载脚本和CSS。这个方法不推荐用在插件上，除非插件重建了整个后台管理区。

    第 10 行使用 admin_enqueue_scripts 替换了 init 或 wp_enqueue_scripts

    第 5、6 行，如果你要自定义后台管理区，你可以需要禁用默认的WordPress CSS调用。

    /** Adding Scripts To The WordPress Admin Area Only */  
    function myAdminScripts() {  
       wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );  
       wp_enqueue_script( 'default' );  
       //wp_deregister_style( 'ie' ); /** removes ie stylesheet */  
       //wp_deregister_style( 'colors' ); /** disables default css */  
       wp_register_style( 'default', get_template_directory_uri() . '/style.css',  array(), '', 'all' );  
       wp_enqueue_style( 'default' );  
    }  
    add_action( 'admin_enqueue_scripts', 'myAdminScripts' );

    加载脚本和CSS到WordPress登录界面

    第 6 行：我无法弄清楚如何在在登录页面注册/排序 CSS文件，所以这行手动添加样式表。

    第 10-14行：用来移除WordPress默认的样式表。

    /** Adding Scripts To The WordPress Login Page */  
    function myLoginScripts() {  
       wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );  
       wp_enqueue_script( 'default' );  
    ?>  
       <link rel='stylesheet' id='default-css' href='<?php echo get_template_directory_uri() . '/style.css';?>' type='text/css' media='all' />  
    <?php }  
    add_action( 'login_enqueue_scripts', 'myLoginScripts' );  
    /** Deregister the login css files */  
    function removeScripts() {  
       wp_deregister_style( 'wp-admin' );  
       wp_deregister_style( 'colors-fresh' );  
    }  
    add_action( 'login_init', 'removeScripts' );

    将 jQuery 库移动到页脚

    你不能将WordPress默认的jQuery 库移动到页面底部，但是你可以将自定义的jQuery 或其他外部jQuery 库（比如Google的）移动到底部。不要将CSS移动到页面底部。


    第 3、4 行：最后的 ‘true’告诉WordPress在页面底部加载这些脚本。


    /** Moves jQuery to Footer */  

    function footerScript() {  

            wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"), false, '', true );  

            wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', false, '', true );  

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

            wp_deregister_script( 'jquery' );  

            wp_enqueue_script( 'jquery' );  

            wp_enqueue_script( 'default' );  

        }  

    }  

    add_action( 'init', 'footerScript' );

    根据不用的用户角色和功能加载jQuery和CSS

    如果你的网站有作者、编辑和其他管理员，你可能需要通过 jQuery 来为他们显示不同的信息。你需要使用 current_user_can 确定登录的用户的角色和功能 。


    下面三个例子中，如果用户已经登录，将在整个网站加载这些脚本和CSS。使用 !is_admin() 包装 enqueue_script 确保只在前台加载，或者在 add_action 使用 admin_enqueue_scripts 就可以确保只在后台管理区加载。


    为可以“编辑文章”的管理员加载脚本和CSS

    只对超级管理员和网站管理员生效


    /** Add CSS & jQuery based on Roles and Capabilities */  

    function myScripts() {  

        if ( current_user_can('edit_posts') ) {  

            /** Add jQuery and/or CSS Enqueue */  

        }  

    }  

    add_action( 'init', 'myScripts' );

    为所有登录用户加载脚本和CSS

    /** Admins / Authors / Contributors /  Subscribers */  

    function myScripts() {  

        if ( current_user_can('read') ) {  

            /** Add jQuery and/or CSS Enqueue */  

        }  

    }  

    add_action( 'init', 'myScripts' );

    为管理员以外的已登录用户加载脚本和CSS

    /** Disable for Super Admins / Admins enable for Authors / Contributors /  Subscribers */  

    function myScripts() {  

        if ( current_user_can('read') && !current_user_can('edit_users') ) {  

            /** Add jQuery and/or CSS Enqueue */  

        }  

    }  

    add_action( 'init', 'myScripts' );

    最后的提示

    上面的很多例子如果使用相同的add_action，就可以被合并成一个单一的函数。


    换句话说，您可以使用多个 if 语句在一个函数中分裂了你的脚本和CSS调用，如：if_admin！if_admin，is_page，is_single和current_user_can的，因为每次使用相同的add_action的init。



  • wordpress涓汉缃戠珯鎵撳紑鍚,鎬庝箞鍦娴忚鍣ㄩ〉闈笂鍔犲叆灏廘OGO?鏀惰棌鍚庝篃瑕佽兘...
    绛旓細 鎶婅繖娈典唬鐮佸姞鍏ユ爣绛惧唴銆傛敞鎰忚矾寰勭殑淇敼銆傛妸.ico鍥炬爣鏀惧叆缃戠珯鏍圭洰褰曘傛敞鎰忔湁鏃堕渶瑕佹竻绌虹綉椤电紦瀛橈紒
  • 濡備綍鍦 WordPress 涓垱寤哄瓙椤甸潰
    绛旓細鍦╓ordPress鐨勪笘鐣屼腑锛屽瓙椤甸潰灏卞儚鏄唴瀹圭殑鏈夊簭灞傛锛岃鎮ㄧ殑缃戠珯缁勭粐鏈夊簭锛屽鑸祦鐣呫傞偅涔堬紝濡備綍鍦╓ordPress涓交鏉炬墦閫犺繖涓眰娆＄粨鏋勫憿锛熸湰鏂囧皢涓烘偍鎻ず璇︾粏鐨勬楠ゅ拰瀹炶返妗堜緥銆傞鍏堬紝璁╂垜浠悊瑙ｄ粈涔堟槸WordPress鐨勫瓙椤甸潰銆備笉鍚屼簬鍗氬鏂囩珷鎸夋椂闂撮『搴忔帓鍒楋紝瀛愰〉闈㈡槸鐙珛鐨勯〉闈紝瀹冧滑闅跺睘浜庢煇涓埗椤甸潰锛屽氨鍍忎竴鏈皬璇...
  • 濡備綍浼樺寲WordPress鏂囩珷鐨凷EO
    绛旓細鎴戜滑娉ㄦ剰鍒帮紝鍒濆鑰呬滑閮戒細瀹夎SEO鎻掍欢锛屼絾鏄緢灏戞湁浜虹煡閬濡備綍姝ｇ‘鐨勪娇鐢ㄨ鎻掍欢銆傝鎻掍欢缁欏ぇ瀹舵彁渚涗簡寰堝浼樺寲鍗氭枃鐨勬柟寮忋傚鏋滆兘鍦ㄦ瘡涓绡囨枃绔犱腑姝ｇ‘鐨勪娇鐢⊿EO鍔熻兘锛屼綘鐨勬悳绱㈡帓鍚嶄細鏄庢樉鎻愰珮銆傝繖绡囨寚鍗楀皢鏁欏ぇ瀹,濡備綍姝ｇ‘鐨勪娇鐢⊿EO鍔熻兘鏉ヤ紭鍖WordPress鏂囩珷銆傚垰寮濮嬬敤WordPress鐨勬椂鍊欙紝鎴戜滑寤鸿鐢╓ordPress SEO by ...
  • 鍦╳ordpress涓,bbpress鎻掍欢鎬庝箞浣跨敤
    绛旓細wordpress.org/plugins/bbpress/涓嬭浇bbPress鐨剒ip鍘嬬缉鍖咃紝瑙ｅ帇鍚庯紝浣跨敤FTP鎴栬匰SH涓婁紶鍒颁綘缃戠珯鐨 /wp-content/plugins/涓嬮潰銆備笅杞藉悗锛屽埌WordPress鍚庡彴->鎻掍欢->宸插畨瑁呮彃浠堕〉闈紝鍚敤bbPress銆傜敱浜巄bPress鐨勭畝浣撲腑鏂囧寘涓璐笉鎬庝箞鏍锛屽浗鍐呯殑bbPress鐖卞ソ鑰呮湁鑷繁缈昏瘧鐨勮瑷鍖咃紝寤鸿浣犵櫨搴︿笅銆2. 閰嶇疆 浣跨敤姝ｇ‘...
  • wordpress鎬庢牱鎼缓缃戠珯
    绛旓細鎼缓WordPress缃戠珯闈炲父绠鍗曪紝鍙渶瑕佸嚑涓楠ゅ嵆鍙畬鎴愩備互涓嬫槸璇︾粏鐨勬惌寤鸿繃绋嬶細娉ㄥ唽鍩熷悕锛氶鍏堬紝闇瑕佸湪鍩熷悕娉ㄥ唽鍟嗭紙渚嬪Gname锛夊娉ㄥ唽涓涓煙鍚嶏紝浠ヤ究缃戠珯鍙互琚姝ｇ‘鍦拌闂傞夋嫨涓绘満锛氭帴涓嬫潵锛岄渶瑕侀夋嫨涓涓富鏈猴紙渚嬪HostEase锛夋潵鎵樼缃戠珯锛屼富鏈烘槸涓鍙拌绠楁満锛屽畠灏嗗瓨鍌ㄧ綉绔欐枃浠跺苟鎻愪緵缃戠粶杩炴帴锛屼篃鍙互閫夋嫨VPS銆...
  • wordpress鎬庝箞鍦棣栭〉娣诲姞杩欐牱甯冨眬
    绛旓細骞堕夋嫨鈥淗ome鈥濋〉闈綔涓衡滈潤鎬侀椤碘濄備繚瀛樻墍鍋氫慨鏀 2./index.php?p=423杩欐牱鐨勯摼鎺ヤ細闃荤闈欐佷富椤电殑褰㈡垚锛屽洜姝ら渶瑕佹縺娲烩滃浐瀹氶摼鎺モ濓紝鍦ㄥ湴鍧鏍忎腑鏄剧ず鈥滈〉闈㈡爣棰樷濄傝櫧鐒跺彨鍋氣滈潤鎬佷富椤碘濓紝浣嗕綘鍙閫氳繃淇敼Home椤甸潰灏卞彲浠ユ洿鏀光滀富椤碘濅笂鐨勫唴瀹逛簡銆傛敞鎰忎簨椤癸細涓嶆槸鎵鏈WordPress涓婚閮藉彲浠ヨ交鏉捐浆鎹㈤潤鎬侀椤点
  • 鐢wordpress鎼缓鐨勭綉绔,璁剧疆浼潤鎬侀〉闈㈠悗,涓婚〉璁剧疆浜嗕笉鐢熸晥?
    绛旓細褰撲綘鍦 WordPress 绔欑偣涓惎鐢ㄤ吉闈欐侀〉闈㈠悗锛屽彲鑳介渶瑕佷慨鏀 .htaccess 鏂囦欢锛堝鏋滀娇鐢 Apache 鏈嶅姟鍣級鎴 nginx 閰嶇疆鏂囦欢锛堝鏋滀娇鐢 nginx 鏈嶅姟鍣級鏉ユ敮鎸佷吉闈欐併備絾杩欎釜淇敼姝ラ鍙兘浼氬涓婚〉鐨勮闂骇鐢熷奖鍝嶏紝浠庤屽鑷翠富椤垫棤娉曟甯告樉绀恒備互涓嬫槸涓浜涙鏌ュ拰瑙ｅ喅鏂规硶锛1. 妫鏌 .htaccess 鎴 nginx 閰嶇疆鏂囦欢鏄惁...
  • wordpress鍥哄畾閾炬帴鍙湁榛樿鑳界敤,鍏朵粬閾炬帴璁剧疆閮介敊璇鎬庝箞鍔?
    绛旓細绗竴涓師鍥犵殑瑙ｅ喅鏂规硶锛氶噸璁惧浐瀹氳繛鎺ユ椂锛岀郴缁熻鏀瑰啓.htaccess鏂囦欢銆傚鏋WordPress涓嶈兘鑷姩鏇存柊.htaccess锛屽畠浼氬憡璇変綘鍘熷洜锛屽.htaccess鏂囦欢鍙啓锛屾墠浼氳嚜鍔ㄦ洿鏂般傚浜嶹ordPress娌℃湁鐢熸垚.htaccess鏂囦欢鎴栦笉灏嗘柊鐨勯噸鍐欒鍒欏啓鍒板凡瀛樺湪鐨.htaccess鏂囦欢锛屽師鍥犲悇绉嶅悇鏍凤紝鎸夌収涓嬮潰鐨勬楠わ紝涓姝ヤ竴姝ワ紝娉ㄦ剰锛屽綋涓斾粎褰撲笂涓...
  • 濡備綍鍦 Wordpress 涓娇鐢 jQuery
    绛旓細绠鍗曞晩锛屽氨涓ゆ 鍔犺浇 jQuery 搴擄紝鍙渶瑕佸湪浣跨敤鐨 WordPress 涓婚鐨 header.php 鏂囦欢鐨 head 鏍囩涓姞鍏ュ涓嬩唬鐮佸嵆鍙 鍓嶉潰鍔犱笂http 鍦ㄤ富棰樹腑璋冪敤 .js 鏂囦欢 鏂板缓绔嬩竴涓 .js 鏂囦欢锛屽湪鏂囦欢涓姞鍏ュ涓嬩唬鐮侊細jQuery(document).ready(function($){// 杩欓噷灏辨槸闇瑕佹坊鍔犵殑涓浜 jQuery 浠ｇ爜});...
  • wordpress鐨勫簳閮ㄦā鏉鎬庝箞淇敼?鍦ㄥ摢閲屼慨鏀?
    绛旓細鍦╳ordpress鍚庡彴鐐瑰嚮--澶栬--缂栬緫锛屾壘鍒板簳閮ㄦā鏉縡ooter.php锛屼慨鏀圭浉搴斾唬鐮佸瓧鏍峰氨鍙互浜嗭紝浣犲彲浠ョ敤娉ㄩ噴绗﹀彿<!-- -->闅愯棌浠ｇ爜锛屼篃鍙互鐩存帴鍒犻櫎鎺夛紝褰撶劧涔熷彲浠ュ湪搴曢儴浠ｇ爜杩欓噷淇敼涓鸿嚜宸辩殑淇℃伅锛屽叾浠栨ā鏉垮簳閮ㄤ俊鎭慨鏀圭被浼笺備笉杩囧湪淇敼鍓嶈繕鏄缓璁妸浠ｇ爜鍏堝浠戒竴涓嬶紝鍏嶅緱鍑轰簡閿欒鍙堟敼涓嶅洖鏉ャ傚鏋滃彂鐜版病鏈塮ooter....
    • 扩展阅读：1688精品货源网站入口 ... b站禁止转404入口 ... 2023永久免费access进销存 ... 电影网站wordpress ... photoshop永久免费版 ... windows永久禁止更新 ... 好看的imax大片高清版片尾 ... wordpress永久免费 ... wordpress视频网站 ...

    本站交流只代表网友个人观点，与本站立场无关
    欢迎反馈与建议，请联系电邮
    2024© 车视网