4 วิธีในการปรับปรุงรูปแบบ WordPress ของอุปกรณ์เคลื่อนที่

บทความที่เขียนโดย:
  • WordPress
  • อัปเดต: ก.ค. 29, 2013

เวิร์ดเพรสเวอร์ชัน WordPress

ลองมาดูความจริงแล้วโทรศัพท์มือถือกำลังได้รับความนิยมมากขึ้น การเรียกดูเดสก์ท็อปไม่เติบโตขึ้นอีกต่อไป แต่ก็ลดลงจริงในขณะที่โทรศัพท์มือถือกำลังเติบโตอย่างรวดเร็วด้วยโทรศัพท์สมาร์ทโฟนและตารางที่น่าประทับใจทั้งหมดที่นั่น

ตาม Net MarketShare อุปกรณ์เคลื่อนที่แสดงถึง 10% ของการเข้าชมเว็บทั้งหมด เป็นตัวเลขขนาดใหญ่และยิ่งใหญ่กว่าในบางช่องและประเทศ แต่สิ่งสำคัญที่นี่คือความสนใจเป็นพิเศษที่โทรศัพท์มือถือจำเป็นต้องใช้เนื่องจากพื้นที่หน้าจอ จำกัด และความจริงที่ว่าการเชื่อมต่อผ่านมือถือมักจะทำงานได้ช้ากว่าการเชื่อมต่อเดสก์ท็อป

ธีม WordPress จำนวนมากตอบสนองได้ดี แต่คุณรู้ดีว่าเราจะมีพื้นที่สำหรับการปรับปรุงเสมอ ดังนั้นที่นี่เราจะเห็นเทคโนโลยี 4 และวิธีใช้พวกเขาเพื่อปรับปรุงประสบการณ์การใช้งานโทรศัพท์มือถือสำหรับผู้ใช้ของคุณ

#1 Ol 'Media Types

เมื่อไม่กี่ปีที่ผ่านมา IE5.5 และ IE6 ได้รับการพิจารณาว่ามีชีวิตชีวาเบราว์เซอร์มือถือกำลังเริ่มฉายออกมา (และโอเปร่าเป็นที่ดีที่สุด) และคนเริ่มตระหนักว่าสิ่งต่างๆกำลังล่มสลายไปเมื่อโทรศัพท์กลับมาแล้วก็ไม่สามารถ ประมวลผลสิ่งที่ง่ายๆเช่น CSS (ไม่พูดถึง JS, flash เป็นต้น)

ดังนั้นการทำไซต์บนมือถือที่แยกจากกันเป็นตัวเลือกเดียวเมื่อมีเดียมาช่วยเรา แนวคิดนี้ง่ายมากที่คุณจะสามารถบอกเบราว์เซอร์ได้ว่าไฟล์ที่คุณให้มานั้นเป็น "ขั้นสูง" กฎ CSS (สำหรับเดสก์ท็อป) หรือกฎ CSS ง่ายๆ (สำหรับมือถือหรือพิมพ์) ไวยากรณ์เป็นง่ายๆดังนี้:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" สื่อ = "อุปกรณ์พกพา" />

นี่อาจเป็นตัวเลือกที่ดีในการสร้างการออกแบบที่แตกต่างกันอย่างสิ้นเชิงสำหรับไซต์บนมือถือของคุณ แต่คุณไม่ควรใช้

ประเภทของสื่ออาจฟังดูดีในตอนแรก แต่ปัญหาง่ายๆมาพร้อมกับโทรศัพท์สมาร์ทที่ทันสมัย: การขาดการสนับสนุนเบราว์เซอร์ ผู้เล่นหลักส่วนใหญ่ออกมีเพียงไม่สนใจชนิดของการทำงานนี้ (เช่นแอปเปิ้ล)
จากนั้นข้อความค้นหาของสื่อจะมาช่วยเราได้

#2 การค้นหาสื่อและวิธีการปรับปรุงประสบการณ์บนอุปกรณ์เคลื่อนที่อย่างแท้จริง

