簡體   English   中英

在WordPress中正確創建子主題的困惑

[英]Confusion of creating a child theme properly in wordpress

嘗試從wordpress二十十五主題創建一個子主題。 WordPress的法典說

請注意,以前的方法是使用@import導入父主題樣式表:這不再是最佳實踐。 使父主題樣式表排隊的正確方法是在子主題的functions.php中使用wp_enqueue_script()。

負責加載25個樣式和javascript文件的函數是

function twentyfifteen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

    // Add Genericons, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

    // Load the Internet Explorer specific stylesheet.
    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' );

    // Load the Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

    wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

    if ( is_singular() && wp_attachment_is_image() ) {
        wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
    }

    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
    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' );

因此,從父代的functions.php復制它並將其粘貼到子代的functions.php ,我做了什么:1.更改了函數名稱。 2.更換線

wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

3.刪除了javascript文件的代碼。

我還會刪除不是父主題的主要樣式表的其他樣式表嗎? 如何正確包含兒童主題中的另一個樣式表? (我只使用wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );嗎?

您不需要太多的時間來制作子主題,不需要使用問題中的大多數代碼:

  1. 在“主題”目錄中創建一個文件夾,並根據需要命名。 二十五歲的孩子會說清楚
  2. 創建一個名為style.css的文件,並將以下內容放在頂部:

     /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ 
  3. 創建一個functions.php文件,並將以下內容粘貼到其中:

     <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } 

很奇怪,我可以回答但還不能發表評論...我也想知道為什么人們在CSS中使用@import的原因,而WordPress特別指出了這種方式:

以下示例函數僅在您的父主題僅使用一種主要style.css來保存所有CSS時才起作用。 如果您的主題有多個.css文件(例如,.css,style.css,main.css),則必須確保維護所有父主題依賴項。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

將“父樣式”設置為依賴項將確保子主題樣式表在其后加載。 看到這里更詳細的討論:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

現在我實際上了解到,我並不總是那樣做依賴項……noob / designer失敗或不良的文檔失敗...?!?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM