Javascript 如何在PHP（wordpress）中创建可过滤的投资组合？

我目前正在开发自己的个人投资组合网站。我已经使用Pods创建了一个自定义的post类型来创建公文包项目，我想使用wordpress标签作为过滤器

我已经成功地收到了公文包项目和过滤器。但我如何才能使它们可点击/过滤？我发现的所有东西都包括公文包插件等，但我不想使用它，只想创建我自己的简单可过滤公文包

有人能帮我吗

代码如下：

过滤器：

$tags = get_tags();
    $html = '<div class="post_tags centered-content"> <a href="" class="button" title="Alle projecten">Alles</a>';
    foreach ( $tags as $tag ) {
        $tag_link = get_tag_link( $tag->term_id );

        $html .= "<a href='#{$tag->slug}' title='{$tag->name} filter' class='button outline {$tag->slug}'>";
        $html .= "{$tag->name}</a>";
    }
    $html .= '</div>';
    echo $html;

$tags=get_tags（）；
$html=''；
foreach（$tags作为$tag）{
$tag\u link=get\u tag\u link（$tag->term\u id）；
$html.=”；
}
$html.=''；
echo$html；

投资组合项目：

function getPortfolio(){
    global $post;

    $portfolioargs = array(
        'posts_per_page' => 999,
        'orderby' => 'date',
        'order' => 'DESC',
        'post_type' => 'portfolio',
        'post_status' => 'publish',
        'suppress_filters' => false
    );
    $portfolioitems = get_posts($portfolioargs);    

    foreach ($portfolioitems as $portfolioitem) {
        $feat_image =  wp_get_attachment_image_src( get_post_thumbnail_id($portfolioitem->ID), 'full' );
        $tags = wp_get_post_tags($portfolioitem->ID);

        echo '<div class="card portfolio">';
            echo '<a href="'. get_the_permalink($portfolioitem->ID) .'">';
                echo '<figure>';
                    echo '<img src="'. pods_image_url($feat_image, 'card') .'"/>';
                echo '</figure>';
            echo '</a>';
            echo '<div class="card-title-wrapper">';
                echo '<h3>'. $portfolioitem->post_title .'</h3>';
                echo '<span class="card-subtitle mdi mdi-tag-outline mdi-15px">';
                    foreach ( $tags as $tag ) {
                        echo $tag->name . ', ';
                    }
                echo '</span>';
            echo '</div>';
            echo '<div class="card-content">';
                echo '<p>'. $portfolioitem->post_content .'</p>';
            echo '</div>';          
            echo '<div class="card-actions">';
                echo '<a href="'. get_the_permalink($portfolioitem->ID) .'" class="button flat">Lees meer</a>';
                echo '<a href="'. $portfolioitem->website_url .'" class="button flat" target="_blank">Bekijk website</a>';
            echo '</div>';
        echo '</div>';
    }
}

函数getPortfolio（）{ 全球$员额； $portfolioargs=数组( “每页帖子”=>999， 'orderby'=>'date'， “订单”=>“描述”， “post_type”=>“portfolio”， “发布状态”=>“发布”， “抑制_过滤器”=>false ); $portfolioitems=获得职位（$portfolioargs）； foreach（$portfolioitems作为$portfolioitem）{ $feat_image=wp_get_attachment_image_src（get_post_缩略图_id（$portfolioitem->id），'full'）； $tags=wp\u get\u post\u标签（$portfolioitem->ID）； 回声'； 回声'； 回声'； 回显“.$portfolioitem->post_title.”； 回声'； foreach（$tags作为$tag）{ echo$tag->name.“，”； } 回声'； 回声'； 回声'； 回显“”。$portfolioitem->post_内容。“

”； 回声'； 回声'； 回声'； 回声'； 回声'； 回声'； } }

---

在我看来，让这些标记作为过滤器工作的最好方法是“AJAX”。 在这里，我编写了您的“标记”代码，用作javascript过滤器。希望能有帮助。 首先让我们重写代码以显示标记，我添加了一行（创建了一个输入以使用AJAX发送）：

$tags=get_tags（）；
$html='1
';
foreach（$tags作为$tag）{
$tag\u link=get\u tag\u link（$tag->term\u id）；
$html.=”；
回声'；
回显“.$portfolioitem->post_title.”；
回声'；
foreach（$tags作为$tag）{
echo$tag->name.“，”；
}
回声'；
回声'；
回声'；
回显“”。$portfolioitem->post_内容。“
”；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
}
模具（）；
}

