如何在wordpress主题中添加选项树的所有背景选项?

时间:2014-01-20 19:53:45

标签: wordpress tree options

我对WordPress主题开发比较陌生,我不得不用选项树创建一个主题。我已经成功地在我的wordpress主题中添加了一些选项树插件的选项。但是当我去添加背景选项时,我真的很有立场。我在主题选项上有完整的部分设置'type'=> '背景',在我看到我在仪表板主题选项上找到一些选项,如'选择颜色','背景重复',''背景附件','背景位置'和背景大小。现在我想查询所有方法,但我不知道我该怎么做。我想完全动态这个代码 body {background:url(来自选项树附件)选项树重复选项滚动选项树位置选项树背景大小选项树颜色}

这是精确的css body {background:url(img / body_bg.png)no-repeat scroll 0 0 #ddd}。任何人请帮助我。

4 个答案:

答案 0 :(得分:5)

你可以尝试这样的事情......

<?php $bg_body = ot_get_option( 'bg_body', array() ); ?> 
body
{ 
background-color: <?php if($bg_body['background-color']){echo $bg_body['background-color'] ; }else{ echo '#ffffff';} ?>;
background-repeat:<?php if($bg_body['background-repeat']){echo $bg_body['background-repeat'] ; }else{ echo 'repeat-x';} ?>;
background-attachment:<?php if($bg_body['background-attachment']){echo $bg_body['background-attachment'] ; }else{ echo 'fixed';} ?>;
background-position:<?php if($bg_body['background-position']){echo $bg_body['background-position'] ; }else{ echo 'top';} ?>;
background-image:url(<?php if($bg_body['background-image']){echo $bg_body['background-image'] ; }else{ echo get_template_directory_uri().'/images/bg.png';} ?>) ;
}

我个人将此用于我的高级主题。 www.wpmania.net

答案 1 :(得分:1)

所以首先你必须为背景创建一个选项.....

然后您可以使用以下代码显示该选项....

身体 { 背景颜色: ; 背景重复:; 背景附件:; 背景位置:; background-image:url(); }

实际上,当您创建背景选项时,它会生成一个数组,您需要单独拥有所有数据。我还将上面的代码改进为PHP函数。请检查一下......

// A function that will create css for background options  
function WpmBgColor( $wpm_options, $wpm_class, $identifier){ 
    $wpm_options = ot_get_option( $wpm_options, array() );  
    if($wpm_options['background-color'] | $wpm_options['background-repeat'] | $wpm_options['background-attachment'] | $wpm_options['background-position'] | $wpm_options['background-image'] ){ echo 
        $identifier.$wpm_class . "{ 
        background-color: ".$wpm_options['background-color']."; 
        background-repeat:".$wpm_options['background-repeat']."; 
        background-attachment:".$wpm_options['background-attachment']."; 
        background-position:".$wpm_options['background-position']."; 
        background-image:url(".$wpm_options['background-image'].") ; 
        background-size:".$wpm_options['background-size']."; 
        } ";   
    } 
} 

这个函数有几个参数......

$ wpm_options:它将是您的选项树字段ID $ wpm_class:您要为其添加css的css选择器名称 $ identifier:你的css选择器标识符,无论是类还是id。只要把#作为id并放入&#34; 。 &#34;什么时候上课。并且当它是HTML标记时将其留空。就像身体一样,你可以把它留空。

如果您需要更多说明,请告诉我。 谢谢 Sabbir

答案 2 :(得分:1)

人们问我如何使用betabox的背景选项(OptionTree Metabox).....

首先,你必须在循环中编写以下代码,否则它可能无效......

<?php
$MyBg= get_post_meta($post->ID, 'option_tree_meta_value', false);
$MyBg = $MyBg['0'];
?>

<style type="text/css">
<!-- 
.css_selector
{ 
background-color: <?php if($MyBg['background-color']){echo $MyBg['background-color'] ; }else{ echo '#ffffff';} ?>;
background-repeat:<?php if($MyBg['background-repeat']){echo $MyBg['background-repeat'] ; }else{ echo 'repeat-x';} ?>;
background-attachment:<?php if($MyBg['background-attachment']){echo $MyBg['background-attachment'] ; }else{ echo 'fixed';} ?>;
background-position:<?php if($MyBg['background-position']){echo $MyBg['background-position'] ; }else{ echo 'top';} ?>;
background-image:url(<?php if($MyBg['background-image']){echo $MyBg['background-image'] ; }else{ echo get_template_directory_uri().'/images/bg.png';} ?>) ;
}
-->
</style>

如果你还需要更多帮助,请告诉我。我得到一些时间,我必须回复你。

答案 3 :(得分:1)

@ wpmania.net

我目前正在使用wordpress内联样式功能为帖子添加css&amp;加载我的主样式表后的页面。使用选项树ofc。

中的元变量
    // Inline style for post/page backgrounds
if ( is_single() || is_page() ) {
    $background = get_post_meta( get_the_ID(), 'my_post_background_metabox', true );
    if ( !empty( $background ) ) {
        $background_color       = ( $background['background-color'] != '' ) ? $background['background-color'] . ' ' : '';
        $background_image       = ( $background['background-image'] != '' ) ? 'url('.$background['background-image'].') ' : '';
        $background_repeat      = ( $background['background-repeat'] != '' ) ? $background['background-repeat']. ' ' : '';
        $background_positon     = ( $background['background-position'] != '' ) ? $background['background-position']. ' ' : '';
        $background_attachment  = ( $background['background-attachment'] != '' ) ? $background['background-attachment']. ' ' : '';
        $background_size        = ( $background['background-size'] != '' ) ? 'background-size: '. $background['background-size']. ';' : '';
        $custom_post_background = 
            '/* Custom Background for ' . get_the_title() . ' */' . "\n" .
            '.css_selector { background: '.$background_color.$background_image.$background_repeat.$background_attachment.$background_positon.';'."\n". $background_size .'}';
        wp_add_inline_style( 'my_theme_style', $custom_post_background );
    }
}
编辑:我忘了提到这部分代码在主wp_enqueue_script函数内部