php - Custom Wordpress Ajax Coding -
ok have created ajax code wordpress theme , have html. how use wordpress php coding content wordpress pages when clicked? not concerned getting post loops etc.... going have static page. need content of pages on click.
heres 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 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>
when add instead of end url page id 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 , 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 = $( ).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 ); });
Comments
Post a Comment