/ Wordpress / Навигация

Навигация

HIT

18.05.2016

1818

На сайте существует множество видов навигации. Одним из видов являются хлебные крошки. В данной статье будут рассмотрены такие виды навигации как: следующая- предыдущая- записи, и нумерация записей в категориях (таксономиях).

Следующая- предыдущая- записи

Простой вывод, название записи и ссылка

<?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>

Следующая и Предыдущая страница (page)

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Навигация
Виджеты jQuery UI
Рекомендации для васВиджеты jQuery UIOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.