تبلیغات
طراحی و بهینه سازیمشاهده
آخرین ارسال های تالار مشاهده انجمن
  • مشکل عدم تکمیل مرحله آپدیت افزونه های وردپرس! 1 پاسخ 86 بازدید
  • پاک کردن ویروس سایت 2 پاسخ 238 بازدید
  • FS-Poster 6.0.7 5 پاسخ 722 بازدید
  • خطا در اضافه کردن اکانت در افزونه FS Poster 0 پاسخ 111 بازدید
  • افزونه یوست سئو 0 پاسخ 123 بازدید
  • اسلایدر رولوشن 1 پاسخ 431 بازدید
  • نصب نشدن افزونه اسکرپس scrapes 1 پاسخ 299 بازدید
  • درخواست راهنمایی در خصوص افزونه Duplicator 6 پاسخ 592 بازدید
  • راه اندازی سایت پاپ آپ 0 پاسخ 286 بازدید
  • اتصال وردپرس به api 9 پاسخ 651 بازدید
  • هاست

    دکمه مطالب بیشتر در وردپرس با Ajax

    مقالات,آموزش,ترفند , وردپرس

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

    • نکته: در این مقاله جهت آموزش وردپرس از پوسته twentyseventeen استفاده می کنیم.

     

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

    آموزش رو با ساخت دکمه “مطالب بیشتر” آغاز می کنیم ، فقط باید یک قانون رو رعایت کنیم: فقط زمانی دکمه نمایش داده میشه که مطلبی برای نمایش وجود داشته باشه و از طریق کد $wp_query->max_num_pages > 1 چک می کنیم.

     

    کدهای زیر را در صفحه index.php در خط 61 وقبل از بسته شدن تگ <main> اضافه میکنیم ، و کدهای مربوط به pagination در خط 49 را پاک می کنیم:

    برای اینکه دکمه زیباتر دیده بشه کدهای CSS زیر را به فایل Style.css اضافه میکنیم:

    قدم دوم: انتقال پارامترها به اسکریپت

    قطعه کد زیر به شما اجازه میدهد پارامترهای لازم را به اسکریپت انتقال داده و همین موضوع باعث شده که دکمه “مطالب بیشتر” در تمام صفحات tags، categories، post type archives، search قابل استفاده باشد.

     

    کد زیر را به فایل functions.php اضافه می کنیم:

    قدم سوم: اسکریپت myloadmore.js

    یک فایل به نام myloadmore.js در دایرکتوری پوسته twentyseventeen ساخته و کدهای زیر را به آن اضافه میکنیم:

    کدهای بالا جهت ایجاد ارتباط ajax و فراخوانی تابع مورد نظر جهت دریافت اطلاعات مربوط به مطلب بعدی و افزودن آن به انتهای آخرین مطلب می باشد.

    • نکته: با توجه به قالب مورد استفاده، خط 17 می تواند متفاوت باشد و به ساختار HTML قالب مورد استفاده بستگی دارد.

     

    قدم چهارم:  کدهای PHP برای Ajax

    قدم بعدی افزودن کدهای لازم برای فراخوانی های ajax می باشد ، کدهای زیر را به functions.php اضافه می کنیم:

    • توجه : در خط 9 می توانید کدهای HTML دلخواه مرتبط با پوسته خود را قرار دهید و به دلیل استفاده از پوسته twentyseventeen از کد موجود استفاده شده است.

    برای تست دکمه “مطالب بیشتر” ابتدا به قسمت تنظیمات و زیر منوی خواندن رفته و گزینه ” بیشترین تعداد نوشته‌ها در هر برگه‌ی وبلاگ ” را برابر با یک قرار داده و ذخیره می کنیم:

    دکمه مطالب بیشتر در وردپرس با Ajax

    مقاله دکمه مطالب بیشتر در وردپرس با Ajax به پایان رسید در صورتی که تمام مراحل بالا را پیاده سازی کرده باشید عملکردی مانند تصویر زیر خواهید داشت:

    دکمه مطالب بیشتر در وردپرس با Ajax

    توجه: در صورتیکه میخواهید بجای کلیک روی دکمه ، با اسکرول کردن مطالب بیشتری بارگذاری شده و نمایش داده شوند، کدهای مربوط به دکمه را در صفحه index.php پاک کرده و کدهای زیر را جایگزین کدهای موجود در فایل myloadmore.js کنید:

    بروزرسانی : با تشکر از کاربر محترم ، Raymond Dragon کد ارسالی ایشون برای جایگزین کردن خط 9 در بخش چهارم.

    کدهای بالا را جایگزین تابع get_template_part در بخش چهارم کنید.

    موفق باشید

    لطفا به این مطلب امتیاز بدید


    دانلود


    جای تبلیغ متنی ویژه


    مطلب مفیدی بود ؟
    نویسنده : mohammad 0 مقالات,آموزش,ترفند , وردپرس

    لینک کوتاه مطلب : https://www.20script.ir/?p=48667

    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    2,472آموزش تنظیمات رفع خطاهای وردپرس تاریخ : 2018/01/24
    1,548رفع خطای Cannot modify header information در وردپرس تاریخ : 2018/12/9
    684نمایش شورت کد در قالب وردپرس تاریخ : 2019/05/25
    3,004نصب گوگل آنالیز در وردپرس Google Analytics تاریخ : 2018/06/30
    3,212کد نمایش دقیق زمان انتشار مطالب در وردپرس تاریخ : 2018/03/14
    4,421آموزش راستچین کردن قالب وردپرس تاریخ : 2017/12/17
    6,477افزونه شماره گذاری خودکار مطالب وردپرس تاریخ : 2017/09/12
    1,104آموزش مسدود کردن آی پی در وردپرس تاریخ : 2019/06/28
    3,074غیر فعال کردن خوراک RSS وردپرس تاریخ : 2016/03/30
    748آموزش غیرفعال کردن حساب کاربران در وردپرس تاریخ : 2019/06/26
    5,034دانلود قالب وردپرس چند منظوره هازل تاریخ : 2015/03/7
    792آموزش خروجی گرفتن از ایمیل کاربران در وردپرس تاریخ : 2019/06/25
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب