我想听听反馈,在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中。
最合适的回答,由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
它将位于主题的目录中。
参考文献: