2011-02-10 37 views
0

現在,我將以下代碼放入header.php如何從functions.php將以下CSS代碼添加到我的頁面標題中?

我認爲解決方案不是很優雅。

如何將此代碼從functions.php添加到我的標題(該代碼的外觀如何)?

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> 
+0

要「調用」某些東西,它必須放在一個函數中,或者在它自己的文件中,你可以用include()或require()。 – 2011-02-10 20:25:26

回答

5

使用掛鉤是最好的方法 - 那麼您只需修改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'); 

假設你的主題是正確建立在<head>wp_head();,它在你的例子確實如此,你不需要國防部的文件除了functions.php


我會補充說,由於外部樣式表的客戶端緩存,您應該製作一個單獨的樣式來進行網站負載優化和性能增強然後,而不是我上面提到的功能打印出的CSS會將<link>打印到樣式表中。

雖然你可以做到不使用<?php bloginfo('template_directory'); ?>,轉而使用相對URL(即../圖像/ ......),將仍然對與get_option(THEME_PREFIX . 'intro_image')這樣一個問題,如果你的樣式表的變化是真的這個小東西我上面列出的使用鉤子是好吧解決方案,如果你想注入到<head>的樣式比你在問題中列出的更長/更大,我會建議使用@ erenon關於動態樣式表的建議以及我只是提到有關修改我的功能&掛鉤以包括樣式表而不是打印樣式。

+0

謝謝我猜鉤子是答案。 – alexchenco 2011-02-11 05:46:01

0

不能通話它,但你可以將它插入CSS:

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

您可以輕鬆地包裹CSS的功能

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

然後調用功能

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

這是一個不好的解決方案。外部樣式表由服務器緩存。您使用的方法意味着它們必須在每個頁面中提供,並且在服務器端更耗費資源。

查看使用該標記來設置站點資源路徑。

的基礎標籤是Web 設計師誰建造在一個 位置的網站,但最終將被放置在 另一個位置是非常有用的。

參見:http://webdesign.about.com/od/htmltags/qt/how-to-use-html-base-tag.htm

0

@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" /> 
相關問題