دوره مجازی قالب وردپرس (جلسه 29): ajax در وردپرس - بارگذاری مطالب بیشتر وردپرس

دسته بندی: وردپرس
زمان مطالعه: 1 دقیقه
۲۶ آبان ۱۳۹۴

به نام خدا و سلام. در جلسه 29 ام دوره مجازی قالب وردپرس در حدمت شما هستیم. در این جلسه قصد داریم مطالب بیشتر رو با ajax بارگذاری کنیم و در محل مربوطه نمایش بدیم.خوب اول از همه کدهای جی کوئری رو می نویسیم و درخواست رو ارسال می کنیم در سمت سرور داده ها رو چک می کنیم و با استفاده از حلقه WP_Query داده ها رو دریافت می کنیم و بر اساس html مورد نظر برای مطلب محتوای مورد نظر رو ایجاد می کنیم و به صورت json به سمت کاربر برمیگردونیم و نشون میدیم.

wpt-ajax-load-more

در این جلسه خواهیم دید :

  • ایجاد کدهای جی کوئری برای ارسال درخواست ajax
  • بررسی داده ها در سمت سرور و ایجاد آرگومان های WP_Query
  • دریافت داده ها و نمایش آنها در حلقه (اضافه کردن به متغییر output_html)
  • نمایش داده های برگشی از سمت سرور در سمت کلاینت
:: توجه

این مطلب یک جلسه از آموزش طراحی قالب وردپرس می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی قالب وردپرس

چه امتیازی به این مقاله می دید؟
نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

جلسات دوره

نظرات کاربران

مسلم دهقان

سلام . شما برای قسمت همه مطالب آموزش رو ساختید. اما برای قسمت آخرین مطالب و آخرین دانلود ها رو به دانشجویان سپردید. راهی که من به ذهنم رسید این بود که سه فایل ajax.php با نام های مختلف بسازم و داخل هر کدون فقط سمتی رو که در کد زیر نشون میدم عوض کنم. سوال بنده اینه که این کار درست و اصولی است یا خیر. اگر نه چطور می تونم این کار رو انجام بدم.

$load_more_args = array(
            ‘post_type’ => array(‘download’),
            …..
 );
کیوان علی محمدی

سلام مجدد. قطعا بهتره فقط از یک فایل استفاده کنید و مثلا پارامتر های مختلف رو تعیین کنید برای هر بخش

مسلم دهقان

سلام. توی آموزش جلسه 29 در آخر آموزش گفتید که برای قسمت آخرین دانلود و آخرین مطالب ایجکس برای دکمه lodemore را بسازید. من راه خیلی جالبی به نظرم نرسید. حدودا یکماه پیش از شما سوال کردم اما جوابی دریافت نکردم.
لطفا راهنمایی کنید.
در ضمن جلسه 30 آموزشتون هم تقریبا توضیحی ندارد و تقریبا فقط کدها را می نویسید و همون ها رو می خونید.
زحمت زیادی برای آموزش ها می کشید، اما به نظر من برای درک آموزش های شما نباید به آموزش های دیگر رجوع کرد. با تشکر.

کیوان علی محمدی

در همین قسمت ۲۹ ما این مورد رو آموزش دادیم. من خیلی متوجه منظورتون نشدم که راه جالبی به نظرم نرسید .

مسلم دهقان

پشتیبانی تون واقعا خوب نیست

کیوان علی محمدی

سلام دوست عزیز. به چه دلیل؟

مسلم دهقان

سلام. لطفا یک راهنمایی کنید برای ایجاد حالت loadmore برای قسمت آخرین دانلودها، آیا باید تمام مراحلی رو که شما انجام دادید رو برای هر کدام از قسمت ها جداگانه انجام بدم (کدهای تکرای) و فقط کد زیر رو داخل فایل ajax.php عوض کنم. یا نه کارهای دیگری هم باید انجام بدم. تشکر.

        $load_more_args = array(
            ‘post_type’ => array(‘download’),
            …..
        );
علی خسروی

