亚洲国产精品久久久久网站,亚洲一区二区三区免费观看,国产特黄a级在线视频

這將確保網(wǎng)站保持高效并且不存在不兼容問題。

在開發(fā)wordpress主題時，如果還在用寫網(wǎng)頁時的方法進行加載，就不太符合官方建議了，其實官方提供了一系列的函數(shù)，幫助我們更好的加載這些文件，這一次的wordpress開發(fā)教大家怎么加載 CSS 和JS。

相關(guān)文檔：官方文檔
相關(guān)文檔：官方文檔
詳細介紹：詳情

主題

/**
 * 加載CSS
 */
wp_enqueue_style( 'index', get_template_directory_uri() . '/css/index.css',false,'1.0','all');

正確加載 CSS 到 WordPress的例子（放于主題根目錄的functions.php文件內(nèi)的

//加載額外的css到wordpress
function my_new_css(){
	wp_register_style('comments',get_template_directory_uri().'/css/comments.css');
	wp_enqueue_style('comments', get_template_directory_uri().'/css/comments.css');
}
add_action('wp_enqueue_scripts','my_new_css');

加載JS：

/**
 * 將腳本和樣式排隊。
 */
function lifet_scripts() {

	wp_enqueue_script( 'lifet-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

	wp_enqueue_script( 'lifet-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	//簡繁切換
	wp_enqueue_script( 'zh-cn-tw', get_template_directory_uri() . '/js/zh-cn-tw.js', array(), '20200506', true );

}
add_action( 'wp_enqueue_scripts', 'lifet_scripts' );

子主題

加載css

//加載子主題的css到主題中
function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri().'/css/n.css' );
  wp_enqueue_style( 'nice', get_stylesheet_directory_uri().'/css/nice.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

加載JS

//加載子主題的js到主題中
function lifet_scripts() {
	//引導(dǎo)提示
	wp_enqueue_script( 'intro', get_stylesheet_directory_uri() . '/assets/intro/intro.js', array(), '20200506', true );
}
add_action( 'wp_enqueue_scripts', 'lifet_scripts' );

加載PHP

require_once( get_stylesheet_directory(). '/inc/n_xunzhang.php' );

判斷加載css：

肯定有更好的辦法，歡迎在評論區(qū)交流。

// 在網(wǎng)站head加載css
if ( ! function_exists( 'lifet_css_head' ) ) :
   function lifet_css_head() {
      $link_head = "    <link rel='stylesheet' href='";
      $link_footer = "' type='text/css' media='all' />";
      $css_url = get_template_directory_uri();

      //是否為首頁
      if( is_home() ){echo "$link_head$css_url/css/index.css$link_footer";}
   
      //是否為日志頁
      if( is_single() ){echo "$link_head$css_url/css/single.css$link_footer";}
   
      //是否為一般頁面
      if( is_page() ){echo "$link_head$css_url/css/page.css$link_footer";}
   }
  endif;
add_action('wp_head', 'lifet_css_head');

怎么引入jquery.js？

怎么引入jquery.js？ – wordpress開發(fā)

Muze

20年5月19日
喜歡：0
瀏覽：1.2k

css/js方法總結(jié)

原文來源：詳情

WordPress引入css/js方法很多，條件很多。如何全局加載，或僅在某些頁面精準加載，什么時候需要先注冊腳本再加載，本文希望找到最簡單的方式，并給出探索更多方法的途徑。

在前臺加載css/js

用wp_enqueue_script()函數(shù)加載js，用wp_enqueue_style()加載css，加載資源的位置（action）只有一個——wp_enqueue_scripts。

用wp_enqueue_系列函數(shù)可以更好的處理腳本樣式表的依賴關(guān)系，防止重復(fù)加載，以twentyfifteen主題為例。

function twentyfifteen_scripts() {
     
    //全局加載一般的樣式表
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
 
    //全局加載主樣式表
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
 
    //全局加載僅用于IE的樣式表
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
 
    //全局加載js腳本
    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
     
    //給js腳本傳遞變量，解決腳本中不能調(diào)用php的問題
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

若僅在某些頁面加載，利用WordPress的Conditional Tags即可。

加塞 JS

// functions.php
function my_footer_js() {
    ?>
    <script>
//alert("789");
console.log("666");
</script>
<?php
}
add_action('wp_footer', 'my_footer_js'); // wp_head 同理

什么時需要先注冊css/js

即何時需要使用wp_register_script()和wp_register_style()函數(shù)。

當css/js很多，并且要分情況加載時，使用wp_register_script()可以更好的管理資源，避免重復(fù)勞動。下面的示例代碼中，先在init action上把所有需要用到樣式表都注冊一遍，之后不管想在哪里引入，都可以簡單的用wp_enqueue_style( $handle )來加載。

// 在init action處注冊腳本，可以與其它邏輯代碼放在一起
function my_init(){
    $url = get_template_directory_uri();
    // 注冊樣式表
    $styles = array(
        'style1' => $url . '/css/style1.css',
        'style2' => $url . '/css/style2.css',
        'style3' => $url . '/css/style3.css'
    );
 
    foreach( $styles as $k => $v ){
        wp_register_style( $k, $v, false );
    }
 
    // 注冊腳本
     
    // 其它需要在init action處運行的腳本
}
add_action( 'init', 'my_init' );

注冊腳本時需要運行$wp_scripts->add( $handle, $src, $deps, $ver );，若腳本沒有注冊直接使用wp_enqueue_script，需要先調(diào)用add方法，也就是說重復(fù)enqueue一個腳本就會運行多次add方法，降低了程序的效率。

在WordPress登錄頁面加載

將action替換為login_enqueue_scripts即可，例如

function enqueue_for_login(){
    wp_enqueue_style( 'core', 'style.css', false );
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'login_enqueue_scripts', 'enqueue_for_login' );

如果想了解其它方式，可以仔細閱讀wp-login.php。

在后臺全局加載

同理，將action改為admin_enqueue_scripts

function my_enqueue() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

想了解更多方法，請閱讀wp-admin/admin-header.php。

后臺按需加載

僅用于后臺某些頁面的資源只在這些頁面加載就好，不要到處使用，可以減少不必要的沖突。

1. $hook_suffix

首先我們可以根據(jù)admin_enqueue_scripts這個action傳遞的$hook_suffix參數(shù)來判斷所處的頁面，例如僅在edit.php加載，代碼如下

function my_enqueue( $hook_suffix ) {
    if ( 'edit.php' == $hook_suffix ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }   
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

edit.php就是post、page或者custom post type的列表頁面，編輯頁面是post.php，新建頁面是post-new.php，可以在不同頁面打印$hook_suffix來了解它的使用方法。但由此也可看出它不能區(qū)分現(xiàn)在是在哪種post頁面，需要借助更多的全局變量來判斷。

2. $typenow

全局變量$typenow可以告訴我們當前的post type，例如僅在post的列表頁面加載可以這樣來判斷

function my_enqueue( $hook_suffix ) {
    global $typenow;
    if ( 'edit.php' == $hook_suffix && $typenow == 'post' ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }   
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

3. get_current_screen()

上述兩個全局變量可以區(qū)分大多數(shù)情況，若區(qū)分不了，可以試試使用get_current_screen()函數(shù)，該函數(shù)返回當前頁面的post type、ID、base等信息，只能在admin_init之后使用，具體可以參考官方文檔。

4. $pagenow

全局變量$pagenow的返回值與$hook_suffix類似，只是它在前臺后臺都可以訪問，定義的更早，例如前三者在admin_init處沒有值，但$pagenow卻有。

它定義在wp-includes/vars.php中，該文件還定義了瀏覽器、服務(wù)器全局變量，例如$is_winIE、$is_apache，wp_is_mobile()函數(shù)也在這里出現(xiàn)。

上述全局變量和函數(shù)能區(qū)分大多數(shù)情況，但依然有無力的時候，這時可以借助$_REQUEST來判斷。上述變量的值也是從$_REQUEST獲取，但多一層值是否存在的檢查，所以能用它們解決的就不要用$_REQUEST或者$_GET。

補充

在創(chuàng)建主題時，您可能希望創(chuàng)建其他樣式表或JavaScript文件。但是，請記住，WordPress網(wǎng)站不僅會激活您的主題，還會使用許多不同的插件。因此，一切都和諧地工作，主題和插件使用標準的WordPress方法加載腳本和樣式表是很重要的。這將確保網(wǎng)站保持高效并且不存在不兼容問題。

WordPress是目前世界上最受歡迎的內(nèi)容管理系統(tǒng)，擁有數(shù)千萬用戶。這就是為什么，為了制作一個成功的主題，我們需要像每個WordPress用戶一樣思考，并嘗試按照本書的說法正確加載我們的主題中的CSS文件。

幸運的是，WordPress可以很容易地解決這樣的問題：注冊和排隊樣式表。

在WordPress中加載CSS的正確方法

正如我們之前所說，WordPress多年來發(fā)展很快，我們必須考慮世界上每一個WordPress用戶。?

除此之外，我們還需要考慮數(shù)千個WordPress插件。但是不要讓這些大數(shù)字嚇到你：WordPress為我們提供了非常有用的功能，可以將CSS樣式正確加載到WordPress中。?

我們來看一下。

注冊CSS文件

如果您要加載CSS樣式表，則應(yīng)首先使用該wp_register_style()函數(shù)注冊它們：

wp_register_style( $handle, $src, $deps, $ver, $media );
?>

$handle（字符串，必需）是樣式表的唯一名稱。其他函數(shù)將使用此“句柄”來排隊和打印樣式表。
$src（string，required）是指樣式表的URL。您可以使用函數(shù)get_template_directory_uri()來獲取主題目錄中的樣式文件。永遠不要考慮硬編碼！
$deps（array，optional）處理依賴樣式的名稱。如果缺少某些其他樣式文件，樣式表將無效，請使用此參數(shù)設(shè)置“依賴項”。
$ver（string或boolean，optional）是版本號。如果需要，您可以使用主題的版本號或組成一個。如果您不想使用版本號，請將其設(shè)置為null。它默認為false，這使得WordPress添加自己的版本號。
$media（字符串，可選）是??CSS媒體類型，如“屏幕”或“手持”或“打印”。如果您不確定是否需要使用它，請不要使用它。它默認為“全部”。

這是wp_register_style()函數(shù)的一個例子：

// wp_register_style() 示例
wp_register_style('my-bootstrap-extension', // 名稱
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 樣式表的路徑array( 'bootstrap-main' ), // 依存的其他樣式表'1.2', // 版本號'screen', // CSS 媒體類型
);
?>

在WordPress中，注冊樣式是“可選的”。如果你的樣式不會被其他插件使用，或者你不打算使用任何代碼來再次加載它，你可以自由地排隊樣式而不需要注冊它。繼續(xù)看看它是如何實現(xiàn)的。

排隊 CSS 文件

注冊我們的風(fēng)格文件后，我們需要“排隊”它，使其準備好在我們主題的部分加載。

我們使用?wp_enqueue_style()?函數(shù)來實現(xiàn)：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

該函數(shù)的參數(shù)和上面的 wp_register_style() 函數(shù)是一樣的，就不再重復(fù)。

請記住，如果一個插件將要用到你的樣式表，或者你打算將在你的主題的不同地方進行加載，你絕對應(yīng)該先注冊。

加載樣式到網(wǎng)站

我們不能在主題中隨便找個地方使用 wp_enqueue_style() 函數(shù) – 我們需要使用“動作”鉤子。還有我們可以使用各種用途的三個動作鉤子：

wp_enqueue_scripts?用來在網(wǎng)站前臺加載腳本和CSS
admin_enqueue_scripts?用來在后臺加載腳本和CSS
login_enqueue_scripts?用來在WP登錄頁面加載腳本和CSS

以下是這些鉤子的示例：

// 在網(wǎng)站前臺加載css
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// 在后臺加載css
function mytheme_enqueue_options_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
 
// 在登錄頁面加載css
function mytheme_enqueue_login_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
 
?>

WordPress 有一個重要的公告：“使用 wp_enqueue_scripts() ，不要用 wp_print_styles()?”，它會告訴你一個與 WordPress3.3版本可能的不兼容錯誤。

額外函數(shù)

WordPress 有一些關(guān)于 CSS 非常有用的函數(shù)：他們允許我們打印內(nèi)嵌樣式，查看樣式文件的排隊狀態(tài)，添加元數(shù)據(jù)以及注銷樣式。

添加動態(tài)內(nèi)聯(lián)樣式：wp_add_inline_style()

如果你的主題有選項可自定義主題的樣式，你可以使用 wp_add_inline_style() 函數(shù)來打印內(nèi)置的樣式。

檢查樣式表的排隊狀態(tài)：wp_style_is()

怎么讓插件加載css和js? – wordpress開發(fā)

Muze

20年7月25日
喜歡：0
瀏覽：240

{{userData.name}}已認證

WordPress怎么加載 CSS 和JS？ – WordPress開發(fā)

主題

加載JS：

子主題

判斷加載css：

怎么引入jquery.js？

怎么引入jquery.js？ – wordpress開發(fā)

css/js方法總結(jié)

在前臺加載css/js

加塞 JS

什么時需要先注冊css/js

在WordPress登錄頁面加載

在后臺全局加載

后臺按需加載

補充

在WordPress中加載CSS的正確方法

注冊CSS文件

排隊 CSS 文件

加載樣式到網(wǎng)站

額外函數(shù)

添加動態(tài)內(nèi)聯(lián)樣式：wp_add_inline_style()

檢查樣式表的排隊狀態(tài)：wp_style_is()

相關(guān)介紹

怎么讓插件加載css和js? – wordpress開發(fā)

Luxara星空主題-超級響應(yīng)，多功能下載類 WordPress 主題

什么是Pingback？ – WordPress教程

Puma – 簡潔的Typecho主題

W3School 的本地文檔版本

WordPress附件函數(shù)總結(jié)

QRCode.js – 用于JavaScript的跨瀏覽器QRCode生成器

{{userData.name}}已認證

主題

加載JS：

子主題

判斷加載css：

怎么引入jquery.js？

怎么引入jquery.js？ – wordpress開發(fā)

css/js方法總結(jié)

在前臺加載css/js

加塞 JS

什么時需要先注冊css/js

在WordPress登錄頁面加載

在后臺全局加載

后臺按需加載

補充

在WordPress中加載CSS的正確方法

注冊CSS文件

排隊 CSS 文件

加載樣式到網(wǎng)站

額外函數(shù)

添加動態(tài)內(nèi)聯(lián)樣式：wp_add_inline_style()

檢查樣式表的排隊狀態(tài)：wp_style_is()

相關(guān)介紹

怎么讓插件加載css和js? – wordpress開發(fā)

CSS編碼規(guī)范

常用色譜簡析 - 中國傳統(tǒng)顏色卡

CSS-Inspiration - 學(xué)習(xí) CSS 的靈感（專業(yè)）

主題發(fā)展-Wordpress主題開發(fā)官方文檔