دوره مجازی قالب وردپرس (جلسه 30): ajax در وردپرس - like کردن مطلب



visibility  
mode_comment   ۳۴

به نام خدا و سلام. در خدمت شما هستیم با جلسه 30 ام از دوره مجازی  طراحی قالب حرفه ای وردپرس. در این جلسه قصد داریم like کردن مطالب در وردپرس به روش ajax رو برای شما آموزش بدیم. در ابتدای کار کمی کدهای html  بخش مطالب رو  دستکاری می کنیم و سپس درخواست ajax رو به سمت سرور با داده های مناسب ارسال می کنیم. سپس در سمت سرور داده ها رو دریافت می کنیم و با متا دیتا ها که در جلسات قبل آموزش دادیم like رو برای کاربر و اون مطلب ثبت می کنیم و تعداد کل likeها رو بر می گردونیم تا در سمت کاربر نشون بدیم.

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

  • تغییر بخش html مطالب و اضافه کردن خاصیت های سفارشی به تگ های html
  • آشنایی با data-attr در html5
  • ارسال درخواست به سمت سرور از طریق ای جکس
  • دریافت درخواست در سمت سرور و اعتبار سنجی آن
  • ثبت لایک برای کاربر و برگشت دادن مقادیر مورد نظر به سمت کاربر
  • تغییر تعداد لایک ها در سمت کاربر
info توجه

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

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

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

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

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

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

majid zare replyپاسخ

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

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

سلام می تونید برای این کار یک تابع javascript ینویسید که اعداد انگلیسی و فارسی رو با هم عوض کنه.

Mohammad Reza replyپاسخ

سلام استاد خسته نباشید. استاد برای لایک مطالب دقیقا مثل شما کدنویسی کردم ولی تعداد لایک 0 همش وتغییری نمیکنه حتی کدهای شمارو کپی پست کردم ولی بازم درست نشد و مقدار صفر چکارکنم؟ 🙁

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

سلام دبباگ کردین ؟

Mohammad Reza

نه استاد نحوه دیباگ چطوریه ؟

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

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

حمید حسینی تبار replyپاسخ

سلام
چطور میتونم بخش content صفحه رو بصورت اجکسی تغییر بدهم ؟
شبیه فیسبوک یا دیجی کالا
مثلا اگر روی آرشیوماه قبل زدم بدون رفرش شدن کل صفحه فقط قسمت content صفحه بصورت اجکس مطالب اون رو نشون بدهد
یا در همین 7لرن وقتی روی هر تب میزنیم بعد مطالب اون قسمت لود بشه نه اینکه هنگام لود صفحه همه تب ها لود بشن . اینطوری سرعت لود سایت هم بالا میره
تشکر

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

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

حمید حسینی تبار replyپاسخ

چطور میتونم ولیدیشن فیلدهایی رو مثل ورودیهای دیدگاه ( نام و ایمیل و …) بصورت اجکسی اعتبار سنجی کنم ؟

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

در کدهای سمت سرور یا سمت کاربر؟ سمت کاربر که با js می تونید انجام بدین و در سمت سرور هم کافیه هر مورد که مشکل داشت یا مثلا خالی بود یه پیغام خطا برگردونید و در صفحه نشون بدین.

حمید حسینی تبار replyپاسخ

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

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

سلام از پلاگین jquery raty می تونید استفاده کنید. خیلی کار کردن باهاش راحته.

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

سلام و خسته نباشید.
یه سوال کد لایک مطالب output_html مطالب بیشتر در فایل ajax.php رو آموزش ندادید ممنون میشم این کد رو قرار بدید. چون هر جور که قرار میدم مشکل بوجود میاد. ممنون

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

سلام مگه طبق آموزش عمل نکردین؟

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

سلام مجدد چرا طبق آموزش پیش رفتم و لایک به درستی نمایش میده و کار میکنه. فقط مطالبی که با زدن دکمه مطالب بیشتر لود میشن دکمه لایک کار نمیکنه. و فایل ajax.php ایراد داره و این کد :

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

در بخش console مروگر نتیجه برگشتی چه چیزی رو نشون میده؟

حامد نجاری replyپاسخ

سلام آقای علی محمدی .
من یه مقدار توی این ایجکس وردپرس مشکل دارم !
توی قسمت url ایجکس ، چرا حتما باید آدرس صفحه رو بهش بدیم ؟
چرا نمیتونیم آدرس اون فایل توی قالبمون رو بهش بدیم ؟

من طبق دستور بالا وقتی عمل میکنم و محتویات فرم رو با ایجکس به فایل مدنظرم ارسال میکنم ، بطور صحیح کد های مربوط به اون فایل php که بهش آدرس دادم ، اجرا میشه .
فقط مشکلی که وجود داره این هستش که هر تابعی که قرار میدم ، ارور میده و میگه که نمیتونم این تابع رو پیدا کنم .
مثلا میخواستم تا توی اون فایل php که از طریق ایجکس بهش فرستاده شده بود از تابع add_action استفاده کنم ، ارور داد که نمیتونم این تابع رو پیدا کنم .
و همینطور توابع دیگه ای هم مثل update_post_meta همین ارور رو میداد .

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

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

حامد نجاری

متوجه شدم .
ممنون از راهنماییتون .

حامد نجاری replyپاسخ

