用于WordPress~Responsitive的最佳实践巨型加速器图像

时间:2016-06-30 作者:carlcreative

我想听听反馈,在WordPress中使用Bootstrap显示全尺寸的jumbotron图像的最佳实践是什么?

我最近使用下面的方法启动了我的第一个网站,它似乎在我的网站上起作用,但必须有一种不同的方式。

<?php
            $args = array(
                \'category_name\' => \'jumbotron\',

            );
                $the_query = new WP_Query( $args );
         ?>

     <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

     <?php
                 $thumbnail_jumbo  = get_post_thumbnail_id($post->ID);
                 $featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , \'full\');
                 $thumbnail_jumbo = $featuredImage[0];
            list($width, $height) = getimagesize($thumbnail_jumbo); ?>

<div class="jumbotron">

<style type="text/css">
        .jumbotron {
          background: no-repeat center right fixed  url(\'<?php echo $thumbnail_jumbo ?>\');
         padding:0;
         margin-bottom: 0px;
         max-width:100%;
         min-height: 500px;
         height: 100%;
         background-size: 100%;
         box-shadow:0px 0px 10px #000;
           -webkit-background-size: 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
         background-size: cover;
           -webkit-background-size: cover;
             -moz-background-size: cover;
               -o-background-size: cover;

        }
        </style>
此代码位于我的标题中。我启动的网站的php文件。还有其他方法吗?我想删除标题中的样式标记,并将其保留在css中。

1 个回复
最合适的回答,由SO网友:Tim Malone 整理而成

如果我明白你的要求,那就是你想要一种方法来移除<style> 标题中的标记-正确吗?这样做绝对是个好主意——只需保持最低限度。这样,样式可以单独管理到您的标记中-保持表示层的独立是最佳实践。

然后,您可以将所有CSS放入外部文件,但实际的背景图像URL除外,因为这是动态部分。您可以像这样插入:

<div class="jumbotron" style="background-image: url(\'<?php echo $thumbnail_jumbo; ?>\');">
不要忘记通过插入</div> 当您完成任何其他标记时,您可能希望将其放入其中。

CSS的其余部分不是动态的,所以您可以将其正确地粘贴到主题的style.css, 或者,如果愿意,可以在单独的样式表中,通过将以下内容放入functions.php:

add_action( \'wp_enqueue_scripts\', \'wpse231142_enqueue_styles\', 10 );

function wpse231142_enqueue_styles() {
  wp_enqueue_style( \'my-styles\', get_template_directory_uri() . \'/my-styles.css\' );
}
这将加载一个名为my-styles.css 它将位于主题的目录中。

参考文献:

相关推荐

About wordpress child themes

我对WordPress和儿童主题有一些问题。据我所知,如果我不想在更新主题时失去任何东西,使用子主题是很重要的。我是WordPress的初学者,到目前为止,我一直在使用PageBuilder(管理面板上的板载自定义选项)自定义我的网站,并在“附加CSS”选项中加入几行CSS。所有这些都是在主主题上完成的(只是玩转尝试学习),现在我想开始使用一个儿童主题。问题如下:我不知道我是否可以像通过管理界面设计父主题那样设计我的子主题,或者我是否必须通过文本编辑器(在我的计算机上,然后通过FTP等方式上传)对所有内容