นี่เป็นวิธีที่ได้รับความนิยมมากที่สุดในการสร้างไซต์บนมือถือของคุณ

คุณสามารถกำหนดเป้าหมายบางจุดตามความโกรธของขนาดเบราเซอร์ขนาดหน้าจออุปกรณ์ความหนาแน่นของพิกเซล (ใช่จอประสาทตา!) และแม้กระทั่งประเภทสื่อ

ต่อไปนี้เป็นข้อความค้นหาสื่อแบบง่าย:

@media (ความกว้างสูงสุด: 700px) {เนื้อหา {พื้นหลัง: สีแดง; }}

นี่สวยมากเหมือนกับการเขียนโปรแกรม IF "เบราว์เซอร์กว้าง 700 หรือต่ำกว่า", แล้ว "ใช้โค้ด CSS ต่อไปนี้"

ธีมเด็ก

ลองสร้างโฟลเดอร์ใหม่ในธีม / ของคุณแล้วตั้งชื่อว่า twentyMobile ฉันรู้ว่ายี่สิบสองคนใช้ข้อความค้นหาจากสื่อ แต่เรามาที่นี่เพื่อเรียนรู้ใช่ไหม

ดังนั้นให้สร้างไฟล์ style.css และเพิ่มเนื้อหานี้:

/ * ชื่อธีม: ธีมมือถือแม่แบบ: twentytwelve * / @import url (“ ../ twentytwelve / style.css”); @media Handheld, เฉพาะหน้าจอและ (ความกว้างสูงสุด: 767px) {nav ul {display: none;} nav select {display: block}}

ด้านบนเราได้สร้าง CSS สำหรับธีมย่อยไว้แล้วและเราได้เพิ่มกฎที่จะกำหนดเป้าหมายเฉพาะโทรศัพท์มือถือซึ่งจะซ่อนเมนูหลักและแสดงตัวเลือก ดังนั้นหากคุณมีเมนูในรายการที่เลือกคุณสามารถประหยัดพื้นที่ได้แทนที่จะแสดงเป็นรายการ ul / li

#3 โฉมสุดยอดกับ jQuery Mobile

jQuery mobile เป็นกรอบที่น่ากลัวที่ใช้ฟังก์ชันการทำงานของ jQuery เพื่อปรับปรุงประสบการณ์ในการใช้งานโทรศัพท์มือถือด้วยวิดเจ็ตและองค์ประกอบ UI ที่ดีที่สุด

HTML ที่ต้องการ o ทำให้การทำงานค่อนข้างง่ายเพียงใช้แอตทริบิวต์ข้อมูล HTML ไปที่และ JS เพื่อตรวจหาและสร้างวิดเจ็ต UI

แต่เพื่อให้ jQuery Mobile สามารถทำงานได้อย่างถูกต้องในบล็อก WordPress ของคุณคุณจะต้องเรียกใช้สคริปต์เคลื่อนที่ jQuery ก่อน กลับไปที่ธีมลูกของเราไฟล์ header.php ของธีมหลักที่ซ้ำกันและเพิ่มบรรทัดเหล่านี้ลงในแท็ก head:

<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 "> </ script>

ฉันควรระบุว่าสำหรับข้อเสนอเชิงพาณิชย์คุณควรใช้ wp_enqueue _script ดังนั้นคุณจะหลีกเลี่ยงการทำซ้ำไลบรารีในไซต์ของคุณ
ตอนนี้เราสามารถเล่นรอบกับองค์ประกอบ UI ที่คุณต้องการได้ jQuery Mobile มีวิดเจ็ต UI มากมายที่คุณสามารถใช้ในธีมได้ แต่ให้ใช้หน้าและแผงที่ยุบได้
นี่คือไวยากรณ์ HTML ขั้นพื้นฐาน:

