WordPress博客布局发布全角然后网格

Question

我想对我的博客布局做一些不同的事情，我以前在 WordPress 上看到过它，所以我知道它可以做到。这是我想要实现的目标：

我希望我的博客正常显示 5 个帖子，然后将较旧的帖子显示为下面的网格。我在 PS 中做了一个非常快速的演示，向您展示我的意思。 这是我的模型： http://i.imgur.com/QqLLq07.jpg

这是我看过的网站： http://www.speedhunters.com

这是我希望发生这种情况的地方： http://www.motorhive.net

所以现在你知道我想做什么，我该怎么做？ :D

Answer 1

我在这个例子中使用了 TwentyTwelve 主题：

index.php

在while 循环之上，您需要初始化一个计数器：

<?php $count = 0; ?>

在您的 while 循环中获取帖子，您可以执行以下操作：

<?php while ( have_posts() ) : the_post(); ?>

    <?php 

        if ($count < 1) { 
            $setClass = "less-than";
        } else {
            $setClass = "more-than";
        }

        $count++;

    //  get_template_part( 'content', get_post_format() ); 
        include(locate_template('content.php'));
    ?>

<?php endwhile; ?>

这意味着任何小于 1 的帖子，因为我们从 0 开始计数器，这只会将其应用于我们的第一个帖子。

if ($count < 1) { 

您还需要注释掉get_template_part 函数，因为我们将无法访问我们的setClass 变量，而只会包含content.php 页面。

content.php

现在我们可以将$setClass 变量传递给post_class() 函数。

所以：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

变成

<article id="post-<?php the_ID(); ?>" <?php post_class($setClass); ?>>

所以现在当您查看索引页面时，您不会注意到任何视觉变化，但如果您检查每个帖子，您应该会看到 class 添加到它们：

<article id="post-4" class="post-4 post type-post status-publish format-standard hentry less-than">

less-than 类已添加到此帖子中。

现在您可以根据这 2 个classes 对帖子进行样式设置。

.less-than { /* your-styles */ }
.more-than { }

对于 Divi 主题：

在index.php 中，将此用于您的if 声明：

if ( have_posts() ) :

$count = 0;

while ( have_posts() ) : the_post(); ?>

    <?php
    if ($count < 1) { 
        $setClass = "less-than";
    } else {
        $setClass = "more-than";
    }
    ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' . ' ' . $setClass ); ?>>

<?php

    $count++;
    echo $count;

    $thumb = '';

    $width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );

    $height = (int) apply_filters( 'et_pb_index_blog_image_height', 9999 );
    $classtext = 'et_pb_post_main_image';
    $titletext = get_the_title();
    $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
    $thumb = $thumbnail["thumb"];

    if ( 'on' == et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
        </a>
<?php
    endif;
?>