كيفية إضافة التمرير اللانهائي Infinite Scroll لمدونتك 2018

عرض عدد لا نهائي Infinite Scroll من مواضيع المدونة

خاصية Infinite Scroll هي ميزة تجعلك تتصفح الصفحة التالية من المشاركات تلقائياً عندما يقترب الزائر من أسفل الصفحة الرئيسية أو صفحة المواضيع وما أن تصل لنهاية الصفحة يعرض لك مواضيع الصفحة التالية وهكذا الى نهاية المواضيع ولذلك سميت بي Infinite BlogScroll أو الــ Endless Scroll ... مثل الموجودة في تويتر وفيسبوك .
بعض المواقع حالياً بدأت تطبق هذه الميزة وسنذكر كيف تقوم بتركيب هذه الخاصية في موقعك مع بعض الخصائص التي تتمتع بها هذه الخاصية في مجال تحسين السيو الداخلي للموقع .

بعض مزايا الـ Infinite Scroll على السيو الداخلي ؟

• الإستفادة من عمليات المشاركات بأكبر قدر ممكن للصفحة الرئيسية على Social Signals فالزائر في هذه الحالة سيشارك رابط صفحة واحدة التي تعرض آخر المواضيع بعدد لانهائي فهذا من شأنه أن يحفذه لمشاركة هذه الصفحة لما يجذبه من أحد هذه المواضيع.
• الإضافة ستقوم بتوزيع قوة الـ Authority على المواضيع ممايجعل مواضيعك في مراحل متقدمة لمحركات البحث .
• تخفيض نسبة الـBounce Rate معدل بقاء الزائر للصفحة .
• ميزة هذه الخاصية ستوفر عليك الكثير من الوقت والجهد لك ولزوارك بسهولة التنقل في الملايين من الصفحات فبدلا من ذلك كل شيء سيكون بصفحه واحده وسيكون من السهل جدا التنقل في الصفحات وسهولة البحث عن المواضيع .

اضافة التمرير اللانهائي لمدونات بلوجر

معاينة الإضافة

لتركيب الإضافة قم بالدخول الى حسابك في بلوغر وبعد الدخول الى الموقع المفضل لديك اذهب الى القالب Theme وقبل أن تقوم بأي شئ عليك عمل backup للقالب في حال حدث أي خطأ , ثم ادخل الى محرر القالب EDIT HTML  قم بالبحث عن </body> وقم بإضافة الكود التالي قبله  :

