Rabbitinblack

Year: 2012

  • อยากเป็น Top WordPress Developer ทำอย่างไร

    อยากเป็น Top WordPress Developer ทำอย่างไร

    เนื่องจากได้อ่านบทความของ Smashing Magazine ในหัวข้อ How To Become A Top WordPress Developer รู้สึกว่าเป็นประโยชน์กับคนที่อยากจะเป็น WordPress Developer เลยแปลมาให้ได้อ่านกัน (เอาไว้ให้ตัวเองมาคอยอ่านเหมือนกัน แหะๆ) แต่ออกตัวก่อนนะครับ ว่าไม่ได้เก่งภาษาอังกฤษอะไรมาก แล้วคงไม่ได้แปลตามตัวอักษรจากต้นฉบับแบบเป๊ะ ๆ คงมีอะไรที่เป็นคำพูดของผมเองเหมือนกันนะครับ ^^

    ต้องทำความเข้าใจกันก่อนว่า การจะเป็น Top WordPress Developer นั้น เราต้องใช้ทั้งเวลา ใช้ทั้งพลังงาน ใช้ทั้งความพยายาม มันไม่มีทางลัด หรือวิธีง่าย ๆ หรอกครับ

    ถ้าแค่คุณสามารถ ติดตั้ง WordPress, อ่านบทเรียน, ปรับแต่งธีมได้บ้าง นั่นไม่ได้เรียกว่าคุณเป็น Top Developer คุณเป็นแค่ “Expert” หรือคุณแค่มีความรู้มากกว่าคนทั่ว ๆ ไป แต่ Top Developer คือ เราควรรู้ให้ลึกมากกว่าพื้นฐาน เราต้องสามารถประยุกต์ รวมถึงให้ข้อมูลกับผู้อื่นได้

    ทำไมต้องอยากเป็น Top WordPress Developer ละ

    ถ้าอย่างนั้นถามกลับว่า ทำไมถึงไม่อยากเป็นละ ถ้าคุณทำงานกับ WordPress หรือวางแผนจะเริ่ม ทำไมถึงเลือกที่จะอยู่ในระดับที่คนทั่ว ๆ ไปเป็น มันคนเป็น WordPress Developer ทั่ว ๆ ไปอยู่มากมายแล้ว แต่ถ้าจะหาเหตุผล ก็ให้ลองมองว่าเมื่อเราเป็น Top WordPress Developer แล้วนั้น

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

    ขอเวลา 1 ชั่วโมงต่อวันในการอ่าน

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

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

    (ทาง Smashing Magazine ก็โฆษณาหนังสือของเค้า Smashing Book #3 โดยในหนังสือจะมีหัวข้อเกี่ยวกับเรื่องพวกนี้อยู่)

    ลงทะเทียนเรียนในมหาวิทยาลัย WordPress

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

    พบปะกับกลุ่มคนชั้นนำ

    คบคนพาลพาลพาไปหาผิด คบบัณฑิตบัณฑิตพาไปหาผล เหมือนกันครับ ถ้าเราอยากเป็น Top WordPress Developer เราก็ต้องมีการติดต่อสื่อสารกับกลุ่มคนเหล่านี้บ้าง ไม่ว่าจะเป็นการอ่าน blog ของเค้า หรือ follow เค้าใน twitter รวมถึงให้ข้อเสนอแนะเวลาที่พวกเค้าต้องการ ถ้ามีโอกาสไป WordCamps ซะ ไปเจอและฟังที่พวกเค้าคุยกัน

    ด้านล่างเป็นรายชื่อส่วนหนึ่งของกลุ่มนักพัฒนา WordPress

    อ่านเนื้อหาที่เกี่ยวข้อง

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

    • WordPress Codex : ที่นี่ คือกรุสมบัติที่รวมทุกอย่างเกี่ยวกับ WordPress ไว้ คุณอาจจะเริ่มต้นกับพื้นฐาน แล้วค่อย ๆ ลงลึกไป เรียนรู้ WordPress semantics รวมถึงศึกษาเกี่ยวกับการออกแบบธีม และพัฒนาปลั๊กอิน
    • หนังสือที่เกี่ยวกับ WordPress : มีหนังสืออยู่เยอะพอสมควรที่เขียนเกี่ยวกับ WordPress อย่าคิดว่า “WordPress For Dummies” มันพื้นฐานเกินไป คุณอาจจะให้ลูกค้าของคุณอ่าน และรับรู้ถึงมุมมองของเค้า เมื่ออ่านจบ คุณอาจจะเขียน Review และขอบคุณคนเขียน
    • Blog เกี่ยวกับ WordPress : หาและติดตาม blog เกี่ยวกับ WordPress เมื่ออ่านจบ ก็ให้ข้อเสนอแนะ คอมเม้นท์คนเขียนเกี่ยวกับบทความของเค้า มี blog มาแนะนำคือ WordPress on Smashing Magazine, WP Tuts+, WP Candy

    ทำความเข้าใจเทคโนโลยี

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

    • เรียน PHP และ MySQL : เรื่องนี้เป็นเรื่องสำคัญมากที่คุณต้องมีความรู้ PHP และ MySQL ถ้าคุณจะเริ่มต้นเรียนรู้มี Lynda.com หรือ Learnable.com รวมถึง MySQL performance
    • สำรวจ Codebase : สละเวลาที่จะสำรวจดู Codebase ของ WordPress (WordPress codebase on Trac, WordPress codebase on Xref) อ่านคู่มือต่าง ๆ เพื่อทำความเข้าใจว่ามันทำงานอย่างไร
    • ใช้งาน Nightly : ติดตั้ง WordPress ในเครื่องของเรา และติดตั้ง nightly build เพื่อตามติดการเปลี่ยนแปลงสำหรับที่เราจะใช้ในการพัฒนาต่อไป
    • อ่าน “Make WordPress” : ทำความเข้าใจเทคโนโลยีเพื่อนำไปใช้ในการพัฒนา โดยดูที่ make.wordpress.org คุณสามารถติดตามการพูดคุยเกี่ยวกับ Core Plugins และ Themes สำหรับผู้เริ่มต้นได้

    หมั่นฝึกฝน

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

    • WordPress APIs : แน่นอนว่าเริ่มต้นศึกษาที่เว็บของ WordPress เองเลย รายชื่อของ APIs สำหรับ WordPress ลองศึกษาการใช้งาน API แต่ละตัวดูเพื่อจะได้นำไปประยุกต์ใช้งาน
    • Ajax in WordPress : คิดว่าคุณน่าจะเคยได้ยินเกี่ยวกับ Ajax มาบ้างแล้ว คราวนี้ถึงเวลาที่คุณต้องเรียนเกี่ยวกับ การใช้ Ajax กับ WordPress แล้วละ ซึ่งมันสามารถพัฒนาไปเป็นใช้ Ajax พัฒนา Plugin อย่าลืมที่จะศึกษาเพิ่มเติมไปเรื่อย ๆ เพื่อสะลมประสบการณ์ในการใช้งาน
    • WordPress PHP Class : รายชื่อ PHP Class ที่ WordPress สร้างไว้ ทดลองใช้งานแต่ละตัว เพื่อที่คุณจะได้รู้วิธีการใช้งานมัน และอยากให้ศึกษาตัว WP_Query, WP_Theme และ wpdb เป็นพิเศษ

    เก็บประสบการณ์การใช้ WordPress

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

    ออกไปหาลูกค้า

    ทำงานกับลูกค้า ไม่ว่าจะได้เงินหรือทำฟรี ก็เป็นอีกทางในการสะสมประสบการณ์ของคุณ ลูกค้าจะมีปัญหา มีข้อเสนอแนะที่คุณจะไม่ได้เจอในการทำโปรเจคของตัวเอง ถ้าคุณเพิ่งเริ่มแล้วยังไม่รู้จะหาลูกค้ายังไง ลองอ่าน learn how to get get your first client เก็บประสบการณ์ไปเรื่อย ๆ ไม่ว่าจะเป็นงานขนาดใหญ่ หรืองานขนาดเล็ก

    ลองทำธีมแจก

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

    ลองทำ Plugin

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

    // หมดแรงแล้วครับ แหะ ๆ ถ้ามีแรงจะมาแปลต่อนะครับ ภาษาง่อยไปบ้าง ให้อภัยกันด้วยนะครับ >_<

  • [WordPress] สร้าง Custom Page Template

    [WordPress] สร้าง Custom Page Template

    โดยปรกติแล้ว ในการสร้าง Page ขึ้นมานั้น จะมีการเรียกใช้ File page.php ในการแสดงผลให้ Page ทุก Page แต่ถ้าหากเราต้องการให้สร้าง Page นั้นแสดงผลไม่เหมือน Page อื่น ๆ ละ เราจะต้องทำยังไง

    สร้าง page-slug.php เพื่อหน้านั้น

    วิธีแรกคือ ให้สร้าง File ชื่อ page-xxx.php โดย xxx คือ slug หรือถ้าให้ดูอย่าง ๆ ง่าย slug จะคือคำที่วงไว้ในรูปครับ

    [WordPress] สร้าง Custom Page Template

    จากรูป slug คือ tester ให้เราสร้าง File ชื่อ page-tester.php ขึ้นมา หลังจากนี้หน้า (Pages) อื่น ๆ จะให้งาน File page.php แต่เฉพาะหน้า tester นี้จะเรียกใช้งาน File page-tester.php เท่านั้น คราวนี้ก็จะมีข้อสงสัยต่อว่า ถ้าเราต้องการมีอีก 2 หน้าที่ต้องการให้เหมือนกับหน้า tester ละ เราก็ต้องสร้าง page-xxx.php ขึ้นมาอีกสอง File แล้วถ้าเกิดมีอีก 10 หน้าละ เราคงมี File เต็ม Folder Theme เรากันเลยทีเดียว ดังนั้นมาดูวิธีที่สองกันครับ

    สร้าง Custom Page Template

    ใช่แล้วครับ วิธีที่สองนั้นก็คือ หัวข้อของเรานั่นเอง โดยวิธีสร้าง Custom Page Template นั้นก็ไม่ได้ยากอะไร สมมติเราสร้าง File ขึ้นมาว่า page_test.php เพื่อสร้าง Test Template ขึ้นมา ใน File page_test.php เราต้องขึ้นหัวด้วย

    [php]
    <?php
    /*
    Template name: XXXXX
    */
    ?>
    [/php]

    เราสามารถใส่ชื่อ Template ของเราว่าอะไรก็ได้ โดยแทนที่คำ XXXXX ในตัวอย่าง อย่างเช่น

    [php]
    <?php
    /*
    Template name: Test
    */
    ?>
    [/php]

    โดย Template ที่เราสร้าง จะปรากฎให้เราเลือกเวลาเราสร้าง หรือแก้ไข Page ในตำแหน่งดังรูป

    [WordPress] สร้าง Custom Page Template

    ดังนั้นถ้าเรามีหน้าซัก 10 หน้าที่ต้องการใช้ Template นี้ ก็แค่เลือกให้ใช้งานโดยไม่ต้องไปสร้าง File ให้เยอะแยะรก Theme ของเรา

    // สร้าง File แล้ว อย่าลืมเขียน Code ลงไปด้วยนะครับ ไม่อย่างนั้นมันก็ไม่แสดงผลอยู่ดีนะ 😛

  • [WordPress] เบื้องต้นกับการคิวรี่ข้อมูลจาก database โดยตรง

    [WordPress] เบื้องต้นกับการคิวรี่ข้อมูลจาก database โดยตรง

    ในการเรียกข้อมูลจาก database ของเว็บที่ทำด้วย WordPress นั้น ก็มีวิธีไม่ยากด้วยคำสั่ง query_posts หรือ wp_query แต่ทั้งสองก็เป็นเพียงการเรียกข้อมูลมาเท่านั้น ถ้าเราต้องการเพิ่มข้อมูล ต้องเป็นการเชื่อมต่อโดยตรง ซึ่งจริง ๆ แล้วด้วยตัว WordPress เองก็ได้เตรียมตัวแปรเพื่อให้เราได้ใช้งานไว้แล้ว ด้วยตัว $wpdb ครับ มาดูวิธีการใช้งานมันกันครับ

    วิธีการใช้งาน $wpdb เบื้องต้น

    ในการใช้งานให้เราสั่งเรียกมันขึ้นมาก่อนนะครับ

    [php]
    <?php global $wpdb; ?>
    [/php]

    คราวนี้เวลาเราจะเรียกข้อมูล ก็สามารถสั่งได้ประมาณว่า

    [php]
    <?php $post_count = $wpdb->get_results("select count(*) from $wpdb->posts"); ?>
    [/php]

    แล้วเราจะรู้ได้ยังไง ว่าเราจะเรียกข้อมูลจากที่ไหน from ตัวไหน อันนี้เราต้องมาดู database ของ WordPress ก่อนว่ามีโครงสร้างเป็นอย่างไรนะครับ

    โครงสร้าง Database ของเว็บที่สร้างด้วย WordPress

    [WordPress] เบื้องต้นกับการคิวรี่ข้อมูลจาก database โดยตรง

    จะมีหลัก ๆ อยู่ 11 tables โดยแต่ละ table จะเก็บข้อมูลคร่าว ๆ ดังนี้ครับ

    • wp_comments: เก็บ comment ต่าง ๆ ไว้ โดยเก็บพวกชื่อ อีเมล์ IP ของคนที่มา comment รวมถึงข้อความด้วย
    • wp_commentmeta: เก็บข้อมูลของ comment ว่าสัมพันธ์กันอย่างไร เช่น comment นี้คือ comment ที่เกิดมาจากการตอบ comment ไหน หรือ comment นี้เป็น comment ที่ตอบ post ไหน
    • wp_links: เก็บข้อมูล link ที่เราสร้างไว้ในหัวข้อ Links
    • wp_options: ในหัวข้อ Settings นั้นจะเก็บข้อมูลใน table นี้
    • wp_posts: เวลาสร้าง Post และ Page จะถูกเก็บข้อมูลต่าง ๆ ไว้ที่นี่
    • wp_postmeta: ข้อมูลเสริมของแต่ละ Post หรือ Page อย่างเช่น รูป thumbnail ตัวไหน หรือใน Post นี้แนบ File อะไรไว้บ้าง
    • wp_terms: เก็บข้อมูล Categories และ Tags สำหรับ Post และ Page
    • wp_term_relationships: ส่วนอันนี้จะจับความสัมพันธ์กันในระหว่าง Post, Page, Categories และ Tags
    • wp_term_taxonomy: เก็บรายละเอียด (Description) ที่เราใส่ให้ Tags, Links และ Categories
    • wp_users: เก็บข้อมูล User ที่ Register ไว้
    • wp_usermeta: เก็บข้อมูลของแต่ละ User เช่น ชื่อ, สิทธิในการใช้งาน เป็นต้น

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

    ตัวอย่างการใช้งาน

    สมมติเราต้องการเรียก title ใน post ล่าสุดมาแสดงนะครับ

    [php]
    <?php
    global $wpdb;
    $last_title = $wpdb—>get_var("SELECT post_title FROM $wpdb->posts WHERE post_status = ‘publish’ ORDER BY post_date DESC");
    echo $last_title;
    ?>
    [/php]

    ถ้าต้องการเรียกข้อมูลอะไรมากกว่านี้ ก็ลองไปดูเพิ่มเติมเอานะครับ Class Reference/wpdb 😛

    ปล. จะเห็นว่าตรง from เราจะใช้ $wpdb->posts ซึ่งถ้าเป็น table อื่นก็จะเรียกแบบนี้ครับ wp_comments ก็เป็น $wpdb->comments

  • [WordPress] ลองสร้าง shortcode แบบง่าย ๆ เพื่อสะดวกเวลาใช้งาน

    [WordPress] ลองสร้าง shortcode แบบง่าย ๆ เพื่อสะดวกเวลาใช้งาน

    ถ้าเคยใช้งาน plugin มา หลาย ๆ ตัวจะมีสิ่งที่เรียกว่า shortcode เพื่อให้ผู้ใช้สามารถเรียกใช้งานได้อย่างสะดวก ซึ่ง shortcode พวกนี้เราเองก็สามารถสร้างมาเพื่อใช้งานเองก็ได้

    แต่สำหรับใครที่ยังนึกไม่ออก อะไรคือ shortcode ผมเคยเขียนไว้ครั้งนึงในหัวข้อ ฉลอง MV SNSD ตัวใหม่ด้วยบทความ ทำ Shortcode สำหรับดึง youtube thumbnail มาใช้ใน WordPress แต่คราวนี้จะมาศึกษาแบบจริงจังขึ้นหน่อย ว่าแต่ละตัวไว้ทำอะไรบ้าง ครั้งนี้ถือว่าฉลองที่ SNSD ครบรอบ 5 ปีแล้วกัน >_<

    ทำความรู้จักตัวแปรก่อนสร้าง shortcode

    ในการสร้าง shortcode นั้น จะมีตัวแปรอยู่สามตัวสำคัญ ที่เราน่าจะทำความรู้จักกับมันซะหน่อย

    • $atts ตัวนี้ก็แทนค่าที่เราจะใส่ใน shortcode ของเรา
    • $content ตัวนี้แทนข้อความที่อยู่ระหว่าง shortcode ของเรา
    • $tag ตัวนี้แทนคำที่นำไปใช้เป็น shortcode ของเรา

    ยกตัวอย่างเช่น

    [myshortcode id=”rabbitinblack” title=”CSS”]Hello World[/myshortcode]

    $atts คือ id=”rabbitinblack” title=”CSS” หรือเราจะเขียนได้ว่า $atts = array('id' => 'rabbitinblack', 'title' => 'CSS')

    $content คือ Hello World

    และ $tag คือ myshortcode

    วิธีสร้าง shortcode

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

    [php]
    function wp_youtube_video_thumbnail($atts, $content = null) {
    extract(shortcode_atts(array(
    ‘id’ => ”,
    ‘img’ => ‘0’,
    ‘align’=>’left’
    ), $atts));
    $align_class=’align’.$align;
    return ‘<h3>’.$content.'</h3><a href="https://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="https://img.youtube.com/vi/’.$id.’/’.$img.’.jpg" alt="" class="’.$align_class.’" /></a>’;
    }
    add_shortcode(‘youtube_thumb’, ‘wp_youtube_video_thumbnail’);
    [/php]

    มาดูทีละส่วนนะครับ

    function wp_youtube_video_thumbnail($atts, $content = null) อันนี้เราสร้าง function ขึ้นมาชื่อ wp_youtube_video_thumbnail โดยที่จะรับค่า $atts และ $content เข้ามา การใส่ $content = null เพื่อเวลาที่เราไม่ได้ใส่ข้อความ


    extract(shortcode_atts(array(
    'id' => '',
    'img' => '0',
    'align'=>'left'
    ), $atts));

    คือ ค่าที่จะรับเข้ามาจะมี id, img และ align โดยแต่ละตัว จะมีค่ามาตรฐานตามที่เราตั้ง เช่น align มีค่าเป็น left ถ้าเราไม่ได้ใส่ค่า align อะไรเข้ามา

    แล้วหลังจากนั้นเราก็มีการ return ค่ากลับมา โดยค่าที่มีการ return กลับมาก็คือ return '<h3>'.$content.'</h3><a href="https://www.youtube.com/watch?v='.$id.'" target="_blank"><img src="https://img.youtube.com/vi/'.$id.'/'.$img.'.jpg" alt="" class="'.$align_class.'" />'; นั่นคือ ข้อความกับรูปภาพ
    ก็คือ youtube_thumb

    ดังนั้นการใช้งานก็จะประมาณนี้นะครับ

    [youtube_thumb id=”6pA_Tou-DPI” img=”0″ align=”center”]Youtube Video[/youtube]

    ซึ่งเราจะได้ค่าที่หน้าเว็บเป็น

    <h3>Youtube Video

    <img src="https://img.youtube.com/vi/6pA_Tou-DPI/0.jpg" alt="" class="aligncenter">

    ลองนำไปปรับแล้วใช้งานให้ตรงกับความต้องการของเราดูนะครับ

    อ๋อ แต่ถ้าจะง่ายในการเพิ่ม ลด ลบนะครับ ให้สร้าง shortcode.php แล้วเราไป include 'shortcodes.php'; ใน functions.php เพื่อเวลาค้นหาว่าเราสร้าง shortcode อะไรไปบ้าง จะได้มาดูแค่ที่ shortcode.php ที่เดียวก็พอ

  • [WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS

    [WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS

    เวลาเราสร้าง WordPress Theme ขึ้นมานั้น แน่นอนว่า CSS เป็นส่วนประกอบสำคัญอย่างหนึ่งเลย โดยตัว WordPress จะยึดตัว style.css เป็นหลัก และใน style.css นั้นเราควรมี Class เหล่านี้อยู่ด้วย

    Class ที่ควรมีใน CSS ของเรา

    ถ้ามีคำถามว่า ทำไมถึงต้องมี Class เหล่านี้อยู่ด้วย คำตอบคือ จะมี Class บางตัวที่ตัว WordPress จะสร้างขึ้นมา ซึ่งส่วนใหญ่จะเกี่ยวข้องกับการจัดการรูปภาพ เช่น จัดชิดซ้าย, จัดซิดขวา เป็นต้น เราจึงจำเป็นต้องสร้าง CSS มาเพื่อรองรับ Class เหล่านี้

    CSS ตัวอย่างของ Class ที่ควรจะมีใน CSS ของเรา

    [css]
    /* =WordPress Core
    ————————————————————– */
    .alignnone {
    margin: 5px 20px 20px 0;
    }

    .aligncenter,
    div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
    }

    .alignright {
    float:right;
    margin: 5px 0 20px 20px;
    }

    .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
    }

    .aligncenter {
    display: block;
    margin: 5px auto 5px auto;
    }

    a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
    }

    a img.alignnone {
    margin: 5px 20px 20px 0;
    }

    a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
    }

    a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
    }

    .wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
    }

    .wp-caption.alignnone {
    margin: 5px 20px 20px 0;
    }

    .wp-caption.alignleft {
    margin: 5px 20px 20px 0;
    }

    .wp-caption.alignright {
    margin: 5px 0 20px 20px;
    }

    .wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
    }
    [/css]

    ซึ่งตัวอย่างนี้ ก็นำมาจากในเว็บของ wordpress.org เอง ซึ่งเราสามารถนำไปปรับเปลี่ยนได้ตามที่เราต้องการนะครับ

  • [WordPress] วิธีการสร้าง Custom Post Type อย่างง่าย

    [WordPress] วิธีการสร้าง Custom Post Type อย่างง่าย

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

    Custom Post Type

    Custom Post Type นั้นเหมือนเราแยกบทความของเราออกจากหัวข้อ Post หรือ Page มาเป็นหัวข้อของมันเอง อย่างเช่น เราต้องการแยกออกมาเป็นหัวข้อ Book, Product หรือเป็น Customer และ Custom Post Type จะมีประโยชน์มากขึ้นจากการที่เราใช้มันร่วมกับ Custom Field โดยเราอาจจะกำหนดว่า Book ให้ใช้ Custom Field ชนิด A แล้ว Customer ให้ใช้ Custom Field ชนิด B

    วิธีสร้าง Custom Post Type

    เรามีวิธีสร้าง Custom Post Type ด้วยการใส่ Code ลงไปใน functions.php ซึ่งข้อมูลการใช้งานอยู่ที่หน้า Post Type โดยคำสั่งหลักที่ใช้งานในการสร้างก็คือ register_post_type()

    ตัวอย่างการใช้งาน

    [php]
    add_action(‘init’, ‘product_register’);

    function product_register() {
    $args = array(
    ‘label’ => __(‘Products’),
    ‘singular_label’ => __(‘Product’),
    ‘public’ => true,
    ‘show_ui’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘rewrite’ => true,
    ‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’)
    );

    register_post_type( ‘product’ , $args );
    }
    [/php]

    แต่วิธีนี้เราต้องยุ่งยาก วุ่นวายในการเขียน code เพื่อตั้งค่าการใช้งานต่าง ๆ วิธีที่ง่ายกว่าในการสร้าง Custom Post Type ก็คือเราจะใช้ Plugin มาช่วย ซึ่ง Plugin ที่เราใช้ก็คือ Custom Post Type UI

    วิธีสร้าง Custom Post Type อย่างง่าย

    วิธีการติดตั้ง Custom Post Type UI ก็ไม่ยากเลยครับ

    ในส่วนตั้งค่าเพิ่มเติมแต่ละตัวนั้น มีความหมายตามนี้ครับ

    • Public : เลือกระหว่าง True หรือ False โดยการเลือกจะมีผลกับ Exclude From Search, Query Var, Show UI รวมถึงไม่โชว์ในการเลือกเป็น Menu ในหัวข้อ Appearance => Menus
    • Show UI : เลือกระหว่าง True หรือ False หากเลือก False จะทำให้หัวข้อ Custom Post Type ที่สร้างไว้หายไป
    • Has Archive : เลือกระหว่าง True หรือ False ถ้าเลือก True เราจะสามารถโชว์ List ของ Custom Post Type ที่เราสร้างขึ้นมาได้
    • Exclude From Search : เลือก True เพื่อให้ไม่สามารถ Search ได้ในการ Search ด้วยระบบของ WordPress เอง
    • Capability Type : ใส่ระหว่าง post หรือ page เพื่อให้ custom post type นี้มีคุณลักษณะเหมือน post หรือ page
    • Hierarchical : เมื่อเลือก True ตัว custom post type ที่เราสร้างขึ้นจะสามารถเลือกให้บทความใดเป็นบทความย่อยของอีกบทความได้ เหมือน page ที่เราสามารถเลือกหัวข้อไหนเป็น parent ได้
    • Rewrite : เลือก True แล้ว จะเชื่อมต่อกับ Custom Rewrite Slug
    • Custom Rewrite Slug : ถ้าเลือก Rewrite เป็น True ในหัวข้อนี้เราสามารถกำหนดคำที่ใช้ใน url ได้
    • Query Var : ถ้าเราเลือก False จะทำให้เราไม่สามารถ query ข้อมูลของ custom post type ออกมาได้
    • Menu Position : ใส่ตัวเลขเพื่อกำหนดตำแหน่งที่จะวางหัวข้อ custom post type ที่เราสร้างขึ้น โดยปรกติถ้าเราไม่ใส่ตัวเลขอะไรไว้ หัวข้อที่สร้างขึ้นจะอยู่ด้านล่างของ comment โดยค่าตัวเลขต่าง ๆ มีรายละเอียดดังนี้
      • 5 – อยู่ใต้หัวข้อ Posts
      • 10 – อยู่ใต้หัวข้อ Media
      • 15 – อยู่ใต้หัวข้อ Links
      • 20 – อยู่ใต้หัวข้อ Pages
      • 25 – อยู่ใต้หัวข้อ comments
      • 60 – อยู่ใต้เส้นแบ่งอันแรก
      • 65 – อยู่ใต้หัวข้อ Plugins
      • 70 – อยู่ใต้หัวข้อ Users
      • 75 – อยู่ใต้หัวข้อ Tools
      • 80 – อยู่ใต้หัวข้อ Settings
      • 100 – อยู่ใต้เส้นแบ่งอันสอง
    • Show in Menu : ถ้าเลือก False หัวข้อ custom post type ที่เราสร้างขึ้นจะไม่โชว์ที่เมนูด้านซ้ายมือ แต่ถ้าเลือก True เราสามารถกรอกเพื่อให้หัวข้อที่เราสร้างไปเป็นหัวข้อย่อยให้หัวข้อใด โดยเราสามารถหาว่าสิ่งที่ใช้กรอกจาก url ได้
    • Supports : เราสามารถเลือกให้ custom post type ของเราเก็บข้อมูลอะไรบ้าง มีความสามารถอะไรบ้าง
    • Built-in Taxonomies : เลือกว่าให้มี category หรือ tag หรือ taxonomy ให้ใช้งานใน custom post type ที่เราสร้างขึ้นหรือเปล่า

    เป็นอันเสร็จสิ้นในการสร้าง custom post type อย่างง่าย ๆ โดยใช้ Plugin ตัว Custom Post Type UI ช่วยในการสร้าง ลองนำไปประยุกต์ใช้งานกับเว็บเราดูนะครับ