วิธีใช้ WordPress ตอนที่ 6 – ใส่รูปภาพในบทความ

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

เพิ่มรูปภาพในบทความ WordPress

บทความที่เราสร้างขึ้นมาใหม่ หรือบทความเก่าที่เราต้องการแก้ไข เราสามารถเพิ่มรูปภาพลงไปในบทความของเราได้โดยเลือกตำแหน่งที่จะลงรูปภาพ หลังจากนั้นคลิ๊กที่ icon เหมือนสี่เหลี่ยมผืนผ้าซ้อนกันตรงแถวคำว่า Upload/Insert

รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]
คลิ๊กที่ icon ในวงกลมสีแดง

ซึ่งในการเพิ่มรูปภาพสำหรับบทความ WordPress นั้น มีให้เลือก 3 แบบ คือ

รูปอธิบายหัวข้อ WordPress [2]
สามารถเลือกได้ทั้งจากคอมของเรา, จาก URL หรือจากรูปภาพที่เราเคยเพิ่มมาแล้ว
  • From Computer : เลือกรูปภาพที่จะเพิ่มจากในคอมพิวเตอร์ของเรา
  • From URL : เพิ่มรูปภาพโดยการใส่ URL ของภาพที่เราจะใส่ในบทความ
  • Media Library : เลือกรูปภาพจากรูปภาพที่เราเคยอัพโหลดในเว็บมาแล้ว

เลือกรูปจากคอมเราลงบทความ

รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]
เลือกที่ Select Files เพื่อเลือกรูปที่ต้องการเพิ่ม

เลือกที่ Select Files เพื่อเลือกรูปที่เราต้องการเพิ่มในบทความ เมื่ออัพโหลดรูปภาพเสร็จแล้วจะปรากฎส่วนที่ให้เรากรอกข้อมูลรูปภาพเพิ่มเติม โดยจะมีหัวข้อต่าง ๆ ตามที่ผมเข้าใจดังนี้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]
กรอกข้อมูลของรูปภาพ เพื่อนำไปใช้งานต่อไป
  • Title : ชื่อของรูป
  • Alternate Text : อธิบายเพิ่มเติม
  • Caption : คำบรรยายภาพ
  • Description : อธิบายเกี่ยวกับภาพ
  • Link URL : ให้รูป link ไปที่ไหน ซึ่งเลือกได้ว่า
    • None : ไม่ link ไปไหน
    • File URL : link ไปยังรูปของเต็มขนาดของรูปนั้น ๆ
    • Post URL : link ไปโดยทำรูปนั้นให้เป็นเหมือน 1 Post ไปเลย
    • หรือจะกรอก URL ที่ต้องการให้รูปนี้ link ไปหา
  • Alignment : จัดรูปให้ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง
  • Size : เลือกขนาดของรูปที่จะนำลงในบทความ

ข้อมูลนั้น เราสามารถกรอกแค่ Title อย่างเดียวก็ได้ครับ หลังจากที่กรอกข้อมูลเสร็จแล้ว ก็กด Insert into Post เลยครับ ก็จะได้เป็นดังรูป

รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]
รูปที่เพิ่ม ปรากฎในช่องสำหรับ Edit Post

แก้ไขรูปที่ลงในบทความ WordPress

ให้คลิ๊กที่รูปภาพที่เราต้องการจะแก้ไข เมื่อคลิ๊กแล้วจะมี icon โผล่ขึ้นมา 2 อัน icon ด้านซ้ายคือ แก้ไขรูปภาพ และด้านขวาคือ ลบรูปภาพ

รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]
icon ทั้งสองที่ปรากฎเมื่อคลิ๊กที่รูปภาพ

โดยเราสามารถแก้ไขรูปภาพของเราได้ดังนี้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]
แก้ไขรูปภาพที่เราได้ลงไปในบทความแล้ว
  • Size : เราสามารถแก้ไขขนาดรูปเป็น % ได้
  • Alignment : แก้ไขรูปให้ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง
  • Title : แก้ไขชื่อของรูป
  • Alternate Text : แก้ไขข้อความที่อธิบายเพิ่มเติม
  • Caption : แก้ไขคำบรรยายภาพ
  • Link URL : แก้ไข link ที่จะให้รูปภาพนี้ link ไปหา

เสร็จแล้วก็ Update ได้เลยครับ รูปภาพของเราจะถูกแก้ไขเป็นไปตามที่เราเลือกไว้

รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]
รูปถูกลดขนาดลง และจัดชิดขวา

แต่เรายังสามารถเลือก Advanced Settings เพื่อแก้ไขรูปภาพเพิ่มเติมจากเดิม โดยแบ่งออกเป็น 2 ส่วน คือ ส่วนของรูปภาพ กับส่วนของ Link

รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]
หน้า Advanced Settings

ซึ่งสามารถกำหนดอะไรได้หลากหลายกว่า Edit Image


Posted

in

by

Comments

11 responses to “วิธีใช้ WordPress ตอนที่ 6 – ใส่รูปภาพในบทความ”

  1. Pnnnews Avatar
    Pnnnews

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

    1.  Avatar
      Anonymous

      ยินดีครับ ขอบคุณที่มาคอมเม้นต์เหมือนกันครับ

  2. ้h2th.com Avatar
    ้h2th.com

    ขอบคุณมาก ครับ บทความของคุณอ่านแล้ว เข้าใจง่ายดี ดีกว่าหนังสือที่ผมซื้อมาเสียอีก
    ขอบคุณจริงๆ

  3. awongkom Avatar
    awongkom

    ทำอย่างไรให้ สามรูปเรียงกันแนวนอนครับ

    1. rabbitinblack Avatar
      rabbitinblack

      สามเหลี่ยมไหนครับ

  4. วิทยา Avatar
    วิทยา

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

  5. prasert Avatar
    prasert

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

  6. Atr Avatar
    Atr

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

  7. ชนะศึก ทิตา Avatar
    ชนะศึก ทิตา

    คือผม อัพรูปแล้ว มัน Error ไฟล์อัพขึ้นนะคับ แต่รูปไม่ขึ้นสักรูปเลย มีวิธีแก้ไหมคับ

Leave a Reply to ้h2th.com Cancel reply

Your email address will not be published. Required fields are marked *