php - Wordpress:响应式地在前端静态页面上显示博客。

Question

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

我需要这个博客能够响应并且只显示这么多的帖子和特定的屏幕尺寸。我假设我需要在 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--> 

Answer 1

1. 在 Google Chrome 或 Firefox 中打开您的博文页面。右键单击其中一篇博文并单击“检查元素”(在 Firefox 中可能略有不同，但想法相同)。这将向您显示应用于该特定元素的 CSS 规则。

2. 确保您在检查器中选择了整个帖子。您可以通过在检查器窗口中显示的 HTML 中找到类为“post”的元素来完成此操作。在右侧(使用 Chrome，如果检查器窗口在底部，而不是侧面)，您应该看到应用于该元素的所有 CSS 规则。其中之一将是类(class)“职位”。这些是您要首先开始修改的 CSS 规则。

3. 假设您希望在 1024 像素的桌面屏幕上查看时每行并排显示 3 个帖子。您可以在 .post { 下设置以下规则:

   .post { 显示:内联 block ； 宽度:300px； }

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

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

一旦掌握了这个基本概念，就可以开始做更复杂的事情，但这就是基本概念。我给出的例子甚至不需要使用媒体查询，只需要基本的 CSS。您还可以使用诸如“最大宽度”和像素/百分比之类的东西来实现很多“响应能力”，而无需媒体查询。

另外需要注意的是，通过执行我在第 2 步中提到的操作，您应该能够轻松确定需要修改的 CSS 文件，因为文件名应该位于CSS 选择器旁边的右侧。因此，寻找类似“style.css”的内容——无论该元素旁边列出的“.css”文件是您需要修改的内容。