👉การจัดตำแหน่งภาพ WordPress พื้นฐาน - WinningWP

อันดับ Alexa – ภาพหน้าจอ

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

ลองมาดูที่แต่ละเหล่านี้ในทางกลับกัน:

1. จัดแนวชิดซ้าย

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

ตัวอย่าง:

Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น ไม่ยอมใครง่ายๆที่ไม่ได้เป็นผู้มีส่วนร่วมในเรื่องนี้โดยเฉพาะอย่างยิ่งเมื่อได้รับการรับรองจากกระทรวงแรงงานและสวัสดิการสังคม Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerciter ullamco การออกกำลังกายที่เกิดขึ้นโดยไม่ได้ตั้งใจ Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น

2. จัดแนวศูนย์

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

ตัวอย่าง:

Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น ไม่ยอมใครง่ายๆที่ไม่ได้เป็นผู้มีส่วนร่วมในเรื่องนี้โดยเฉพาะอย่างยิ่งเมื่อได้รับการรับรองจากกระทรวงแรงงานและสวัสดิการสังคม

3. จัดชิดขวา

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

ตัวอย่าง:

Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น ไม่ยอมใครง่ายๆที่ไม่ได้เป็นผู้มีส่วนร่วมในเรื่องนี้โดยเฉพาะอย่างยิ่งเมื่อได้รับการรับรองจากกระทรวงแรงงานและสวัสดิการสังคม Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerciter ullamco การออกกำลังกายที่เกิดขึ้นโดยไม่ได้ตั้งใจ Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น

4. จัดแนว None

รูปภาพที่ไม่มีการจัดตำแหน่งที่กำหนดให้กับพวกเขา (โดยจัดสรรให้เป็น "None") จะนั่งตรงกับตำแหน่งที่คุณค้นหา – เช่นถ้าคุณเลือกตำแหน่งภาพที่กำหนดให้จัดตำแหน่ง 'None' ภายในย่อหน้าของข้อความ (ดูตัวอย่างด้านล่างนี้) จะถูกวางไว้ตรงกับข้อความนั้นซึ่งจะส่งผลให้มีข้อความทั้งด้านซ้ายและด้านขวาของภาพ (สมมติว่ารูปภาพมีความกว้างไม่เท่ากันหรือกว้างกว่าพื้นที่) ซึ่งนั่ง **) อย่างไรก็ตามภาพที่ได้รับการจัดตำแหน่ง 'None' ให้ทั้ง BOTH ได้รับการจัดตำแหน่งและตั้งอยู่ภายในย่อหน้าของตัวเอง (เช่นในบรรทัดใหม่ใน WordPress editor และ / หรือเฉพาะภายในแท็ก HTML 'p') จะอยู่ทางด้านซ้าย ของพื้นที่ภายในซึ่งอยู่ (ในลักษณะคล้ายคลึงกับมันถ้ามันถูกจัดชิดซ้าย) แต่ไม่มีข้อความใด ๆ ทางด้านขวาของมัน ทำไม? เนื่องจากภาพไม่มีการจัดตำแหน่งที่เฉพาะเจาะจง (หรือในเทคโนโลยี: ไม่มีเฉพาะเจาะจง 'ซ้ายหรือลอย') ที่อยู่ในย่อหน้าของตนเอง (โดยไม่มีองค์ประกอบอื่นในย่อหน้าเดียวกัน) จะถูกแยกออกจากทั้งสองรูปแบบก่อนหน้า และเนื้อหาต่อไปตามเส้นของพื้นที่สีขาวที่กำหนดไว้ล่วงหน้า – ในลักษณะเดียวกับที่วรรคอื่น ๆ !

ตัวอย่าง:

Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit, sed ทำ eiusmod ชั่วคราว incididunt ut labore และ dolore magna aliqua. Duis aute irure dolor ใน reprehenderit ในขณะที่มีขนาดใหญ่ขึ้น ไม่ยอมใครง่ายๆที่ไม่ได้เป็นผู้มีส่วนร่วมในเรื่องนี้โดยเฉพาะอย่างยิ่งเมื่อได้รับการรับรองจากกระทรวงแรงงานและสวัสดิการสังคม

ดังนั้นสิ่งที่เกิดขึ้นจริงที่นี่?

เหตุใดจึงเกิดขึ้นทั้งหมด? เป็นจริงทั้งหมดเนื่องจากภาษาคอมพิวเตอร์ที่ใช้ในการแสดงงานนำเสนอ (เค้าโครงมิติสี ฯลฯ ) ขององค์ประกอบเว็บเรียกว่า Cascading Style Sheets – หรือ 'CSS' สั้น ๆ ในสาระสำคัญทุกครั้งที่คุณมอบหมายเช่นการวางแนวซ้ายไปยังรูปภาพในโพสต์หรือหน้าตัวอย่างเช่น WordPress จะใส่ชื่อชั้น HTML ของ "alignleft" เป็นภาพดังกล่าวซึ่งจะบังคับให้ภาพดังกล่าวอ้างอิงถึงชุดที่เฉพาะเจาะจงได้อย่างมีประสิทธิภาพ ของคำสั่ง CSS ที่กำหนดไว้ล่วงหน้าซึ่งบอกตำแหน่งที่ต้องการนั่งบนหน้าเว็บ – ง่าย! ในทำนองเดียวกันสำหรับแต่ละการจัดแนวอื่น ๆ ที่กล่าวถึง WordPress จะกำหนดชื่อชั้นเรียนที่แตกต่างกันเช่น 'aligncenter' (สำหรับภาพที่จะจัดแนวกลาง), 'alignright' (สำหรับภาพที่ถูกจัดชิดขวา) และ 'alignnone' (สำหรับภาพที่มี ไม่มีการกำหนดตำแหน่งเฉพาะที่กำหนด) – การอ้างอิงแต่ละชุดของคำสั่ง CSS

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

สรุป

ดังนั้นคุณมีมัน: alignments ภาพอธิบาย! ในระยะสั้น: ใช้การจัดตำแหน่งซ้ายเมื่อคุณต้องการให้ภาพนั่งไปทางด้านซ้ายและองค์ประกอบอื่น ๆ (เช่นข้อความ ฯลฯ ) เพื่อห่อหุ้มไว้ทางด้านขวา ใช้การจัดตำแหน่งกึ่งกลางเมื่อคุณต้องการให้ภาพอยู่ตรงกลาง / กึ่งกลางของเนื้อหาโดยไม่มีองค์ประกอบอื่น ๆ อยู่ด้านใดด้านหนึ่ง ใช้การจัดตำแหน่งที่ถูกต้องเมื่อคุณต้องการให้ภาพนั่งไปทางขวาและองค์ประกอบเว็บอื่น ๆ ที่อยู่ติดกันเพื่อห่อหุ้มไว้ทางด้านซ้าย และใช้การจัดตำแหน่งของ 'none' ถ้าคุณต้องการให้ภาพของคุณนั่งตรงตำแหน่งที่คุณเลือกวางไว้เทียบกับองค์ประกอบข้างเคียง (เช่นข้อความ ฯลฯ ) – และท้ายสุดถ้าคุณต้องการให้ภาพอยู่ทางด้านซ้ายของเนื้อหา -area ภายในที่มันอาศัยอยู่ แต่ไม่ต้องการให้ข้อความใด ๆ ฯลฯ ปรากฏที่ด้านขวาของมันกำหนดภาพการจัดตำแหน่งของ 'ไม่มี' และให้แน่ใจว่ามันตั้งอยู่ในย่อหน้าของตัวเอง!

* ผ่านเมนูแบบเลื่อนลงที่ด้านล่างขวาของหน้าต่าง 'ไลบรารีมีเดียไลบรารี' WordPress ภายใต้ส่วนหัวย่อย 'Attachment Display Settings'

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

มีประโยชน์หรือไม่

ดูวิดีโอ: ตรวจสอบเว็บคลิกโฆษณาดูความน่าเชื่อถือด้วย

Like this post? Please share to your friends:
ใส่ความเห็น

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: