Question

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

我需要此博客才能做出响应，并且只显示如此多的帖子和特定的屏幕尺寸。我假设我需要在PHP代码中执行此操作。我想在头版上循环显示博客，从800PX及以上（屏幕宽度）显示3个博客，2个博客显示450px-800px，1个博客显示300px。大致。我发现这很容易用简单的html和css但我不熟悉这个循环编码/ php编码与wordpress并发现这种混乱。我假设我需要在PHP代码中添加某种“如果这是这个，那么这样做”吗？

在我简单的演示html页面中我做得很好，但这是一个全新的球类游戏。 Here is my demo site.向下滚动并调整屏幕大小以查看我的意思。

Here is the actual Div site.现在我对它进行了响应，因为它会调整大小，但它会变得过于邋in，因为它变得越来越小并且在视觉上循环更好，在屏幕变小时只显示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中打开您的博客帖子页面。右键单击其中一篇博文，然后单击＆＃34; Inspect Element＆＃34; （在Firefox中可能略有不同，但同样的想法）。这将显示正在应用于该特定元素的CSS规则。
确保您在检查器中选择了整个帖子。您可以通过查找类＆＃34; post＆＃34;在检查器窗口中显示的HTML中。在右侧（使用Chrome，如果检查器窗口位于底部，而不是侧面），您应该看到应用于该元素的所有CSS规则。其中一个将是课程＆＃34; post＆＃34;。这些是您首先要开始修改的CSS规则。
我们假设您希望在1024px的桌面屏幕上观看时，每行并排显示3个帖子。您可以在.post {下设置以下规则：

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

请注意您可以直接在Chrome或Firefox的检查窗口中进行这些更改。他们实际上不会修改您的网站，刷新页面时会重置所有内容，但这样做会帮助您在制作＆＃34;永久性＆＃34;之前测试不同的CSS规则。 CSS文件中的更改。

现在，由于3 x 300px小于1024px，您应该会在桌面大小的屏幕上看到并排显示的三个帖子，然后在下一行显示三个帖子等。如果您调整浏览器窗口的大小以使其成为可能较小，您应该注意到，在大约900px宽，第三个帖子将下降到第二行。如果你将它进一步调整到大约600px宽，你会看到第二个帖子下拉到第二行。

一旦你掌握了这个基本概念，那么你可以开始做更复杂的事情，但那是基本的想法。我给出的例子甚至不需要使用媒体查询，只需要基本的CSS。你也可以使用＆＃34; max-width＆＃34;和像素/百分比，以实现很多＆＃34;响应＆＃34;无需媒体查询。

另外需要注意的是，通过执行我在步骤2中提到的内容，您应该能够轻松确定需要修改的CSS文件，因为该文件的名称应该在CSS选择器旁边的右侧。所以寻找类似＆＃34; style.css＆＃34; - 无论如何＆＃34; .css＆＃34;文件列在该元素旁边，是您需要修改的内容。

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：在前面的静态页面上显示博客。

2 个答案: