வேர்ட்பிரஸ் பயிற்சி: எப்படி ஒரு முடிவற்ற ஸ்க்ரோலிங் WP தளம் உருவாக்குவது

புதுப்பிக்கப்பட்டது: ஜூலை 29, 2014 / கட்டுரை எழுதியவர்: ரோசெஸ்டர் ஒலிவேரா

உங்கள் தளத்தின் பயன்பாட்டினை மேம்படுத்த நீங்கள் கண்டிப்பாக உழைக்கிறீர்கள், அதனால் உங்கள் பயனர்கள் மகிழ்ச்சியாக இருப்பார்கள், அடிக்கடி திரும்பி வர வாய்ப்பு அதிகம். நன்றாக, நீங்கள் செயல்படுத்த முடியும் மேம்பாடுகள் ஒரு எல்லையற்ற ஸ்க்ரோலிங் நுட்பமாகும். இது ட்விட்டர் அல்லது பேஸ்புக்கில் உள்ளதைப் போலவே, அடிப்படை உள்ளடக்கத்தை முதலில் காட்டியுள்ளது, மேலும் நீங்கள் கீழே உருட்டும் போது கூடுதல் உள்ளடக்கம் சேர்க்கப்படும். இது உங்கள் தளத்தின் செயல்திறனை மேம்படுத்துவது (ஏற்றுதல் நேரம் குறைப்பது), மற்றும் பயனர் அனுபவத்தை மேம்படுத்துவது (ஒரு பொத்தானை கிளிக் செய்வதைப் போல, கூடுதல் உருப்படிகளை ஏற்றுவதற்கு நடவடிக்கை எதுவும் தேவைப்படாது).

ஏன், எப்படி உங்கள் சொந்த தளத்தில் அதைப் பயன்படுத்துவது என்று இங்கே பார்க்கலாம்

எடுத்துக்காட்டுகள் os எல்லையற்ற ஸ்க்ரோலிங் தளம்

பெரிய மனிதர்கள் அங்கு என்ன செய்கிறார்கள் என்பதைச் சோதிப்பது எப்போதுமே நல்லது, மேலும் இந்த வகையான விளைவு (பல முறை கவனிக்க முடியாதது) பேஸ்புக் (அந்த நேரடி ஊட்டம்), ட்விட்டர், Pinterest, Feedly போன்ற பல பெரிய தளங்கள் மற்றும் பயன்பாடுகளால் பயன்படுத்தப்படுகிறது.

Feedly

ட்விட்டர்

எல்லையற்ற உருள் - செய்ய வேண்டியவை மற்றும் செய்யக்கூடாதவை

இந்தத் தொழில்நுட்பம் உங்கள் தளத்தின் வழக்கமான pagination இணைப்பை அகற்றும் ("பழைய பதிவுகள்" அல்லது உங்கள் இடுகைகளுக்குப் பின் உள்ள எண் கொண்ட பக்கங்கள்). இந்த நுட்பத்தின் பெரிய "சார்பு" என்பது ஏற்றுக்கொள்ளும் நேரமாகும், ஏனென்றால் முதலில் நீங்கள் அதிக வேகமான தளத்தைக் கொண்டிருக்கலாம், மேலும் பக்கங்களை மறுபயன்பாட்டிற்காக சேர்க்காததால் மேலும் பதிவுகள் இல்லாமல் "பதிவுகள்" பதிவுகள் கவனித்தல், உங்கள் தளத்தில் மிக நீண்ட காலம் தங்கியிருத்தல்.

பெரும்பாலான தளங்களில் இது பயன்படுத்தப்படலாம், ஆனால் நிறைய உள்ளடக்கங்கள் மற்றும் படங்களைக் கொண்டிருக்கும் வலைப்பதிவுகள் அல்லது போர்ட்ஃபோலியோ போன்ற தளங்களில் இது மிகவும் ஏற்றது, மேலும் உள்ளடக்கத்தை நிறைய உள்ளடக்கத்துடன் நீங்கள் மூழ்கடிக்க விரும்பவில்லை.

இந்த வழிகாட்டிக்கு குறியீட்டு தேர்ச்சி தேவையில்லை, நேர்மையாக இருக்க உங்கள் வேர்ட்பிரஸ் கருப்பொருளை எவ்வாறு சிறிது மாற்றுவது என்பது குறித்து நீங்கள் நிச்சயமாக கொஞ்சம் கற்றுக்கொள்வீர்கள்.

சொத்துக்கள்

நாம் பயன்படுத்துவோம் பால் ஐரிஷ் தான் JS சொருகி. அதை பதிவிறக்கி உங்கள் தீம் JS கோப்புறையில் நிறுவ. நாங்கள் பிரத்தியேக கற்றல் இருபது பன்னிரண்டு பயன்படுத்த ஆனால் எந்த தீம் அதை பயன்படுத்த இலவச உணர்கிறேன் (மற்றும் அதை நீங்கள் வேலை இல்லை என்றால் பிந்தைய கேள்விகள்).

உங்கள் “ஏற்றுதல்” செய்திக்கு ஒரு நல்ல gif படம் உங்களுக்குத் தேவைப்படும். நீங்கள் அங்கு நிறைய கண்டுபிடிக்க முடியும், ஆனால் AjaxLoad தளத்தில் மிகவும் முன்னமைக்கப்பட்ட பாணிகள் நிறைய உங்களுக்கு உதவ மிகவும் அற்புதமான கருவி மற்றும் நீங்கள் உங்கள் வண்ண திட்டம் பொருந்தும் வண்ண தேர்வு செய்யலாம்.

நீங்கள் ஸ்கிரிப்ட் மற்றும் Wp-content / கருப்பொருள்கள் / இருபத்திமூன்று / JS கீழ் தொடங்குவதற்கு முன் நாம் தொடங்குவதற்கு முடியும்!

PHP குறியீடு

சரி, பயப்பட வேண்டாம், நாங்கள் உங்களுக்கு ஒரு நகல் மற்றும் ஒட்டுதல் துணுக்கை தருகிறோம், ஆனால் அதைச் செயல்படுத்துவதற்கு நாம் செய்ய வேண்டியது இங்கே:

  • உட்புறமாக எல்லையற்ற சுருள் சொருகி ஏற்ற மற்றும் பதிவு என்று ஒரு செயல்பாடு உருவாக்க - இந்த இருமுறை அதை ஏற்றும் இருந்து வேர்ட்பிரஸ் தடுக்க மற்றும் தீம் செயல்பாட்டை உடைத்து
  • உங்களிடம் ஒரு இடுகை இல்லாத ஒரு பக்கம் இருக்கும்போது மட்டுமே ஸ்கிரிப்டை ஏற்றவும் - காண்பிக்க 1 இடுகைக்கு மேல் உள்ள பக்கங்கள் மட்டுமே அதிக உருப்படிகளை ஏற்ற வேண்டும்.

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 ()):

எனவே, நீங்கள் இதை கண்டுபிடித்தவுடன் இந்த மாயக் குறியீட்டைப் பயன்படுத்தலாம்:

'பக்கம்', // பக்கங்கள் மட்டுமே); வினவல்_ இடுகைகள் (gs args); // இடுகைகளை ஏற்றினால் (have_posts ()):?>

தீர்மானம்

இது ஒரு "வெப்பமடைதல்" கட்டுரையாகும். இந்த வகையான அணுகுமுறையுடன் நீங்கள் செய்யக்கூடிய நிறைய விஷயங்கள் உள்ளன. உதாரணமாக, நீங்கள் பயனர் உருட்டுதல் என (ஒருவேளை, WooCommerce பயன்படுத்தி பயன்படுத்தி) உங்கள் கடையில் பொருட்கள் ஏற்ற முடியும், அல்லது உருவாக்க அங்கு இன்னும் JS மற்றும் CSS குறியீடு சேர்க்க மற்றும் பதவியை படங்களை அற்புதமான இடமாறு போன்ற ஏற்றி.

இந்த நுட்பத்தைப் பற்றி நீங்கள் என்ன நினைக்கிறீர்கள்? உனக்கு பிடிக்குமா? நீங்கள் அதை பயன்படுத்த வேண்டுமா? கருத்துகள் பிரிவைப் பயன்படுத்தி உங்கள் எண்ணங்களை பகிர்ந்து கொள்ளுங்கள்!

ரோசெஸ்டர் ஒலிவேரா பற்றி

நான் இன்ஜபுபா (எம்.ஜி.), பிரேசிலில் இருந்து ஒரு வலை வடிவமைப்பாளர் மற்றும் தொழில் முனைவர். நான் முட்டாள்தனமான தலைப்புகள் பற்றி எழுதும் சில நல்ல விஷயங்களை செய்வதை விரும்புகிறேன்.