WordPress ออกแบบที่ตอบสนองกับ CSS3 กฎ @media

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

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

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

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

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

ตอบสนองและเข้ากันได้กับอุปกรณ์เคลื่อนที่

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

ค้นพบสิ่งเหล่านี้ ปลั๊กอิน 8 WordPress เพื่อปรับแต่งรูปลักษณ์ของเว็บไซต์ของคุณ

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

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

ดูเพิ่มเติมที่ ปลั๊กอิน 10 WordPress เพื่อสร้างแบบฟอร์มการจองบนเว็บไซต์ของคุณ

ตอนนี้คุณทราบถึงความแตกต่างระหว่างการตอบสนองและการรองรับมือถือ ตอนนี้เราจะเห็นกฎ @ สื่อ ของ CSS3 ที่ให้คุณอัปเดตเว็บไซต์ของคุณให้ตอบสนองหรือสร้างได้ค่อนข้างง่าย ธีม WordPress ด้วยเนื้อหาที่ตอบสนอง

กฎ @ สื่อ จาก CSS3

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

@media media-type (นิพจน์) {css-test-selector {property1: value1; คุณสมบัติ 2: value2; }}

ในโครงสร้างนี้องค์ประกอบภายในกฎ @ สื่อ ใชงานไดเฉพาะเมื่อ ชนิดของสื่อ ระบุว่าได้รับการตรวจพบเรียบร้อยแล้ว ประเภทของสื่อที่เลือกคุณสามารถระบุคุณสมบัติในแง่ของขนาด

ค้นพบ วิธีใช้ส่วนต่อประสานและประสบการณ์ผู้ใช้กับ WordPress

กฎ @ สื่อ ตรวจจับประเภทของหน้าจอที่เข้าชมเว็บไซต์ของคุณและเลือกกฎที่เหมาะสมกับหน้าจอประเภทนี้มากที่สุด เบราว์เซอร์หลักทั้งหมดได้รวมกฎไว้แล้ว @ สื่อ.

นี่คือรายการข้อมูลของคุณ: Chrome , Safari, Firefox, IE, Opera et ขอบ.

กำหนดหน้าจอเป้าหมาย

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

อ่านบทความของเราเกี่ยวกับ วิธีการโหลด Facebook และ Disqus อย่างช้าๆ

ดังที่เราได้เห็นในโครงสร้างในการกำหนดประเภทของหน้าจอคุณต้องส่งต่อ @ สื่อ ประเภทของหน้าจอที่กำหนดเป้าหมาย นี่คือรายการของหน้าจอประเภทต่างๆ:

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

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

หน้าจอเฉพาะ @media

กำหนดรูปแบบสำหรับขนาดหน้าจอ

คุณสามารถใช้ การแสดงออก เพื่อให้รายละเอียดเกี่ยวกับลักษณะของหน้าจอ หลังจาก @ สื่อ เข้าสู่ และ ตามด้วยนิพจน์ หากคุณใช้นิพจน์มากกว่าหนึ่งนิพจน์ควรคั่นด้วย และ . นี่คือตัวอย่างของโครงสร้าง:

หน้าจอ @media เท่านั้นและ (max-width: 640px) {selector-css-example {/ * CSS ปกติของคุณที่นี่ * /}}

ในตัวอย่างนี้ฉันใช้ ความกว้างสูงสุด มีค่าเป็น 640px. นี่คือการตั้งค่าความกว้างหน้าจอสูงสุดของขนาด iPhone หรือสมาร์ทโฟน Android ขนาดเล็ก ด้วยโครงสร้างแบบนี้คุณสามารถควบคุมลักษณะเว็บไซต์ของคุณบนอุปกรณ์ต่างๆได้ นี่คือรายการคุณสมบัติที่เกี่ยวข้องกับมิติข้อมูลที่คุณสามารถใช้ได้ การแสดงออก :

ค้นพบยังของเรา 8 SEO ปลั๊กอิน WordPress เพื่อเพิ่มประสิทธิภาพ SEO ของเว็บไซต์ของคุณ

