จะดูตัวอย่างไซต์ WordPress ก่อนเผยแพร่ได้อย่างไร

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

ทำไมคุณควรดูตัวอย่างเนื้อหาก่อนเผยแพร่

มีสถานการณ์ต่างๆ ในการดูตัวอย่างขึ้นอยู่กับสถานการณ์

1. ดูตัวอย่างโพสต์หรือเพจ

จำเป็นต้องแสดงตัวอย่างโพสต์ หน้า หรือโพสต์ที่กำหนดเองเนื่องจากสาเหตุใดสาเหตุหนึ่งดังต่อไปนี้

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

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

2. ดูตัวอย่างโพสต์โดยผู้อื่น

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

3. ดูตัวอย่างการเปลี่ยนธีม

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

ข้อเสนอ SEO: เพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วยการทดลองใช้งานฟรี 14 วันพิเศษของ Semrush Pro

วิธีดูตัวอย่างไซต์ WordPress ก่อนเผยแพร่

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

ดูตัวอย่างโพสต์หรือเพจส่วนบุคคล

ส่วนที่ดีคือคุณสามารถดูตัวอย่างเนื้อหาโพสต์หรือหน้าใน WordPress ได้โดยไม่ต้องใช้ปลั๊กอินเพิ่มเติม

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

• คุณจะเห็นดรอปดาวน์แสดงตัวเลือกหลายตัวเพื่อดูตัวอย่างใน – เดสก์ท็อป แท็บเล็ต หรือมือถือ

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

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

โปรดจำไว้ว่า การแสดงตัวอย่างมีเอฟเฟกต์ทั้งหมด เช่น CSS, สคริปต์, รหัสย่อ และใช้เค้าโครงส่วนกลางที่มีแถบด้านข้าง ส่วนท้าย ฯลฯ คุณสามารถสังเกตเห็นปัญหาหลายอย่างในภาพหน้าจอแสดงตัวอย่างแบบสดด้านบนที่คุณไม่พบในโปรแกรมแก้ไข รหัสย่อ [google-translator] และวิดเจ็ตแถบด้านข้างแรกไม่ทำงาน คุณสามารถแก้ไขปัญหาและแก้ไขได้ก่อนที่จะกดปุ่ม "เผยแพร่" หรือ "อัปเดต"

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

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

อนุญาตให้แสดงตัวอย่างโดยแชร์ลิงก์กับทุกคน

เมื่อคุณเห็น URL แสดงตัวอย่างในแถบที่อยู่ของเบราว์เซอร์ แสดงว่า URL แสดงตัวอย่างนั้นมี preview_id, preview_nonce และ preview=true WordPress มีกลไกในการดึงหน้าตัวอย่างตามสถานะของโพสต์ตามที่อธิบายไว้ในบทความ StackExchange นี้ มีปลั๊กอินสำหรับสร้าง nonce ที่หมดอายุด้วย URL ของโพสต์ที่กำหนดเองซึ่งคุณสามารถแชร์กับใครก็ได้

• ไปที่ส่วน "ปลั๊กอิน> เพิ่มใหม่" และค้นหา "ดูตัวอย่าง" ในช่องค้นหา
• การดำเนินการนี้จะกรองปลั๊กอินจำนวนมาก ค้นหาปลั๊กอิน Public Post Preview และติดตั้ง/เปิดใช้งานบนไซต์ของคุณ

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

• ทำเครื่องหมายที่ช่อง "เปิดใช้งานการแสดงตัวอย่างสาธารณะ" เพื่อดู URL แสดงตัวอย่างปรากฏขึ้น

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

WordPress SEO: เพิ่มประสิทธิภาพไซต์ WordPress ด้วยคู่มือ WordPress SEO ฟรี

ดูตัวอย่างทั้งไซต์ด้วยธีมที่แตกต่างกัน

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

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

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

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

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

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

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

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

คำพูดสุดท้าย

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