如何在WordPress中的php函数中调用css

Question

我正在研究一个wordpress主题，我希望能够将css更改应用于所有页面而不仅仅是一个页面，例如，首页仅在首页上应用更改，我希望能够在函数中调用它.php，但是我不确定如何调用它。

简而言之，如何在 php 函数中调用 css，在函数.php文件中

有什么建议吗？

模板首页.php

<?php
/**
* Template Name: Front Page
*
* @package Eli
*/
get_header();
$hero = cs_get_option('hero_image');
?>
<style type="text/css">
.hero:before{
background-color:<?php echo cs_get_option('hero_color_picker');?>;
}

.hero:after{
 background-color:<?php echo cs_get_option('hero_color_picker');?>;
}
a{
    color: <?php echo cs_get_option('link_color');?>; 
}
footer a{
    color:<?php echo cs_get_option('link_color');?>; ;
}

</style>
<div class="row">
    <div class="hero" style="background-image:url(<?php echo $hero; ?>); width:100%; min-height:350px; background-size: cover;">
        <div class="container">
            <div class="col-md-12">
                <header class="hero-text">
                <?php if (get_field('hero_title') ):?>
                    <h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
                <?php endif;?>
                <?php if (get_field('hero_span') ):?>
                    <span><?php the_field('hero_span'); ?></span>
                <?php endif;?>

                <?php if (get_field('hero_span_2') ):?>
                    <span id="move"><?php the_field('hero_span_2'); ?></span>
                <?php endif;?>


                </header>
            </div>
        </div>
    </div>
</div>
<section class="section-home">
    <div class="row">
        <div class="container">
            <div class="line"></div>
            <?php if (get_field('content_block_left') ):?>
            <div id="cbl" class="col-md-4 col-xs-12">
                <?php the_field('content_block_left_icon'); ?>
                <?php the_field('content_block_left'); ?>
            </div>
            <?php endif;?>
            <?php if (get_field('content_block_left2') ):?>
            <div id="cbl" class="col-md-4 col-xs-12 ">
                <?php the_field('content_block_left_2_icon'); ?>
                <?php the_field('content_block_left2'); ?>
            </div>
            <?php endif;?>
            <?php if (get_field('content_block_left3') ):?>
            <div id="cbl" class="col-md-4 col-xs-12">
                <?php the_field('content_block_left_3_icon'); ?>
                <?php the_field('content_block_left3'); ?>
            </div>
            <?php endif;?>
        </div>
    </div>
</section>
<div class="section-about">
    <div class="row">
        <h1>Beat Your Rivals</h1>
        <div class="line"></div>
        <div class="container">
            <?php if (get_field('image_left') ):?>
            <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
                <img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
            </div>
            <?php endif;?>
            <?php if (get_field('caption_text') ):?>
            <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
                <?php the_field('caption_text'); ?>
            </div>
            <?php endif;?>
        </div>
    </div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
    <div class="row">
        <div class="container">
            <?php if (get_field('test_text') ):?>
            <div id="cbl3" class="col-md-12 col-xs-12">
                <?php the_field('test_text'); ?>
            </div>
            <?php endif;?>
        </div>
    </div>
</div>

<div class="about-us">
    <div class="row">
        <div class="container">
        <?php if (get_field('about_us') ):?>
            <div class="col-md-12 col-xs-12">
                <?php the_field('about_us'); ?>
            </div>
        <?php endif;?>

        </div>
    </div>
</div>

<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
    <div class="row">
        <div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
            <div class="container">
            <?php if (get_field('consult_us') ):?>
                <div class="col-md-12 col-xs-12">
                    <?php the_field('consult_us'); ?>
                </div>
            <?php endif;?>

            </div>

        </div>
    </div>
</div>

<?php if (get_field('contact_us') ):?>
<div class="contact-us">
    <div class="row">
        <div class="container">
        <h1 class="contact-h1">Contact Us</h1>
        <div class="line"></div>

            <div class="col-md-12 col-xs-12">
                <?php the_field('contact_us'); ?>
            </div>

        </div>
    </div>
</div>
<?php endif;?>
<?php get_footer(); ?>

Answer 1

不确定您是否想知道如何将 css 排队或如何将 css 限制为特定页面，因此

要在函数中包含样式使用.php

function site_styles() {
    wp_register_style( 'global-css', get_template_directory_uri() . '/assets/css/global.css');
    wp_register_style( 'frontpage-only-css', get_template_directory_uri() . '/assets/css/frontpage.css');
}
add_action('init', 'site_styles');

而不是您可以决定在哪里使用这些样式

// is_front_page()
// is_page(XX) - is page id XX
// is_single() && get_post_type()="custom_post_type" - single for custom posts
// more about conditional tags: https://codex.wordpress.org/Conditional_Tags
function enqueue_styles() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'frontpage-only-css' );
    } else {
        wp_enqueue_style( 'global-css' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );