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



visibility  
mode_comment   ۶۵

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

wpt-ajax-load-more

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

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

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

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

comment دیدگاه کاربران
mehdi karimi replyپاسخ

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

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

سلام ممنونم. حدود ۱۵ الی ۲۰ جلسه باقی مونده.

reza_yki

کاش هیچ وقت تموم نشه از اموزش های تاپ و حرفه ای شما همیشه بهره مند بودیم استاد اولش که ثبت نام کردم زیاد امیدوار نبودم به حرفه ای بودن ولی الان کاملا عوض شده نظرم استاد دوست داریم، استاد دوست داریم 😀 😀

راست یه سوالم دارم این دکمه جلسه بعدی و قبلی بد جور فکر منو مشغول کرده این تو 7learn به صورت شورتکد هست که دستی ادرس میدید یا نه داینامیک هست؟
اگه داینامیک هست مثلا ما بگیم برای دسته tutorials جلسه بعدی چوره شاید تو این دسته ما زیر دسته ی اموزش وردپرس داریم ، وزیر دسته اموزش فتوشاپ هم داریم چی کار کنیم تداخلی با هم نداشته باشه ؟
می دونم زیاد سوال می پرسم ولی من شما رو مثل یه استادی می دونم که همیشه به سوالات دانشجوش جواب میده 🙄 🙄

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

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

Ali Movahedi replyپاسخ

سلام این ایجکس وردپرس چقدر پیچیدست !

من در این کد ها به مشکل برخوردم . اینکه چرا هیچ respond برای من برگشت داده نمیشه؟!

لینک کد های دو فایل ajax js و function php:

http://s6.picofile.com/file/8224000218/wpajaxproblem.txt.html

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

سلام اول از همه بهتره درخواست رو از تب network چک کند ببینید درخواست شما با موفقیت ارسال شده یا نه و کد خطا مثل ۴۰۴ نخورده باشه. بعدشم اون مقدار res در تابع success رو بررسی کنید مثلا در console.log چاپش کنید تا مشکل کار رو پیدا کنید.

mohamad mohamadi replyپاسخ

سلام آقای محمدی من برای تمرینی که دادید برای آخرین مطالب و آخرین دانلود دچار مشکل شدم
من آجاکسم ضعیغه میشه لطفا حداقل باری یکیش بارگزاری کنید و فایل mainjs و ajax php را بزارید؟ تا من الگو بگیرم و یاد بگیرم؟ لطفا اگه انجام بدید خیلی ممنون میشم 😥

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

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

mohamad mohamadi

سلام پس در جلسات آینده درست میکنید؟ بعد 1 سوال تو کدوم جلسه گقتید که شبیه

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

سلام بله میگیم. توی همین جلسه 29 مطلب.

mohamad mohamadi replyپاسخ

آقای محمدی من محتوایی که تو جلسه تو ajax.php و main.js رو نوشتیم کپی کردم برای قسمت دانلود حالا باید توش پیارو تغیر بدم ؟ چی میشه اگه درست کنید برام اینجا بزارید

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

فقط کافیه post_type رو هم ارسال کنید و این رو در آرگومان های WP_Query قرار بدید.

mehdi sabbat replyپاسخ

سلام آقای علیمحمدی
من یه مشکلی دارم فرض کنین من چندتا custom post type دارم و میخوام از تکنیک شما برای بارگذاری مطالب بیشتر و نشان دادن جداگانه پست تایپ ها استفاده کنم حالا باید برای هر پست تایپم یه تابع جداگانه تو ایجکس بنویسم یا راهی وجود داره که تو کد ایجکس پست تایپ هار رو خودش تشخیص بده.
مثلا تو این کدی که شما نوشتین تو آرگومانهای پست تایپ دانلود رو قرار دادین حالا اگه من بخوام یه پست تایپ به نام فیلم داشته باشم اونو چطور تو آرگومان وارد کنم آیا مجبورم دوباره یه تابع برا پست تایپ جدید بنویسم ؟

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

سلام می تونید توی حلقه نشون دادن مطالب data-type رو برای wrapper مطالب ایجاد کنید و مقدارش رو از نوع پست بگیرید.

mehdi sabbat replyپاسخ

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

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

سلام می تونین تعداد مطالب برگشت داده شده رو چک کنید و اگه صفر بود نوشته مورد نظر رو روی دکمه جایگزین کنید و دکمه ور غیر فعال کنید.

