Здравствуйте. Сегодня покажу вам код вывода, сортировки похожих статей (записей) по рубрикам (категориям). Это используется очень часто в сайтах блогового типа.
И так, самая простая функция вывода похожих записей выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="similar_records"> <h3>Похожие записи:</h3> <?php $categories = get_the_category($post->ID); if ($categories) { $category_ids = array(); foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id; $args=array( 'category__in' => $category_ids, // Сортировка производится по категориям 'orderby'=>rand, // Условие сортировки рандом 'post__not_in' => array($post->ID), 'showposts'=>5, //Количество выводимых записей 'caller_get_posts'=>1); // Запрещаем повторение ссылок $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php } echo '</ul>'; } wp_reset_query(); } ?></div> |
Где:
- ‘orderby‘=>rand, – Условие сортировки рандом
- ‘showposts‘=>5, – Количество выводимых записей
- ‘caller_get_posts‘=>1); – Запрещаем повторение ссылок
Такой код выведет у нас простые ссылки похожих статей, тут все просто. Предлагаю усложнить задачу. Сегодня мне нужно было вывести похожие записиси с картинкой, кратким описанием еще и в слайдере, выглядело оно так:
Даю вам код вывода похожих записей в Owl Carousel 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <div class="related_blog_post"> <div class="container"> <?php $categories = get_the_category( $post->ID ); if ( $categories ) : $category_ids = array(); foreach ( $categories as $individual_category ) { $category_ids[] = $individual_category->term_id; } $args = array( 'category__in' => $category_ids, // Сортировка производится по категориям 'orderby' => 'rand', 'post__not_in' => array( $post->ID ), 'showposts' => 20, 'caller_get_posts' => 1 // Запрещаем повторение ссылок ); $posts = get_posts( $args ); if ( $posts ) : $carouse_class = 'rb_posts'; if ( count( $posts ) > 3 ) { $carouse_class = 'rb_posts__carousel owl-carousel owl-theme'; } ?> <h3>Похожие статьи</h3> <div class="<?php echo $carouse_class ?>"> <?php foreach ( $posts as $post ) { setup_postdata( $post ); get_template_part( 'template-parts/content', 'post_preview' ); } wp_reset_query(); ?> </div> <?php endif; endif; ?> </div> </div><!-- .related_blog_post --> |
Создаем в корне вашей темы папку template-parts и файл content-post_preview.php . Его содержимое:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="post_preview"> <a href="<?php the_permalink(); ?>" class=""><?php the_post_thumbnail(); ?></a> <div class="post_preview__content"> <div class="post_preview__title"> <a href="<?php the_permalink(); ?>" class=""><?php the_title(); ?></a> </div> <div class="post_preview__excerpt"> <?php the_excerpt(); ?> </div> <div class="post_preview_btn"> <a href="<?php the_permalink(); ?>" class="btn">Подробнее</a> </div> </div><!-- .post_preview__content --> </div><!-- .post_preview --> |
Ну и инициализируем Owl Carousel, я это делаю через заранее созданный и подключенный custom.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | jQuery('.rb_posts__carousel').owlCarousel({ loop:true, margin:20, nav: true, navText: [""], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 }, 1200:{ items:4 } } }) |
Как подключить и стилизировать саму галерею описывать не буду, думаю тут сами разберетесь. Если у вас с этим проблемы, пишите в коментарии, сделаю отдельную статью
Залишити відповідь