آموزش وردپرس، ساخت ajax more post بدون افزونه

%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-ajax-more-post-%d8%af%d8%b1-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a8%d8%af%d9%88%d9%86-%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-wpmen

گاهی پیش می آید که بخواهیم با زدن یک دکمه مطالب بیشتر مطالب قدیمی تر سایت به کاربران نمایش داده شوند  و یا اینکه با زدن دکمه load more کاربران بتوانند در زیر مطالب مطالب قدیمی تر را مشاهده کنند این کار به نوعی یک pagination به صورت ایجکس می باشد.صفحه بندی مطالب بخش مهمی از هر وب سایت می باشد در واقع ما با صفحه بندی ، مطالب را به صورت یکجا از دیتا بیس نمی خوانیم و با هر بار کلیک کاربر تعداد معینی از مطالب را می خوانیم که این کار باعث بهبود سرعت بارگزاری سایت می شود.این کار نه تنها در وردپرسی بلکه در سایت ها  با فریم ورک ها  و cms های خاص نیز استفاده می شود.


ایجکس چیست

اِیْ‌جکس (AJAX؛ سرواژهٔ Asynchronous JavaScript And XML) به  مجموعه‌ای از استانداردها و فناوری‌های وب گفته می شود که  که به کمک آن‌ها می‌توان برنامه‌های مبتنی بر وب تولید کرد که به آسانی با کاربران تعامل داشته باشند. با استفاده از این فناوری‌ها و با کمک انتقال تکه‌های کوچک داده و اطلاعات از رایانهٔ خادم (Server)، صفحات وب از حالت منفعل خارج می‌شوند و واکنش‌هایی مناسب با رویدادها انجام می‌دهند. ای‌جکس معماری جدیدی برای برنامه‌های تحت وب است، که با سرعت بسیار زیادی در حال گسترش بوده، و کمتر کاربری در اینترنت است که هنوز گذرش به یکی از صفحاتی که با این معماری ساخته شده‌اند نیفتاده، و از قابلیت‌های فوق‌العاده آن بهره‌مند نشده باشد. Gmail، Google Map، Google Suggest، Orkut، و اسامی آشنای دیگر، نمونه‌هایی هستند از کاربرد ای‌جکس. با استفاده از این معماری، صفحات وب تعامل بسیار خوبی با کاربران خواهند داشت. بعلاوه، مهم‌ترین مزیت این معماری این است که دیگر برای انجام هر کاری، لازم نیست صفحه وب دوباره بارگذاری شود. 

ویکی پدیا

 


افزونه های زیادی برای این کار در وردپرس در نظر گرفته اند اما در این آموزش قصد داریم  صفحه بندی با ایجکس را بدون افزونه را آموزش دهیم. 

قدم اول : ساخت در صفحه مربوطه ای که می خواهیم پست ها نمایش داده شوند بیشتر در آرشیو می بینیم این مثال رو.

که کد زیر را در قسمتی که می خواهیم مطالب نمایش داده شوند  قرار می دهیم

 

	<div id="ajax-posts" class=" row container colonnes">
		<?php
		$postsPerPage = 3;
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => $postsPerPage,
			'cat' => 3
			);
		$loop = new WP_Query($args);
		while ($loop->have_posts()) : $loop->the_post();
		$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
		$url = $thumb['0']; ?>
		<a href="<?php the_permalink() ?>">
			<div class="img_mason_wrapper">
				<img src="<?php echo $url ?>" />
				<div class="inside_in_mason">
					<div class="titles ">
						<h2>
							<i class="fa fa-check my_icon"></i>
							<?php the_title(); ?>
						</h2>
						<p>
							<?php the_content(); ?>
						</p>
						<p class="more">
							more information
							<i class="fa fa-long-arrow-right arow_icon"></i>
						</p>
					</div>
					<div class="date_in_here">
						<p>
							<i class="fa fa-calendar"></i>
							<span class="date"><?php echo the_time('j F Y'); ?></span>
						</p>
					</div>
				</div>
			</div>
		</a>

		<?php
		endwhile;
		wp_reset_postdata();
		?>
	</div>

<a data-category="3" id="more_posts"  class="button button–aylen button–border-thick button–inverted button–text-upper button–size-s myBUTTON">show more</a>

 

 

در کد بالا ما  از دسته بندی شماره ۳، ۳  مطلب را نمایش می دهیم.حال  نوبت به کد جی کوئری است  که به صورت زیر انتهای همین صفحه  قرار می دهیم تا صفحه اسکریپت functions.js را  از پوشه js فراخوانی کند.

<input id="ajax_posts" value="<?php echo admin_url('admin-ajax.php')?>" hidden/>

      <script  src="<?php echo THEMEROOT; ?>/js/functions.js"></script>

 

حال کد زیر را در صفحه مربوطه به functions.js  اضافه می کنیم

var ppp = 3; // Post per page
var cat = 3;
var pageNumber = 1;
function load_posts(){
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: $('#ajax_posts').val(),
        data: str,
        success: function(data){
            console.log(str);
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }
    });
    return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

و در آخر کد های زیر رو درfunctions.php اضافه می کنیم

function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 3,
'paged'    => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$url = $thumb['0'];
$out .= '<a href="'.get_the_permalink().'">
<div class="img_mason_wrapper">
	<img src="'.$url.'" />
	<div class="inside_in_mason">
		<div class="titles ">
			<h2>
				<i class="fa fa-check my_icon"></i>
				'.get_the_title().'
			</h2>
			<p>
				'.get_the_content().'
			</p>
			<p class="more">
				more information
				<i class="fa fa-long-arrow-right arow_icon"></i>
			</p>
		</div>
		<div class="date_in_here">
			<p>
				<i class="fa fa-calendar"></i>
				<span class="date">'.get_the_time("j F Y").'</span>
			</p>
		</div>

	</div>
</div>
</a>
';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'twentyfifteen'),
));
?>

 

حال  می توانید دسته دلخواه خودتان را به جای cat قرار داده و تعداد پستی را که در اینجا  3 است را به تعدادا دلخواه خود تغییر دهید.در صورت هرگونه سوالی ، مردان وردپرس پذیرای شما عزیزان هستند.

 

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۲۷ آبان ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

یک نظر برای 1

آموزش وردپرس، ساخت ajax more post بدون افزونه


  1. ممنون

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.