我还没有在这里找到这个具体问题,所以我想我可以在这里发布有关它的信息,看看是否可以获得一些支持性的反馈/帮助。

我需要这个Blog能够响应,并且只显示这么多帖子和特定的屏幕尺寸。我认为我需要在php代码中执行此操作。我想在首页上循环播放一个博客,以显示3个800PX及以上(屏幕宽度)的博客,2个博客显示450px-800px和1个博客显示300px。大致。
我发现仅使用普通的html和css即可轻松做到这一点,但是对于使用wordpress进行循环编码/ php编码我还是陌生的,并且发现这种令人困惑的地方。我假设我需要在php代码中投放某种“如果是这个,那就这样做”的广告吗?

在我的简单演示html页面中,我做的很好,但这是一个全新的游戏。
Here is my demo site.向下滚动至底部并调整屏幕大小,以了解我的意思。

Here is the actual Div site.现在,我会对其进行响应,因为它会调整大小,但是随着它变小,它变得太草率,并且随着屏幕变小,它在视觉上的循环效果更好,仅显示2,然后在移动设备上显示1。

这是PHP和循环代码。你们其中一个真棒的人能真正知道您的工作将我指向正确的方向吗?然后,您能在书本或其他方面给我一些建议以使我在这方面做得更好,这样我就不会一直在这里打扰您了。



<!-- BEGIN BLOG CALL-OUT SECTION -->
        <div id="blog_section" class="clearfix">
            <div class="blog_posts_container">


                     <?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>

                   <div class="post-wrapping-div">
                       <!-- Blog Thumbnail-->
                       <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>

                       <!-- Blog Post Date/time-->
                       <p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
                       <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
                       </p>

                       <!-- Blog Title-->
                       <p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
                       <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
                       </p>

                       <!-- Blog Content-->
                       <div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
                       <?php the_excerpt(); ?>
                       <a href="<?php the_permalink(); ?>">Read More</a></li>
                       </div>
                  </div>
                  <img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">


                      <?php endwhile; ?> </div>
                      <? endif; ?>
                      <?php wp_reset_postdata(); ?>

        </div>
<!-- END BLOG CALL-OUT SECTION--> 

最佳答案

在Google Chrome或Firefox中打开博客文章页面。右键单击其中一个博客文章,然后单击“检查元素”(在Firefox中可能稍有不同,但思路相同)。这将向您显示应用于该特定元素的CSS规则。
确保在检查器中选择了整个职位。您可以通过在检查器窗口中显示的HTML中找到具有“ post”类的元素来完成此操作。在右侧(使用Chrome,并且如果检查器窗口位于底部而不是底部),您应该看到应用于该元素的所有CSS规则。其中之一将是“ post”类。这些是您要首先开始修改的CSS规则。
假设您希望在1024px的桌面屏幕上查看时,每行3条帖子并排显示。您可以在.post {下设置以下规则:

.post {display: inline-block;width: 300px;}


请注意,您可以直接在Chrome或Firefox的检查器窗口中进行这些更改。他们实际上不会修改您的网站,并且在刷新页面时所有内容都会重置,但这将帮助您测试不同的CSS规则,然后再对CSS文件进行“永久”更改。

现在,由于3 x 300px小于1024px,因此您应该在桌面尺寸屏幕上看到并排显示了三个帖子,然后在下一行显示了三个帖子,依此类推。如果您调整浏览器窗口的大小以使其更小,则应注意在大约900px宽处,第三条帖子将下降到第二行。如果将其尺寸进一步调整为约600像素宽,您会看到第二篇文章下降到第二行。

一旦有了基本概念,就可以开始做更复杂的事情,但这就是基本思想。我给出的示例甚至不需要使用媒体查询,仅需要基本的CSS。您还可以使用“最大宽度”和像素/百分比之类的东西来实现很多“响应性”,而无需媒体查询。

还要注意的重要一点是,通过执行我在第2步中提到的操作,您应该能够轻松确定需要修改的CSS文件,因为文件名应位于CSS选择器的右侧。因此,查找类似于“ style.css”的东西-您需要修改的元素旁边列出的任何“ .css”文件。

10-05 20:44
查看更多