من قبل از دادن آدرس فایل توی ایجکس ، echo get_template_directory_uri() رو هم قرار میدم ولی توی کامنت بالا این تکه کد PHP پاک شد و الان مجبور شدم تا تگ های PHP رو توی کامنتم استفاده نکنم .

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

بهتره برای ایجاد آدرس ای جکس در سمت کاربر و در سمت ادمین حتما از توابعی مثل wp_localize_script استفاده کنید.

Mehdi Soli replyپاسخ

جناب آقای علی محمدی عزیز، سلام، اول از همه خواستم بازهم تشکر کنم بابت آموزش های واقعا بی نظیر شما. به جرات هیچ جا با این تمام و کمال آموزش وردپرس ندیده بودم، این جوری که شما مطالب رو می شکافید و در اختیار دوستان قرار می دهید، واقعا بی نظیره. یه سوال داشتم، کار من هم طراحی وب هستش و تا قبل این دوره بیشتر از قالب های آماده برای پروژه هایی که می گرفتم استفاده می کردم. همون طور که می دونید اکثر قالب های حرفه ای بصورت فریم ورک هستند (مثل انفولد یا آوادا یا …)و هنگامی که به مشکلی داخل اون ها برخورد می کنیم (به دلیل دسترسی نداشتن کامل به فروم های پشتیبانی آن ها) باید ساعت ها وقت گذاشت تا شاید با گشتن بین کد ها بتونیم اون ها رو برطرف کنیم. از طرف دیگه در هنگام کار با یک سری از کمبود ها در هر فریم ورک مواجه میشیم که شاید مدت ها زمان ببره تا تیم طراحی اون، اون ویژگی رو به قالب خودش اضافه کنه. با دیدن آموزش شما تصمیم دارم برای کارهای آینده یه فریم ورک طراحی کنم که کلیه تنظیماتش هم در اختیار خودم باشه که این طوری هم هرچیزی رو که لازم دارم به قالب اضافه کنم و هم دستم در انجام طراحی باز باشه. البته می دونم که باید آموزش های مربوط به پلاگین شما رو هم ببینم تا بتونم پنل ادمین رو هم به دلخواه خودم تغییر بدم. سوالم اینه که آیا با دیدن این آموزش ها قادر به ساختن این فریم ورک برای خودم خواهم شد یا اگر جواب منفی است و باید از منابع دیگری هم استفاده کنم، خواهشمندم چند تا سورس بهم معرفی کنید که بتونم از روی اون ها ادامه بدم. متاسفانه در اینترنت سرچ کردم و خیلی مطالب کمی در موردش پیدا کردم. یه فیلم آموزشی فقط پیدا کردم از TutsPlus که اون هم متاسفانه خیلی سطحی در مورد این موضوع صبحت کرده بود. ممنون میشم که راهنماییم بفرمایید

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

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

Mehdi Soli

ممنونم از شما، مشکلی در برنامه نویسی شی گرا با php ندارم و تقریبا بهش مسلط هستم. سوال اصلیم این هست که آیا سورس مناسبی برای ساخت فریم ورک وردپرس هست که بهم معرفی کنید؟ یه سوال دیگه، دوره ووکامرس (هم قالب و هم نوشتن پلاگین برای اون رو هم) رو کی برگزار می کنید؟ چون خیلی خیلی کاربردی و لازم هستش خصوصا در زمینه پلاگین هاش

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

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

زارعی هوشیار replyپاسخ

سلام ….اقای علی محمدی خسته نباشید….خسته نباشید …این جلسه خیلی کمک کرد واسه یادگیری بیشتر ایجکس…واقعا تشکر….دو سوال داشتم وبا یه مثال توضیح میدم منظورم چی هستش!
وقتی که باطری گوشی ما تموم میشه یه پیغام در نوتیفیکیشن میده که باطری ضعیف است و یا وقتی باطری پر میشه یه پیغام میده باطری پر شده است…..این کار در برنامه نویسی اندروید با استفاده از سرویس ها انجام میشه….آیا مفهومی به این صورت در وردپرس داریم ؟….که مثلا یه اتفاقی افتاد فعلا کد رو انجام بده….آیا اکشن ها در وردپرس همین کار رو انجام میدن؟ مثلا وقتی پست های جدیدی اضافه شد به صورت ایجکس در صفحه اعمال شود و دیگر لازم نباشد کاربر صفحه را دوباره refresh کند…بدون اینکه کاربر درخواست ایجکس بفرستد…مثلا دکمه “مطالب بیشتر” که در جلسه گذشته ایجاد کردیم نباشد…..آیا همچین چیزی در ورد پرس امکان پذیر است؟
و سوال دیگر آیا در خواست زیاد ایجکس باعث کندی سرور میشود؟

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

سلام. این کاری که شما گفتین رو نمیشه به این شکل در وردپرس انجام داد و حتما باید از زبان های سمت سرور مثل nodejs و پروتگل هایی مثل websocket کمک گرفته بشه. بحث هوک های وردپرس نمیتونه این مورد رو هندل کنه.

زارعی هوشیار

ok ….. تشکر از پاسختون

علی حمزه پور replyپاسخ

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

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

سلام لطفا مشکلتون رو واضح تر توضیح بدین.

محمد پارسا کوشش replyپاسخ

با سلام
من این دوره را عیدنوروز تهیه و دانلود کردم. ایا تا الان دوره بروز شده است؟

لقمان آوند

سلام
خیر دوست عزیز

ارسال نظرات

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