วิธีใช้รูปแบบโพสต์ใน WordPress

เผยแพร่แล้ว: 2015-05-12

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

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

รูปแบบการโพสต์คืออะไร?

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

รูปแบบโพสต์คืออะไร

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

มีเก้ารูปแบบโพสต์ให้เลือก:

  • มาตรฐาน – ไม่ได้ระบุรูปแบบโพสต์ ประเภทเนื้อหาจะได้รับการจัดการภายในเนื้อหาเอง
  • นอกเหนือจากนั้น – การอัปเดตบันทึกย่อที่ไม่มีชื่อ
  • รูปภาพ – ภาพเดียวภายในโพสต์ คุณสามารถใช้แท็ก <img /> แรกในเนื้อหาเป็นรูปภาพได้ คุณยังสามารถใช้ URL
  • วิดีโอ – สามารถเป็นวิดีโอเดียวหรือเพลย์ลิสต์วิดีโอ คุณสามารถใช้แท็ก <video /> แรกหรืออ็อบเจ็กต์/ฝังภายในเนื้อหา หรือคุณสามารถใช้ URL
  • ใบเสนอราคา – ใบเสนอราคาที่จัดรูปแบบเป็นบล็อกคำพูด หรือเนื้อหาที่มีชื่อผู้เขียนเป็นชื่อเรื่อง
  • ลิงค์ – ไฮเปอร์ลิงก์ไปยังเว็บไซต์อื่น คุณสามารถใช้แท็ก <a href="”> แรกในเนื้อหาเป็นลิงก์ได้ คุณยังสามารถใช้ URL
  • แกลลอรี่ – รูปภาพหรือแกลอรี่รูปภาพ มักใช้กับรหัสย่อของแกลเลอรี
  • สถานะ – การอัปเดตสถานะ
  • เสียง – ไฟล์เสียงเดียวหรือรายการเล่นเสียงที่สมบูรณ์
  • แชท – การสนทนาในรูปแบบการถอดเสียง

ทำไมต้องใช้รูปแบบโพสต์

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

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

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

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

การเพิ่มรูปแบบโพสต์ในธีมของคุณ

ไม่ใช่ว่าทุกธีมจะรองรับตั้งแต่เริ่มต้น แต่คุณสามารถเพิ่มได้โดยใช้โค้ดเพียงไม่กี่บรรทัด นี่คือการดูโค้ดจาก WordPress Codex

ขั้นแรก เพิ่มฟังก์ชัน add_theme_support() ในไฟล์ functions.php คุณสามารถเลือกรูปแบบโพสต์ที่ต้องการให้ธีมสนับสนุนได้โดยเลือกว่าจะรวมอะไรไว้ อาร์เรย์ของรูปแบบจะมีลักษณะดังนี้:

[php] add_theme_support( 'หลังรูปแบบ', อาร์เรย์ ( 'กัน', 'แกลเลอรี่' ) ); [/php]

คุณสามารถใช้ after_setup_theme hook และวางไว้ข้างหน้า init hook

สิ่งต่อไปที่ต้องทำคือเพิ่มการสนับสนุนประเภทโพสต์ คุณทำได้โดยเพิ่ม add_post_type_support() ในไฟล์ functions.php รหัสจะมีลักษณะดังนี้:

[php] // เพิ่มรูปแบบโพสต์ใน post_type 'page'add_post_type_support( 'page', 'post-formats' );// เพิ่มรูปแบบโพสต์ใน post_type 'my_custom_post_type'add_post_type_support( 'my_custom_post_type', 'post-formats' ) ; [/php]

อีกทางเลือกหนึ่งคือการเพิ่ม 'โพสต์รูปแบบ' ในอาร์เรย์พารามิเตอร์ 'supports' ในฟังก์ชัน register_post_type() รหัสมีลักษณะดังนี้:

[php] $args = array( … 'supports' => array('title', 'editor', 'author', 'post-formats')); register_post_type('หนังสือ', $args); [/php]

ในการใช้รูปแบบ ให้ใช้ get_post_format() เพื่อตรวจสอบรูปแบบของโพสต์

อีกทางเลือกหนึ่งคือการใช้แท็กแบบมีเงื่อนไข has_post_format() รหัสมีลักษณะดังนี้:

[php] if ( has_post_format ( 'วิดีโอ' )) { echo 'นี่คือรูปแบบวิดีโอ';} [/php]

หากคุณต้องการเพิ่มคลาสการจัดรูปแบบไดนามิก คุณสามารถใช้กฎการจัดรูปแบบในฟังก์ชัน post_class() ในโค้ดแรปเปอร์รอบๆ โพสต์ได้

ตัวอย่างเช่น การเพิ่มสิ่งนี้ลงในสไตล์ชีตของคุณจะซ่อนชื่อโพสต์:

