создание настраиваемой темы WordPress с фильтром кнопок

Question

Я новичок в языке php, мне нужно создать несколько кнопок, которые должны фильтровать / отображать некоторые сообщения определенных категорий, но без перезагрузки страницы. Итак, я знаю, что можно использовать функцию с php и ajax, но я не понимаю, как вызывать ajax и что писать. Результат должен быть таким

Answer 1

Таким образом, с php вы можете отправлять запросы на сервер только для фильтрации сообщений, вызывающих перезагрузку страницы. Вам нужен мгновенный фильтр, который сначала получает все данные, а затем, например, с помощью javascript, фильтрует уже загруженные сообщения по категории / таксономии.

Делается это с помощью Vue. js довольно просто. Зачем использовать Vue js? Вы можете просто добавить его с помощью одной строчки кода на свою страницу WordPress.

Я предполагаю, что теперь вы находитесь в своем архиве. php внутри папки вашей темы. Поместите этот код под get_header ()?> И сделайте vue доступным на вашей странице:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Вы можете найти производственный код здесь: https://vuejs.org/v2/guide/ Если вы не Для отладки не нужны предупреждения консоли.

Теперь я дам вам код, а затем объясню. Имея следующий код в вашем архиве. php (в основном контейнере страницы архива), вы помещаете ссылку, которая переключает контейнер div с кнопками фильтра. Кнопки - это все ваши категории, если вы нажмете на них, сообщения будут отфильтрованы:

<div id="filtered_posts">
    <span class="filter_button" v-on:click="isHidden = !isHidden">Filter by Category</span>
    <div class="filters" v-if="!isHidden">
        <span class="filter" :class="{ active: currentFilter === '' }" v-on:click="setFilter('')">All</span>
        <span class="filter" :class="{ active: currentFilter === category.id }" v-on:click="setFilter(category.id)" v-for="category in categories">{{ category.name }}</span>
    </div>

    <transition-group id="archive" class="categories" name="categories" >
        <div v-if="currentFilter === post.categories['0'] || currentFilter === ''" v-bind:key="post.title.rendered" v-for="post in posts">
            <a v-bind:href="post.link"><img v-bind:src="post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url"></a>
            <a v-bind:href="post.link"><h4 v-html="post.name"></h4></a>
            <p class="smaller" v-html="post.title.rendered"></p>
    </div>
    </transition-group>
</div>

<script src="<?php echo get_template_directory_uri(); ?>/js/filter.js"></script>

Итак, что мы делаем здесь, мы делаем контейнер (#filtered_posts) и помещаем ссылку для переключения фильтра кнопки. После этого внутри div с классом .filters находятся кнопки фильтров. Первый диапазон предназначен для сброса всех сообщений, второй диапазон охватывает ваши категории (выполняется vue js для вас), вызывая функцию setFilter () при нажатии.

Группа перехода используется для красивой анимации перехода, которую мы добавим позже. Здесь вы проверяете свой текущий установленный фильтр в if и обводите свои сообщения, используя v-for = "post in posts", как мы делали это с категориями раньше. Мы выводим некоторые значения, используя поля api wp rest, называя их точкой с последующим именем.

В конце мы включаем файл javascript. И вот мы получаем данные для отображения.

Теперь создайте папку в папке вашей темы под названием «js» и поместите в нее пустой фильтр. js файл.

Теперь вы получаете код для фильтра. js файл, который вы получаете в архиве. php файл с тегом скрипта.

new Vue({
el: '#filtered_posts',
data: {
    currentFilter: '',
    categories: [],
    posts: [],
    isHidden: true,
},
mounted() {
    fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/categories")
        .then(response => response.json())
        .then((data) => {
            this.categories = data;
        })
    fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia")
        .then(response => response.json())
        .then((data => {
            this.posts= data;
        }))
},

methods: {
    setFilter: function (filter) {
        this.currentFilter = filter;
    }
}
});

Создаем экземпляр vue и устанавливаем его к элементу с идентификатором "filter_posts", так что это контейнер, обертывающий наш предыдущий код. Теперь мы создаем некоторые объекты данных, чтобы сохранить в них данные для категорий, сообщений, текущего фильтра и isHidden для переключения кнопок фильтра.

Мы монтируем некоторые данные через api из wordpress. Пожалуйста, используйте URL-адрес вашей страницы WordPress. Убедитесь, что у вас есть https, чтобы он работал. Мы сохраняем полученные данные в наших объектах «категории» и «сообщения».

Функция setFilter получает текущий фильтр через параметр и устанавливает его для этого элемента.

Нам нужно только установить немного CSS, пожалуйста, добавьте к своему стилю. css вашей темы:

.categories {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.categories-enter {
    -webkit-transform: scale(0.5) translatey(-80px);
        transform: scale(0.5) translatey(-80px);
    opacity: 0;
}
.categories-leave-to {
    -webkit-transform: translatey(30px);
    transform: translatey(30px);
    opacity: 0;
}
.categories-leave-active {
    position: absolute;
    z-index: -1;
}

С этим кодом CSS у вас есть приятные переходы при нажатии кнопок фильтра.

Теперь вы все настроены, ваши категории должны отображаться в виде интерактивных кнопок, которые фильтруют вывод внизу.

Об этом коде можно еще многое объяснить, но я думаю, что сообщение уже достаточно длинное. Если вы спросите в комментариях, я добавлю дополнительную информацию, если это необходимо.

Надеюсь, это даст вам плавную и легкую отправную точку для фильтрации сообщений с помощью vue js без перезагрузки.