<div data-role =“ page”> <div data-role =“ header”> </div> <div data-role =“ เนื้อหา”> </div> <div data-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 data-role = "collapsible" data-collapsed = "true"> </div> <? ... }?> </div>

เลือกเมนูที่แก้ไขแล้ว

ด้วยโค้ดที่เราได้เห็นข้างต้น (ในส่วนข้อความค้นหาสื่อ) คุณสามารถซ่อนเมนูปกติของคุณและแสดงเมนูเลือกพิเศษ jQuery ช่วยให้คุณสามารถเพิ่มได้โดยไม่ต้องใช้รหัส PHP มาก (จะซื่อสัตย์เราไม่จำเป็นต้อง PHP เลย) ขอสร้างไฟล์ใหม่และเพิ่มโค้ดนี้ที่นั่น:

jQuery (ฟังก์ชั่น ($) {// เมื่อ DOM พร้อม $ (เอกสาร). ready (function () {// ลองสร้างองค์ประกอบเลือก $ ("<select />").appendTo("nav"); / / ด้วยตัวเลือกใหม่ให้ไปที่ ... $ ("<ตัวเลือก />", {"ค่า": "", "ข้อความ": "ไปที่ ... "}). appendTo ("nav select");}); / / ตอนนี้เรามีตัวเลือกที่สร้างขึ้นมาเติมข้อมูลให้: $ ("nav .menu a"). แต่ละอัน (function () {// สำหรับแต่ละลิงค์ที่คุณพบในเมนู var aux = $ (นี่); $ ("<ตัวเลือก /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // ผนวกรายการใหม่เข้ากับตัวเลือก)} ; // จากนั้นเราตั้งค่าฟังก์ชั่นแบบเลื่อนลงเพื่อเปลี่ยนเส้นทางเมื่อเราเลือกรายการใหม่ $ ("nav select") เปลี่ยนแปลง (ฟังก์ชั่น () {window.location = $ (นี่) .find ("ตัวเลือก: เลือก"). val ();});});

การทำเช่นนี้จะสร้างเมนูมือถือใหม่ แต่ปัญหาคือเรากำลังโหลด jQuery Mobile แม้ในเวอร์ชัน "ปกติ" ของไซต์ นั่นเป็นเหตุผลที่เราสามารถใช้ปลั๊กอินเพียงไม่กี่ตัวเพื่อช่วยปรับปรุงเว็บไซต์ของเรา

#4 - ห่อหุ้มทุกสิ่งทุกอย่างด้วย Mobile Detector

ปลั๊กอินที่น่ากลัวนี้จะสร้างฟังก์ชันการทำงานใหม่ที่ช่วยให้เราสามารถโหลดธีมได้ตามเงื่อนไขโดยขึ้นอยู่กับอุปกรณ์ของผู้ใช้ และทำงานร่วมกับกฎเงื่อนไขแบบง่ายๆเช่นนี้

<? php if (MobileDTS :: is ('android')) {.... } elseif (MobileDTS :: is ('mobile')) {.... } else {}?>

วิธี MobileDTS ตรวจสอบอุปกรณ์ปัจจุบันแล้วส่งกลับค่า true / false ที่แท้จริง จากนั้นเราสามารถใช้ฟังก์ชันมายากลที่เรียกว่า switch_theme () เพื่อตั้งธีมใหม่และคุณสามารถใช้เงื่อนไขของปลั๊กอินเช่น MobileDTS :: is_switcher_enabled () เพื่อสร้างลิงก์ไปยังรุ่นเดสก์ท็อปเมื่อใช้โทรศัพท์มือถือเป็นต้น

บทสรุป

ดังนั้นคุณเคยใช้ปลั๊กอินมือถือหรือฟังก์ชันในธีม WordPress หรือไม่? วิธีไหนที่คุณชอบ? อย่าอายและแบ่งปันความคิดของคุณ!

บทความโดย Rochester Oliveira

ฉันเป็นนักออกแบบเว็บไซต์และผู้ประกอบการจากItajubá (MG), Brasil ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