علی اصغر جهانی replyپاسخ

سلام استاد .
چرا به تگ لینک مربوط به مطالب بیشتر خاصیت data-page را دادید مگه ما همچین خاصیتی داریم ؟؟

یه سوال دیگه ؟؟

این خط کد یعنی چی ؟؟

var $page = $this.data(‘page’);

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

سلام این کد برای مشخص کردن صفحه بندی مطالب هستش. چون از wp_query استفاده می کنیم باید در آرگومان ها مشخص کنیم از کدوم مطلب به بعد رو برای ما برگردونه تا نمایش بدیم و مطالب تکراری رو برنگردونه.

mostafash replyپاسخ

جناب استاد علی محمدی سلام و وقت شما بخیر
من مبحث آجاکس را تمرین کردم و تونستم همانند آموزش توی قالبی که برای خودم طراحی کردم قرار بدم.وقتی که توی لوکال هاست اجراش میکنم هیچ مشکلی نداره و 10 تا 10 تا مطلب رو برام بارگذاری میکنه ولی وقتی اون رو به هاست اصلی قرار میدم چیز ی لود نمیشه.خیلی هم براش وقت گذاشتم ولی چیزی متوجه نشدم.
این هم آدرس پیج
http://www.chaabok.com/%D8%A2%D8%B1%D8%B4%DB%8C%D9%88-%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1-%D9%88%DB%8C%DA%98%D9%87/
ممنون میشم راهنمایی کنین کجای کار رو درست انجام ندادم

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

سلام این خط کد مشکل داره یعنی آبجکت data تعریف نشده.

url :data.ajax_url,

mostafash

استاد ممنونم از پاسختون .کد آبجت فوق توی کدهام هست ولی وقتی توی کونسول میرم پیغام زیر برای main.js میده
Uncaught ReferenceError: data is not defined

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

خوب این پیغام داره میکنه آبجکت data تعریف نشده. باید یا تعریفش کنی یا کدهارو طیق تعریف خودت عوض کنی.

mostafash

استاد سلام.من دو روز پیش براتون کد مربوط به آجاکس که مشکل داشت رو فرستادم می خاستم ببینم وقت کردین نگاش کنین؟؟
در ضمن استاد من یک کوئری نوشتم که خارج از کوئری های وردپرس هست و از توابع کوئری وردپرس استفاده نکردم.
get_results(”
select a.post_title,a.post_date,a.guid from ch_posts a
inner join ch_term_relationships b on b.object_id=a.ID
inner join ch_term_taxonomy c on c.term_taxonomy_id=b.term_taxonomy_id
inner join ch_terms d on d.term_id=c.term_id
where post_type =’job_listing’ and taxonomy=’job_listing_category’
and d.name=’حسابدار ‘ order by post_date desc LIMIT 10″);
با استفاده از این کوئری من دارم اطلاعات یه دسته خاص رو از بانک اطلاعاتی دریافت میکنم.سوالم این هست که من عنوان پست ها رو دارم میارم ولی نیدونم url اون رو به چه صورت تعریف کنم که وقتی بر روی لینک کلیک کردم محتوای اون پست رو نشون بده

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

سلام آیدی مطلب رو هم در کوئری قرار بدین و با تابع get_permalink به راحتی لینک مطلب رو دریافت کنید.

mostafash

من دقیقا این بخش رو نمیدونم چی جوری باید تعریف کنم

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

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

mostafash

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

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

اوکی بفرستین به ایمیل بنده.

mostafash

استاد سلام.فایل رو به ایمیل شما ارسال کردم.ممنون و متشکر

محمد replyپاسخ

سلام استاد محمدی ، بنده یه طرح ساده زدم بعد از پلاگین معروف ajax load more استفاده کردم منتها پست رو خراب نشون میده امکانش هست یه نگاه کنید ببینید مشکلش کجای طرحمه ؟ خیلی ساده نوشتم و کامنت گذاری هم کردم

http://cdn.persiangig.com/download/paVYtDJnH1/7learn.gef.zip/dl

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

سلام اینطوری نمیتونم براتون بررسی کنم. شما دیباگ انجام دادین؟ وقتی درخواست ای جکس ارسال میشه نتیجه برگشت داده شده به چه صورت هستش؟

