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

Question

我还没能在这里找到这个具体问题，所以我想我可能会 post 在这里，看看我是否能得到一些支持 feedback/help。

我需要此博客能够响应并且只显示这么多 post 和特定的屏幕尺寸。我假设我需要在 php 代码中执行此操作。我想让我在首页上循环播放的博客显示 3 个 800PX 及以上的博客（屏幕宽度），2 个博客显示 450px-800px，1 个博客显示 300px。大致。我发现这很容易用普通的 html 和 css 来完成，但我是这个循环的新手 coding/php 使用 wordpress 编码并发现这种混淆。我假设我需要在 php 代码中添加某种 "if this is this, then do this"？

在我的普通演示 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

在 Google Chrome 或 Firefox 中打开您的博客 post 页面。右键单击其中一个博客 post，然后单击 "Inspect Element"（在 Firefox 中可能略有不同，但想法相同）。这将向您显示应用于该特定元素的 CSS 规则。
确保您在检查器中选择了整个 post。您可以通过在检查器 window 中显示的 HTML 中找到具有 class "post" 的元素来执行此操作。在右侧（使用 Chrome，如果检查器 window 在底部，而不是侧面），您应该看到所有应用于该元素的 CSS 规则。其中之一就是 class "post"。这些是您要首先开始修改的 CSS 条规则。
假设您希望在 1024 像素的桌面屏幕上查看时每行并排显示 3 post。您可以在 .post { 下设置以下规则：

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

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

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

一旦你掌握了这个基本概念，你就可以开始做更复杂的事情，但这是基本的想法。我给出的例子甚至不需要使用媒体查询，只是基本的CSS。您还可以使用 "max-width" 和 pixels/percentages 之类的东西来完成很多 "responsiveness" 而无需媒体查询。

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

Answer 2

这是最终的工作代码（减去明显的 CSS 我需要添加以使其工作）。

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

              <?php $rp_query = new WP_Query( 'showposts=3' ); ?>

  <?php $post_counter = 0; //Set an initial counter to 0 before the loop ?>

  <?php if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>

   <?php $post_counter++; ?>

   <div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>">

                       <!-- 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-->

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

Wordpress: Displaying blog on front static page Responsively.

html

css

php

wordpress

loops