在我的单篇wordpress帖子中,我想在左右两侧应用100px的填充。问题是,当我把它应用到。仅有一个的发布内容图像也会得到填充。但是,我希望帖子页面上的所有图像都设置为100%。有没有办法将实际正文和图像分开?这似乎是一个相当简单的问题。但我想不出来。非常感谢您的帮助。
仅有一个的php
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), \'full\' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, \'location\', \'Location: \', \', \', \' • \' ));?><?php the_date(\'F m, Y\'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link (\'No Comments\', \'1 Comment\', \'% Comments\', \'post-footer-comment-count\', \'none\'); ?></h1><div class="share"><span>share</span> <?php get_template_part( \'share-buttons-post\' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">follow on email\'</a></h2></div></div>
<?php get_template_part( \'prevandnextpost\' ); ?>
<?php get_template_part( \'related-posts\' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo \'<p>No content found</p>\';
endif;
get_footer();
?>
css
.single .post-title,
.post-title a,
.post-title a:link, .post-title a:visited {
font-family: \'Questrial\', sans-serif;
font-size:30px;
margin-left:6px;
margin: 0 auto;
color:#000000;
margin-bottom: 3px;
margin-top:30px;
}
.single .post-date {
font-family: \'Questrial\', sans-serif;
font-size:13px;
margin-left:6px;
margin: 0 auto;
color:#000000;
}
.single .post-content {
text-decoration: none;
color: #000000;
display: block;
font-family: \'Crimson Text\', serif;
font-size: 18px;
margin:0 auto;
margin-top: -50px;
}
.single .post-info {
background:#ffffff;
padding-left: 100px;
padding-right:100px;
max-width: 1865px;
background-position:center;
background-clip: content-box;
margin: 0 auto;
height:110px;
bottom:100px;
position: relative;
}
.single img {
max-width:100%;
padding: 0 0 0 0 !important;
height:auto;
}
SO网友:MKlodt
如果你不想完全重新安排单曲。php模板结构,您应该只设置一些全局CSS,以便将100px的左/右填充应用于所有文本节点,例如其中的段落和标题。仅有一个的
.single p,
.single h1,
.single h2,
.single h3{padding:0 100px;} //although I suggest using responsive units, not px
.single p,
.single h1,
.single h2,
.single h3{padding:0 4.5rem;} //like this using rem\'s, em\'s or %
如果您使用的是Gutenberg或页面生成器/模板插件,这取决于您在页面中添加内容的方式。但我只想在其中的所有段落和标题中添加填充。发布内容,使文本元素是应用填充的唯一部分,而不是图像。您只需确保不在中添加任何图像
<p></p>
标签。尝试使用s来封装图像。
您还可以使用CSS添加图像background-image
或background
属性设置为100%宽度的div。
.single img{background:url(/img.png) no-repeat center center;background-size:cover;min-width:100%;width:100%;}
这实际上取决于您如何在WordPress的每个页面中设置实际内容。但无论你做什么,你都应该尽量避免负边距或填充。这只会在某些情况下对WordPress这样的复杂模板系统造成问题,即使大多数网站看起来还可以。