محمد

استاد، همه چی اوکی هست جواب بر میگردونه ولی جای درستی از صفحه نمیندازه، هیچ جوره راه نداره یه نگاه کنید یه index بیشتر نداره و فقط یه پلاگین نصبه همین ممنونم

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

وقتی جواب رو درست برمیگردونه و فقط در جای درست نشون نمیده بهتره در تنظیمات کلاس یا آیدی اون تگ مه میخواین دیتای های برگشتی در اون قرار بگیره رو چک کنید و مطمین بشید بهص ورت صحیح این مورد رو ست کردید.

محمد

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

محمد replyپاسخ

لطفا جواب بدید 😥

محمد replyپاسخ

سلام و خسته نباشید خدمت آقای علی محمدی
من در قسمت لود مطالب بیشتر طبق مراحل شما پیش رفتم درخواست ها رو دریافت می کنم اما تو صفحه چیزی نمایش داده نمیشه ولی توی حلقه صفحه ajax.php کد های شما رو قرار می دم و نمایش داده میشه
پس صد در صد مشکل کدهای html هست که توی متغییر $output_html ریخته شده
چون اینجا نمی تونم کد های ترکیبی php و html رو قرار بدم کدها رو براتون ایمیل کردم

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

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

مختار اسمعیلی replyپاسخ

سلام و خسته نباشی من برای قسمت مطالب تعداد نظرات اون مطلب رو هم گذاشتم. ولی وقتی داخل فایل ajax.php این کد رو قرار میدم مطالب بیشتر لود نمیشه. ممنون میشم راهنمایی کنید

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

سلام می تونید از تابع get_comments_number استفاده کنید. فقط شرط ها رو خودتون باید ست کنید که اگه تعداد 1 بود چه چیزی رو برگردونه و …

رامین روزدار replyپاسخ

سلام . من روی لینک دانلود فایل ویدیویی کلیک میکنم اما نمیتونم فایل دریافت کنم و یه صفحه سیاه برای من باز میشه

لقمان آوند

مشکلی نداره
با گوشی یا تبلت دانلود نکنید. حتما از pc استفاده شه و مستقیما رو لینک دانلود کلیک شه …

محمد نيك عيش replyپاسخ

سلام آقای کیوانی ببخشید شما تو این قسمت انگار حفظی رفتید جلو اصلا توضیح ندادید ونگفتید این اچ تی ام اوت پوت یا تگ های پی اچ پی رو بر میداشتید و count برای چیه من که نفهمیدم قاطی میکنه آآدم … منبع دارید مطالعه کنم با تشکر

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

سلام بنده علی محمدی هستم و اسم کوچیکم کیوان هست دوست عزیز. اون متغییر html_output برای ذخیره سازی تمام محتوایی هستش که میخوایم بوسیله ajax به سمت کاربر برگردونیم.متغییر count هم برای اینه که بدونیم چند تا مطلب باید برگردنیم.

mohamad mohamadi replyپاسخ

سلام یک سوال شما در این جلسه یاد دادید مثلا مطالب حدودا 6 تا نشون بده و برای مطالب بعدی رو اون دکمه میزنن که یک دونه پست بیشتر نشون میده
یک سوال داشتم و اینه که اگه بخوام بجای این کار , هر صفحه 8 تا مطلب نشون میده مثلا برای 8 تا مطلب بعدی به پیج بعدی بعدی برن باید چیکار کنم؟

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

سلام. شما کافیه تعداد مطالب مورد نظر رو در سمت سرور به مقدار دلخواه تغییر بدین. در تنظیمات WP_Query

mohamad mohamadi replyپاسخ

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

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

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

mohamad mohamadi

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

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

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

mohamad mohamadi

mikham safe bandi konam

mohamad mohamadi replyپاسخ

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

Mehdi Soli

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

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

Mehdi Soli replyپاسخ

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

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

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

Mehdi Soli replyپاسخ

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

علی خسروی replyپاسخ

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

علی خسروی

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

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

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

مسلم دهقان replyپاسخ

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

        $load_more_args = array(
            ‘post_type’ => array(‘download’),
            …..
        );
مسلم دهقان replyپاسخ

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

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

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

مسلم دهقان replyپاسخ

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

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

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

مسلم دهقان replyپاسخ

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

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

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.