- mในความกว้าง et ความกว้างสูงสุด : ตามลำดับความกว้างต่ำสุดและสูงสุดที่จำเป็นสำหรับการแสดงสไตล์ที่มีอยู่ในกฎ @ สื่อ. พิกเซลและลักษณะเพิ่มเติมหนึ่งรายการจะไม่ปรากฏขึ้น

- mในความสูง et สูงสุดที่มีความสูง : ตามลำดับความสูงต่ำสุดและสูงสุดที่จำเป็นสำหรับการแสดงสไตล์ที่มีอยู่ในกฎ @ สื่อ. เนื่องจากหน้าจอส่วนใหญ่ได้รับการออกแบบเพื่อยกเลิกการม้วนหน้าในแนวตั้งคุณสมบัติ นาทีความสูง et สูงสุดที่มีความสูง ใช้น้อย

นี่คือรายการขนาดหน้าจอสำหรับเทอร์มินัลบางเครื่อง:

- IPhone: 640px
- IPad: 1024px
- เม็ด: 1366px
- สมาร์ทโฟน Android: 640px, 720px, 854px, 960px
- Android ใหญ่พิเศษ: 1024px, 1066px
- โทรศัพท์ Windows: 480
- Windows Phone ขนาดใหญ่: 768px
- เด็กและผู้ใหญ่: 320px
- Ultrabook / แล็ปท็อป: 1366px
- เดสก์ท็อปและทีวี: 1920px

มีคุณสมบัติอื่น ๆ อีกมากมายที่คุณสามารถใช้ได้ การแสดงออก. ตัวอย่างเช่นหากคุณกำหนดเป้าหมายไปที่หน้าจอเดสก์ท็อปหรือโทรทัศน์ที่สามารถแสดงภาพอัตราส่วน 16: 9 ได้คุณสามารถใช้โครงสร้างดังนี้:

หน้าจอ @media เท่านั้นและ (ความกว้างต่ำสุด: 1920px) และ (อัตราส่วนอุปกรณ์: 16/9) {selector-css-example {/ * CSS ตามปกติของคุณที่นี่ * /}}

 สำหรับรายชื่อและตัวอย่างที่ครบถ้วนมากขึ้นให้ปรึกษา w3schools et ผู้พัฒนา Mozilla.

ทดสอบการทำงานของเว็บไซต์ของคุณ

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

ดูสิ่งเหล่านี้ด้วย ปลั๊กอิน WordPress 10 เพื่อสร้างแท็บในบล็อกของคุณ

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

โดยตรงในเบราว์เซอร์ของคอมพิวเตอร์ของคุณคุณสามารถใช้ การขยายเบราว์เซอร์ Chrome ของ Window Resizer, ResponsiveResize, ResizeMe ou Firesizer. ด้านล่างนี้เป็นรูปภาพของ BlogPasCher ในมุมมองการตอบสนองการออกแบบที่มาพร้อมกับ Firefox

นอกจากนี้ยังมีเว็บไซต์ที่อุทิศให้กับงาน:

Responsivepx

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

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=edit

เว็บไซต์นี้มีประโยชน์สำหรับการทดสอบเว็บไซต์ของคุณบนอุปกรณ์ Apple, iPad และ iPhone รุ่นล่าสุด เพียงป้อน URL ของคุณ โปรดทราบว่าอาจมีปัญหาเฟรมเดียวกันกับ responsivepx

Emulator โทรศัพท์มือถือ

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

การทดสอบ Google Mobile Friendly

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

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

ทรัพยากรที่แนะนำ

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

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

สรุป

ที่นี่! คุณรู้ทุกสิ่งที่ควรรู้เกี่ยวกับวิธีทำให้เว็บไซต์หรือธีม WordPress ตอบสนองโดยใช้กฎ @ สื่อ จาก CSS3 หากเราพลาดธีม WordPress ที่คุณรักหรือที่คุณต้องการโปรดฝากลิงค์ไว้ในส่วนนี้ ความเห็น CI-Dessous

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

เราขอเชิญคุณด้วย แบ่งปันบนเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...