วิธีสร้างไซต์ WordPress ที่ตอบสนองมือถือ

ขณะนี้เว็บไซต์ที่ตอบสนองกลายเป็นมาตรฐานอุตสาหกรรม เนื่องจากผู้ใช้จำนวนมากเรียกดูบนอุปกรณ์พกพาเป็นหลัก เพื่อแสดงให้เห็นว่าผลกระทบนี้เกิดขึ้นมากน้อยเพียงใด ยักษ์ใหญ่ในอุตสาหกรรมเช่น Google จะให้รางวัลแก่ไซต์ที่เหมาะกับอุปกรณ์พกพาในการจัดอันดับการค้นหา เพื่อช่วยผลักดันให้ไซต์ต่างๆ เข้าถึงอุปกรณ์ที่ไม่ใช่เดสก์ท็อปมากขึ้น

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

ในบทความนี้ คุณจะได้เรียนรู้วิธีทำให้ไซต์ WordPress เป็นมิตรกับมือถือโดยใช้การออกแบบที่ตอบสนอง นอกจากนี้ เราจะอธิบายถึงความสำคัญของการตอบสนองสำหรับ Search Engine Optimization (SEO) มาแคร็กกันเถอะ!

WordPress เป็นมิตรกับมือถือหรือไม่?

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

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

Responsive Design คืออะไร?

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

เพื่อให้ได้ประสบการณ์ที่ยอดเยี่ยมนี้ในอุปกรณ์ต่างๆ นักออกแบบจะสร้างตารางเนื้อหาที่ลื่นไหลและความยืดหยุ่นของโค้ดลงในรูปภาพผ่าน CSS ของไซต์เพื่อจัดเรียง HTML ใหม่เพื่อตอบสนองโดยตรงกับขนาดและความละเอียดของหน้าจอ

หากคุณต้องการตัวอย่างที่ดี ให้เปิด Mashable.com ในหน้าต่างใหม่ (สมมติว่าคุณยังไม่ได้ใช้อุปกรณ์พกพา) เมื่อคุณอยู่ที่นั่น ให้ปรับขนาดหน้าต่างเบราว์เซอร์ให้เล็กลงและเล็กลง และดูว่าเว็บไซต์จัดเรียงตัวเองอย่างไร

เมื่อคุณย่อหน้าต่าง บล็อกรูปภาพและเนื้อหาจะวิ่งวนไปมาเพื่อให้พอดีกับหน้าต่างที่เล็กลงเรื่อยๆ ตามกริดของไหลที่นักออกแบบสร้างขึ้น ที่เล็กที่สุด คุณก็เหลือแค่หน้าตาของเว็บไซต์ Mashable บน iPhone มันสวยงามและอ่านง่าย ทำให้หน้าต่างใหญ่ขึ้นอีกครั้ง และพวกเขาตอบสนองด้วยการแข่งกลับไปที่การกำหนดค่า "เดสก์ท็อป"

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

แอพมือถือเทียบกับไซต์ที่ตอบสนอง

การเลือกแอปเทียบกับไซต์ที่ตอบสนองขึ้นอยู่กับจุดประสงค์ของไซต์ เว็บไซต์ส่วนใหญ่จะทำงานได้ดีกับการออกแบบที่ตอบสนองซึ่งสามารถปรับให้เข้ากับอุปกรณ์ได้ แอปบนอุปกรณ์เคลื่อนที่จะเข้ามามีบทบาทเมื่อผู้ใช้ของคุณต้องการฟังก์ชันการทำงานที่เฉพาะเจาะจงมากบนอุปกรณ์เคลื่อนที่ของตนซึ่งแตกต่างจากที่ไซต์เต็มรูปแบบจะมีให้ ธนาคารของคุณน่าจะมีแอพมือถือเพื่อให้คุณสามารถตรวจสอบยอดคงเหลือของคุณได้อย่างรวดเร็วที่ Starbucks Facebook และ Twitter ยังปรับการทำงานในแอพให้เหมาะกับการใช้งานบนมือถืออีกด้วย

