دروس WordPress: كيفية إنشاء موقع WP التمرير اللانهائي

محدث: 29 يوليو 2014 / مقال: روتشستر أوليفيرا

أنت بالتأكيد تعمل بجد لتحسين إمكانية استخدام موقعك بحيث يكون المستخدمون أكثر سعادة وأكثر احتمالًا للعودة كثيرًا ، أليس كذلك؟ حسنًا ، أحد التحسينات التي يمكنك تنفيذها هي تقنية التمرير اللانهائي. إنه في الأساس نفس ما لدينا على Twitter أو Facebook ، حيث يتم عرض المحتوى الأساسي في البداية ، ويتم إضافة المزيد من المحتوى أثناء التمرير لأسفل. يعد هذا أمرًا جيدًا لتحسين أداء موقعك (تقليل وقت التحميل) ، وتحسين تجربة المستخدم (نظرًا لعدم الحاجة إلى أي إجراء لتحميل المزيد من العناصر ، مثل النقر على زر).

هنا سنرى لماذا وكيفية استخدامها في موقعك الخاص

أمثلة على موقع التمرير اللانهائي

من الجيد دائمًا التحقق مما يفعله الأشخاص الكبار هناك ، ويستخدم هذا النوع من التأثير (قاسٍ مرات عديدة غير ملحوظة) من قبل العديد من المواقع والتطبيقات الكبيرة ، مثل Facebook (ذلك البث المباشر) و Twitter و Pinterest و Feedly.

Feedly

أو تويتر

انتقل لانهائي - ما يفعل وما يترك

ستزيل هذه التقنية رابط تقسيم الصفحات العادي لموقعك ("المشاركات الأقدم" ، أو الصفحات المرقمة التي لديك بعد مشاركاتك). إن "المؤيد" الكبير لهذه التقنية هو وقت التحميل ، نظرًا لأنه يتم تحميل عناصر أقل في البداية ، يمكن أن يكون لديك موقع أسرع بكثير ، وبما أن المزيد من العناصر يتم إضافتها بدون إعادة تحميل الصفحة يمكن للمستخدم التمرير لأسفل لصفحات "10" الخاصة بالمشاركات دون حتى ملاحظة ، البقاء لفترة أطول في موقعك.

يمكن تطبيقه في معظم المواقع ، لكنه مناسب بشكل أفضل للمدونات أو المواقع الشبيهة بالمحافظ ، حيث يوجد لديك الكثير من المحتوى والصور ، ولا تريد أن تطغى على المستخدم بالكثير من المحتوى.

لا يتطلب هذا الدليل إجادة الترميز ، ولكي نكون صادقين ، فسوف تتعلم بالتأكيد بعض الشيء عن كيفية تعديل موضوع WordPress الخاص بك قليلاً.

الأصول

سنستخدم برنامج بولس الأيرلندي المساعد JS. تحميل البرنامج وتثبيته في مجلد js الخاص بموضوعك. سنستخدم Twenty Twelve لتعلم المقترحات ولكن لا تتردد في استخدامها في أي موضوع (وتوجيه الأسئلة إذا كان ذلك لا يعمل من أجلك).

ستحتاج أيضًا إلى صورة gif لطيفة لرسالة "التحميل". يمكن أن تجد الكثير منهم هناك ، لكن AjaxLoad يحتوي الموقع على أداة رائعة لمساعدتك في الكثير من الأنماط المعدة مسبقًا ، ويمكنك اختيار اللون الذي يتناسب بشكل أفضل مع ألوانك.

بمجرد الحصول على البرنامج النصي وصورة gif الجميلة الخاصة بك تحت Wp-content / themes / twentytwelve / js يمكننا البدء!

كود PHP

حسنًا ، لا تخف ، سنقدم لك نسخة ولصق مقتطفًا ، ولكن هنا ما يتعين علينا القيام به لإنجاحه:

  • قم بإنشاء وظيفة تقوم بتحميل وتسجيل البرنامج المساعد اللانهائي للتمرير داخليًا - سيؤدي ذلك إلى منع WordPress من تحميله مرتين وكسر وظيفة المظهر
  • تحميل البرنامج النصي فقط عندما يكون لديك صفحة ليست منشورًا واحدًا - فقط الصفحات التي لديك أكثر من منشور واحد لعرضها ستحتاج إلى تحميل المزيد من العناصر.

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

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

النهج البديل - تحميل الصفحات وأنواع النشر المخصصة

سيحمل الرمز السابق جميع مشاركاتك ، ولكن ماذا لو كنت تريد عرض الصفحات ، أو أنواع المنشورات المخصصة (مثل عناصر المحفظة ، إذا كان موضوعك يدعمها)؟ حسنًا ، يمكننا تعديل الشفرة قليلاً وجعلها تعمل أيضًا.

التعديل الوحيد المطلوب هو في الفهرس أو الفئة أو أي ملف آخر يقوم بتحميل العناصر ، ستحل محل الحلقة الحالية برمز مختلف. يمكنك تحديد العروة بواسطة هذا الرمز:

بينما (have_posts ()):

لذلك ، بمجرد العثور عليه ، يمكنك استخدام هذا الرمز السحري:

'page'، // Only Pages)؛ query_posts ($ args) ؛ // تحميل المشاركات إذا (have_posts ()):؟> 

النتيجة

هذا هو مجرد "الاحماء" المادة. هناك الكثير من الأشياء التي يمكنك القيام بها مع هذا النوع من النهج. على سبيل المثال ، يمكنك تحميل المنتجات في متجرك (باستخدام WooCommerce ، ربما) أثناء تمرير المستخدم ، أو حتى إضافة المزيد من شيفرة JS و CSS هناك لإنشاء محمل شبيه بالمناظر رائع للصور البريدية.

ما رأيك في هذه التقنية؟ هل أحببت ذلك؟ هل ستستخدمها؟ شارك أفكارك باستخدام قسم التعليقات!

حول روتشستر أوليفيرا

أنا مصمم على شبكة الإنترنت ورجل أعمال من Itajubá (MG) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.