繁体   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