เฉพาะในกรณีที่ผู้ใช้ของคุณต้องการชุดฟังก์ชันเฉพาะจากโทรศัพท์ของพวกเขา ซึ่งแตกต่างจากสิ่งที่พวกเขาต้องการจากเว็บไซต์หลักของคุณ แอปแบบเนทีฟเป็นสิ่งที่ควรพิจารณา

การพิจารณาประสิทธิภาพสำหรับไซต์ที่ตอบสนอง

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

จากมุมมองทางเทคนิค เมื่อส่งไซต์ของคุณไปยังอุปกรณ์เคลื่อนที่ที่ใช้ข้อมูลเซลลูลาร์ จะทำให้คุณเสียเปรียบได้มากถึง 0.5 วินาทีตั้งแต่เริ่มใช้งาน ตัวอย่างเช่น ในการดึงข้อมูล 40KB บน 4G จะใช้เวลา 700ms ภายใต้สภาวะที่เหมาะสม เวลาแฝงของเครือข่ายและการเปลี่ยนแปลงของสถานการณ์จะเพิ่มเวลาในการโหลดของคุณเช่นกัน คุณไม่สามารถควบคุมตัวแปรเครือข่ายเซลลูลาร์ได้ ดังนั้น จึงจำเป็นอย่างยิ่งที่คุณจะต้องสร้างไซต์ที่ตอบสนองตามอุปกรณ์โดยให้ประสิทธิภาพเป็นคุณลักษณะตั้งแต่เริ่มต้น

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

• ปรับภาพให้เหมาะสม: ตรวจหาขนาดหน้าจอของอุปกรณ์โดยอัตโนมัติเพื่อสร้าง แคช และส่งภาพขนาดที่เหมาะสม
• ลดคำขอ HTTP ของคุณ: ลดจำนวน CSS และ JavaScript ที่คุณต้องใช้ จากนั้นแคชทุกอย่างที่เหลือ
• เนื้อหาโหลดแบบมีเงื่อนไข: ปุ่มโซเชียลมีเดียขนาดใหญ่ รูปภาพ และอื่นๆ ที่คล้ายกันเหมาะสำหรับอุปกรณ์ขนาดใหญ่ แต่จะไม่ส่งผลกระทบต่อประสบการณ์ของผู้ใช้สำหรับอุปกรณ์ขนาดเล็ก วางแผนการออกแบบของคุณให้โหลดเฉพาะสิ่งที่จำเป็นจริงๆ เท่านั้น
• การโหลดแบบ Lazy Loading: หากคุณสามารถหลีกเลี่ยงการโหลดเนื้อหาบางอย่างได้ โดยเฉพาะอย่างยิ่ง JavaScript หลังจากองค์ประกอบหน้าที่สำคัญที่สุด ให้ทำ เมื่อถึงเวลาที่ผู้ใช้ของคุณใช้เนื้อหาที่ต้องการตั้งแต่แรก เนื้อหาอื่นๆ เหล่านั้นจะโหลดขึ้นมา

ไซต์ WordPress ของคุณจำเป็นต้องตอบสนองหรือไม่?

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

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

• กรณีการใช้งานสำหรับไซต์ของคุณคืออะไร การบริโภคมือถือจะมีความสำคัญหรือไม่? มีโอกาสที่คำตอบคือ “ใช่ และมากขึ้นเรื่อยๆ ทุกปี” จะมีข้อยกเว้นแต่ก็ไม่มาก
• ใครคือผู้ใช้ของคุณ? ยิ่งมีเทคนิคมาก ล้ำสมัยมาก ก็ยิ่งมีโอกาสสูงที่พวกเขาจะคาดหวังไซต์ที่ตอบสนองสำหรับทุกแบรนด์ที่เชื่อมโยงด้วย
• คุณมีงบประมาณหรือไม่? นี่เป็นเรื่องใหญ่ ไซต์ที่ปรับเปลี่ยนตามอุปกรณ์นั้นมีราคาแพงกว่าเล็กน้อยในการสร้างในตอนแรก แต่การสร้างไซต์ที่ตอบสนองเพียงแห่งเดียวนั้นถูกกว่าการวางแผนสร้างไซต์ของคุณสองเวอร์ชันแยกจากกัน แล้วจึงจัดการการบำรุงรักษาสำหรับทั้งสองไซต์
• คุณพร้อมที่จะเรียนรู้รูปแบบใหม่ของการออกแบบแล้วหรือยัง? การออกแบบที่ตอบสนองได้นำเสนอแนวคิดและวิธีการทำความเข้าใจเนื้อหาดิจิทัลใหม่ๆ มากมาย สิ่งสำคัญคือต้องทำงานร่วมกับทีมออกแบบที่ไม่เพียงแต่ออกแบบสิ่งที่สวยงามเท่านั้น แต่ยังให้ความรู้คุณไปพร้อมกันด้วย

