dongtang4019
dongtang4019
2019-01-23 00:47
浏览 44
已采纳

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

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' );

?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dsarttv037029
    dsarttv037029 2019-01-23 10:23
    已采纳

    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)

    点赞 评论
  • doukao8851
    doukao8851 2019-01-23 04:28

    You need to add a do_action() hook for each of your function.

    function oceanwp_child_enqueue_parent_style() {
    
      $theme   = wp_get_theme( 'OceanWP' );
      $version = $theme->get( 'Version' );
    
      wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',array( 'oceanwp-style' ), $version );
    }
    // ADD THIS
    add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style');
    
    
    function my_theme_enqueue_styles() {
    
      $parent_style = 'oceanwp-style';
    
      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')
        );
      }else{
         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'));
       }
    }
    // UPDATE THIS
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
    
    点赞 评论
  • dongmao3131
    dongmao3131 2019-01-23 10:31

    simply you need to assign the style file to a page template in wordpress you can check template by it's name using

    <?php if(is_page_template( <your template name> ) ){} ?>
    

    inside functions.php you can use this example

    function register_foundation_style() {
      if ( is_page_template( <tamplate file name> ) ) {
        wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.min.css' );
    }
    }
    add_action( 'wp_enqueue_scripts', 'register_foundation_style' );
    ?>
    

    Solution by https://dobsondev.com/2015/06/05/conditionally-enqueue-stylesheet-into-wordpress-for-certain-page/

    点赞 评论

相关推荐