期望的输出

Question

期望的输出

我试图将两个样式表放入Wordpress子主题中。

我写了front-page.php，我想专门申请front-page-style.css。

此外，我写了header.php来覆盖父主题的标题。如果冲突，我已经写过style.css覆盖了父母的样式表。

实际输出

对于front-page.php或所有其他页面，父样式表或子样式表均未应用。

CODE

文件夹结构

+-- 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

您可以使用此功能。将此代码插入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' );
    }
}

您可以使用post_slug（例如，与我们联系-> contact-us）

Answer 2

您需要为每个函数添加一个do_action（）钩子。

function fib(n) 
{
   return n < 2 ? n : fib(n - 1) + fib(n - 2);
}

Answer 3

只需在WordPress中将样式文件分配给页面模板，就可以使用

通过样式名称检查模板

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

在functions.php内部，您可以使用此示例

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

https://dobsondev.com/2015/06/05/conditionally-enqueue-stylesheet-into-wordpress-for-certain-page/的解决方案

WordPress：如何将两个样式表放入不同页面

期望的输出

实际输出

CODE

文件夹结构

Functions.php

3 个答案: