Wordpress文章类别Ajax URL结构

Question

我有一个基本的wordpress博客，它有类别，当点击类别时，文章过滤器。这很好，但理想情况下，我希望在单击类别时将URL更改为

http://site.preview/resources/CATEGORYNAME

当前，博客以http://site.preview/resources/的形式加载，当单击类别时，它将更改为http://site.preview/resources/#

希望我解释得对。请在下面找到我的密码。

Home.php -博客

<?php get_header('home'); ?>
<div class="banner">
    <div class="in">
        <img src="<?php echo get_stylesheet_directory_uri() . '/assets/images/blue-cover-with-illustrations.png' ?>">
        <div class="banner__content">
            <div class="in">
                <h1>The Good Air Resources Center</h1>
                <h2>Knowledge to figure out indoor air quality. Tips to breathe cleaner air</h2>
            </div>
        </div>
    </div>
</div>
<section class="blog">
    <div class="in">
        <?php
        $categories = get_categories(); ?>
            <div class="categories">
                <div class="in">
                    <h5>Categories</h5>
                    <ul id="category-menu">
                        <?php foreach ( $categories as $cat ) { ?>
                        <li id="cat-<?php echo $cat->term_id; ?>">
                            <a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#">
                                <?php echo $cat->name; ?>
                            </a>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
            <div class="posts">
                <div class="in">
                    <?php
                    $args = array(
                        'post_type' => 'post',
                        'orderby' => 'publish_date'
                    );
                    $post_query = new WP_Query($args);
                    if($post_query->have_posts() ) {
                    while($post_query->have_posts() ) {
                    $post_query->the_post();
                    ?>
                        <div class="post">
                            <div class="in">
                                <div class="post__image">
                                    <?php the_post_thumbnail(); ?>
                                </div>
                                <div class="post__title">
                                    <h4>
                                        <a href="<?php the_permalink(); ?>">
                                            <?php the_title(); ?>
                                        </a>
                                    </h4>
                                </div>
                                <div class="post__content">
                                    <?php the_excerpt(); ?>
                                </div>
                                <div class="post__readmore">
                                    <a href="<?php the_permalink(); ?>" class="btn btn--brand btn--block">Read More ></a>
                                </div>
                            </div>
                        </div>
                        <?php } } ?>
                </div>
            </div>
            <div id="loading-animation" style="display: none;">
                <img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>" />
            </div>
    </div>
</section>
<script>
    function cat_ajax_get(catID) {
        jQuery("a.ajax").removeClass("current");
        jQuery("a.ajax").addClass("current");
        jQuery("#loading-animation-2").show();
        var ajaxurl = '/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                "action": "load-filter",
                cat: catID
            },
            success: function (response) {
                jQuery(".posts .in").html(response);
                jQuery("#loading-animation").hide();
                return false;
            }
        });
    }
</script>
</article>
<?php get_footer('home'); ?>

Functions.php

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
         $args = array (
        'cat' => $cat_id,
        'order' => 'DESC'

    );
    $posts = get_posts( $args );
            global $post;
    ob_start ();
    foreach ( $posts as $post ) {
    setup_postdata( $post ); ?>
<div class="post">
    <div class="in">
        <div class="post__image">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="post__title">
            <h4>
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
            </h4>
        </div>
        <div class="post__content">
            <?php the_excerpt(); ?>
        </div>
        <div class="post__readmore">
            <a href="<?php the_permalink(); ?>" class="btn btn--brand btn--block">Read More ></a>
        </div>
    </div>
    </div> 
    <?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();

echo $response;
die(1);
}

谢谢

Answer 1

为此，您可以使用window.history.pushState函数。在ajax成功部分中的函数php中，您可以添加它。

success: function (response) {
                jQuery(".posts .in").html(response);
                jQuery("#loading-animation").hide();
                window.history.pushState("category"+catID, "Category"+catID, "http://site.preview/resources/"+catID);
                return false;
            }

如果它对您有效，那么在我给定的示例中，您知道如何将catID更改为类别名称。