<!-- start invinite js --><b:if cond='data:blog.pageType == "index"'><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/><script>//<![CDATA[ //infinite scroll !function(t){Date.now=Date.now||function(){return+new Date},t.ias=function(e){function n(){var e;return C.onChangePage(function(t,e,n){S&&S.setPage(t,n),w.onPageChange.call(this,t,n,e)}),i(),S&&S.havePage()&&(a(),e=S.getPage(),P.forceScrollTop(function(){var n;e>1?(u(e),n=s(!0),t("html, body").scrollTop(n)):i()})),y}function i(){r(),w.scrollContainer.scroll(o)}function o(){var t,e;t=P.getCurrentScrollOffset(w.scrollContainer),e=s(),t>=e&&(f()>=w.triggerPageThreshold?(a(),v(function(){l(t)})):l(t))}function a(){w.scrollContainer.unbind("scroll",o)}function r(){t(w.pagination).hide()}function s(e){var n,i;return n=t(w.container).find(w.item).last(),0===n.size()?0:(i=n.offset().top+n.height(),e||(i+=w.thresholdMargin),i)}function l(e,n){var o;return(o=t(w.next).attr("href"))?void(w.beforePageChange&&t.isFunction(w.beforePageChange)&&w.beforePageChange(e,o)===!1||(C.pushPages(e,o),a(),h(),c(o,function(e,s){var l,c=w.onLoadItems.call(this,s);c!==!1&&(t(s).hide(),l=t(w.container).find(w.item).last(),l.after(s),t(s).fadeIn()),o=t(w.next,e).attr("href"),t(w.pagination).replaceWith(t(w.pagination,e)),d(),r(),o?i():a(),w.onRenderComplete.call(this,s),n&&n.call(this)}))):(w.noneleft&&t(w.container).find(w.item).last().after(w.noneleft),a())}function c(e,n,i){var o,a,r,s=[],l=Date.now();i=i||w.loaderDelay,t.get(e,null,function(e){o=t(w.container,e).eq(0),0===o.length&&(o=t(e).filter(w.container).eq(0)),o&&o.find(w.item).each(function(){s.push(this)}),n&&(r=this,a=Date.now()-l,i>a?setTimeout(function(){n.call(r,e,s)},i-a):n.call(r,e,s))},"html")}function u(e){var n=s(!0);n>0&&l(n,function(){a(),C.getCurPageNum(n)+1<e?(u(e),t("html,body").animate({scrollTop:n},400,"swing")):(t("html,body").animate({scrollTop:n},1e3,"swing"),i())})}function f(){var t=P.getCurrentScrollOffset(w.scrollContainer);return C.getCurPageNum(t)}function g(){var e=t(".ias_loader");return 0===e.size()&&(e=t('<div class="ias_loader">'+w.loader+"</div>"),e.hide()),e}function h(){var e,n=g();w.customLoaderProc!==!1?w.customLoaderProc(n):(e=t(w.container).find(w.item).last(),e.after(n),n.fadeIn())}function d(){var t=g();t.remove()}function p(e){var n=t(".ias_trigger");return 0===n.size()&&(n=t('<div class="ias_trigger"><a href="#">'+w.trigger+"</a></div>"),n.hide()),t("a",n).off("click").on("click",function(){return m(),e.call(),!1}),n}function v(e){var n,i=p(e);n=t(w.container).find(w.item).last(),n.after(i),i.fadeIn()}function m(){var t=p();t.remove()}var w=t.extend({},t.ias.defaults,e),P=new t.ias.util,C=new t.ias.paging(w.scrollContainer),S=w.history?new t.ias.history:!1,y=this;n()},t.ias.defaults={container:".blog-posts",scrollContainer:t(window),item:".postThum",pagination:"#blog-pager",next:"#blog-pager-older-link a",loader:'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsoStWwRfnXijSmDzAXrFXX0vTG_t4-js7pqc6rU_RZreaTBkQI5TVqabhiCHVT2tmOm-JTJEDPktdNNaFsZDGK8aFAq-_pUM7IN-DCR6mcSiI9Pbt9Omsbk2RnvdB-4r45Jt2C9qZyU/s1600/ellipsis.gif"/>',loaderDelay:1e3,triggerPageThreshold:50,trigger:"Load more Posts",thresholdMargin:-250,history:!0,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){gapi.plusone.go()},customLoaderProc:!1},t.ias.util=function(){function e(){t(window).load(function(){n=!0})}var n=!1,i=!1,o=this;e(),this.forceScrollTop=function(e){t("html,body").scrollTop(0),i||(n?(e.call(),i=!0):setTimeout(function(){o.forceScrollTop(e)},1))},this.getCurrentScrollOffset=function(t){var e,n;return e=t.get(0)===window?t.scrollTop():t.offset().top,n=t.height(),e+n}},t.ias.paging=function(){function e(){t(window).scroll(n)}function n(){var e,n,a,c,u;e=l.getCurrentScrollOffset(t(window)),n=i(e),a=o(e),s!==n&&(c=a[0],u=a[1],r.call({},n,c,u)),s=n}function i(t){for(var e=a.length-1;e>0;e--)if(t>a[e][0])return e+1;return 1}function o(t){for(var e=a.length-1;e>=0;e--)if(t>a[e][0])return a[e];return null}var a=[[0,document.location.toString()]],r=function(){},s=1,l=new t.ias.util;e(),this.getCurPageNum=function(e){return e=e||l.getCurrentScrollOffset(t(window)),i(e)},this.onChangePage=function(t){r=t},this.pushPages=function(t,e){a.push([t,e])}},t.ias.history=function(){function t(){n=!!(window.history&&history.pushState&&history.replaceState),n=!1}var e=!1,n=!1;t(),this.setPage=function(t,e){this.updateState({page:t},"",e)},this.havePage=function(){return this.getState()!==!1},this.getPage=function(){var t;return this.havePage()?(t=this.getState(),t.page):1},this.getState=function(){var t,e,i;if(n){if(e=history.state,e&&e.ias)return e.ias}else if(t="#/page/"===window.location.hash.substring(0,7))return i=parseInt(window.location.hash.replace("#/page/",""),10),{page:i};return!1},this.updateState=function(t,n,i){e?this.replaceState(t,n,i):this.pushState(t,n,i)},this.pushState=function(t,i,o){var a;n?history.pushState({ias:t},i,o):a=t.page>0?"#/page/"+t.page:"",e=!0},this.replaceState=function(t,e,i){n?history.replaceState({ias:t},e,i):this.pushState(t,e,i)}}}(jQuery); //]]></script><script>jQuery.ias();</script><script type='text/javascript'>//<![CDATA[ jQuery(function($){ $.ias({ container: ".blog-posts", item: ".date-outer", // or ".post-outer" if doesn't work pagination: "#blog-pager", next: "#blog-pager-older-link a", loader: '<img src="https://68.media.tumblr.com/76b21b79fdedd34575b9535dedbce653/tumblr_nbnhdd6nyC1s266z3o1_500.gif" style="display: block; margin-left: auto; margin-right: auto;">', triggerPageThreshold: 50, thresholdMargin: -100, onRenderComplete: function() { FB && FB.XFBML && FB.XFBML.parse(); gapi && gapi.plusone && gapi.plusone.go(); twttr && twttr.widgets && twttr.widgets.load(); _gaq && _gaq.push(['_trackPageview', $(this.next).attr('href')]); } }); }); //]]></script></b:if><!-- end invinite js -->

أعمل حفظ وأعرض الصفحة الرئيسية واذا لم تشتغل لديك الإضافة أو لم تعمل بشكل جيد فربما تكون مدرج لديك في قالبك كود jQuery script وفي هذه الحالة حاول أحذف سطر كود الJguery من الإضافة الموجودة فوق في السطر الثالث :
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/>

اذا لم تعمل مرة آخرى أترك تعليق أسفل المقال لأحاول مساعدتك .

اضافة التمرير اللانهائي لمواقع الويردبريس

اذا كنت مطور مواقع وتستطيع التعديل على ملفات القالب ولديك قالب نظيف مثل القوالب المستخدمة في الثيمات الإفتراضية للويردبريس عليك فقط الدخول الى ملف ال (functions.php) وإضافة الكود التالي لتعمل هذه الميزة : 

add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'footer' => 'page', ) );

أما الطريقة البسيطة والسهلة للمبتدئين قم بتنصيب وتفعيل إضافة jetpack الشهيرة والغنية عن التعريف كما في الصورة :

قم بالدخول إلى إعدادات إضافة Jetpack :

أنزل لتحت لحتى تلاقي Infinite Scroll وقم بتفعيلها :

بالتوفيق للجميع ودمتم في رعاية الله
ولاتنسى مشاركة الموضوع مع أصدقائك

الرئيسية / Infinite Scroll / Infinite Scroll