Question

我在外部页面中加载wordpress内容。我在3列中显示de content。我创建了一个计数器来做到这一点。这完美无缺，除了我想让它响应。这适用于缩略图，但不适用于列。如果屏幕或浏览器大小小于1024px，如何在PHP中将3列的值更改为1？这是我的代码，感谢您的帮助。

<?php
$compteur=0;
    echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo "<td width='30%'>";
    echo "<br />";
    if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
    echo the_date();
    echo "<br /><h1>";
    echo the_title();
    echo "</h1>";
    echo the_excerpt();
    echo "<td />";

    $compteur++;

if ($compteur==3)
{
    echo "<tr/><tr>";
    $compteur=0;
}
}
    echo "<tr /><table/>" ; 
?>

Answer 1

使用媒体查询并将单元格设置为块：

@media (max-width: 1024px) {
  td {
    display: block;
  }
}

在实践中，您可能希望为表提供一个类，并在规则中使用该类，这样您就不会影响每个表。

另外，如上面的评论中所述，使用div代替表格单元格会更容易处理。

示例：

$compteur=0;
echo "<div width='100%'>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post) {
  setup_postdata( $post );
  echo '<div class="col">' . "\n";
  if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’ );
    echo '<img width="100%" src="' . $image_src[0] . '">';
  }
  echo the_date();
  echo "\n<h1>";
  echo the_title();
  echo "</h1>";
  echo the_excerpt();
  echo "</div>";

  $compteur++;

 if ($compteur==3)
 {
    $compteur=0;
 }
}
echo "</div>" ;

然后，让CSS像：

.col {
    width: 30%;
    float: left;
}
@media (max-width: 1024px) {
   .col {
      width: 100%;
   }
}

Answer 2

我的坏，它完全正常工作。

以下是代码：

<div id="articles">
<?php
$compteur=0;
    echo "<div width='100%'>";
    echo '<div class="colonnes">';
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo '<div class="col">' . "\n";
    echo "<br />";
    if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
    echo the_date();
    echo "<br /><h1>";
    echo the_title();
    echo "</h1>";
    echo the_excerpt();
    echo "</div>";

    $compteur++;

if ($compteur==3)
{
    echo "</div>";
    echo '<div class="colonnes">';
    $compteur=0;
}
}
    echo "</div /></div>" ; 
?>
</div>

和css：

.colonnes{
    display:block;      
    width: 100%;
}
.colonnes:after {
    visibility: hidden;     
    display: block;     
    font-size: 0;       
    content: " ";       
    clear: both;    
    height: 0; 
 }
.col {
   border: 1px solid #999999; 
   float: left;     
   width: 30%;
}
@media (max-width: 1024px) {
   .col {
      width: 100%;
   }
}

谢谢你的帮助。

Answer 3

好的，这个人正在工作。现在我试图在几个页面中显示帖子。我更改了我的代码并添加了上一个/下一个导航。当我点击下一步时，我的链接错误，是我实际网站的404页面。那么，有什么不对吗？

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
    echo '<div class="tableau">';
    echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo '<div class="col">' . "\n";
    echo '<div class="img-crop">';
    if ( has_post_thumbnail() ) {
    echo '<a href='.post_permalink($ID).'>';
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img src="' . $image_src[0] . '">';
}
    echo '</a>';
    echo '</div>';
    echo '<br/>';
    echo '<div class="date">';
    echo the_time('j F Y');
    echo "</div>";
    echo '<div class="title">';
    echo the_title();
    echo "</div>";
    echo '<div class="excerpt">';
    echo the_excerpt();
    echo "</div>";
    echo "</div>";

    $compteur++;

if ($compteur==3)
{
    echo "</div>";
    echo '<div class="colonnes">';
    $compteur=0;
}
}
    echo "</div /></div>" ; 
?>
</div>

使用php更改屏幕大小的计数器值

3 个答案: