我正在使用基于Bootstrap的入门主题“Understrap”,它将bootsrap整合到下划线中。
我的目标是在首页上以水平三列显示我的最新帖子,所以:
1 2 3
4 5 6
7 8 9
...
我是初学者,所以我很难弄清楚如何使用Understrap来解决这个问题。
我的Index.php代码如下所示。任何帮助将不胜感激!
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package understrap
*/
get_header();
$container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
?>
<?php if ( is_front_page() && is_home() ) : ?>
<?php get_template_part( 'global-templates/hero', 'none' ); ?>
<?php endif; ?>
<div class="wrapper" id="wrapper-index">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
<main class="site-main" id="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* 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( 'loop-templates/content', get_post_format() );
?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'loop-templates/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
<!-- The pagination component -->
<?php understrap_pagination(); ?>
</div><!-- #primary -->
<!-- Do the right sidebar check -->
<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php get_sidebar( 'right' ); ?>
<?php endif; ?>
</div><!-- .row -->
</div><!-- Container end -->
</div><!-- Wrapper end -->
<?php get_footer(); ?>
答案 0 :(得分:0)
您可以使用Bootstrap中的行/列类,以及计数器($ i)在3列之后重新启动行。以下是基于您的代码进行更改的想法:
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package understrap
*/
get_header();
$container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
?>
<?php if ( is_front_page() && is_home() ) : ?>
<?php get_template_part( 'global-templates/hero', 'none' ); ?>
<?php endif; ?>
<div class="wrapper" id="wrapper-index">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
<main class="site-main" id="main">
<?php if ( have_posts() ) : ?>
<?php $i = 1; ?>
<div class="row">
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-4">
<?php
/*
* 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( 'loop-templates/content', get_post_format() );
?>
</div><!-- /.col -->
<?php
if( $i == 3 ){
echo '</div><div class="row">';
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div><!-- /.row -->
<?php else : ?>
<?php get_template_part( 'loop-templates/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
<!-- The pagination component -->
<?php understrap_pagination(); ?>
</div><!-- #primary -->
<!-- Do the right sidebar check -->
<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php get_sidebar( 'right' ); ?>
<?php endif; ?>
</div><!-- .row -->
</div><!-- Container end -->
</div><!-- Wrapper end -->
<?php get_footer(); ?>
希望我会帮忙!