将自定义 css 添加到 wordpress 中的页面模板

Question

你好我需要一些帮助来为我的页面模板创建自定义 css 文件。关于这个问题有很多主题，但是我阅读的每个线程都获得了更多信息并且更加困惑。

我为 twentyfourteen 主题创建了一个子主题，并添加了一个页面模板。如何向此模板添加自定义 css。我发现此代码添加到子主题的 functions.php 中选择适当的 class 和我的 css。但是我如何以及在哪里放置这个 class？我读到我必须将 class 添加到 header.php 中的 body 标签，但我不确定。这是正确的方法吗？

if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}

Answer 1

使用is_page_template()条件选择性加载CSS。

在下面的函数中，我们连接到 wp_enqueue_scripts 并检查我们是否在自定义页面模板上以确定是否加载额外的 CSS。

如果结果为真，我们将从您主题中的 css/ 文件夹加载一个名为 page-template.css 的 CSS 文件。更新路径以加载正确的文件。

function wpse_enqueue_page_template_styles() {
    if ( is_page_template( 'mytemplate.php' ) ) {
        wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-template.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );

Answer 2

这个解决方案怎么样？

<?php 
function mypage_head() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n"
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>

您可以使用 wp_head 挂钩将自定义内容（Javascript、CSS..）添加到您的自定义模板中。我认为这种方式更好，因为所有更改都将包含在您的模板文件中，因此您不必在其他地方签入。

我从 http://scratch99.com/wordpress/development/custom-page-template-external-css-file/ 得到这个解决方案。

Answer 3

这个怎么样？

 function my_custom_styles() {

    wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );

    if ( is_home ) {

    wp_enqueue_style( 'custom-styles' );
    }
 }

 add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

我已经测试了这里的所有三个答案；他们都很好用。有人知道哪个更快更好吗？

将自定义 css 添加到 wordpress 中的页面模板

Add custom css to a page template in wordpress

css

php

wordpress