Question

现在，我将以下代码放在header.php。

中

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

如何将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而不是模板，如果作者发布更改，更新或补丁，就可以更容易地更新模板。

<强>的functions.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');

假设您的主题构建正确并且wp_head();中有<head>，在您的示例中，functions.php除了<link>

之外，您不需要修改任何文件

我将添加对于网站负载优化和性能增强，因为客户端缓存外部样式表，你应该制作一个单独的样式表，然后代替我上面提到的打印出CSS的函数，它将打印出{{1到样式表。

虽然你可以完成不使用<?php bloginfo('template_directory'); ?>，而是使用相对网址（即../ images / .....）仍会对get_option(THEME_PREFIX . 'intro_image')造成问题，所以如果你的风格如果你要注入<head>的样式比你在问题I中列出的更长/更大，那么我在上面列出的表单更改真的很小，使用钩子是一个好的解决方案建议使用@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

@janoChen：假设您的目录结构应该如下所示

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

将所有不带<?php bloginfo('template_directory'); ?>的样式放在styles.css内的/wp-content/themes/your_theme/文件中，然后放在header.php中，只需

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

Answer 5

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

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

基本标记对Web非常有用设计网站的设计师位置，但最终将被放置在另一个地方。

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

如何将以下css代码添加到functions.php的页眉中？

5 个答案: