是否使用自定义meta框显示背景色或图像?

时间:2013-04-01 作者:ts_52

使用自定义元框,我将如何在页面中显示背景图像(如果没有链接图像,则显示颜色)。

要显示数据的页面的代码。我想将背景色/图像应用于节id=“刊头”。

<?php if (get_post_meta($post->ID, \'_sqcmb_masthead_select\', true)) { ?>

</div><!--end #container .row (from header)-->
    <section id="masthead">
        <div class="row">
            <div class="large-9 large-centered columns">
                <?php
                    $content = get_post_meta( $post->ID, \'_sqcmb_masthead_content\', true );
                    echo do_shortcode( $content );
                ?>
            </div><!-- .large- centered columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->

<!--restart #container .row (from header)--><div id="content" class="row">

<? } else { ?>
<?php } ?>
自定义元框的代码。

/*Metaboxes for masthead section */
$meta_boxes[] = array(
    \'id\'         => \'masthead-options\',
    \'title\'      => \'Masthead Options\',
    \'pages\'      => array( \'page\' ), // Show on Pages
    \'context\'    => \'normal\',
    \'priority\'   => \'high\',
    \'show_names\' => true, // Show field names on the left
    \'fields\'     => array(
        array(
            \'name\'    => \'Display Masthead\',
            \'desc\'    => \'Check this box id you want to display the Masthead Section.\',
            \'id\'      => $prefix . \'masthead_select\',
            \'type\'    => \'checkbox\',
            ),
        array(
            \'name\'    => \'Masthead Content\',
            \'desc\'    => \'Enter the content of the masthead section here. You can insert media, shortcodes, etc.\',
            \'id\'      => $prefix . \'masthead_content\',
            \'type\'    => \'wysiwyg\',
            \'options\' => array( \'textarea_rows\' => 5, ),
        ),
        array(
            \'name\' => \'Background Color\',
            \'desc\' => \'Choose a background color.\',
            \'id\'   => $prefix . \'masthead_bg_color\',
            \'type\' => \'colorpicker\',
            \'std\'  => \'#ffffff\'
        ),
        array(
            \'name\' => \'Background Image\',
            \'desc\' => \'Upload an image as the background. This will override the Background Color. (optional)\',
            \'id\'   => $prefix . \'masthead_bg_image\',
            \'type\' => \'file\',
        ),
    ),
);

2 个回复
最合适的回答,由SO网友:Marco Berrocal 整理而成

您需要提取自定义元框的值(即此背景色或背景图像),然后在验证以确保其具有值(哪一个为空,或者如果两者都具有值,则会发生什么情况)后,确定以下代码段上的内联样式:

 <section id="masthead" style="background-image:<your dynamic value here>">
只需确保验证以下场景:如果他们填充了一种颜色但没有图像,如果他们填充了一种图像但没有颜色,如果他们同时填充了这两种颜色(在metabox上),如果他们不放置任何颜色,等等。

SO网友:ts_52

这是我得到的最后一个代码。我对php真的很陌生,所以它可能完全是拙劣的,但它正在工作。

<?php if (get_post_meta($post->ID, \'_sqcmb_masthead_select\', true)) { ?>

    <section id="masthead" style="background:
        <?php if 
                (get_post_meta($post->ID, \'_sqcmb_masthead_bg_image\', true )) {
                    echo "url(\'";
                    echo $content = get_post_meta( $post->ID, \'_sqcmb_masthead_bg_image\', true );
                    echo "\')no-repeat center;
                            background-size:cover;
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;";    }
                else {
                    echo $content = get_post_meta( $post->ID, \'_sqcmb_masthead_bg_color\', true );
                    echo ";"; }
        ?>" >

        <div class="row">
            <div class="large-12 columns">
                <?php
                    // Get the field
                    $content = get_post_meta( $post->ID, \'_sqcmb_masthead_content\', true );
                    // Filter it for shortcodes
                    echo do_shortcode( $content );
                ?>
            </div><!-- .large-12 columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->


<? } else { ?>
<!-- Do Nothing. -->
 <?php }?>

结束