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

எழுதிய கட்டுரை:
  • வேர்ட்பிரஸ்
  • புதுப்பிக்கப்பட்டது: ஜூலை 29, 2011

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

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

உதாரணங்கள் os முடிவற்ற ஸ்க்ரோலிங் தளம்

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

Feedly

ட்விட்டர்

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

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

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

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

சொத்துக்கள்

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

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

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

PHP குறியீடு

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

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

Functions.php கோப்பு உங்கள் தீம் இதயம். எல்லா செயல்பாடுகளும் பொதுவாக உள்ளன அல்லது மற்ற கோப்புகளிலிருந்து அழைக்கப்படுகின்றன. எனவே உங்கள் குறியீட்டு கோப்பில் இந்த குறியீட்டை சேர்க்க முடியும் எல்லையற்ற ஸ்க்ரோலிங் ஆதரவு (கோப்பின் இறுதியில் சேர்க்க):

<? php / ************************* WEB ரெவென்இன் இன்னினைட் ஸ்க்ரோலிங் ***************** ******** / / * பதிவுசெய்வதற்கான செயல்பாடு மற்றும் தீம் பயன்படுத்தப்படும் முடிவிலா ஸ்கோலிங் ஸ்கிரிப்ட் enqueue. (/ jquery.infinitescroll.min.js ') // கோப்பு வரிசை (' jquery '), / / ​​அங்கு இருக்குமானால் (wp_register_script ()' wp_register_script '(' infinite_scrolling ', // ஸ்கிரிப்டின் பெயர் get_template_directory_uri () இந்த ஸ்கிரிப்ட் ஒரு jQuery ஸ்கிரிப்ட் பூஜ்யம் தேவை, // ஸ்கிரிப்ட் பதிப்பு எண் உண்மை இல்லை // ஸ்கிரிப்ட் அடி அடி மீது வைக்கப்படும்); (!! is_singular ()) {/ // நாம் பதினைந்துக்கும் மேல் இருந்தால் மட்டுமே இந்த ஸ்கிரிப்ட் wp_enqueue_script ('infinite_scrolling') ஐ ஏற்றுவோம்; }} / எங்கள் தனிபயன் ஸ்கிரிப்ட்களை பதிவு செய்க! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * பக்கத்தில் காட்டப்படும் முடிவிலா ஸ்க்ரோலிங் அமைக்கும் செயல்பாடு. * / function set_infinite_scrolling () {if (! is_singular () {if / again}, inifinite ஸ்க்ரோலிங் அமைப்பு, நீங்கள் உங்கள் விருப்பத்திற்கு * / var inf_scrolling = {/ * IMG: மாற்றும் பட பாதை, அங்கு ஒரு நல்ல gif ஏற்றுதல் ஐகான் சேர்க்க msgText: ஏற்றுதல் செய்தி முடிந்தது எம்.எஸ்.ஜி: முடிந்ததும் ஏற்றுதல் செய்தி * / ஏற்றுதல்: { img: "<? echo get_template_directory_uri;)?> / images / ajax-loading.gif", msgText: "அடுத்த இடுகைகள் ஏற்றுகிறது ....", முடிந்தது MSG: "இடுகைகள் ஏற்றப்பட்டவை !!",}, * அடுத்தடுத்து அமைக்கவும். NextSelector பக்கம் வழிசெலுத்தல் CSS வர்க்கம் உள்ளது. எங்கள் வழக்கில் # nav-below. Nav-previous a * / "nextSelector": "# nav-below .nav முந்தைய", // navSelector பக்கம் வழிசெலுத்தல் "navSelector" ஒரு CSS ஐடி: "# nav-below ", // itemSelector இடுகை" itemSelector "காட்டப்படும் DIV ஆகும்:" article ", // contentSelector பக்கம் உள்ளடக்கம் (இடுகைகள்)" contentSelector "காட்டப்படும் எங்கே div:" # content "}; / * செய்ய கடைசியாக ஒன்று முடிவிலா சுருள் contentSelector கட்டமைக்க, எல்லையற்ற scroll.min.js * / jQuery (inf_scrolling.contentSelector) இருந்து ஒரு செயல்பாடு jquery உடன் .infinitescroll (inf_scrolling); </ script> <? }} / * இந்தப் பக்கத்தின் அடிக்குறிப்பை நாம் சேர்க்க வேண்டும். 1 என்பது ஒரு முன்னுரிமை எண், அது பின்னர் மரணதண்டனை கொடுக்கும். * / add_action ('wp_footer', 'set_infinite_scrolling', 1); ?>

மாற்று அணுகுமுறை - ஏற்றுதல் பக்கங்கள் மற்றும் விருப்ப பதவியை வகைகள்

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

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

போது (have_posts ()):

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

<div id = "content" role = "main"> <? php / * முடிவிலா சுருளில் பக்கங்கள் மட்டும் காட்டு! இங்கே ரகசியம்: உங்களுக்கு தேவையானதைப் போன்று post_type ஐ நீங்கள் அமைக்கலாம், இது எளிது! 'Post', 'page', 'product' * / $ args = array (// set up arguments போன்றவை), நாம் விரும்பும் பல பிந்தைய வகைகளை சேர்க்கலாம், 'post_type' => 'பக்கம்', // ஒரே பக்கங்கள்); query_posts ஒரு ($ மதிப்புரு); // சுமை பதிவுகள் இருந்தால் (have_posts ()):?> <? php / * லூப் தொடங்கும் * /?> <? php போது (have_posts ()): the_post (); // அந்த உருப்படிகளை காட்ட "வழக்கமான" வளைய குறியீடு?>

தீர்மானம்

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

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

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

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

நான்"