การสร้างการออกแบบเว็บ WordPress ที่ตอบสนอง

การออกแบบคงที่ที่มีอยู่มักจะสามารถแปลงเป็นธีมที่ตอบสนองได้ ต่อไปนี้เป็นองค์ประกอบบางส่วนที่ต้องพิจารณาตลอดกระบวนการแปลง:

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

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

การเลือกธีม WordPress ที่เหมาะสม

ก่อนที่คุณจะเริ่มค้นหาธีม WordPress มากกว่า 10,000 ธีมที่มีอยู่ในปัจจุบัน คุณควรสร้างรายการคุณลักษณะที่คุณต้องการให้ไซต์ของคุณมีและใช้รายการนั้นเป็นจุดเริ่มต้น

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

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

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

การเข้าถึงธีมเหล่านี้จะรวมอยู่ในทุกแผน WP Engine ซึ่งหมายความว่าลูกค้า WP Engine สามารถใช้ทั้งหมดได้โดยไม่มีค่าใช้จ่ายเพิ่มเติม

ปลั๊กอิน WordPress มือถือ

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

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

1. เจ็ทแพ็ค

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

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

นอกจากนี้ หากคุณต้องการสำรองข้อมูลรายวัน ธีมที่กำหนดเอง และเครื่องมือ SEO คุณจะต้องลงทุนใน Jetpack เวอร์ชันพรีเมียม ขึ้นอยู่กับความต้องการของคุณ คุณสามารถรับปลั๊กอินพรีเมียมสำหรับการใช้งานส่วนตัวในราคา $39 ต่อปี โดยระดับสูงสุดจะอยู่ที่ $299 ต่อปี

2. ดับเบิลยูพีทัช

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

เวอร์ชันฟรีมีฟังก์ชันการทำงานที่ค่อนข้างแข็งแกร่งเช่นกัน หากคุณกำลังมองหารูปลักษณ์ที่แตกต่างออกไป คุณจะต้องซื้อรุ่นโปร แผนราคา Pro เริ่มต้นที่ 79 ดอลลาร์ต่อปี และสูงถึง 359 ดอลลาร์ต่อปีสำหรับการออกใบอนุญาตระดับองค์กร

3. เวิร์ดเพรสโมบายแพ็ค

แม้ว่า WordPress Mobile Pack จะไม่ได้รับการทดสอบกับ WordPress เวอร์ชันล่าสุด แต่ก็เป็นปลั๊กอินยอดนิยมสำหรับสร้าง Progressive Web Application (PWA) จากเว็บไซต์ที่คุณมีอยู่ ซึ่งหมายความว่าผู้ใช้ไซต์ของคุณจะได้รับประสบการณ์ 'คล้ายแอป' โดยไม่ต้องให้คุณใช้ทรัพยากรในการเขียนโปรแกรมแอปพลิเคชันที่ดาวน์โหลดได้สำหรับ App Store

ด้วยปลั๊กอินนี้ คุณจะสามารถส่งข้อความแบนเนอร์ไปยังผู้ใช้ แจ้งเตือนพวกเขาถึงตัวเลือกในการเพิ่มเว็บไซต์ของคุณไปยังหน้าจอหลักของพวกเขา หน้าเว็บของคุณจะแคชและโหลดอย่างรวดเร็ว ฟังก์ชันพื้นฐานฟรีสำหรับปลั๊กอินนี้ แต่คุณจะต้องซื้อเวอร์ชัน Pro เพื่อเข้าถึงธีมเพิ่มเติม ตัวเลือกการปรับแต่ง และความสามารถในการซิงค์เนื้อหาบางอย่าง
ปลั๊กอินเวอร์ชันโปรมีสามระดับให้เลือก แพ็คเกจ Freelancer เริ่มต้นที่ $99 ต่อปี และใช้ได้กับสามโดเมน ระดับราคาที่เหนือกว่าด้วยตัวเลือก VIP ที่ $499 ต่อปีสำหรับใบอนุญาตโดเมนสิบรายการ