在我看来，让这些标记作为过滤器工作的最好方法是“AJAX”。 在这里，我编写了你的“标签”代码，作为javascript过滤器使用。希望对你有所帮助。 首先让我们重写代码以显示标记，我添加了一行（创建了一个输入以使用AJAX发送）：

$tags=get_tags（）；
$html='1
';
foreach（$tags作为$tag）{
$tag\u link=get\u tag\u link（$tag->term\u id）；
$html.=”；
回声'；
回显“.$portfolioitem->post_title.”；
回声'；
foreach（$tags作为$tag）{
echo$tag->name.“，”；
}
回声'；
回声'；
回声'；
回显“”。$portfolioitem->post_内容。“
”；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
}
模具（）；
}

所有这些代码的确切问题是什么？它做了什么，还有什么还不起作用？问题是我不知道如何让过滤器真正起作用。我有一个过滤器按钮列表，但如果你知道我的意思，我不知道如何让按钮改变它下面的投资组合概述。“好吧，问题是我不知道如何让过滤器真正工作。”-那么你应该首先做一些研究，并试着找出现有的解决方案如何工作。（这不是一个要求私人教程的地方。）从“也许”开始。所有这些代码的确切问题是什么？它做了什么，还有什么还不起作用？问题是我不知道如何让过滤器真正起作用。我有一个过滤器按钮列表，但如果你知道我的意思，我不知道如何让按钮改变它下面的投资组合概述。“好吧，问题是我不知道如何让过滤器真正工作。”-那么你应该首先做一些研究，并试着找出现有的解决方案如何工作。（这不是一个要求私人辅导的地方。）从“也许”开始。

 $tags = get_tags();
 $html = '<div class="post_tags centered-content"> 
 <input type='hidden' name='tag_filter' value=''>
 <a href="" class="button" title="Alle projecten">Alles</a>';
 foreach ( $tags as $tag ) {
    $tag_link = get_tag_link( $tag->term_id );

    $html .= "<a title='{$tag->name} filter' class='button outline filterBtn {$tag->slug}'>";
    $html .= "{$tag->name}</a>";
}
$html .= '</div>';
echo $html;

$('.filterBtn').click(function(){
    var selected_tag = $(this).text();
    $('input[name="tag_filter"]').val(selected_tag);
    $.ajax({
      url: '<?php echo admin_url('admin-ajax.php'); ?>',
      type: 'post',
      data: { action: 'data_fetch', filter: $('input[name="tag_filter"]').val()},
      success: function (data) {
         $('#yourResultDIV').html(data);
      }
    });
})

add_action('wp_ajax_data_fetch' , 'resultsLoad');
add_action('wp_ajax_nopriv_data_fetch','resultsLoad');

function resultsLoad(){
$filter = $_POST['filter'];


global $post;

$portfolioargs = array(
    'posts_per_page' => 999,
    'orderby' => 'date',
    'order' => 'DESC',
    'post_type' => 'portfolio',
    'post_status' => 'publish',
    'tag' => $filter
);
$portfolioitems = get_posts($portfolioargs);    



foreach ($portfolioitems as $portfolioitem) {
    $feat_image =  wp_get_attachment_image_src( get_post_thumbnail_id($portfolioitem->ID), 'full' );
    $tags = wp_get_post_tags($portfolioitem->ID);

    echo '<div class="card portfolio">';
        echo '<a href="'. get_the_permalink($portfolioitem->ID) .'">';
            echo '<figure>';
                echo '<img src="'. pods_image_url($feat_image, 'card') .'"/>';
            echo '</figure>';
        echo '</a>';
        echo '<div class="card-title-wrapper">';
            echo '<h3>'. $portfolioitem->post_title .'</h3>';
            echo '<span class="card-subtitle mdi mdi-tag-outline mdi-15px">';
                foreach ( $tags as $tag ) {
                    echo $tag->name . ', ';
                }
            echo '</span>';
        echo '</div>';
        echo '<div class="card-content">';
            echo '<p>'. $portfolioitem->post_content .'</p>';
        echo '</div>';          
        echo '<div class="card-actions">';
            echo '<a href="'. get_the_permalink($portfolioitem->ID) .'" class="button flat">Lees meer</a>';
            echo '<a href="'. $portfolioitem->website_url .'" class="button flat" target="_blank">Bekijk website</a>';
        echo '</div>';
    echo '</div>';
}


die();
}