在wordpress中正确创建子主题的混乱


Confusion of creating a child theme properly in wordpress

尝试从wordpress二十五主题创建一个子主题。WordPress Codex 说

请注意,以前的方法是导入父主题 使用@import的样式表:这不再是最佳实践。正确的 对父主题样式表进行排队的方法是使用 wp_enqueue_script() 在子主题的函数中.php。

负责加载二十五个样式和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特别说这是这样的时候:

以下示例函数仅在父主题仅使用一种主样式.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')
    );
}

我现在实际上了解到,我并不总是做依赖的事情......菜鸟/设计师失败或糟糕的文档失败... ?!?当您想要启动两个样式表(即父主题样式表和子主题样式表)时,将使用此方法。 将此处的"父样式"替换为您的父主题主样式表名称,例如"二十二十一样式",您可以在函数下的脚本函数中找到.php