Question

现在，我将以下代码放在＜code＞header.php＜/code＞中。

我认为这个解决方案不是很优雅。

如何将functions.php中的CSS代码添加到我的头中（该代码看起来如何）？

    wp_head();
?>
<style>
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo( template_directory ); ?>/images/<?php echo get_option(THEME_PREFIX .  intro_image ); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo( template_directory ); ?>/images/<?php echo get_option(THEME_PREFIX .  slider_image ); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo( template_directory ); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo( template_directory ); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo( template_directory ); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo( template_directory ); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

Answer 1

使用钩子是最好的方法-然后你只需要修改functions.php，而不需要修改模板，这样在作者发布更改、更新或补丁时更容易更新模板。

函数.php

<?php

function add_styles()
{
    ?>
    <style type="text/css">
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo( template_directory ); ?>/images/<?php echo get_option(THEME_PREFIX .  intro_image ); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo( template_directory ); ?>/images/<?php echo get_option(THEME_PREFIX .  slider_image ); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo( template_directory ); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo( template_directory ); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo( template_directory ); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo( template_directory ); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

    <?php
}
add_action( wp_head ,  add_styles );

假设您的主题构建正确并且具有＜code＞wp_head（）<；头部>函数之外的任何文件进行修改。php

我要补充的是，由于外部样式表的客户端缓存，为了优化网站负载和增强性能，你应该制作一个单独的样式表，然后不是我上面提到的打印CSS的功能，而是打印<；链接>添加到样式表中。

而您可以不使用＜code＞<；？php-bloginfo（template_directory）>，而是使用相对url（即../images/…..），这仍然会对get_option（THEME_PREFIX.intro_image）造成问题，所以如果你的样式表更改真的这么小，我在上面使用钩子列出的是好的解决方案，如果你想注入<；头部>比我建议使用@erenon关于动态样式表的建议和我刚才提到的关于修改我的函数&；挂钩以包含样式表，而不是打印样式。

Answer 2

您可以很容易地将CSS封装在函数中

function headerCSS(){
    ?>
      // YOUR CSS
    <?php
}

然后调用函数

<HEAD>
<?php headerCSS(); ?>
//other header stuff here
<?HEAD>
<BODY>

Answer 3

您不能调用，但可以将其插入为css：

<link href="generate-css.php" type="text/css" rel="stylesheet" />

Answer 4

@陈：假设你的目录结构应该是这样的

/wp-content/
  /themes/
    /your_theme/
      /images/

把所有这些样式都放在没有<；？php-bloginfo（template_directory）>/wp-content/themes/your_theme/内的styles.css文件中的code>，然后在header.php中只需

<link rel="stylesheet" href="<?php bloginfo( template_directory ); ?>/styles.css" media="screen" type="text/css" />

Answer 5

这是一个糟糕的解决方案。外部样式表由服务器缓存。您正在使用的方法意味着它们必须在每个页面中提供，并且在服务器端更耗费资源。

请考虑使用标记来设置站点资源路径。

The base tag is very useful for Web designers who build websites in one location but will ultimately be placed in another location.

请参阅：http://webdesign.about.com/od/htmltags/qt/how-to-use-html-base-tag.htm

友情链接