#php #wordpress
Вопрос:
Я пытался отобразить список сообщений с помощью вкладки начальной загрузки и разбиения на страницы. У меня есть три вкладки (Обе, Блог, Новости). Я использую next_posts_link и previous_posts_link для разбиения на страницы. Моя вкладка начальной загрузки работает нормально, как и разбиение на страницы. Но когда я пытаюсь перейти на другую вкладку, например в блог, и пытаюсь перейти на страницу там, система переводит меня на первую вкладку. Вот мой полный код:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Both</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Blog</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">News</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next amp;rarr;', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous amp;larr; ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'category_name' => 'blog',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next amp;rarr;', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous amp;larr; ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<section class="vendor-section-2 mt-5">
<div class="container">
<div class="row">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query(
array(
'posts_per_page' => 6,
'post_type' => 'post',
'category_name' => 'news',
'paged' => $paged
)
);
$page_amount = $the_query->max_num_pages;
?>
<div class="container pagination-count">
<div class="row">
<div class="col-6">
<p>Page <span><?php echo $paged ?></span> of <span><?php echo $page_amount ?></span> </p>
</div>
</div>
</div>
<?php
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$post_id = get_the_ID();
?>
<div class="col-md-4 mt-5">
<div class="card">
<img src="<?php the_post_thumbnail_url() ?>" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" class="read-more" >
<svg xmlns="http://www.w3.org/2000/svg" width="24.111" height="23.646" viewBox="0 0 24.111 23.646" style="margin-right: 10px; margin-top: -5px;">
<path
id="Path_84"
data-name="Path 84"
d="M9.544.241a3.061,3.061,0,0,1,3.348.642c1.4,1.427,4.322,1.638,5.638,2.976,1.49,1.518,1.358,4.151,2.856,5.584a7.9,7.9,0,0,1,2.163,8.913,7.942,7.942,0,0,1-3.789,4.323c-6.319,2.6-14.617-.268-18.3-5.889-1.8-2.745-2.12-6.848.122-9.133C3.947,5.245,5.608,1.887,9.544.241Z"
fill="#f3943f"
/>
</svg>
Read More
</a>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;?>
<div class="next-prev-btn">
<!-- then the pagination links -->
<?php next_posts_link( 'Next amp;rarr;', $the_query ->max_num_pages); ?>
<?php previous_posts_link( 'Previous amp;larr; ' ); wp_reset_query();?>
</div>
</div>
</div>
</section>
</div>
</div>
Ребята, вы можете порадовать меня здесь?
Ответ №1:
Я решил эту проблему с помощью этого скрипта.
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' activeTab '"]').tab('show');
}
});