Как правильно добавить строку в начальную загрузку, чтобы исправить сетку, перемещающуюся на несколько строк
Я использую bootstrap для отображения сообщений на моей главной странице. Мои посты чередуются между 2 рядами из 3 постов и 1 большим постом. Все выглядело хорошо, за исключением того, что я заметил, что если в одном из постов есть более длинный заголовок или выдержка, то остальная часть страницы будет испорчена (пример ниже). После исследования я заметил, что лучшие решения — использовать строку и очистить данные. Однако каждый раз, когда я пытаюсь добавить div строки, я, кажется, помещаю его неправильно. (У меня была некоторая помощь в создании моего front-page.php, поэтому я не знаю, как правильно его добавить) Может кто-нибудь помочь мне правильно добавить строку div в мой front-page.php? Я был бы очень признателен, я пытался найти решение в течение нескольких недель!
Я попытался посмотреть на различные решения вопросов здесь, но я все еще не могу правильно изменить свой собственный код. Так что если кто-то может помочь вообще, это будет очень ценно.
как это должно выглядеть …
как это выглядит, когда у меня есть пост с заголовком (или выдержкой), который состоит из нескольких строк …
как вы можете видеть пример поста 12 перемещается полностью вправо (где он должен быть слева) пример поста 13 и 14 перемещены внизу.
мой front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) {
?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after...
?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
} else { // Small posts
?>
<article <?php post_class( 'col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
}
$i++;
}
?>
</div>
<?php
if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();Решение
Вы можете создать другую переменную $j = 0 и добавьте строку каждый третий небольшой пост в блоге.
<?php
/*
* Template Name:
*/
get_header();
get_template_part('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );if ($the_query->have_posts()) {
?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ($the_query->have_posts()) {
$the_query->the_post();
if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after...
?>
<div class="row">
<article <?php
post_class('col-sm-12 col-md-12');
?>>
<div class="large-front-container">
<?php
the_post_thumbnail('full', array(
'class' => 'large-front-thumbnail'
));
?>
</div>
<h2><a class="front-page-post-title" href="<?php
the_permalink();
?>"><?php
the_title();
?></a></h2>
<p class="front-page-post-excerpt"><?php
echo get_the_excerpt();
?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php
the_permalink();
?>">Read more</a>
<?php
get_template_part('front-shop-the-post');
?>
<?php
get_template_part('share-buttons');
?>
<div class="front-comments"><?php
comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div>
</div>
</article>
</div>
<?php
} else { // Small posts
?>
<?php
if ($j % 3 === 0)
echo '<div class="row">';
?>
<article <?php
post_class('col-md-4');
?>>
<?php
the_post_thumbnail('full', array(
'class' => 'medium-front-thumbnail'
));
?>
<h2><a class="front-page-post-title" href="<?php
the_permalink();
?>"><?php
the_title();
?></a></h2>
<p class="front-page-post-excerpt"><?php
echo get_the_excerpt();
?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php
the_permalink();
?>">Read more</a>
<?php
get_template_part('front-shop-the-post');
?>
<?php
get_template_part('share-buttons');
?>
<div class="front-comments"><?php
comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div>
</div>
</article>
<?php
$j++;
if ($j % 3 === 0)
echo '</div>';
?>
<?php
}
$i++;
}
?>
</div>
<?php
if (get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
} elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
Другие решения
Других решений пока нет …
detector