Blog

  • วิธีใช้ WordPress ตอนที่ 4 – มาหัดใช้ Categories กับ Tags กัน

    วิธีใช้ WordPress ตอนที่ 4 – มาหัดใช้ Categories กับ Tags กัน

    ในการทำเว็บของเรานั้น Categories และ Tags เองก็เป็นส่วนสำคัญในการทำหน้าที่จัดระเบียบบทความของเรา

    Categories

    ลองมาดูว่า Categories มันปรากฎตรงส่วนไหนของหน้าเว็บเราบ้าง

    รูปอธิบายหัวข้อ WordPress [1]
    แต่ละส่วนที่มี Categories เกี่ยวข้อง

    ซึ่งถ้าเราคลิ๊กที่คำว่า Article (Category ชื่อ Article) แล้ว ก็จะไปยังหน้าที่รวมบทความในหัวข้อ Article ทั้งหลาย

    รูปอธิบายหัวข้อ WordPress [2]
    บทความที่อยู่ใน Category Article

    Tags

    สำหรับ Tags เอง ก็จะปรากฎในหน้าเว็บบริเวณดังรูป

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [8]
    Tags จะปรากฎในหน้าเว็บบริเวณที่วงไว้

    ซึ่งถ้าเราคลิ๊กที่คำว่า Test (Tags ชื่อ Test) แล้ว ก็จะไปยังหน้าที่รวมบทความที่มี Tags เป็นคำว่า Test ซึ่งหน้าตาก็จะคล้าย ๆ กับหน้ารวมบทความของ Categories

    ข้อแตกต่างระหว่าง Categories กับ Tags

    สำหรับผม ผมมองว่า Categories เหมือนเป็นการจัดระเบียบตามเนื้อหาของบทความ และ Tags เหมือนการจัดระเบียบตามคำสำคัญของบทความ อย่างเช่น ตอนนี้ในเว็บผมก็จะมี Categories แบ่งออกเป็น

    • CSS
    • WordPress
    • jQuery
    • วิธีใช้ WordPress

    ส่วนบทความนี้ คำสำคัญที่จะใช้เป็น Tags น่าจะมี

    • Wordpres
    • Categories
    • Tags

    โดยบทความหัวข้อนี้ มีเนื้อหาเหมาะสมที่จะอยู่ใน Category ชื่อ วิธีใช้ WordPress และมีคำสำคัญของบทความเหมาะสมที่จะใช้ Tags คำว่า WordPress, Categories และ Tags

    สร้าง Categories ใหม่

    เราสามารถที่จะสร้าง Categories ได้โดยเข้าไปที่หัวข้อ Posts => Categories

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]
    เลือกหัวข้อ Post => Categories

    ซึ่งหน้าจัดการ Categories นั้นก็จะมีลักษณะดังนี้

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [4]
    หน้าตาของส่วนจัดการ Categories

    มาดูส่วนด้านขวา ซึ่งจะบอกว่าตอนนี้เรามี Categories อะไรบ้างแล้ว และแต่ละ Category มี Post อยู่เท่าไหร่

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [5]
    รายละเอียดของแต่ละ Category

    คราวนี้เรามาสร้าง Category ใหม่กัน โดยมาดูที่ทางด้านซ้าย

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [6]
    สร้าง Category ใหม่

    โดยแต่ละหัวข้อก็ทำหน้าที่ดังนี้

    • Name : ชื่อของ Category ที่เราจะสร้าง
    • Slug : คำที่จะนำไปใช้ใน URL อย่างเช่น ที่เราสร้างตั้ง Slug เป็น wordpress ใน URL ที่เราเรียกก็จะเป็นประมาณว่า https://www.xxxxxx.com/xx/xx/wordpress เป็นต้น
    • Parent : คือ Category ของเราที่จะสร้างขึ้นมาใหม่นี้ อยู่ภายใต้ Category อะไรหรือเปล่า อย่างเช่น Category WordPress ที่จะสร้างขึ้นมาน่าจะอยู่ใน Category ของ Article เป็นต้น
    • Description : ไว้สำหรับใส่คำอธิบาย Category

    เสร็จแล้วก็กด Add New Category เลย Category ใหม่ของเราจะไปปรากฎอยู่ด้านขวา ลักษณะดังรูป

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]
    Category WordPress ที่สร้างมาใหม่

    ซึ่ง WordPress อยู่ภายใต้ Article เลยมีเหมือนเส้นขีดอยู่หน้า WordPress

    สร้าง Tags ใหม่

    เราสามารถที่จะสร้าง Tags ได้โดยเข้าไปที่หัวข้อ Posts => Post Tags

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [9]
    เลือกที่หัวข้อ Post => Post Tags

    ซึ่งหน้าจัดการ Tags นั้นก็จะมีลักษณะดังนี้

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [10]
    หน้าตาของหน้าจัดการ Post Tags

    มาดูส่วนด้านขวา ซึ่งจะบอกว่าตอนนี้เรามี Tags อะไรบ้างแล้ว และแต่ละ Tag มี Post อยู่เท่าไหร่

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [11]
    รายละเอียดของแต่ละ Post Tags

    คราวนี้เรามาสร้าง Tag ใหม่กัน โดยมาดูที่ทางด้านซ้าย

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [12]
    สร้าง Post Tags ใหม่

    โดย Tags นั้นก็คล้าย ๆ กับ Categories เพียงแต่ไม่มีหัวข้อ Parent

    เสร็จแล้วก็กด Add New Tag เลย Tag ใหม่ของเราจะไปปรากฎอยู่ด้านขวา และด้านบนนั้นก็จะมี Popular Tags อยู่โดยถ้าตัวไหนหนา และใหญ่ก็แสดงว่ามีจำนวน Post ที่มี Tags คำนั้นเยอะ

  • วิธีใช้ WordPress ตอนที่ 3 – แก้ไข Post ที่สร้างไปแล้ว

    วิธีใช้ WordPress ตอนที่ 3 – แก้ไข Post ที่สร้างไปแล้ว

    หลังจากที่เรารู้วิธีการสร้าง Post ใหม่ไปแล้ว ก็ต้องมีบ้างที่เราอาจจะสร้างผิด หรือพิมพ์อะไรในบทความผิด หรืออยากจะแก้ไขอะไรใน Post ที่สร้างไปแล้ว ก็เลือกที่หัวข้อ Posts ด้านซ้ายละครับ จะมี List ของ Post ที่เราเคยสร้างไว้ปรากฎขึ้นมา

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [1]
    เลือกหัวข้อ Posts จะปรากฎหน้ารวม Posts
    ถ้าเรานำ cursor ไปวางไว้บนแถวของหัวข้อที่เราจะแก้ไข ก็จะมีคำสั่งโผล่มา 4 คำสั่งได้แก่

    1. Edit
    2. Quick Edit
    3. Trash
    4. View
    รูปอธิบายหัวข้อ วิธีใช้ WordPress [2]
    คำสั่งที่จัดการ Post

    Quick Edit

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [3]
    หน้า Quick Edit ของ Post
    มันก็ตามชื่อละครับ แก้ไขแบบด่วน ซึ่งก็จะมีให้เราสามารถแก้ หัวข้อ slug (slug มันก็คือตัวที่จะไปเป็นชื่อ URL นั่นละ ลองเปลี่ยนชื่อ slug แล้วเข้าบทความตัวนั้นดู จะเห็นว่า URL ตัวท้ายก็คือ slug นี่ละครับ) วันที่ หรือจะตั้ง Password สำหรับเข้าดูบทความ เป็นต้น ซึ่งถ้าเราแก้ไขเสร็จแล้วก็กด Update บทความนั้นก็จะเปลี่ยนไปตามอย่างที่เราแก้ไขแล้วครับ

    แต่ถ้าเราต้องการแก้ไขเนื้อหาของบทความเรา เราก็ต้องเข้าไปที่ Edit หรือคลิ๊กเลือกที่หัวข้อบทความที่เราต้องการจะแก้ไขครับ

    Trash

    แต่ถ้าเราต้องการจะลบบทความทิ้ง ก็ให้กดที่ Trash จะเป็นการลบบทความ แต่ยังไม่ได้เป็นการลบถาวร บทความนั้นจะไปอยู่ที่ Trash

    รูปอธิบายหัวข้อ วิธีใช้ WordPress [7]
    หัวข้อ Trash จะอยู่ตรงที่วงไว้
    ซึ่งใน Trash นั้นเราก็เลือกได้ว่าจะนำบทความนั้นกลับมา(Restore) หรือว่าจะลบหมดไปถาวรเลย(Delete Permanently)

    รูปอธิบายหัวข้อ WordPress [8]
    สามารถเลือกนำบมความกลับมา หรือลบทิ้งถาวรได้

    แก้ไขครั้งละหลายบทความ

    เราสามารถเลือกติ๊ก checkbox ได้ว่าเราจะแก้ไขบทความไหนบ้าง แล้วหลังจากนั้นก็ไปเลือกที่ Edit แล้วกด Apply ครับ

    รูปอธิบายหัวข้อ WordPress [4]
    สามารถเลือกแก้ไขทีละหลายบทความได้
    ซึ่งจะมีให้เราสามารถแก้ไขบทความที่เลือกมาได้ดังรูป

    รูปอธิบายหัวข้อ WordPress [5]
    ถ้าเลือก Edit ก็จะปรากฎหน้าตาดังรูป
    แต่ถ้ามีบทความไหนที่เราเลือกมาผิด ก็สามารถเลือกที่ปุ่ม x หน้าบทความเพื่อลบบทความนั้นออกจากการแก้ไขรวมได้

    รูปอธิบายหัวข้อ WordPress [6]
    เลือกบทความที่เราไม่ต้องการแก้ไข
  • วิธีใช้ WordPress ตอนที่ 2 – การสร้าง Post

    วิธีใช้ WordPress ตอนที่ 2 – การสร้าง Post

    ก่อนที่เราจะมาสร้าง Post ใหม่กันนั้น มาทำความรู้จักกันก่อนแล้วกัน ว่าระหว่าง Post กับ Page นั้นมันต่างกันยังไง

    Post และ Page

    ถ้าจะให้อธิบายให้เข้าใจง่าย ๆ ก็คิดว่า Post มันก็คือ บทความที่เราเขียน ซึ่งเราก็จะมีบทความใหม่ ๆ มาตลอดเวลา และในหน้าแรกก็จะเป็นส่วนนี้ ซึ่งตามปรกติ ถ้าเราเขียนบทความอันใหม่ มันก็จะมาปรากฎอยู่ด้านบนสุดของหน้าเว็บ

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

    ส่วน Page นั้น ส่วนใหญ่ก็จะเป็นหน้า Static หรือหน้าที่ไม่ค่อยมีการเปลี่ยนแปลงเท่าไหร่ อย่างเช่น พวก About Us, Contact Us เป็นต้น โดยปรกติถ้าเราสร้าง Page หน้าใหม่ขึ้นมา มันจะไปปรากฎหัวข้ออยู่ตรงส่วน Mainmenu

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

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

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

    สร้าง Post ใหม่

    ที่ตรง Admin Bar ด้านบนของเว็บในหัวข้อ Add New หรือด้านซ้ายของหน้า Dashboard ของเราในหัวข้อ Post เมื่อคลิ๊กตามรูปแล้ว เราจะเข้าไปที่หน้า Add New Post

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

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

    ซึ่งก็เหมือนกับหน้า Dashboard ที่เราสามารถย้ายตำแหน่ง หรือยืดหดกล่องต่าง ๆ หรือจะเลือกที่ Screen Option เพื่อเปลี่ยน Layout

    Post Title

    มาเริ่มสร้าง Post ใหม่ โดยเราจะเริ่มจากใส่ Title (หัวข้อ) ของบทความตรงคำว่า Enter Title Here

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

    ถ้าเราใส่หัวข้อไปแล้ว WordPress เองก็จะสร้าง URL มาให้เราอัตโนมัติ

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

    แต่เราก็สามารถที่จะกด Edit เพื่อปรับเปลี่ยนชื่อ URL ของเราได้

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

    Content

    ช่องตรงกลางใหญ่ ๆ นั้นละเป็นส่วนที่ไว้ให้เราเขียนเนื้อหาของบทความ

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

    ซึ่งเราสามารถย่อ ขยายขนาดของช่องได้ โดยคลิ๊กแล้วลากที่บริเวณมุมล่างขวาของกล่อง

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

    ถ้าอยากจะปรับแต่งบทความของเรานั้น WordPress เองก็เตรียมมาให้เราใช้งาน เหมือนเราใช้ Word ทั่วไปเลย

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

    1. ตัวหนา
    2. ตัวเอียง
    3. ขีดเส้นกลาง

    สมมติเราจะขีดเส้นกลางที่ตัวอักษร เราก็เลือกส่วนที่เราอยากขีดเส้นกลาง แล้วก็กดที่ปุ่ม 3 ผลลัพธ์ที่ได้ก็จะเป็นแบบนี้

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

    หรือถ้าอยากได้เป็นหัวข้อ 1 2 3 ก็กดปุ่มที่มีรูป 1 2 3 แล้วก็พิมพ์ลงไปกด Enter ก็จะมีตัวเลขหัวข้อมาให้เราเรื่อย ๆ เหมือนอย่างรูป

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

    การใส่ Link ใน Content

    การจะทำ Link ก็ง่าย ๆ โดยเลือกคำที่จะทำเป็น Link แล้วกดปุ่มที่เหมือนรูปโซ่ ก็จะปรากฎหน้าแบบนี้

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

    เราก็ใส่ URL ใส่ Title ของ Link ที่เราจะสร้าง และสามารถเลือกได้ว่าจะให้เปิดในหน้าใหม่ หรือเปิดอยู่ในหน้าเดิม และถ้าเรากดที่ Or link to existing content ก็จะกลายเป็นแบบนี้

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

    คือ การ Link ภายในเว็บของเราเอง โดยจะมี Page และ Post ต่าง ๆ ในเว็บเราให้เลือก หลังจากที่เราทำทุกอย่างเสร็จแล้ว ก็กด Add Link

    และถ้าเรากดที่ปุ่มสุดท้ายของแถว จะมีปุ่มอีกชุดขึ้นในแถวที่สอง

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

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

    การนำข้อความจาก Word มาวางแปะใน WordPress

    ปุ่มที่แนะนำในแถวที่สองนั้น ก็คือปุ่มที่มี icon ของ Microsoft Word อยู่

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

    โดยเมื่อเราคลิ๊กที่ปุ่ม จะมีช่องให้เราใส่ข้อความ ซึ่งมันมีหน้าที่แปลงบทความที่เรา copy จาก Word เพื่อให้ Code เป็นระเบียบมากกว่าการที่เราจะแปะลงไปเลยทันที โดยไม่ผ่านวิธีนี้

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

    โดยถ้าเราอยากดูในรูปแบบ Code ก็กดที่ปุ่ม HTML ซึ่งอยู่ด้านขวาบนของกล่อง เราก็จะเห็น Code ของบทความของเราแล้ว

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

    Categories

    และบทความเราจะเป็นระเบียบมากขึ้น ถ้าเราจัดบทความเป็นหมวดหมู่ โดยหัวข้อ Categories จะอยู่ด้านขวา ลักษณะคล้าย ๆ ในรูป

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

    Post Tags

    ส่วน Post Tags ก็เหมือนเป็นคำสำคัญ (Keyword) ในบทความเรา เหมือนการสรุปบทความเรามาเป็นคำ ซึ่งแต่ละคำเราจะคั่นด้วยเครื่องหมายลูกน้ำ (,)

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

    Format

    สำหรับ Format นั้น เหมือนการระบุรูปแบบของบทความ จะขอยกตัวอย่างให้ดู 2 แบบคือ Standard กับ Status ส่วนที่เหลือให้ไปลองเองแล้วกัน

    ถ้าเราเลือกเป็น Standard ก็จะปรากฎเป็นบทความตามปรกติ

    แต่เราเลือกเป็น Status ก็จะปรากฎเป็นลักษณะเหมือนเรามาประกาศ มาพูดคุยอะไรแบบนั้น

    Publish

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

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

    ถ้าดูที่ Status ตอนนี้ยังมีสถานะเป็น Draft อยู่ ซึ่งเราสามารถที่ Edit เพื่อแก้ไขสถานะได้ เช่นกันกับ Visibility ที่เราสามารถกำหนดการโชว์ของบทความเราได้

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

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

    และเรายังสามารถตั้งเวลาที่จะให้บทความของเรา Publish ออกไปในวันไหน เวลาไหนได้อีกด้วย

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

    เสร็จหมดทุกอย่างแล้ว ก็กด Publish กันเลยครับผม

  • อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

    อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

    ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนี้

    Unmatchedstyle CSS

    แน่นอนว่าไม่รีรอที่จะคลิ๊กเข้าไปดู แล้วก็พบว่ามันเป็นการแข่งกันทำ CSS >_< Unmatchedstyle CSS

    มีการให้คะแนนงานที่ทำมาด้วย ตอนนั้นรู้สึกเลยว่า เราทำ CSS มายังไม่เคยมีใครให้คะแนนเราแบบจริงจังเลย งานนี้ละมีคนให้คะแนนเราแล้ว เข้าไปดูหลักการให้คะแนนของเค้า เค้าจะแบ่งเป็นหัวข้อหลัก 4 หัวข้อ ตัดสินโดยกรรมการ 3 ท่าน คะแนนเต็ม 100 คะแนน โดยแต่ละหัวข้อมีดังนี้

    Code

    User Experience

    Browser Support & Optimization

    Responsiveness

    ส่วนกรรมการนั้น ยอมรับว่ารู้จักอยู่แค่ 2 ท่าน คือ Chris Coyier แห่ง CSS Tricks กับ Christopher Schmitt ซึ่งเป็นจัดงาน CSSSummit ที่ผ่านมา โดยผลงานนึง ๆ จะมีกรรมการ 3 ท่านจากการสุ่มจากกรรมการทั้งหมด 13 ท่าน

    กรรมการ

    และตัว PSD ที่จะให้เราใช้งานนั้นก็ Design โดย Paravel

    Paravel

    เมื่อเป็นการแข่งขันก็ต้องมีรางวัล โดยที่ 1 ก็จะได้รางวัลดังนี้

    รางวัล

    แต่เป้าหมายที่ตั้งไว้ ตอนนี้ต้องการแค่ติด Top 25 ก็พอใจแล้ว เพราะว่าถ้าคะแนนติด Top 25 เค้าจะนำผลงานเราไปแปะไว้ที่หน้าเว็บเค้าด้วย

    อ่านมาถึงตรงนี้แล้ว ถ้าอยากสมัครแข่งเหมือนกัน ก็เข้าไปที่เว็บ CSS Off เลย โดยเมื่อสมัครแล้วก็รอ PSD ในวันพุธที่ 20 ตุลาคม และส่งผลงานได้วันสุดท้าย วันพุธที่ 3 พฤศจิกายน [หรือเข้าไปอ่านกฎนะครับ]

  • วิธีใช้ WordPress ตอนที่ 1 – Dashboard

    วิธีใช้ WordPress ตอนที่ 1 – Dashboard

    วิธีใช้ WordPress ในส่วนของ Dashboard ซึ่งการที่เราจะเข้าถึงส่วนของ Dashboard ได้นั้น เราสามารถเข้าได้โดย

    • ถ้าลง WordPress แล้วยังไม่ได้เปลี่ยน Theme ในส่วนของหน้าแรกจะมี Link ให้คลิ๊กเพื่อเข้าสู่หน้า Login
      รูปอธิบายหัวข้อ วิธีใช้ WordPress
    • หรือจะพิมพ์ที่ URL ตามด้วยคำว่า wp-admin อย่างเช่น https://rabbitinblack.com/test/wp-admin
      รูปอธิบายหัวข้อ วิธีใช้ WordPress

    หลังจากนั้นเราจะพบหน้าที่ใช้สำหรับ Login เพื่อเข้าใช้งาน โดยเราก็กรอก Username กับ Password ที่เราตั้งไว้ และกด Log In เพื่อเข้าใช้งาน

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    ส่วนต่าง ๆ ของหน้า Dashboard

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    โดยแบ่งออกเป็น 4 ส่วนคือ

    1. Header [สีชมพู]
    2. Main Navigation Menu [สีฟ้า]
    3. Workspace [สีเขียว]
    4. Footer [สีเหลือง]

    Header

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    โดยในแต่ละส่วนไว้ใช้งานดังนี้

    1. ถ้าคลิ๊กแล้ว จะไปที่หน้าแรกของเว็บเรา
    2. จะมีเมนูย่อยดังรูป

      รูปอธิบายหัวข้อ วิธีใช้ WordPress

      สำหรับไปยังหน้าแก้ไข Profile กับ Log Out ออกจากระบบ

    3. Screen Option ใช้สำหรับเลือกสิ่งต่าง ๆ ที่จะปรากฎในหน้าจอนั้น และยังสามารถเลือก Layout ว่าจะให้แบ่งออกเป็นกี่คอลัมน์ โดยตัวอย่างของหน้า Dashboard เป็นดังรูป

      รูปอธิบายหัวข้อ วิธีใช้ WordPress

      ลองคลิ๊กเล่นดูก็ได้ แล้วดูในส่วน Workspace จะเปลี่ยนไปตามที่เราเลือก

    4. อธิบายเกี่ยวกับหน้าจอนั้นว่าแต่ละอย่างคืออะไรบ้าง ก็มันคือ Help นิ

      รูปอธิบายหัวข้อ วิธีใช้ WordPress

    Main Navigation Menu

    ประกอบด้วยหัวข้อต่าง ๆ ที่สำคัญ ไม่ว่าจะเป็น Posts, Pages, Appearance, Plugins, Settings เป็นต้น โดยเราสามารถที่จะขยายเมนูเพื่อดูเมนูย่อยได้ โดยนำ Cursor ไปวางไว้ที่ปลายด้านขวา ก็จะมีสามเหลี่ยมเล็ก ๆ ปรากฎขึ้นมา เมื่อเราคลิ๊กไปจะพบกับเมนูย่อยของหัวข้อนั้น และเราสามารถย่อกลับไปได้ โดยการคลิ๊กที่สามเหลี่ยมเล็ก ๆ เหมือนเดิม ก็จะเป็นการย่อเมนูย่อยกลับไปแล้ว

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    และเรายังสามารถย่อ/ขยาย ส่วนของ Main Navigation Menu ได้โดยการคลิ๊กที่ Collapse menu ที่อยู่ตรงด้านล่าง และเมื่อเราย่อขนาดของ Main Navigation Menu แล้ว หัวข้อต่าง ๆ จะกลายเป็น icon เมื่อเรานำ cursor ไปวางจีงจะปรากฎหัวข้อและเมนูย่อย

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    Workspace

    เราสามารถเคลื่อนย้ายแต่ละกล่องได้โดยการจับลากได้เลย

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    คราวนี้เราลองเลือกที่ Screen Options ด้านบน เราไม่อยากให้มันโชว์ Other WordPress News, WordPress Blog, Plugins, Incoming Links แล้วก็อยากได้เป็น 3 แถวด้วย

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    และในบางหัวข้อ เราสามารถปรับแต่งมันได้ โดยเลือกที่ Configure ที่ด้านขวา ซึ่งตอนแรกมันจะซ่อนตัวอยู่ถ้าเราไม่เอา cursor ไปวางบนหัวข้อ

    รูปอธิบายหัวข้อ วิธีใช้ WordPress

    Footer

    ส่วนสุดท้าย Footer นั้นก็จะมี Link ไปยังเว็บต่าง ๆ ที่เกี่ยวข้องกับ WordPress และที่มุมด้านขวาก็จะบอก Version ของ WordPress ที่เราใช้อยู่ขณะนั้นด้วย

  • inherit คืออะไร

    inherit คืออะไร

    หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

    มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

    CSS ประกอบด้วยอะไรบ้าง

    [css]
    #my-div {
    font-size : 16px;
    color : #F00;
    }
    [/css]

    สำหรับ #my-div เราเรียกมันว่า Selectors ก็คือเหมือนชี้เป้าหมายว่า ตัวนี้นะจะต้องมีคุณสมบัติตามใน { } ของชั้นนะ

    ต่อมาคือ font-size, color เราเรียกมันว่า Properties ซึ่งจริง ๆ แล้ว CSS มี Properties อีกมากมาย แต่นี่เป็นการยกตัวอย่างมาเท่านั้น โดย Properties ก็ทำหน้าที่บอกหัวข้อคุณสมบัติ อย่างเช่น font-size ก็คือบอกหัวข้อคุณสมบัติว่า Selector ตัวนี้ต้องมีขนาดของตัวอักษร … เป็นต้น

    สุดท้ายก็คือ 16px, #F00 เราเรียกมันว่า Value ซึ่งทำหน้าที่บอกว่าค่าให้คุณสมบัตินั้น ๆ อย่างเช่น font-size:16px; ก็แสดงว่าต้องการให้มีขนาดตัวอักษรที่ 16px เป็นต้น

    แล้ว inherit คืออะไร

    inherit นั้นเป็น Value ซึ่งถ้าตามหลัง Properties ตัวไหน มันก็จะสืบทอดค่ามาจาก parent โดย Properties ที่มีค่า Default ของตัวเองเป็น inherit นั้นได้แก่

    • border-collapse
    • border-spacing
    • caption-side
    • color
    • cursor
    • direction
    • empty-cells
    • font-family
    • font-size
    • font-weight
    • font-style
    • font-variant
    • font
    • letter-spacing
    • list-style-type
    • list-style-position
    • list-style-image
    • list-style
    • line-height
    • orphans
    • page-break-inside
    • quotes
    • text-align
    • text-indent
    • text-transform
    • visibility
    • white-space
    • widows
    • word-spacing

    ถ้าเริ่มงง ๆ แล้วไม่เป็นไรครับ เดี๋ยวทำตัวอย่างให้ดู

    [css]
    #my-div {font-size:16px;}
    #my-div p {color:#F00;}
    [/css]

    [html]
    <div id="my-div">
    <p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
    </div><!– my-div –>
    [/html]

    เราจะได้ผลลัพธ์ออกมาเป็น

    จะเห็นว่าตัวอักษรใน p มีขนาด 16px เพราะว่าตัว font-size นั้นมันมีค่า default value เป็น inherit ดังนั้นจึงดึงค่า font-size มาจาก parent ของมัน ซึ่งก็คือ #my-div

    [css]
    #my-div {font-size:16px;border:2px solid #000;}
    #my-div p {color:#F00;}
    [/css]

    [html]
    <div id="my-div">
    <p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
    </div><!– my-div –>
    [/html]

    คราวนี้เรามีเพิ่มกรอบให้ #my-div จะได้ผลลัพธ์ออกมาเป็นแบบนี้นะครับ

    ถ้าเกิดเราใส่ค่าให้ #my-div p มี border:inherit; ละผลจะเป็นยังไง

    [css]
    #my-div {font-size:16px;border:2px solid #000;}
    #my-div p {color:#F00;border:inherit;}
    [/css]

    จะเห็นได้ว่า p ก็ไปดึงค่า border มาจาก parent ซึ่งก็คือ #my-div มาใช้งานด้วย

    สิ่งที่ควรรู้เพิ่มเติมสำหรับ inherit

    • Browser ที่ไม่ Support ค่า inherit นั้นก็มี IE6 กับ IE7
    • ใช้ inherit กับ shorthand properties ไม่ได้

    แถม : shorthand properties คืออะไร

    มันก็คือการเขียนให้สั้นลงของ CSS อย่างเช่น

    [css]
    #my-border {
    border-width : 2px;
    border-style : solid;
    border-color : #F00;
    }
    [/css]

    เราสามารถเขียนให้สั้นลงได้ให้กลายเป็น

    [css]
    #my-border {
    border : 2px solid #F00;
    }
    [/css]

    ซึ่งค่า inherit ไม่สามารถใส่ค่าลงไปแบบนี้ได้

    [css]
    #my-border {
    border : 2px inherit #F00;
    }
    [/css]