主页 / 问题 / 586465
Accepted
Bim Bam
Asked:2020-11-03 22:50:20 +0000 UTC2020-11-03 22:50:20 +0000 UTC

创建一个包含新闻列表的页面，其中新闻预览将有多种视图（Wordpress）

  • 772

在此处输入图像描述

在 WordPress 上拉伸模板，我停在新闻页面上。我可以制作一个“线性”（本质上相同）的列表，但我什至无法想象如何将它制作成图片中的那样，以便新闻形成这样的“马赛克”。也许有一些插件？

wordpress

1 个回答

  1. Best Answer

    PHP 和 SWITCH CASE 来帮助你

        <div class="content">
     <?php if ( have_posts() ) :
     $i=0; ?>
     <?php while ( have_posts() ) : the_post();
     $i++;
     switch ($i) {

     case 1:?>

<!-- START POST 1 -->

<div class="wrapper">
    <div class="post-<?php echo $i;?>">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
        <div class="post-<?php echo $i;?>-title">
            <h2><?php the_title() ?></h2>
            <?php the_excerpt() ?>
        </div></a>
    </div>
</div>

<!-- END POST 1 -->
<?php break;

    case 2:?>

<div class="wrapper">

    <!-- START POST 2 -->

    <div class="left-side">
        <div class="post-<?php echo $i;?>">
            <div class="post-wrap">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <div class="post-<?php echo $i;?>-title">
                        <h2><?php the_title() ?></h2>
                        <?php the_excerpt() ?>
                    </div>
                </a>
            </div>
            <div class="read-more">
                <a href="<?php the_permalink(); ?>">Les mer</a>
            </div>
        </div>
    </div>

    <!-- END POST 2 -->

    <?php break;

    case 3:?>

    <!-- START POST 3 -->

    <div class="right-side">
        <div class="post-<?php echo $i;?>">
            <div class="post-wrap">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <div class="post-<?php echo $i;?>-title">
                        <h2><?php the_title() ?></h2>
                    </div>
                </a>
            </div>
            <div class="read-more">
                <a href="<?php the_permalink(); ?>">Les mer</a>
            </div>
        </div>

        <!-- END POST 3 -->

        <?php break;

        case 4:?>

        <!-- START POST 4 -->
    ну и так далее...
    • 1

相关问题