最近的帖子和第一个专题

时间:2017-04-04 作者:Senneville

我有下面的代码来列出我网站上最近的帖子。它工作得很好。

我需要改变第一篇文章的风格(更大的图片和更大的标题)。

知道怎么做吗?

<?php $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;
$args = array( \'post_type\' => \'post\', \'posts_per_page\' => 10, \'paged\' => $paged );
$wp_query = new WP_Query($args);
while ( have_posts() ) : the_post(); ?>
    <div class="main-content span12">
        <div class="main-content span4">
            <!--Image article-->
            <img src="<?php the_post_thumbnail_url( \'medium\' ); ?>">
        </div>
        <div class="main-content span8">
            <!--Titre article-->
            <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
            <!--Extrait article-->
            <?php the_excerpt(__(\'(more…)\')); ?>
        </div>
    </div>
<?php endwhile; ?>

2 个回复
最合适的回答,由SO网友:WebElaine 整理而成

最简单的方法是使用CSS,因此您不必更改PHP。假设您有一个或其他包装元素包含所有帖子,您可以使用以下内容

.main-content.span12 img {
    width:50%;
    height:auto;
}
.main-content.span12 h4 {
    font-size:1em;
}
.main-content.span12:first-child img {
    width:100%;
}
.main-content.span12:first-child h4 {
    font-size:2em;
}
:first-child 将仅获取父元素的第一个子元素,因此它将仅应用于第一个子元素<div class="main-content span12">.

SO网友:Johansson

如果不确切知道你在寻找什么,这很难回答,但让我们看看你能做些什么。

Option 1

可以创建名为content-featured.php 在模板的目录中,并将自定义结构放在其中。然后,调用循环中的模板文件:

    if ( have_posts() ) :
        /* Start the Loop */
        while ( have_posts() ) : the_post();
            /*
             * Include the Post-Format-specific template for the content.
             * If you want to override this in a child theme, then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            get_template_part( \'content\',\'featured\' );
        endwhile;
        endif;
这样,除了新创建的模板文件之外,您不必再接触任何东西。

Option 2

更改所提供代码的结构。我假设您正在使用某种引导程序,如样式设置,因为您有span4span12 课程。以下是您可以做的:

班级main-content span12 是包装内容的位置。这是最大宽度,因为它们的宽度设置为span12 (从名字来看)。宽度为100%。

移动到下一个元素DIV 与班级一起main-content span4. 这里是渲染图像的位置。您可以使用span5span6 相反但请记住分别更改下一个DIV的宽度,以便它们总共匹配12个DIV。所以如果你使用span5, 您应该使用span7 为您的下一个DIV.

如果想要更大的图像,可以使用更大的缩略图大小:

<img src="<?php the_post_thumbnail_url( \'large\' ); ?>">

现在移动到下一个元素,并使用span7 而不是span8. 您的内容存储在此处。

the_excerpt() 返回内容的一小部分。如果要显示全部内容,请使用the_content() 相反

更改<h4> 设置为更低或更高的值也可以减小/增大标题的大小。

毕竟,如果这还不够,您可以在DIV中附加一个自定义类,然后在以下情况下设置样式:

div class="main-content span12 my-class">
        <div class="main-content span4 my-class-image">
            <!--Image article-->
        </div>
        <div class="main-content span8 my-class-content">
            <!--Titre article-->
            <h4>...</h4>
            <!--Extrait article-->
        </div>
    </div>
这样,这些类对于您的特色文章来说是独一无二的。然后,使用CSS可以帮助您设置样式:

.main-content.my-class{
    //Your desired style
}
.main-content.my-class-image {
    //Your desired image size
}
.main-content.my-class-image img {
    //You can even set the image\'s size specifically here 
}
我希望这能帮助你更好地理解WordPress帖子的风格。

相关推荐

是否可以取消对特定帖子类型的POSTS_PER_PAGE限制?

我想知道我是否可以取消特定帖子类型的posts\\u per\\u页面限制。在存档中。php页面我显示不同的帖子类型,对于特定的“出版物”帖子类型,我想显示所有帖子。我如何在不影响传统“post”类型的情况下实现这一点?