我想在我的博客布局上做一些不同的事情,我以前在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;
?>