自定义Wordpress Ajax编码

Question

Ok So I have created this AJAX code For My Wordpress theme and I originally have it for html. How Do I use wordpress php coding to get the content from the wordpress pages when clicked? Not concerned with getting post loops etc.... Going to have a static page. But I Do need It to get the content of the pages on click.

Heres the CODE

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/main.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
});
    });



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

    return false;
}); 

HTML structure for menu_nav

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button> 


      </div>


    <div class="collapse navbar-collapse" id="homenav">
<ul class="nav navbar-nav"> 
    <li><a href="pages/main.html" class="menu_nav demo-4">
      <span>
        <span>Home</span>
        <span>-Home-</span>
        <span></span>
      </span>
    </a></li>

          <li> <a href="pages/artist.html" class="menu_nav demo-4">
      <span>
        <span>Roster</span>
        <span>-Roster-</span>
        <span></span>
      </span>
    </a></li>
<li>
 <a href="pages/order.html" class="menu_nav demo-4">
      <span>
        <span>Beats</span>
        <span>-Beats-</span>
        <span></span>
      </span>
    </a>    
           </li> <li>
          <a href="pages/music.html" class="menu_nav demo-4">
      <span>
        <span>Music</span>
        <span>-Music-</span>
        <span></span>
      </span>
    </a>    
           </li>     
            <li>
          <a href="pages/videos.html" class="menu_nav demo-4">
      <span>
        <span>Videos</span>
        <span>-Videos-</span>
        <span></span>
      </span>
    </a> </li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
      <span>
        <span>Store</span>
        <span>-Store-</span>
        <span></span>
      </span>
    </a>    
    </li>
    <li>          
               <a href="pages/services.html" class="menu_nav demo-4">
      <span>
        <span>Services</span>
        <span>-Services-</span>
        <span></span>
      </span>
    </a> 
            </li>
            <li>
            <a href="#" class="menu_nav demo-4">
      <span>
        <span>Resources</span>
        <span>-Resources-</span>
        <span></span>
      </span>
    </a>       </li>

    <li>
            <a href="#" class="demo-4 snipcart-checkout">
      <span>
        <span>YOUR CART: </span>
        <span><div class="snipcart-summary"><span class="snipcart-total-price"></span></div></span>
        <span></span>
      </span>
    </a>       </li>


    </ul>

            </div>
                        <div class="col-sm-1 col-md-1"><div class="navbar-right">
                <a href="#" class=""><font color="black" ></span></font></a></span>
            </div></div>




               </div>     
      </nav>

Answer 1

When you could add instead of the end url just the page id you could do something like this:

HTML

<a href="#" class="menu_nav demo4" data-page="1">Home</a>
<a href="#" class="menu_nav demo4" data-page="2">About</a>
<a href="#" class="menu_nav demo4" data-page="3">Projects</a>
<a href="#" class="menu_nav demo4" data-page="4">Contact</a>

PHP

<?php
    /**
     * Init js script and its variables
     */
    add_action( 'wp_enqueue_scripts', 'init_js_vars' );
    function init_js_vars() {
        wp_enqueue_script( 'your_script', [YOUR_PATH_TO_JS_FILE], array( 'jquery') );

        wp_localize_script( 'your_script', 'theme', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'nonce' => wp_create_nonce( 'ajax-get-page-content' ),
            'page' => 4
        ) );
    }

    /**
     * Handle ajax request, returns content of specific page
     */
    add_action( 'wp_ajax_get_page_content', 'get_page_content' );
    add_action( 'wp_ajax_nopriv_get_page_content', 'get_page_content' );
    function get_page_content() {
        check_ajax_referer( 'ajax-get-page-content', 'nonce' );

        $post_id = absint( $_POST['page_id'] );

        $post = get_post( $post_id );
        $content = apply_filters('the_content', $post->post_content); 

        wp_send_json_success( array( 'content' => $content ) );
    }
?>

JS

$(document).ready(function() {
    function load_page( e ) {
        e.preventDefault();

        var page = $( this ).data( 'page' );

        $.ajax({
            url: theme.ajaxurl,
            method: 'GET',
            data: {
                action: 'get_page_content',
                nonce: theme.nonce,
                page_id: page
            },
            success: function(response) {
                $('#contentarea').html(response.content);
            }
        });
    }

    $('a.menu_nav.demo4').on( 'click', load_page );
});