add css to only body text

时间:2017-01-08 作者:user6738171

在我的单篇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;
}

2 个回复
SO网友:Joel

的CSS规则。单个img,当前仅设置最大宽度,设置的填充将应用于正文框中的图像本身。

尝试将图像设置为全宽,并用负边距拉出侧面:

.single img {
     width:100%;
     margin: 0 -100px;
     }

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-imagebackground 属性设置为100%宽度的div。

.single img{background:url(/img.png) no-repeat center center;background-size:cover;min-width:100%;width:100%;}
这实际上取决于您如何在WordPress的每个页面中设置实际内容。但无论你做什么,你都应该尽量避免负边距或填充。这只会在某些情况下对WordPress这样的复杂模板系统造成问题,即使大多数网站看起来还可以。

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s