รูปภาพที่ตอบสนอง

WordPress ได้นำเสนอรูปภาพที่ตอบสนองตามค่าเริ่มต้นตั้งแต่เวอร์ชัน 4.4 อย่างไรก็ตาม โดยเฉพาะอย่างยิ่งสำหรับไซต์ที่ใช้โค้ดที่เก่ากว่า มีข้อมูลโค้ดง่ายๆ ที่คุณสามารถเพิ่มในสไตล์ชีตของคุณเพื่อให้แน่ใจว่ารูปภาพจะไม่ดูใหญ่เกินไปในอุปกรณ์ขนาดเล็ก:

img {
max-width: 100%;
height: auto;
}

แม้ว่าจะมีหลายวิธีในการรับรองประสิทธิภาพของรูปภาพที่ตอบสนองอย่างเหมาะสม ตัวอย่างข้อมูลนี้ช่วยให้แน่ใจว่ารูปภาพทั้งหมดของคุณตอบสนองตามพื้นฐาน

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

เมนูตอบสนอง

มีโรงเรียนหลักสองแห่งที่คิดเกี่ยวกับการสร้างเมนูที่ตอบสนอง:

1. ทำเมนูเดียวได้ทุกขนาด
2. สร้างสองเมนู: เมนูหนึ่งสำหรับหน้าจอขนาดใหญ่และอีกเมนูหนึ่งสำหรับประสบการณ์หน้าจอขนาดเล็ก จะแสดงครั้งละหนึ่งรายการเท่านั้น ขึ้นอยู่กับขนาดหน้าจอที่ใช้

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

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

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

1. เมนูอูเบอร์

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

2. เมนู Max Mega

อีกทางเลือกหนึ่งคือปลั๊กอิน Max Mega Menu เครื่องมือนี้มีตัวเลือกฟรีใน WordPress Plugin Directory และทำงานร่วมกับเมนูที่มีอยู่ของคุณเพื่อแปลงเป็นเมนู 'เมกะ':

เวอร์ชันฟรียังมีคุณสมบัติเมนูมือถือมากมาย เช่น การสนับสนุนแบบเนทีฟสำหรับหน้าจอสัมผัส หากต้องการเข้าถึงแบบอักษรและตัวเลือกการสลับสำหรับมือถือได้มากขึ้น คุณจะต้องตรวจสอบระดับราคาหนึ่งในสามระดับ ปลั๊กอินรุ่นพรีเมียมเริ่มต้นที่ $29 ต่อปี และสูงถึง $99 ต่อปีสำหรับใบอนุญาตหลายไซต์

3. เมนูตอบสนอง

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

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

ปลั๊กอินเวอร์ชันฟรีอาจมีคุณสมบัติที่คุณต้องการ เนื่องจากรายการตัวเลือกมีค่อนข้างมาก หากคุณอัปเกรด คุณจะได้รับใบอนุญาตไซต์เดียวในราคา $29 หรือรับใบอนุญาตแบบไม่จำกัดในราคา $99 ปลั๊กอินมีค่าใช้จ่ายเพียงครั้งเดียว และคุณจะได้รับการอัปเดตฟรีตลอดชีพ

ตารางตอบสนอง

ตามค่าเริ่มต้น ตารางจะใช้พื้นที่มากพอๆ กับเนื้อหา (หรือมากกว่านั้น) สิ่งนี้สามารถนำไปสู่ตารางที่กว้างเป็นพิเศษซึ่งทำลายรูปแบบมือถือ

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

สำหรับวิธีแก้ปัญหาที่รวดเร็วและสกปรก คุณสามารถเพิ่มการตอบสนองพื้นฐานให้กับตารางของคุณด้วยข้อมูลโค้ด CSS นี้:

table {
width: 100%;
border-collapse: collapse;
}

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

หากคุณกำลังมองหาโซลูชันปลั๊กอินสำหรับตารางตอบสนอง คุณโชคดี! มีหลายตัวเลือก แต่เราจะแนะนำเป็นพิเศษสามตัวเลือก

