உங்கள் வேர்ட்பிரஸ் தீம் மொபைல் பதிப்பு மேம்படுத்தவும் வழிகள்

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

மொபைல் பதிப்பு வேர்ட்பிரஸ்

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

நிகர மார்க்கெஷரின்படி, மொபைல் சாதனங்கள் மொத்த வலைப்பக்கத்தில் உள்ள 10% ஐ பிரதிபலிக்கின்றன. இது ஒரு பெரிய படம், அது சில இடங்களில் மற்றும் நாடுகளில் கூட பெரிய விஷயம். ஆனால் இங்கே முக்கியமான விஷயம் மொபைல் சாதனங்களுக்கு தேவைப்படும் சிறப்பு கவனம், ஏனென்றால் வரையறுக்கப்பட்ட திரை இடைவெளி மற்றும் மொபைல் இணைப்புகள் பொதுவாக டெஸ்க்டாப் இணைப்பை விட மெதுவாக இருக்கும்.

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

#1 மீடியா மீடியா வகைகள்

சில ஆண்டுகளுக்கு முன்பு, IE5.5 மற்றும் IE6 ஆகியவை உயிருடன் கருதப்பட்டபோது, ​​மொபைல் உலாவிகள் வெளியேறத் தொடங்கியிருந்தன (மற்றும் ஓபரா மிகச் சிறந்த ஒன்றாகும்), மேலும் தொலைபேசிகளிலிருந்தே விஷயங்கள் உடைந்து கொண்டிருப்பதை மக்கள் உணரத் தொடங்கினர். CSS போன்ற எளிய விஷயங்களை செயலாக்கவும் (JS, ஃபிளாஷ் மற்றும் பலவற்றைக் குறிப்பிட வேண்டாம்).

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

<link rel = "stylesheet" href = "handheld.css" வகை = "உரை / CSS" ஊடகம் = "கையடக்க" />

உங்கள் மொபைல் தளத்திற்கு முற்றிலும் மாறுபட்ட வடிவமைப்பை உருவாக்க இது ஒரு நல்ல வழி. ஆனால் நீங்கள் அதைப் பயன்படுத்தக்கூடாது.

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

#2 மீடியா கேள்விகளும், உண்மையில் மொபைல் அனுபவத்தை எவ்வாறு மேம்படுத்துவது

இது உங்கள் தளத்தின் மொபைல் பதிப்பை உருவாக்க மிகவும் பிரபலமான வழியாகும்.

உலாவி அளவு, சாதனம் திரை அளவு, பிக்சல் அடர்த்தி (ஆமாம், விழித்திரை!), மற்றும் ஊடக வகைகளை அடிப்படையாகக் கொண்ட சில புள்ளிகளை நீங்கள் இலக்காகக் கொள்ளலாம்.

இங்கே ஒரு எளிய ஊடக வினவல்:

@ ஊடக (அதிகபட்ச அகலம்: 700px) {body {background: red; }}

இந்த நிரலாக்க போன்ற அழகான மிகவும் உள்ளது. IF "உலாவி அகலம் 700 அல்லது குறைவானது", பிறகு "பின்வரும் CSS குறியீட்டைப் பயன்படுத்துக".

குழந்தை தீம்

உங்கள் / கருப்பொருள்களில் ஒரு புதிய கோப்புறையை உருவாக்கி அதற்கு இருபது மொபைல் என்று பெயரிடுவோம். எனக்குத் தெரியும், இருபது பன்னிரண்டு பேர் ஏற்கனவே ஊடக வினவல்களைப் பயன்படுத்துகிறார்கள், ஆனால் நாங்கள் இங்கே கற்றுக்கொள்ள வந்தோம், இல்லையா?

எனவே, ஒரு style.css கோப்பை உருவாக்கி இந்த உள்ளடக்கத்தைச் சேர்க்கவும்:

/ * தீம் பெயர்: மொபைல் தீம் வார்ப்புரு: இருபக்கமான * / @ இறக்குமதி URL ("../ இருபத்திமூவர் / style.css"); @ ஊடக கையொப்பம், ஒரே திரை மற்றும் (அதிகபட்ச அகலம்: 767px) {nav ul {display: none;} nav தேர்ந்தெடு {display: block}}

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

JQuery மொபைல் கொண்டு #3 தீவிர தயாரிப்பிலும்

jQuery மொபைல் உகந்ததாக விட்ஜெட்கள் மற்றும் UI உறுப்புகள், மொபைல் அனுபவத்தை மேம்படுத்த jQuery செயல்பாடு பயன்படுத்தும் ஒரு அற்புதமான கட்டமைப்பை உள்ளது.

HTML தேவை o வேலை செய்ய மிகவும் எளிது, அது UI விட்ஜெட்டுகளை கண்டறிய மற்றும் உருவாக்க HTML தரவு பண்புகளை மற்றும் JS பயன்படுத்துகிறது.

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

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ ஸ்கிரிப்ட்>

