samdo

Приветствую! Подскажите, возможно ли сортировать записи по значению поля 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>

Тот, кто знает swiper - прекрасно поймет. У меня используется самый стандартный вариант без всякой кастомизации. Вот этот: https://swiperjs.com/demos/300-thumbs-gallery/core

В консоли вот такая ошибка

Селекторы разные вообще-то)

Приветствую! Подскажите как в Contact Form 7  в сообщении об отправке (form_response_output) выводить два разных текста в зависимости от времени суток, например с 9.00 до 22.00 - одно, а с 22.00 до 9.00 - другое. Заранее спасибо!

Deleted

Привет! Подскажите на каком плагине можно сделать аналог отзовика? Смысл в том, что юзер на сайте должен иметь возможность создать запись (ну это понятно, много вариантов) + поставить сам к этой записи рейтинг в виде звёзд. Важный момент, что сам юзер во время создания записи должен иметь возможность выставить рейтинг. Другие же пользователи должны иметь возможность тоже на этот рейтинг влиять. У wp-recall есть почти всё для этого, но нет только одного - возможности пользователю при публикации самому выставить рейтинг своей записи.

Достаточно было перекинуть клаву на разъем USB 3 из USB 2 )