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

எழுதிய கட்டுரை:
  • வேர்ட்பிரஸ்
  • புதுப்பிக்கப்பட்டது: ஜூலை 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 ஐ உருவாக்கியுள்ளோம், மேலும் பிரதான மெனுவை மறைத்து, தேர்ந்தெடுத்ததைக் காண்பிக்கும் ஒரு மொபைல் சாதனத்தை மட்டும் இலக்காகக் கொண்ட ஒரு விதியை நாங்கள் சேர்த்துள்ளோம். நீங்கள் தேர்ந்தெடுத்த மெனுவில் இருந்தால், உல் / li உருப்படிகளை காட்டாமல் நிறைய இடத்தை சேமிக்க முடியும்

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 () போன்ற சொருகி நிபந்தனைகளைப் பயன்படுத்தலாம்.

தீர்மானம்

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

ரோசெஸ்டர் ஒலிவிராவின் கட்டுரை

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

தொடர்பு கொள்ள: