/ Сайтостроение / Wordpress / Навигация

Навигация

18.05.2016

568

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

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

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

<?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' => __( '<&#160;Назад', 'textdomain' ),
'next_text' => __( 'Вперед&#160;>', '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;
}

Перейти в вышестоящую категорию (таксономию), если таковая есть

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

Поделится информацией с друзьями

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

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

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

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