Featured Image คืออะไรใน WordPress

สำหรับบทความชิ้นนี้เป็นบทความที่เหมาะสำหรับ “มือใหม่” และ “มือเก่า” ครับ เพราะผมจะพาทุกคนไปรู้จักความสามารถหนึ่งของ WordPress ที่เรียกว่า featured Image ว่ามันคืออะไรกันหนอ

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

โดยส่วนใหญ่แล้ว Theme ที่เขียนออกมาได้มาตรฐาน จะต้อง “รองรับ” การใช้งาน Featured Image โดยเราจะเห็นมันปรากฎอยู่ทางด้านขวามือของหน้าที่เราเพิ่มเรื่องใหม่ หรือแก้ไขเรื่องต่างๆ ครับ ดังภาพ

featured-image

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

ทีนี้มาดูกันว่า แล้วสำหรับมือเก่าที่รู้จักตัว Featured Image กันอยู่แล้วละ ผมจะนำเสนออะไรเกี่ยวกับเรื่องนี้?

ผมจะมาเจาะลึกมากขึ้นว่า Featured Image ในทางของฝั่ง Developer เค้าเรียกมันว่าอะไร

เราเรียกมันว่า The Post Thumbnail ครับ

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


add_theme_support( 'post-thumbnails' );

โดยขนาดความกว้าง x สูง ของรูปภาพ มันจะถูกกำหนดให้ตามที่เราตั้งค่าไว้ในเมนู Setting > Media > Thumbnail Size ครับ

แล้วถ้าหากว่าเราต้องการจะให้ธีมของเรารองรับ Post Thumbnail หลายๆขนาดละ ทำอย่างไร?

เราทำได้ ด้วยการเรียกว่าการสร้าง Multiple Post thumbnail Size Support ครับ โดยการเขียนฟังก์ชั่น add_image_size เพิ่มเติมเข้าไปใน functions.php ดังตัวอย่าง


add_image_size( 'small-post-thumbnail', 200, 200 ); //กำหนดชื่อว่า small-post-thumbnail มีความกว้าง 200 สูง 200

add_image_size( 'single-post-thumbnail', 590, 180 ); //กำหนดชื่อว่า single-post-thumbnail มีความกว้าง 590 สูง 180 ไม่ทำการ  crop รูป

add_image_size( 'medium-post-thumbnail', 300 ); //กำหนดชื่อว่า medium-post-thumbnail มีความกว้าง 300px สูงอัตโนมัติตาม ratio

add_image_size( 'home-post-thumbnail', 400, 400,true ); //กำหนดชื่อว่า home-post-thumbnail มีความกว้าง 400 สูง 400 และครอปรูปให้ได้สัดส่วนนี้เป๊ะๆ

และเมื่อเราจะนำตัว Post Thumbnail มาแสดงในธีมของเรา ก็ใช้คำสั่ง

the_post_thumbnail(‘ชื่อที่เราตั้งไว้สำหรับแต่ละตัว’); เช่น


<?php the_post_thumbnail('home-post-thumbnail'); ?>

ก็จะได้ภาพ Thumbnail ขนาด 400x400px ที่ถูกครอปมาแสดงในหน้าเว็บนั่นเองครับ

ไปลองใช้งานกันดูนะครับ WordPress ยิ่งเรียนรู้ยิ่งสนุกครับ ^^

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

บันทึก