طراحی قالب وردپرس

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

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

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

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

 

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

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

کدهای زیر را در صفحه index.php در خط ۶۱ وقبل از بسته شدن تگ main اضافه میکنیم ، و کدهای مربوط به pagination در خط ۴۹ را پاک می کنیم:

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

توجه: جهت فراگیری روش صحیح فراخوانی CSS در قالب وردپرس به این مقاله آموزش وردپرس مراجعه کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نظرات و سوالاتتون رو در قسمت کامنت های همین مطلب برامون ارسال کنید.

موفق باشید

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