வணிக ரீதியிலான திட்டங்களுக்கு நீங்கள் wp_enqueue _script ஐப் பயன்படுத்த வேண்டும் என்று குறிப்பிட வேண்டும், எனவே உங்கள் தளத்தில் நூலகங்களை நகலெடுப்பதை தவிர்க்கவும்.
இப்போது நாம் விரும்பும் அழகான UI உறுப்புடன் விளையாடலாம். jQuery மொபைல் நீங்கள் ஒரு தீம் பயன்படுத்த முடியும் என்று UI விட்ஜெட்கள் நிறைய உள்ளது, ஆனால் பக்கம் மற்றும் மடங்கு பேனல்கள் விண்ணப்பிக்க அனுமதிக்க.
இது அடிப்படை HTML தொடரியல் ஆகும்:

<div data-role = "page"> <div தரவு-பாத்திரம் = "தலைப்பு"> </ div> <div தரவு-பாத்திரம் = "உள்ளடக்கம்"> </ div> <div தரவு- role = "footer"> </ div> </ div>

இந்த குறியீடு மூலம் நீங்கள் ஒரு புதிய "பக்கம்" மற்றும் தலைப்பு, உள்ளடக்கம் மற்றும் முடிப்பு பகுதிகளில் உருவாக்க வேண்டும். தலைப்பு மற்றும் முடிப்பு சரி செய்யப்படும், மற்றும் உள்ளடக்கம் நடப்பு பக்கத்தின் அடிப்படையில் மாறும், எனவே நீங்கள் ஒரு முறை பல பக்கங்களை ஏற்றலாம் மற்றும் வேறு ஐடிகளை ஒதுக்கினால் அவற்றை மறைக்கலாம்.
இது மடங்கு பேனல்களுக்கான அடிப்படை HTML ஆகும்:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data-collapsed = "true"> <p> மடக்கக்கூடிய பகுதி உள்ளடக்கம் </ p> </ div> </ div>

அங்கு ஒரு வட்டத்தை செயல்படுத்துவது மிகவும் எளிது, இல்லையா? சரி, உங்கள் குறியீடு இப்படி இருக்கும்:

<div data-role = "collapsible-set"> <? போது (have_posts ()) {...?> <div தரவு-பங்கு = "மடங்கு" தரவு சரிந்தது = "உண்மை"> </ div> <? ...}?> </ div>

தேர்ந்தெடுக்கப்பட்ட பட்டி திருத்தப்பட்டது

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

DOM தயார் $ (ஆவணம்) போது (செயல்பாடு ($) {/ //. (செயல்பாடு () {// {/ தேர்ந்தெடு < / புதிய விருப்பத்துடன் ... $ ("<option />", {"மதிப்பு": "", "உரை": "செல் ..."}). AppendTo ("nav தேர்ந்தெடு");}); / $ ("<" விருப்பம்), ஒவ்வொரு மெனுவிற்காகவும் ஒவ்வொரு மெனுவில் (a) = $ (இந்த); $ ("<option) /> ", {" மதிப்பு ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav தேர்ந்தெடு "); / தேர்ந்தெடுக்கப்பட்ட ஒரு புதிய உருப்படியை சேர்க்க) (// "window") = "(விருப்பம்: தேர்ந்தெடுக்கப்பட்டது"). ();});});

இதை செய்வது புதிய மொபைல் மெனுவை உருவாக்கும், ஆனால் சிக்கல் என்னவென்றால், நாங்கள் தளத்தின் "சாதாரண" பதிப்பில் கூட jQuery மொபைல் ஐ ஏற்றுகிறோம். அதனால்தான் எங்கள் தளத்தை மேம்படுத்துவதற்கு எங்களுக்கு ஒரு சில கூடுதல் பயன்படுத்தலாம்.

#4 - மொபைல் டிடெக்டருடன் எல்லாவற்றையும் போடுவது

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

<? php என்றால் (MobileDTS :: ('Android')) {....} வேறுவழியாக (MobileDTS :: ('மொபைல்')) {....} வேறு {}?>

MobileDTS முறை தற்போதைய சாதனத்தை சரிபார்க்கிறது பின்னர் ஒரு எளிய உண்மை / தவறான கொடுக்கிறது. பின்னர் ஒரு புதிய தீம் அமைக்க சுவிட்ச்_தீம் () என்ற மாயச் செயலைப் பயன்படுத்தலாம். உதாரணமாக, மொபைலைப் பயன்படுத்தும் போது ஒரு டெஸ்க்டாப் பதிப்புக்கு இணைப்பை உருவாக்குவதற்கு MobileDTS :: is_switcher_enabled () போன்ற சொருகி நிபந்தனைகளைப் பயன்படுத்தலாம்.

தீர்மானம்

எனவே, நீங்கள் எப்போதும் உங்கள் வேர்ட்பிரஸ் தீம் மொபைல் கூடுதல் அல்லது செயல்பாடுகளை பயன்படுத்தப்படும்? எந்த முறையை நீங்கள் விரும்புகிறீர்கள்? கூச்சப்படாமலும் உங்கள் எண்ணங்களை பகிர்ந்து கொள்ளாதே!

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

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

நான்"