مرحباً أصدقاء المدونة. في هذه الموضوع سأناقش معكم كيفية تثبيت ميزة تحميل المزيد من المواضيع علي بلوجر باستخدام Jquery) Ajax).
بالإضافة إلى ميزة تحميل المزيد من المواضيع، هناك أيضًا ميزات التنقل بين الصفحات بالترقيم. ما لا يعجبني في نظام الصفحات المرقمة هو أنه عند فتح صفحة أخرى ، يتعين عليك إعادة تحميل الصفحة أولاً.
الطريقة التي يعمل بها تحميل المزيد من المشاركات ، يمكننا استرداد بعض المحتوى دون إعادة تحميل الصفحة.
قمت بالفعل تطبيق هذه الميزة على القالب الذي قمت بإنشائه وقد قمت بمشاركته مجانًا في المقالة السابقة ، فيما يلي رابط القالب.
مثال مباشر:
قالب مينت تيك - قالب بلوجر تقني بتصميم الماتيريال ديزاين
قبل أن نبدأ ، سيكون من الجيد أن تفهم أولاً ماذا يعني AJAX و JQuery.
ما هو Ajax
Ajax هو اختصار لـAsynchronous Javascript and XMLHTTP هي تقنية برمجة على الويب لجعل تطبيقات الويب أكثر تفاعلية.
Asynchronous غير مباشر ، وهذا يعني أننا نطلب البيانات إلى الخادم على background side .باختصار باستخدام AJAX هذا ، يمكننا استرجاع البيانات مباشرة ولا نحتاج إلى إعادة تحميل الصفحة ككل.
ما هو jQuery
jQuery عبارة عن مكتبة تحوي مجموعة توابع سريعة وصغيرة وخاصة بالـ javaScript، ومهمة هذه المكتبة جعل استخدام الـ javaScript أسهل ضمن موقعك الالكتروني. بُنيت jQuery بحيث تختصر العمليات التي تحتاج عدداً كبيراً من الأسطر البرمجية إلى مجموعة توابع تُستدعى بسطر برمجي واحد. المصدر: https://nasainarabic.net/main/articles/view/jquery
الآن سوف نستخدم AJAX بمساعدة مكتبة Jquery هذه لجعلها أسهل وأسرع في الفهم.
كيفية إضافة خاصية تحميل المزيد من المواضيع علي بلوجر
حسنًا لنبدأ
إذا لم تقم بتثبيت مكتبة Jquery على مدونتك ، فيرجى تثبيتها أولاً عن طريق وضع الكود التالي قبل الوسم </body>.
وأيضًا إذا قمت بتثبيت "أداة ترقيم الصفحات في مدونتك" ، فيرجى حذفها أولاً. عادةً ما تستخدم Javascript ، انظر فقط إلى أسفل مدونتك. إذا إختلط عليك الأمر تستطيع فقط وضع تعليق أسفل وسنساعدك في هذا . حول كيفية تثبيته ، قمت بتقسيمه إلي قسمين ، الواجهة الأمامية والخلفية Backend - Frontend.
الكود التالي هو كود CSS للزر ، يرجى وضعه قبل الوسم //]> </ b: skin> أو في الوسم <style> </style>.
التالي سنقوم بربط الزر. ابحث عن الوسم id='blog-pager' ، ثم احذف الشفرة الموجودة في العلامة ، واستبدله بالرمز التالي.
سيصبح مث الكود التالي:
ثم انقر فوق حفظ.
الرجاء راجع النتائج أولاً على مدونتك. هل ظهر الزر؟
تم أنشاء الزر ولكن عند الضغط عليه لن بؤدي إلي شئ لأننا فمنا للتو بأنشاء الزر ولكن لم نحدد له ماذا نيرده أن يفعل ،الأن سنحدد ذلك عن طريق الطرف الخلفي JQuery Ajax.
يرجى وضع الكود التالي قبل الوسم </body>.
لقد أنتهينا من إضافة خاصية تحميل المزيد من المواضيع علي بلوجر
سهلاً أليس كذلك ؟
أذا كنت في حيرة من أمرك ولا تفهم كيف تقوم بتركيبها كل ما عليك فقط هوا وضع تعلق في قسم التعليقات في الأسفل وسنقوم بمساعدتك .
هذا يكفي لليوم 😄
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
وأيضًا إذا قمت بتثبيت "أداة ترقيم الصفحات في مدونتك" ، فيرجى حذفها أولاً. عادةً ما تستخدم Javascript ، انظر فقط إلى أسفل مدونتك. إذا إختلط عليك الأمر تستطيع فقط وضع تعليق أسفل وسنساعدك في هذا . حول كيفية تثبيته ، قمت بتقسيمه إلي قسمين ، الواجهة الأمامية والخلفية Backend - Frontend.
1. عمل زر تحميل المزيد
حسنًا ، نحتاج أولاً إلى عمل ور (تحميل المزيد) ، إليك مثال على الكود (إذا كنت ترغب في تعديله).الكود التالي هو كود CSS للزر ، يرجى وضعه قبل الوسم //]> </ b: skin> أو في الوسم <style> </style>.
/* Load More Button by imintweb.com */
#blog-pager.loadmore{margin:20px 0;padding:10px 0;display:block;text-align:center}
#blog-pager .loadmore-btn{cursor:pointer;padding:8px 24px;background:#4285f4;color:#fff;border-radius:50px;font-family:'Quicksand',sans-serif;font-weight:600;outline:0;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
#blog-pager .loadmore-btn.loading,#blog-pager .loadmore-btn.loading:hover,#blog-pager .loadmore-btn.no-more,#blog-pager .loadmore-btn.no-more:hover{background:#fff;color:#888;cursor:wait}
#blog-pager .loadmore-btn.no-more{cursor:default}
#blog-pager .loadmore-btn:hover{color:#fff;background:#3c79de}
التالي سنقوم بربط الزر. ابحث عن الوسم id='blog-pager' ، ثم احذف الشفرة الموجودة في العلامة ، واستبدله بالرمز التالي.
<a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>
سيصبح مث الكود التالي:
<div id='blog-pager' class='loadmore'>
<a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>
</div>
ثم انقر فوق حفظ.
الرجاء راجع النتائج أولاً على مدونتك. هل ظهر الزر؟
تم أنشاء الزر ولكن عند الضغط عليه لن بؤدي إلي شئ لأننا فمنا للتو بأنشاء الزر ولكن لم نحدد له ماذا نيرده أن يفعل ،الأن سنحدد ذلك عن طريق الطرف الخلفي JQuery Ajax.
2. إنشاء تحميل المزيد من المواضيع باستخدام JQuery Ajax
تأكد من أنك قمت بتثبيت مكتبة Jquery. وأوصي باستخدام Jquery الإصدار 2 أو 3 أو الأحدث.يرجى وضع الكود التالي قبل الوسم </body>.
<script>
//<![CDATA[
$(document).on('click','.loadmore-btn', function(e){
e.preventDefault();
let nextLink = $(this).attr('href');
let loadmoreBtn = $('#blog-pager .loadmore-btn');
if(nextLink){
$.ajax({
url: nextLink,
beforeSend: function(){
loadmoreBtn.addClass('loading').text('Loading...');
},
complete: function(){
loadmoreBtn.removeClass('loading');
},
success: function(html){
let rslt = $(html).find('#Blog1 .blog-posts').html();
let nextPage = $(html).find('#Blog1 .loadmore-btn').attr('href');
$('.blog-posts').append(rslt);
loadmoreBtn.show();
if(nextPage){
loadmoreBtn.attr('href', nextPage).text('Load More');
}else{
loadmoreBtn.addClass('no-more').text('All Posts Loaded!').removeAttr('href');
}
}
});
}
});
//]>
</script>
لقد أنتهينا من إضافة خاصية تحميل المزيد من المواضيع علي بلوجر
سهلاً أليس كذلك ؟
أذا كنت في حيرة من أمرك ولا تفهم كيف تقوم بتركيبها كل ما عليك فقط هوا وضع تعلق في قسم التعليقات في الأسفل وسنقوم بمساعدتك .
هذا يكفي لليوم 😄