php - 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 变量，它只会包含 内容。 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 个 类 设置帖子的样式。

.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;
?>