WordpressのポストカテゴリAjax URLの構造

Question

私はカテゴリを持っている、カテゴリがクリックされたときにポストフィルタを持つ基本的なワードプレスのブログを持っています。これは素晴らしい作品が、私は理想的なカテゴリがクリックされたときに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機能を使用することができます。関数phpの中でAjaxの成功部分を追加することができます。

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をカテゴリ名に変更する方法が分かります。