سلام استاد خسته نباشین
من قسمت مطالب بیشتر رو پیاده سازی کردم ولی یه سوال داشتم:
من سایتی که دارم طراحی می کنم قسمت های مختلفی داره مانند اخبار و…
که با استفاده از فایلcategory.php مطالب هر قسمت رو تو زیر صفحه لود میکنم حلقه ای هم که برای این کار استفاده کردم حلقه معمولی و ابتدای وردپرس هستش ولی وقتی میخوام ادامه مطالب هر قسمت رو لود کنم مجبور میشم از حلقهwp query استفاده کنم مشکلی که پیش اومده اینه که وقتی ادامه مطلب قسمت اخبار رو چک می کنم تمام مطالب با هر دسته ای اونجا لود میشه اگر هم مشخص کنم برای قسمت اخبار باشه تو قسمت های دیگه هم مطالب اخبار لود میشه
ببخشید انقدر مطلب رو می پیچونم منتظر پاسخ تون هستم با تشکر

علی خسروی

استاد از این کد هم استفاده کردم این کد تو حلقه دقیقا مقدار صحیح slug دسته بندی مورد نظر رو برمیگردونه ولی تو قسمت args درست عمل نمی کنه و مطالب دیگه از دسته بندی های دیگه رو هم برمی گرداند

‘category’ => get_the_category()[0]->slug
کیوان علی محمدی

این کدی که نوشتی با استفاده از WP_Query بوده؟

Mehdi Soli

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

    success: function (response) {
    if(response.content != ”){
     $this.parent().parent().find(‘.post-link’).css(‘display’,’none’);
     $this.parent().before(response.content);
     $this.data(‘page’,parseInt($page + 1));
     $this.text(‘مطالب بیشتر’);
    }else {
     $this.addClass(‘disabled’);
     $this.removeAttr(“href”);
     $this.text(‘اتمام مطالب این دسته’);
    }
   }
Mehdi Soli

فقط یه سوال کوچیک داشتم استاد، چرا بازهم با اینکه data-page رو عوض می کنیم در سورس صفحه عوض نمیشه (البته در هنگام فرستادن درخواست و در بخش هدر کاملا می بینیم که عدد page عوض میشه) یعنی تا آخر همون 2 باقی می مونه؟ و اینکه چیکار کنیم که اگه پست دیگری وجود نداشت این دکمه مطالب بیشتر غیر فعال بشه. بسیار از لطف شما سپاسگزارم

کیوان علی محمدی

سلام. چون تغییرات به صورت DOM Manipulation هستش در سورس صفحه قابل مشاهده نیست. تعداد مطالب برگشتی رو چک کنید و اگه صفر بود خاصیت disabled برای دکمه رو فعال کنید.

mohamad mohamadi

میخوام صفه بندی کنم لطفا جواب بدید الان هر سایتی صفحه بندی میکنه

Mehdi Soli

سلام خدمت استاد گرامی، جناب آقای علی محمدی عزیز، من هم می خواستم کاری مشابه کاری که دوستمون در بالا درخواست کرده بود رو انجام بدم، فکر کنم منظور ایشون این هست که وقتی دکمه مطالب بیشتر زده میشه و مثلا 9 تا پست از قبل بوده، 9 تا پست جدید جای اونها لود بشن و قبلی ها نشون داده نشن (که مثلا یه حالتی مثل صفحه صفحه رد شدن پست ها میشه) . من برای این کار از کد زیر در فایل main.js و در بخش جواب ajax استفاده کردم. گفتم اینجا قرار بدم شاید بدرد دوستان بخوره:

     if(parseInt(response.count) > 0){
     $this.parent().parent().find(‘.post-link’).css(‘display’,’none’);
     $this.parent().before(response.content);
     $this.data(‘page’,parseInt($page + 1));
    } 

بازهم ممنون به خاطر آموزشها ی بسیار خوب شما

mohamad mohamadi

بعد چجوری کاری کنم برای مطالب بعدی برن پیج بعد

کیوان علی محمدی

شما میخواین طبق همین آموزش ما پیش برین یا میخواین صفحه بندی و نمایش مطالب به صورت غیر اجکسی نشون داده بشه؟

mohamad mohamadi

mikham safe bandi konam

mohamad mohamadi

میخوام صفحه بندی کنم

کیوان علی محمدی

الان دقیقا مشکلتون با صفحه بندی چیه؟

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل