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课程。

现在，您可以根据这些帖子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;
?>

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

1 个答案: