首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将列添加到底片/下划线博客页面模板文章中

将列添加到底片/下划线博客页面模板文章中
EN

Stack Overflow用户
提问于 2018-04-09 21:12:06
回答 1查看 1.5K关注 0票数 0

我想自定义下划线Wordpress主题博客模板,以包括列围绕每个博客帖子条目。

理想情况下,这些将成为一个带有分页的帖子网格,但现在我只是想让网格正常工作。

这来自于content.php文件:

代码语言:javascript
运行
复制
<?php
/**
* Post rendering content according to caller of get_template_part.
*
* @package understrap
*/

?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<header class="entry-header">

    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
    '</a></h2>' ); ?>

    <?php if ( 'post' == get_post_type() ) : ?>

        <div class="entry-meta">
            <?php understrap_posted_on(); ?>
        </div><!-- .entry-meta -->

    <?php endif; ?>

</header><!-- .entry-header -->

<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>

<div class="entry-content">

    <?php
    the_excerpt();
    ?>

    <?php
    wp_link_pages( array(
        'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' 
    ),
        'after'  => '</div>',
    ) );
    ?>

</div><!-- .entry-content -->

<footer class="entry-footer">

    <?php understrap_entry_footer(); ?>

</footer><!-- .entry-footer -->

</article><!-- #post-## -->
    </div>

谢谢你的帮忙!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-10 16:58:40

我猜你说的是UnderStrap,不是下划线,对吧?

要将引导网格(http://getbootstrap.com/docs/4.1/layout/grid/)添加到文章/博客视图中,您必须做两件事:步骤1,在循环周围包装外部行。为此:打开主题index.php并搜索:<main class="site-main" id="main">

在此后面添加开头部分,这样您就可以得到以下内容:

代码语言:javascript
运行
复制
<main class="site-main" id="main"><div class="row">

现在,在结束标记之前添加结束标记:

代码语言:javascript
运行
复制
</div></main>

第2步,虽然只需要在所有文章周围添加一次外部行包装器,但您需要向循环模板/content.php文件中添加一个Bootstrap col类以及适当的大小变量。所以它适用于循环中的所有文章。

打开该文件并添加以下内容:

代码语言:javascript
运行
复制
<div class="col-6">

就在开始的<article>标签之前。

col-6类的意思是“使用空间的6/12,例如50%。因此,您将有两个项目并排。当然,您可以使用col-4 (4/12=33.33%)来同时拥有三篇文章等等。”

根据您的需要,另一个很好的起点是使用Bootstrap卡套组件:http://getbootstrap.com/docs/4.1/components/card/#card-decks

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49741768

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档