wordpress - 如何将分页结果与 Bootstrap 导航选项卡链接
问题描述
我有 3 个导航选项卡(使用引导程序创建),用于在我的库页面上使用 wp_query 对结果进行排序。分页效果很好,我遇到的问题是:当我在分页上单击下一个或第二个时,库页面上的活动选项卡将恢复为第一个默认排序选项卡(最近)。
我的代码是:
<?php
/**
* displays archive Library page
*/
get_header();
?>
<div id="page-header">
<section class="wrapper">
<div class="breadcrumbs">
You are here: <a href="">Home</a> / <span class="current">Library</span>
</div>
<h1 class="page-title half">Library</h1>
<div id="item-nav">
<div id="object-nav" class="item-list-tabs" role="navigation">
<ul class="tabs-nav tabs">
<li class="nav-three " data-tab="origin">Book origin</li>
<li class="nav-two " data-tab="year">Book release date</li>
<li class="nav-one current" data-tab="recent">Recent </li>
</ul>
</div><!-- /.item-list-tabs -->
</div><!-- /#item-nav -->
<div class="clear"></div>
</section>
</div><!-- /#page-header -->
<section class="wrapper">
<main class="tab-content current vocab-container" id="recent">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'library',
'post_type' => 'library',
'orderby' => 'meta_value',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
<main class="tab-content vocab-container" id="year">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_status' => 'published',
'post_type' => 'library',
'orderby' => 'meta_value_num',
'meta_key' => 'year',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
<main class="tab-content vocab-container" id="origin">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_status' => 'published',
'post_type' => 'library',
'orderby' => 'meta_value',
'meta_key' => 'origin',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
</section><!-- /.wrapper -->
<?php
get_footer();
?>
链接到我的网站图书馆页面是:http ://elluse.com/library/
我真的很感谢你的帮助。羊毛 :)
解决方案
If someone has similar issue I found similar answered question on stackexchange website. Here is link.
https://wordpress.stackexchange.com/questions/151596/sorting-custom-posts-on-archive-page-with-pagination?newreg=a1f2074307b347d5aecc0b666dcff3be
<script>
function submitform(val) {
document.getElementById('sort-option').value = val;
document.getElementById('form-sort').submit();
}
</script>
<form id="form-sort" action="<?php echo get_permalink(); ?>" method="post">
<ul>
<li>Sort By:</li>
<li><a href="#!" onclick="javascript: submitform('newest');">Newest rating</a>
</li>
<li><a href="#!" onclick="javascript: submitform('highest');">Highest rating</a>
</li>
<li><a href="#!" onclick="javascript: submitform('lowest');">Lowest rating</a>
</li>
</ul>
<input type='hidden' id='sort-option' name='sort-option' value=''>
</form>
_____________________________________________________________________________
if($wp_query->get('page') == 0 && empty($_POST) && !empty($_SESSION)) session_unset();
if(!empty($_POST) || !empty($_SESSION)) {
switch($_POST['sort-option']) {
case 'newest':
$_SESSION["sort"] = SORT_DESC;
$_SESSION["sort_by"] = 'review_date';
break;
case 'highest':
$_SESSION["sort"] = SORT_DESC;
$_SESSION["sort_by"] = 'rating';
break;
case 'lowest':
$_SESSION["sort"] = SORT_ASC;
$_SESSION["sort_by"] = 'rating';
break;
}
foreach($reviews as $k => $v) {
$column_id[$k] = $v[$_SESSION["sort_by"]];
}
array_multisort($column_id, $_SESSION["sort"], SORT_NUMERIC, $reviews);
}
推荐阅读
- sql-server - 报告参数具有取决于报告参数的 DefaultValue 或 ValidValue。前向依赖无效
- r - 通过在 R 中没有唯一标识符的 id 和日期范围合并两个数据框来创建事件
- c# - 查找列表中最大元素的所有索引
- zk - hflex 在 zk 版本 9.0.1.2 中不起作用
- puppeteer - 使用 Puppeteer 检测导航
- css - ReactStrap:当下拉列表很长时,用户看不到最后的值
- c# - Visual Studio 2019 智能感知无法正常工作
- orm - 在 Vlang 中使用 ORM 实现非常好的数据库连接?
- jquery - 循环中的多个放大弹出窗口仅显示最后一项的内容
- matlab - 在具有指定边界的两组曲线之间使用 imagesc 添加两个颜色图(MATLAB)