1. เทเบิลเพรส

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

2. ตัวสร้างตาราง WP

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

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

3. wpDataTables

ปลั๊กอินตัวที่สามที่เราแนะนำให้ลองใช้คือ wpDataTables ด้วยเครื่องมือนี้ คุณสามารถสร้างตารางและแผนภูมิได้อย่างรวดเร็วจาก Excel, CSV, PHP หรือข้อมูลอื่นๆ ที่มีอยู่ ซึ่งหมายความว่าคุณสามารถใช้ชุดข้อมูลขนาดใหญ่และทำให้สามารถเข้าถึงได้บนเว็บไซต์ของคุณ

ปลั๊กอินนี้ยังพร้อมใช้งานกับ Gutenberg ทำให้สามารถเพิ่มตารางในหน้าและโพสต์ของไซต์ของคุณได้อย่างรวดเร็วเมื่อคุณปรับแต่งในการตั้งค่าปลั๊กอิน อย่างไรก็ตาม คุณจะถูกจำกัดด้วยเวอร์ชันฟรีของปลั๊กอินนี้
ตัวอย่างเช่น คุณจะไม่สามารถสร้างตารางที่ใช้แบบสอบถาม MSQL หรือดึงข้อมูลจาก Google Spreadsheets เว้นแต่คุณจะอัปเกรด รุ่นพรีเมียมเริ่มต้นที่ $59 ต่อปีสำหรับระดับราคาพื้นฐาน และสูงสุดที่ $249 ต่อปีสำหรับแพ็คเกจสำหรับนักพัฒนาซอฟต์แวร์

การเพิ่มความสามารถหลายภาษา

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

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

นอกจากนี้ Weglot ยังเข้ากันได้กับธีมและปลั๊กอิน WordPress ทั้งหมด ซึ่งหมายความว่ามันจะใช้ได้กับทุกธีมที่คุณใช้งาน และจะไม่ทำให้เกิดปัญหากับปลั๊กอินอื่น ๆ ของคุณ เมื่อเพิ่มหนึ่งในธีม WordPress พรีเมียมของ WP Engine แล้ว Weglot จะช่วยเจ้าของเว็บไซต์สร้างเว็บไซต์ที่เป็นมิตรกับ SEO และตอบสนองต่ออุปกรณ์พกพาที่สามารถเข้าถึงได้ในทุกภาษา

ดูคู่มือนี้เพื่อดูข้อมูลเพิ่มเติม และไปที่ WP Engine เพื่อเรียนรู้เกี่ยวกับแผนต่างๆ ของเรา รวมถึงฟีเจอร์และฟังก์ชันอื่นๆ ที่มาพร้อมกับ Digital Experience Platform สำหรับ WordPress

การตอบสนองบนมือถือสำหรับ SEO

พูดง่ายๆ ก็คือ เว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่จะได้รับรางวัลจาก Google ในผลการค้นหาทั่วไป ระหว่างปี 2558 ถึง 2559 มีการเพิ่มการอัปเดตจำนวนมากในอัลกอริทึมการจัดอันดับเพื่อสนับสนุนเว็บไซต์ที่ตอบสนอง โปรดทราบว่าเนื่องจากความเร็วมีบทบาทอย่างมากในด้านความเป็นมิตรต่อผู้ใช้สำหรับผู้ใช้มือถือ สิ่งนี้ยังช่วยให้อันดับของเครื่องมือค้นหาดีขึ้นด้วย

แน่นอนว่าเว็บไซต์ตอบสนองที่โหลดเร็วนั้นต้องอาศัยโฮสติ้งที่เป็นตัวเอกในการประสบความสำเร็จ เมื่อคุณเลือกบริษัทโฮสติ้งที่มีคุณภาพ เช่น WP Engine (เรามี PHP 7 เป็นมาตรฐานและเครือข่ายการจัดส่งเนื้อหาฟรีในแผนระดับสูง) คุณจะสังเกตเห็นเวลาในการโหลดที่เร็วขึ้นและการทำงานที่ราบรื่นขึ้น

สร้างการตอบสนองด้วย WP Engine

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

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