WordPress博客布局要贴全宽然后网格


WordPress blog layout to post fullwidth then grid

我想在我的博客布局上做一些不同的事情,我以前在WordPress上看到过这样做,所以我知道这是可以做到的。以下是我想要实现的:

我希望我的博客正常显示5个帖子,然后旧的帖子显示为一个网格波纹。我在PS中做了一个快速的演示来展示我的意思。这是我的模型:https://i.stack.imgur.com/iXNtK.jpg

这是我在一个网站上看到的:http://www.speedhunters.com

这里是我想要发生的:http://www.motorhive.net

现在你知道我想做什么了,我该怎么做呢?: D

我在这个例子中使用了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 { }

对于div主题:

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