На сайте существует множество видов навигации. Одним из видов являются хлебные крошки. В данной статье будут рассмотрены такие виды навигации как: следующая- предыдущая- записи, и нумерация записей в категориях (таксономиях).
Следующая- предыдущая- записи
Простой вывод, название записи и ссылка
<?php echo get_adjacent_post_link( '%link', '< %title', 1 ); ?>
<?php echo get_adjacent_post_link( '%link', '%title >', 1, '', false ); ?>
Продвинутый вид, с миниатюрой, с проверкой есть ли миниатюра, с проверкой есть ли предыдущая следующая записи
<div class="nav">
<?php
$previousPost = get_adjacent_post(true);
$nextPost = get_adjacent_post(true, "", false);
?>
<div id="nav-left">
<?php if($previousPost) : ?>
<a href="<?php echo get_permalink($previousPost->ID)?>">
<p>
<?php if( get_the_post_thumbnail($previousPost->ID ) ) : ?>
<?php echo get_the_post_thumbnail($previousPost->ID, array(50,50, true) ); ?>
<?php else : ?>
<?php echo '<img src="'.get_bloginfo("template_url").'/images/img-default-min.jpg" width="50" height="50" />'; ?>
<?php endif; ?>
</p>
<p><i class="fa fa-chevron-left"></i> <?php echo $previousPost->post_title; ?></p>
</a>
<?php endif; ?>
</div>
<div id="nav-right">
<?php if($nextPost) : ?>
<a href="<?php echo get_permalink($nextPost->ID)?>">
<p><?php echo $nextPost->post_title; ?> <i class="fa fa-chevron-right"></i></p>
<p>
<?php if( get_the_post_thumbnail($nextPost->ID ) ) : ?>
<?php echo get_the_post_thumbnail($nextPost->ID, array(50,50, true) ); ?>
<?php else : ?>
<?php echo '<img src="'.get_bloginfo("template_url").'/images/img-default-min.jpg" width="50" height="50" />'; ?>
<?php endif; ?>
</p>
</a>
<?php endif; ?>
</div>
</div>
Код для вывода ссылки в родительскую рублику, если такая существует
<?php $categories = get_the_category();
if($categories[0]) {
echo '<div id="nav-up"><a href="' . get_category_link($categories[0]->term_id ) . '"><p><i class="fa fa-level-up"></i>Перейти к списку записей данной категории</p></a></div>';
} ?>
Следующая- предыдущая- записи для пользовательской таксономии
Здесь немного изменен запрос get_adjacent_post, добавлена пользовательская таксономия album. Также вся навигация обведена условием — только для типа записей track.
<?php if( is_singular('track') ) : ?>
<?php $previousPostTrack = get_adjacent_post(true, "", false, 'album'); ?>
<?php $nextPostTrack = get_adjacent_post(true, "", true, 'album'); ?>
<div id="nav-left">
<?php if($previousPostTrack) : ?>
<a href="<?php echo get_permalink($previousPostTrack->ID)?>">
<p>
<?php if( get_the_post_thumbnail($previousPostTrack->ID ) ) : ?>
<?php echo get_the_post_thumbnail($previousPostTrack->ID, array(50,50, true) ); ?>
<?php else : ?>
<?php echo '<img src="'.get_bloginfo("template_url").'/images/img-default-min.jpg" width="50" height="50" />'; ?>
<?php endif; ?>
</p>
<p><i class="fa fa-chevron-left"></i> <?php echo $previousPostTrack->post_title; ?></p>
</a>
<?php endif; ?>
</div>
<div id="nav-right">
<?php if($nextPostTrack) : ?>
<a href="<?php echo get_permalink($nextPostTrack->ID)?>">
<p><?php echo $nextPostTrack->post_title; ?> <i class="fa fa-chevron-right"></i></p>
<p>
<?php if( get_the_post_thumbnail($nextPostTrack->ID ) ) : ?>
<?php echo get_the_post_thumbnail($nextPostTrack->ID, array(50,50, true) ); ?>
<?php else : ?>
<?php echo '<img src="'.get_bloginfo("template_url").'/images/img-default-min.jpg" width="50" height="50" />'; ?>
<?php endif; ?>
</p>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
Код для вывода ссылки на архив пользовательских записей. Не путать с пользовательской таксономией, данная ссылка выведет на архив site.ru/track
<div id="nav-up"><a href="<?php echo get_post_type_archive_link($post_type); ?>"><p><i class="fa fa-level-up"></i>Перейти к списку пользовательских записей</p></a></div>
Следующий предыдущий товары для Woocommerce
Создаем экшен для навигации
// Предыдущий / следующий продукты
add_action( 'the_woocommerce_single_navigate', 'wc_next_prev_products_links', 10);
function wc_next_prev_products_links() {
$previousProduct = get_adjacent_post(true, "", false, 'product_cat');
$nextProduct = get_adjacent_post(true, "", true, 'product_cat');
echo "<div class='nav'>";
if($previousProduct) {
echo '<div id="nav-left"><a href="'.get_permalink($previousProduct->ID).'">'.get_the_post_thumbnail($previousProduct->ID, array(50,50, true) ).'<p><i class="fa fa-chevron-left"></i> '.$previousProduct->post_title.'</p></a></div>';
}
if($nextProduct) {
echo '<div id="nav-right"><a href="'.get_permalink($nextProduct->ID).'"><p>'.$nextProduct->post_title.' <i class="fa fa-chevron-right"></i></p>'.get_the_post_thumbnail($nextProduct->ID, array(50,50, true) ).'</a></div>';
}
echo "</div>";
}
В шаблоне WC content-single-product.php добавляем в необходимом месте активацию экшена
<?php do_action( 'the_woocommerce_single_navigate' ); ?>
Нумерация записей в категориях (таксономиях)
Вывод нумерации страниц с записями, количество выводимых записей задается в Настройки > Чтение
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
Либо можем привязать к стандартных хукам WP.
<?php $nav = get_the_posts_pagination( array(
'end_size' => 1, // количество страниц на концах
'mid_size' => 2, // количество страниц вокруг текущей
'prev_text' => __( '< Назад', 'textdomain' ),
'next_text' => __( 'Вперед >', 'textdomain' ),
));
$nav = preg_replace('~<h2.*?h2>~', '', $nav);
echo $nav; ?>
<?php endif; ?>
Стили CSS для нумерации и навигации
/* Постраничная навигация, Предыдущая-Следующая записи */
.nav {width: 100%; float: left; margin: 15px 0;}
nav.navigation.pagination {text-align: center;}
.nav-links {display: inline-block; overflow: hidden;}
.nav-links a, .page-numbers.current, .page-numbers.dots {
float: left;
font-size: 11px;
text-transform: uppercase;
min-width: 42px;
line-height: 42px;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
-webkit-transition: color .2s ease, background .2s ease, border-color .2s ease;
-moz-transition: color .2s ease, background .2s ease, border-color .2s ease;
transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.page-numbers.current {
float: left;
margin: 0;
list-style-type: none;
list-style-image: none;
padding: 0;
text-align: center;
background: #1b1b1b;
color: #19a4c6;
border-color: #1b1b1b;
}
.nav-links a:last-child {border-right: 1px solid #e8e8e8;}
.prev.page-numbers, .next.page-numbers {padding: 0 11px;}
.nav p {padding: 0 5% !important; line-height: 16px;}
.nav .fa {color: #50AAFF; padding: 0 10px;}
#nav-left {float: left; width: 50%}
#nav-right {float: right; width: 50%;}
#nav-left a, #nav-right a {display: table; width: 100%;}
#nav-left a p, #nav-right a p {display: table-cell; vertical-align: middle;}
#nav-up {float: left; width: 100%; padding: 15px 0;}
Более современная верстка:
.nav {margin-left: -15px; margin-right: -15px; display: -webkit-flex; display: flex; margin-bottom: 30px; text-align: center; justify-content: center;}
.nav > a {
width: 50%;
margin: 0 15px;
padding: 15px;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
#nav-left, #nav-right {width: 49%; background: #fff; border: 1px solid #fee201; border-radius: 3px;}
#nav-left:hover, #nav-right:hover {border: 1px solid #ffbf00;}
.nav img {border-radius: 25px;}
.nav i {color: #fee101; width: 15%; margin-right: 0;}
.nav > a p {margin-bottom: 0; width: 85%;}
@media screen and (max-device-width: 800px) {
.nav {flex-wrap: wrap;}
#nav-left, #nav-right {width: 100%; margin: 5px 0;}
}
Перейти в вышестоящую категорию (таксономию), если таковая есть
<?php global $wp_query; $category = $wp_query->get_queried_object(); ?>
<?php if ( !empty($category->parent) ): ?>
<a class="top-cat" href=" <?php echo get_category_link($category->parent); ?> "><i class="fa fa-level-up"></i> Перейти в родительскую категорию</a>
<?php endif; ?>
Следующие предыдущие по кругу (infinite)
Сделаем данный функционал зацикленным (т.е. при переходах по записям всегда будут записи «слева» и «справа»), причем в рамках одной категории.
<div class="post-navi">
<?php $categories = get_the_category();
$previousPost = get_adjacent_post(true);
$nextPost = get_adjacent_post(true, "", false); ?>
<?php if($previousPost) : ?>
<a id="nav-left" href="<?php echo get_permalink($previousPost->ID); ?>">
<i class="fal fa-chevron-left"></i> <?php echo $previousPost->post_title; ?>
</a>
<?php else: ?>
<?php $first = new WP_Query('posts_per_page=1&order=DESC&cat=2'); $first->the_post();
echo '<a id="nav-left" href="' . get_permalink() . '"><i class="fal fa-chevron-left"></i> ';
the_title();
echo '</a>';
wp_reset_query(); ?>
<?php endif; ?>
<a id="nav-cat" href="<?php echo get_category_link( $categories[0]->term_id ); ?>">В каталог <i class="fal fa-chevron-down"></i></a>
<?php if($nextPost) : ?>
<a id="nav-right" href="<?php echo get_permalink($nextPost->ID)?>">
<?php echo $nextPost->post_title; ?> <i class="fal fa-chevron-right"></i>
</a>
<?php else: ?>
<?php $last = new WP_Query('posts_per_page=1&order=ASC&cat=2'); $last->the_post();
echo '<a href="' . get_permalink() . '">';
the_title();
echo ' <i class="fal fa-chevron-right"></i></a>';
wp_reset_query(); ?>
<?php endif; ?>
</div>
[site-socialshare]