Приветствую! Подскажите, возможно ли сортировать записи по значению поля ACF (тип поля - текст). В нем прописываются только числа, и, чем больше число, тем выше запись в списке. При этом, записи, у которых данное поле не прописано, сортируются как обычно в хронологическом порядке (старые внизу, свежие вверху).
Конструкция вывода такая:
<ul><?php global $post; $postslist = get_posts( array( 'posts_per_page' => 150, 'category'=>'3', 'order'=>'DESC' ) ); foreach ( $postslist as $post ){ setup_postdata($post);?> <li> <a chref="<?php the_permalink() ?>"><?php the_title(); ?></a> <?php if( get_field('my_field') ): ?> <?php the_field('my_field'); ?> <?php endif; ?> </li><?php } wp_reset_postdata(); ?></ul>
Помог добрый человек с одного форума, за что ему огромная благодарность. Возможно, кто-то столкнется с такой же проблемой, поэтому выложу здесь рабочий вариант.
Swiper JS слайдер с миниатюрами внутри табов:
<!DOCTYPE html><html><head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .swiper { width: 600px; height: 300px; border: 1px solid red; } section { display: none; } section.active { display: block; } .tab-link.active { background-color: #FFD700; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script> window.addEventListener("load", function() { const tabs = [...document.querySelectorAll(".tab-body")]; for (const tab of tabs) { tab.classList.add("active"); const divs = [...tab.querySelectorAll(".swiper")]; const swiper = new Swiper(divs[1], { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); new Swiper(divs[0], { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, thumbs: { swiper: swiper } }); tab.classList.remove("active"); } tabs[0].classList.add("active"); }) </script></head><body> <ul class="tab-head"> <li> <a href="#tab-1" class="tab-link active"> Tab 1 </a> </li> <li> <a href="#tab-2" class="tab-link"> Tab 2 </a> </li> </ul> <section id="tab-1" class="tab-body entry-content active"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Thumb 1</div> <div class="swiper-slide">Thumb 2</div> <div class="swiper-slide">Thumb 3</div> <div class="swiper-slide">Thumb 4</div> <div class="swiper-slide">Thumb 5</div> </div> </div> </section> <section id="tab-2" class="tab-body entry-content"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide2 1</div> <div class="swiper-slide">Slide2 2</div> <div class="swiper-slide">Slide2 3</div> <div class="swiper-slide">Slide2 4</div> <div class="swiper-slide">Slide2 5</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Thumb2 1</div> <div class="swiper-slide">Thumb2 2</div> <div class="swiper-slide">Thumb2 3</div> <div class="swiper-slide">Thumb2 4</div> <div class="swiper-slide">Thumb2 5</div> </div> </div> </section> <script> document.addEventListener("DOMContentLoaded", function() { let elem = document.querySelector(".tab-head"); elem.addEventListener("click", function({ target }) { if (target.closest(".tab-link")) { elem.querySelector(".tab-link.active").classList.remove("active"); target.classList.add("active"); const id = target.getAttribute("href"); document.querySelector(".tab-body.active").classList.remove("active"); document.querySelector(id).classList.add("active"); }; }) }) </script></body></html>
А если так?
Не, тоже не то, причина не в этом оказывается. Причина не в ошибке кода, дело немного в другом оказалось. Слайдеры в табах, соответственно, изначально виден только один, а второй в скрытом блоке (display:none). Следующий слайдер не работает из-за того, что он скрыт изначально, поэтому не может нормально инициализироваться. Нашел одно решение (https://stackoverflow.com/questions/56980314/how-to-use-same-swiper-in-tabs), но оно не подходит, т.к. предназначены для табов, которые содержат один слайдер, а у нас их 2 (основной и миниатюры). Вот мой код.
<div id="tabs-section" class="tabs"" /> <ul class="tab-head"> <li> <a href="#tab-1" class="tab-link active"> Tab 1 </a> </li> <li> <a href="#tab-2" class="tab-link"> Tab 2 </a> </li> </ul> <section id="tab-1" class="tab-body entry-content active active-content"> <div> <div class="swiper mySwiper2"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Thumb 1</div> <div class="swiper-slide">Thumb 2</div> <div class="swiper-slide">Thumb 3</div> <div class="swiper-slide">Thumb 4</div> <div class="swiper-slide">Thumb 5</div> </div> </div> </div> <div> </section> <section id="tab-2" class="tab-body entry-content"> <div> <div class="swiper mySwiper4"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 11</div> <div class="swiper-slide">Slide 21</div> <div class="swiper-slide">Slide 31</div> <div class="swiper-slide">Slide 41</div> <div class="swiper-slide">Slide 51</div> </div> <div class="swiper-button-next sec-slider-next"></div> <div class="swiper-button-prev sec-slider-prev"></div> </div> <div thumbsSlider="" class="swiper mySwiper3"> <div class="swiper-wrapper"> <div class="swiper-slide">Thumb 11</div> <div class="swiper-slide">Thumb 21</div> <div class="swiper-slide">Thumb 31</div> <div class="swiper-slide">Thumb 41</div> <div class="swiper-slide">Thumb 51</div> </div> </div> </div> <div> </section></div><script> var swiper = new Swiper(".mySwiper", { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); var swiper2 = new Swiper(".mySwiper2", { spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, thumbs: { swiper: swiper, }, }); var swiper3 = new Swiper(".mySwiper3", { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); var swiper4 = new Swiper(".mySwiper4", { spaceBetween: 10, navigation: { nextEl: ".sec-slider-next", prevEl: ".sec-slider-prev", }, thumbs: { swiper: swiper3, }, });</script>
В консоли вот такая ошибка
Потому что кнопки надо индивидуализировать. В вышеприведенном коде они имеют один и тот же селектор для обоих слайдеров.
Селекторы разные вообще-то)
Так и каким способом решили проблему?
