WordPress：如何为不同的页面排列两个样式表

Question

EXPECTED OUTPUT

I am attempting to enqueue two stylesheets in Wordpress child theme.

I have written front-page.php for which I wish to apply exclusively front-page-style.css.

In addition, I have written header.php to override the parent theme's header. I have written style.css override the parent's stylesheet if it is in conflict.

ACTUAL OUTPUT

For neither front-page.php nor all other pages, neither the parent or the child stylesheet is being applied.

CODE

FOLDER STRUCTURE

+-- oceanwp
+-- oceanwp-child-theme-master
| +-- functions.php
| +-- style.css
| +-- front-page-style.css
| +-- front-page.php
| +-- header.php

Functions.php

function oceanwp_child_enqueue_parent_style() {
    // Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
    $theme   = wp_get_theme( 'OceanWP' );
    $version = $theme->get( 'Version' );
    // Load the stylesheet
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}

function my_theme_enqueue_styles() {
    $parent_style = 'oceanwp-style';
    // if the page is front-page.php, apply front-page-style.css
    if ( is_front_page() ) {
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-rtl.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/front-page-style.css',
            array( $parent_style ),
            wp_get_theme('')->get('Version')
         );
    }

    // if the page is not front-page.php, apply style.css (CHILD) first and style.css (PARENT) second
    if (!is_front_page() ) {
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-rtl.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme('')->get('Version')
         );
    }
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 'my_custom_scripts' );

?>

Answer 1

You can use this function. Insert this code in functions.php

add_action( 'wp_enqueue_scripts', 'styles_custom');
function styles_custom() {
    global $post;
    $post_slug=$post->post_name;

    if ( is_front_page() ) { //only homepage
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-home.css' );
    }

    if (!is_front_page() ) { //all page, not homepage
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-all.css' );
    }
    if($post_slug == 'contact'){ //only page contact
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-contact.css' );
    }
    if($post_slug == '[.....]'){
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style.css' );
    }
}

You can use post_slug, (e.g. Contact Us -> contact-us)