只有一个页面模板的不同样式表

时间:2016-08-29 作者:Reece

我在WP中使用站点/页面生成器已经很长时间了,因此我很熟悉新WP构建中当前的模板、样式表和函数设置。

我有一个旧的主题,我需要为它创建一个独特的页面,我正在努力理解如何为这个页面模板使用特定的样式表。如果页面模板是引用。php和我已经将页眉和页脚添加到模板中(这样我可以使用与主站点相比唯一的元素),我可以看到页眉使用<?php wp_head(); ?>.

What\'s the best way for this page to use the majority of the parent and child theme styles, but process my specific unique styles for this page ONLY?

是否要使用<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>/referral-style.css"> 或者在子主题目录中创建一个函数文件,并使用如下内容:

<?php

// Exit if accessed directly
if ( !defined( \'ABSPATH\' ) ) {
    exit;
}

?>
<?php
function themeslug_enqueue_style() {
    if( is_page( \'referral\' ) ) {   // Only add this style onto the Blog page.
        wp_enqueue_style( \'referral-style\', get_stylesheet_uri() );
    }
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
    wp_enqueue_style( \'parent-stylesheet\', trailingslashit( get_template_directory_uri() ) . \'style.css\', false );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( \'theme-stylesheet\', get_stylesheet_uri(), false );
}

add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_style\' );

2 个回复
SO网友:bynicolas

首选方法是使用add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_style\' ); 在您的孩子主题中functions.php 文件或直接在referral.php 模板页面。不管怎样,都是通过使用add_action 而不是在<link> 标签

注册您的样式也是一种推荐做法。我在您的案例中看到的一个好处是,您可以在functions.php 对于每个文件,都有它们的依赖项,那么您只需在引用页面中将一个句柄排队,WP将加载注册为您的依赖项的所有其他文件referral-style.css.

例如,在functions.php

function themeslug_enqueue_style() {
  wp_register_style( \'referral-style\', get_stylesheet_directory_uri() . \'path/to/your/css-file\', array( \'theme-stylesheet\' ) );
  wp_register_style( \'theme-stylesheet\', get_stylesheet_uri() );

  // load active theme stylesheet in all cases
  wp_enqueue_style( \'theme-stylesheet\' );

}
add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_style\' );
并且在referral.php

function my_referral_enqueue_style() {

  wp_enqueue_style( \'referral-style\' ); // will load theme-stylesheet automatically

}
add_action( \'wp_enqueue_scripts\', \'my_referral_enqueue_style\' );
当然你可以在referral.php 并且仍然在functions.php

if( is_page( \'referral\' ) ) {   

  wp_enqueue_style( \'referral-style\' );

}
但我想向你展示两种方式

SO网友:CodeMascot

如果您不需要经常使用某些脚本或样式,最好在之前注册它们enqueue. 这是在告诉WordPress“请注册那些脚本和样式,我以后会需要它们的。”-

<?php

// Exit if accessed directly
if ( !defined( \'ABSPATH\' ) ) {
    exit;
}

?>
<?php
function themeslug_enqueue_style() {
    wp_register_style( \'referral-style\', get_stylesheet_uri() );
    wp_register_style( \'parent-stylesheet\', trailingslashit( get_template_directory_uri() ) . \'style.css\', false  );
    if( is_page( \'referral\' ) ) {   // Only add this style onto the Blog page.
        wp_enqueue_style( \'referral-style\' );
    }
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
        wp_enqueue_style( \'parent-stylesheet\' );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( \'theme-stylesheet\', get_stylesheet_uri(), false );
}

add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_style\' );