[css] .format-status .post-title {แสดง: ไม่มี; } [/css]

เคล็ดลับในการจัดแต่งทรงผม

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

  • ใช้รูปแบบเพื่อให้โพสต์ของคุณถูกจดจำได้ง่ายว่าเป็นประเภทใดประเภทหนึ่ง
  • นอกเหนือจากรูปแบบลิงก์และสถานะ – แสดงโดยไม่มีชื่อหรือข้อมูลผู้แต่ง ทำให้พวกเขาง่ายและสั้น
  • กันควรมีหนึ่งหรือสองย่อหน้า ใช้ the_permalink() เพื่อแสดงความคิดเห็น
  • ลิงค์ควรมีประโยคที่มีลิงค์ ใช้ the_permalink() เพื่อแสดงความคิดเห็น
  • สถานะไม่ควรมี the_permalink() ดังนั้นโพสต์จะไม่อนุญาตให้แสดงความคิดเห็น
  • รูปภาพ เสียง และวิดีโอควรมีภาพ เสียง หรือวิดีโอเดียวโดยมีหรือไม่มีคำอธิบายภาพ/ข้อความที่จะไปพร้อมกับมัน แสดงเนื้อหาด้วยปลั๊กอินหรือ Embeds มาตรฐาน
  • ใบเสนอราคา – โพสต์ใบเสนอราคาง่ายๆ จากบุคคลที่ไม่มีข้อมูลเพิ่มเติม หากคุณต้องการแสดงชื่อบุคคลที่ยกมาเป็นบรรทัดย่อย คุณสามารถใส่ชื่อของบุคคลนั้นในชื่อโพสต์ จัดรูปแบบโพสต์ให้แสดง the_content() ด้วยตัวเอง แต่ให้จัดรูปแบบใหม่เป็น blockquote แล้วใช้ the_title()
  • แชท – ใช้สไตล์เพื่อแสดงเนื้อหาด้วยแบบอักษรโมโนสเปซภายในพื้นหลังสีเทา

สำหรับธีมลูก ให้เรียก add_theme_support() ภายหลังจากธีมหลัก รหัสจะมีลักษณะดังนี้:

[php] add_action( 'after_setup_theme', 'childtheme_formats', 11 );function childtheme_formats(){ add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link' ) );} [/php]

อย่าลืมเพิ่ม get_post_format() ในการค้นหา คลังข้อมูล และมุมมองโพสต์เดียว

สำหรับข้อมูลเพิ่มเติมและรับซอร์สโค้ด โปรดดูบทความ WordPress Codex ชื่อ Post Formats

CSS

CSS

คุณสามารถแก้ไขสไตล์ภายในสไตล์ชีตได้ คุณสามารถปรับสี แบบอักษร ฯลฯ ได้ที่นี่

วิธีใช้รูปแบบโพสต์

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

ส่วนใหญ่ทำงานเหมือนกัน ดังนั้นฉันจะแสดงตัวอย่างบางส่วน ฉันใช้ Twenty Thirteen ซึ่งมีรูปแบบและสไตล์ในตัว

รูปแบบเสียง

ในตัวอย่างนี้ ฉันเลือกเสียงและอัปโหลดไฟล์ MP3

รูปแบบเสียง

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

เสียงที่ไม่มีรูปแบบโพสต์

ไม่มีรูปแบบโพสต์

อันนี้มีเครื่องเล่นเสียง แต่อย่างอื่นดูเหมือนทุกโพสต์ที่ใช้รูปแบบโพสต์มาตรฐาน ไม่มีอะไรจะแยกมันออกจากกัน

เสียงพร้อมรูปแบบโพสต์

ด้วยรูปแบบโพสต์

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

สถานะโพสต์รูปแบบ

สถานะโพสต์รูปแบบ

ในตัวอย่างนี้ ฉันได้เขียนการอัปเดตสถานะอย่างรวดเร็ว

สถานะโพสต์ไม่มีรูปแบบ

สถานะโพสต์ไม่มีรูปแบบ

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

สถานะโพสต์ด้วยรูปแบบ

สถานะโพสต์ด้วยรูปแบบ

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

กำลังดูโพสต์ทั้งหมดในเครื่องมือแก้ไข

กำลังดูโพสต์ทั้งหมดในเครื่องมือแก้ไข

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

การเปรียบเทียบ

นี่คือลักษณะที่พวกเขาโพสต์ในหน้าแรกที่มีและไม่มีรูปแบบโพสต์

หน้าแรกโดยไม่ต้องโพสต์ประเภท

หน้าแรกโดยไม่ต้องโพสต์ประเภท

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

หน้าแรกที่มีประเภทโพสต์

หน้าแรกที่มีประเภทโพสต์

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

เปลี่ยนธีม

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

เคล็ดลับ

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

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

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

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

ความคิดสุดท้าย

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

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