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

المادة التي كتبها:
  • وورد
  • تم التحديث: Jul 29 ، 2014

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

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

أمثلة os موقع Infinite Scrolling

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

Feedly

أو تويتر

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

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

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

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

الأصول

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

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

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

كود PHP

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

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

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

<؟ php / ************************* WEB REVENUE INFINITE SCROLLING ***************** ******** / / * وظيفة من شأنها أن تسجل وتكتب النص البرمجي لاختصار scining لاستخدامها في الموضوع. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling'، // name of script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js'، // where the file is array ('jquery') // يتطلب هذا البرنامج النصي نصًا jquery فارغًا ، // لا يوجد لديك رقم إصدار البرنامج النصي true // script will de footer on footer)؛ إذا (! is_singular ()) {// فقط عندما يكون لدينا أكثر من 1 post // سنقوم بتحميل هذا البرنامج النصي wp_enqueue_script ('infinite_scrolling')؛ }} // سجل نصوصنا المخصصة! add_action ('wp_enqueue_scripts'، 'twentytwelve_script_infinite_scrolling')؛ / * الدالة التي سيتم تعيين التمرير لانهائية ليتم عرضها في الصفحة. * / function set_infinite_scrolling () {if (! is_singular ()) {/ / مرة أخرى ، فقط عندما يكون لدينا أكثر من 1 post // إضافة js script أدناه؟ <script type = "text / javascript"> / * هذا هو الإعداد التمرير inifinite ، يمكنك تعديل هذا في إرادتك * / var inf_scrolling = {/ * img: هو مسار تحميل الصورة ، إضافة رمز gif تحميل جيد هناك msgText: رسالة التحميل finishedMsg: رسالة التحميل النهائي * / التحميل: { img: "<؟ echo get_template_directory_uri ()؛؟> / images / ajax-loading.gif"، msgText: "تحميل المشاركات التالية ...."، finishedMsg: "Posts loading !!"،}، / * العنصر التالي هو set nextSelector. NextSelector هو فئة CSS لصفحة التنقل. في حالتنا هو # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a"، // navSelector هو معرّف css لملاحة الصفحة "navSelector": "# nav-below "، // itemSelector هو div حيث يتم عرض المشاركة" itemSelector ":" article "، // contentSelector هو div حيث يتم عرض محتوى الصفحة (المشاركات)" contentSelector ":" # content "}؛ / * آخر شيء هو تكوين contentSelector إلى التمرير اللانهائي ، مع jquery دالة من infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling)؛ </ script> <؟ }} / * نحتاج إلى إضافة هذا الإجراء في تذييل الصفحة. 100 هو رقم له الأولوية الذي يعمل على تنفيذ إصدار أحدث. * / add_action ('wp_footer'، 'set_infinite_scrolling'، 100)؛ ؟>

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

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

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

بينما (have_posts ()):

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

<div id = "content" role = "main"> <؟ php / * عرض الصفحات فقط في التمرير اللانهائي! في ما يلي السر: يمكنك تعيين نوع post_type لما تحتاجه ، الأمر بسيط! يمكن أن تكون بعض أنواع post_types: محفظة ، مشروع ، منتج ، يمكننا إضافة العديد من أنواع الرسائل كما نريد ، وفصلها بفواصل ، مثل "نشر" ، "صفحة" ، "منتج" * / $ args = صفيف (// إعداد الحجج 'post_type' => 'page'، // Only Pages)؛ query_posts ($ سائط)؛ // load posts if (have_posts ()):؟> <؟ php / * Start the Loop * /؟> <؟ php while (have_posts ()): the_post ()؛ // رمز حلقة "المعتاد" لعرض هذه العناصر؟

النتيجة

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

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

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

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

الاتصال: