Blog

  • [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 ช่วยในการสร้าง ลองนำไปประยุกต์ใช้งานกับเว็บเราดูนะครับ

  • [CSS] พื้นฐานการเรียกใช้งาน CSS

    [CSS] พื้นฐานการเรียกใช้งาน CSS

    เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

    พื้นฐานการเรียกใช้งาน CSS

    เรามาดูการเรียกใช้งานแบบหลัก ๆ ที่เห็นกันบ่อย ๆ นะครับ ก็จะมี Inline style, เขียนใน >head< หรือเขียนเรียกจาก >link<

    Inline style

    ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น

    <h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>

    รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

    เขียนลงไปใน <head>

    ก็คือการกำหนดคุณสมบัติให้ element ตัวไหน มีคุณสมบัติตามที่เรากำหนด โดยคลุมด้วย <style></style>

    อย่างเช่น

    <head>
      <style> h1 { font-size:32px; color:#FF0000; } </style>
    </head>

    ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย

    <head>
      <link rel="stylesheet" href="style.css" />
    </head>

    แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

    หลังจากที่เรียนรู้เรื่องเกี่ยวกับ ID และ Class เสร็จแล้ว คราวนี้เรามาดูกันนะครับ ว่าจะนำไปใช้กับ CSS ได้อย่างไรบ้าง

    <h1 id="heading1" class="title1">Kwon Yuri</h1>

    ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ

    // ใช้ชื่อ Tag HTML
    h1 {
      font-size: 32px;
      color: #FF0000;
    }
    
    // ใช้ชื่อ ID
    #heading1 {
      font-size: 32px;
      color: #FF0000;
    }
    
    // ใช้ชื่อ Class
    .title1 {
      font-size: 32px;
      color: #FF0000;
    }

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

  • [WordPress] Reference วิธีการใช้งาน WP_Query

    [WordPress] Reference วิธีการใช้งาน WP_Query

    ในการ query เพื่อนำข้อมูลออกมาใช้งานใน WordPress นั้น มีอยู่หลายวิธี 1 ในนั้นก็คือ WP_Query ซึ่งวิธีการใช้งาน WP_Query นั้น ในเว็บของ WordPress เองก็มีอธิบายการใช้งานไว้แล้วครับ

    แต่ในเว็บ WordPress เองอธิบายไว้ซะละเอียดเกิน จนอาจจะยาวเกินไปที่เราจะทำการค้นหามาใช้งาน จนผมไปเจอใน Github คุณ Mark Luetke ได้ทำ Reference สำหรับใช้งาน WP_Query ไว้แบบนี้ครับ

    วิธีการใช้งาน WP_Query

    <?php
    /**
    * WordPress Query Comprehensive Reference
    * Compiled by luetkemj – luetkemj.com
    *
    * CODEX: https://codex.wordpress.org/Class_Reference/WP_Query
    * Source: https://core.trac.wordpress.org/browser/tags/3.3.1/wp-includes/query.php
    */
    
    $args = array(
        //////Author Parameters – Show posts associated with certain author.
        'author' => 1,2,3, //(int) – use author id [use minus (-) to exclude authors by ID ex. 'author' => -1,-2,-3,]
        'author_name' => 'luetkemj', //(string) – use 'user_nicename' (NOT name)
    
        //////Category Parameters – Show posts associated with certain categories.
        'cat' => 5,//(int) – use category id.
        'category_name' => 'staff', 'news', //(string) – use category slug (NOT name).
        'category__and' => array( 2, 6 ), //(array) – use category id.
        'category__in' => array( 2, 6 ), //(array) – use category id.
        'category__not_in' => array( 2, 6 ), //(array) – use category id.
    
        //////Tag Parameters – Show posts associated with certain tags.
        'tag' => 'cooking', //(string) – use tag slug.
        'tag_id' => 5, //(int) – use tag id.
        'tag__and' => array( 2, 6), //(array) – use tag ids.
        'tag__in' => array( 2, 6), //(array) – use tag ids.
        'tag__not_in' => array( 2, 6), //(array) – use tag ids.
        'tag_slug__and' => array( 2, 6), //(array) – use tag slugs.
        'tag_slug__in' => array( 2, 6), //(array) – use tag slugs.
    
        //////Taxonomy Parameters – Show posts associated with certain taxonomy.
        //Important Note: tax_query takes an array of tax query arguments arrays (it takes an array of arrays)
        //This construct allows you to query multiple taxonomies by using the relation parameter in the first (outer) array to describe the boolean relationship between the taxonomy queries.
        'tax_query' => array( //(array) – use taxonomy parameters (available with Version 3.1).
        'relation' => 'AND', //(string) – Possible values are 'AND' or 'OR' and is the equivalent of ruuning a JOIN for each taxonomy
            array(
                'taxonomy' => 'color', //(string) – Taxonomy.
                'field' => 'slug', //(string) – Select taxonomy term by ('id' or 'slug')
                'terms' => array( 'red', 'blue' ), //(int/string/array) – Taxonomy term(s).
                'include_children' => true, //(bool) – Whether or not to include children for hierarchical taxonomies. Defaults to true.
                'operator' => 'IN' //(string) – Operator to test. Possible values are 'IN', 'NOT IN', 'AND'.
            ),
            array(
                'taxonomy' => 'actor',
                'field' => 'id',
                'terms' => array( 103, 115, 206 ),
                'include_children' => false,
                'operator' => 'NOT IN'
            )
        ),
    
        //////Post & Page Parameters – Display content based on post and page parameters.
        'p' => 1, //(int) – use post id.
        'name' => 'hello-world', //(string) – use post slug.
        'page_id' => 1, //(int) – use page id.
        'pagename' => 'sample-page', //(string) – use page slug.
        'pagename' => 'contact_us/canada', //(string) – Display child page using the slug of the parent and the child page, separated ba slash
        'post_parent' => 1, //(int) – use page id. Return just the child Pages.
        'post__in' => array(1,2,3), //(array) – use post ids. Specify posts to retrieve.
        'post__not_in' => array(1,2,3), //(array) – use post ids. Specify post NOT to retrieve.
        //NOTE: you cannot combine 'post__in' and 'post__not_in' in the same query
    
        //////Type & Status Parameters – Show posts associated with certain type or status.
        'post_type' => array( //(string / array) – use post types. Retrieves posts by Post Types, default value is 'post';
            'post', // – a post.
            'page', // – a page.
            'revision', // – a revision.
            'attachment', // – an attachment. The default WP_Query sets 'post_status'=>'published', but atchments default to 'post_status'=>'inherit' so you'll need to set the status to 'inherit' or 'any'.
            'any', // – retrieves any type except revisions and types with 'exclude_from_search' set to true.
            'my-post-type' // – Custom Post Types (e.g. movies)
        ),
        'post_status' => array( //(string / array) – use post status. Retrieves posts by Post Status, default value i'publish'.
            'publish', // – a published post or page.
            'pending', // – post is pending review.
            'draft', // – a post in draft status.
            'auto-draft' // – a newly created post, with no content.
            'future' // – a post to publish in the future.
            'private' // – not visible to users who are not logged in.
            'inherit' // – a revision. see get_children.
            'trash' // – post is in trashbin (available with Version 2.9).
            'any' // – retrieves any status except those from post types with 'exclude_from_search' set to true.
        ),
    
        //////Pagination Parameters
        'posts_per_page' => 10, //(int) – number of post to show per page (available with Version 2.1). Use 'posts_per_page'=1 to show all posts. Note if the query is in a feed, wordpress overwrites this parameter with the stored 'posts_per_rss' option. Treimpose the limit, try using the 'post_limits' filter, or filter 'pre_option_posts_per_rss' and return -1
        'posts_per_archive_page' => 10, //(int) – number of posts to show per page – on archive pages only. Over-rides showposts anposts_per_page on pages where is_archive() or is_search() would be true
        'nopaging' => false, //(bool) – show all posts or use pagination. Default value is 'false', use paging.
        'paged' => get_query_var('page'), //(int) – number of page. Show the posts that would normally show up just on page X when usinthe “Older Entries” link.
        //NOTE: You should set get_query_var( 'page' ); if you want your query to work with pagination. Since WordPress 3.0.2, you dget_query_var( 'page' ) instead of get_query_var( 'paged' ). The pagination parameter 'paged' for WP_Query() remains the same.
    
        //////Offset Parameter
        'offset' => 3, //(int) – number of post to displace or pass over.
    
        //////Order & Orderby Parameters – Sort retrieved posts.
        'order' => 'DESC', //(string) – Designates the ascending or descending order of the 'orderby' parameter. Defaultto 'DESC'.
        //Possible Values:
        //'ASC' – ascending order from lowest to highest values (1, 2, 3; a, b, c).
        //'DESC' – descending order from highest to lowest values (3, 2, 1; c, b, a).
        'orderby' => 'date', //(string) – Sort retrieved posts by parameter. Defaults to 'date'.
        //Possible Values://
        //'none' – No order (available with Version 2.8).
        //'ID' – Order by post id. Note the captialization.
        //'author' – Order by author.
        //'title' – Order by title.
        //'date' – Order by date.
        //'modified' – Order by last modified date.
        //'parent' – Order by post/page parent id.
        //'rand' – Random order.
        //'comment_count' – Order by number of comments (available with Version 2.9).
        //'menu_order' – Order by Page Order. Used most often for Pages (Order field in the EdiPage Attributes box) and for Attachments (the integer fields in the Insert / Upload MediGallery dialog), but could be used for any post type with distinct 'menu_order' values (theall default to 0).
        //'meta_value' – Note that a 'meta_key=keyname' must also be present in the query. Note alsthat the sorting will be alphabetical which is fine for strings (i.e. words), but can bunexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as yomight naturally expect).
        //'meta_value_num' – Order by numeric meta value (available with Version 2.8). Also notthat a 'meta_key=keyname' must also be present in the query. This value allows for numericasorting as noted above in 'meta_value'.
    
        //////Sticky Post Parameters – Show Sticky Posts or ignore them.
        'ignore_sticky_posts' => false, //(bool) – ignore sticky posts or not. Default value is false, don't ignore. Ignore/excludsticky posts being included at the beginning of posts returned, but the sticky post will still be returned in the natural order othat list of posts returned.
        //NOTE: For more info on sticky post queries see: https://codex.wordpress.org/Class_Reference/WP_Query#Sticky_Post_Parameters
    
        //////Time Parameters – Show posts associated with a certain time period.
        'year' => 2012, //(int) – 4 digit year (e.g. 2011).
        'monthnum' => 3, //(int) – Month number (from 1 to 12).
        'w' => 25, //(int) – Week of the year (from 0 to 53). Uses the MySQL WEEK command. The mode is dependenon the “start_of_week” option.
        'day' => 17, //(int) – Day of the month (from 1 to 31).
        'hour' => 13, //(int) – Hour (from 0 to 23).
        'minute' => 19, //(int) – Minute (from 0 to 60).
        'second' => 30, //(int) – Second (0 to 60).
    
        //////Custom Field Parameters – Show posts associated with a certain custom field.
        'meta_key' => 'key', //(string) – Custom field key.
        'meta_value' => 'value', //(string) – Custom field value.
        'meta_value_num' => 10, //(number) – Custom field value.
        'meta_compare' => '=', //(string) – Operator to test the 'meta_value'. Possible values are '!=', '>', '>=', '<', or ='. Default value is '='.
        'meta_query' => array( //(array) – Custom field parameters (available with Version 3.1).
            array(
                'key' => 'color', //(string) – Custom field key.
                'value' => 'blue' //(string/array) – Custom field value (Note: Array support is limited to a compare value of 'IN', 'NOT IN', 'BETWEEN', or 'NOT BETWEEN')
                'type' => 'CHAR', //(string) – Custom field type. Possible values are 'NUMERIC', 'BINARY', 'CHAR', 'DATE', 'DATETIME', 'DECIMAL', 'SIGNED', 'TIME', 'UNSIGNED'. Default value is 'CHAR'.
                'compare' => '=' //(string) – Operator to test. Possible values are '=', '!=', '>', '>=', '<', '<=', 'LIKE', 'NOT LIKE', 'IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN'. Default value is '='.
            ),
            array(
                'key' => 'price',
                'value' => array( 1,200 ),
                'compare' => 'NOT LIKE'
            )
        ),
        //////Permission Parameters – Display published posts, as well as private posts, if the user has the appropriate capability:
        'perm' => 'readable' //(string) Possible values are 'readable', 'editable' (possible more ie all capabilitiealthough I have not tested)
    
        ////Parameters relating to caching
        'no_found_rows' => false, //(bool) Default is false. WordPress uses SQL_CALC_FOUND_ROWS in most queries in order timplement pagination. Even when you don't need pagination at all. By Setting this parameter to true you are telling wordPress not tcount the total rows and reducing load on the DB. Pagination will NOT WORK when this parameter is set to true. For more informatiosee: https://flavio.tordini.org/speed-up-wordpress-get_posts-and-query_posts-functions
        'cache_results' => true, //(bool) Default is true
        'update_post_term_cache' => true, //(bool) Default is true
        'update_post_meta_cache' => true //(bool) Default is true
        //NOTE Caching is a good thing. Setting these to false is generally not advised. For more info on usage see: https://codex.wordpresorg/Class_Reference/WP_Query#Permission_Parameters
    
        //////Post Field Parameters
        //Not sure what these do. For more info see: https://codex.wordpress.org/Class_Reference/WP_Query#Post_Field_Parameters
    
        //////Filters
        //For more information on available Filters see: https://codex.wordpress.org/Class_Reference/WP_Query#Filters
    );
    
    $the_query = new WP_Query( $args );
    
    // The Loop
    if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
            // Do Stuff
        endwhile;
    endif;
    
    // Reset Post Data
    wp_reset_postdata();
    
    ?>

    หรือไปดูใน Github : WordPress Query Comprehensive Reference

  • แนะนำ Free Text Editor สำหรับเริ่มหัดทำเว็บ

    แนะนำ Free Text Editor สำหรับเริ่มหัดทำเว็บ

    มีหลาย ๆ คนมาถามผมเหมือนกัน ว่าใช้ Text Editor ตัวไหนดีถ้าจะเริ่มหัดทำเว็บ ซึ่งตัว Text Editor มีอยู่มากมายให้เลือกใช้จริง ๆ ไม่ว่าจะเป็น EditPlus, UltraEdit, E Text Editor หรือจะเป็น DreamWeaver แต่พวกที่พูดถึงไป มันเสียเงินทั้งนั้น เราเพิ่งเริ่มคิดที่จะหัดทำ คงยังไม่อยากจะเสียเงิน ผมเลยจะแนะนำ Text Editor ที่เป็นของฟรีให้ได้เลือกใช้งานกัน

    Notepad++

    Notepad++

    Download ที่นี่ : Notepad++

    Programmer’s Notepad

    Programmer's Notepad

    Download ที่นี่ : Programmer’s Notepad

    Sublime Text

    Sublime Text

    จริง ๆ แล้ว Sublime Text นั้นก็มีในแบบเสียเงิน แต่สำหรับคนเริ่มต้นแล้ว เท่าที่ฟรีของมันก็เพียงพอแล้วครับ

    Download ที่นี่ : Sublime Text

    ส่วนผมเอง ใช้ Sublime Text แบบเสียเงิน แล้วเพิ่มพวก Zen Coding, jQuery Snippet, WordPress Snippet เข้าไป เท่านี้ก็ครบเท่าที่ผมต้องการแล้วครับ

  • [CSS3] ประยุกต์การใช้งานกับ text-shadow

    [CSS3] ประยุกต์การใช้งานกับ text-shadow

    text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

    CSS3 : วิธีการใช้ text-shadow

    รูปแบบของ value ในการใช้งาน text-shadow ก็เป็นลักษณะแบบนี้

    [CSS3] ประยุกต์การใช้งาน text-shadow [1]

    [css]
    text-shadow: 2px 4px 3px #FF0099;
    [/css]

    โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้

    1. ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน
    2. ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง
    3. ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
    4. ค่าตัวสุดท้าย สีของเงา เราต้องการสีของเงาเป็นสีอะไร ก็ใส่ลงไปเลยครับ

    จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [2]

    ในการใส่ค่าสีของเงานั้น เราสามารถใช้แบบ rgba ได้ด้วย การใช้แบบ rgba เพื่อที่เราจะได้สามารถกำหนด opacity ให้กับสีเงาได้ด้วย โดยการใส่ค่า rgba มีลักษณะแบบนี้

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [3]

    [css]
    text-shadow: 2px 4px 3px rgba(255,0,153,1);
    [/css]

    โดยค่าที่ใส่ให้กับสีนั้น เราใส่ค่าได้ตั้งแต่ 0 – 255 และค่าสุดท้าย opacity นั้นใส่ค่าได้ตั้งแต่ 0 – 1

    ถ้าเราลองปรับค่า opacity ดู แล้วเทียบกันจะได้แบบนี้ครับ

    [css]
    text-shadow: 2px 4px 3px rgba(255,0,153,1);
    text-shadow: 2px 4px 3px rgba(255,0,153,0.5);
    [/css]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [4]

    CSS3 : ใส่เงาหลาย ๆ ชั้น

    การใช้ text-shadow นั้น เราสามารถใส่ค่าให้ได้มากกว่า 1 ชั้น โดยแต่ละชั้นนั้น เราจะคั่นด้วย , อย่างเช่น

    [css]
    text-shadow: 3px 3px 5px #777, -2px -3px 7px #FF0000;
    [/css]

    หรือ

    [css]
    text-shadow:0px 0px 4px #FFFFFF, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
    [/css]

    คราวนี้เราลองมาประยุกต์ใช้งานแบบง่าย ๆ ดูนะครับ

    text-shadow : ทำตัวอักษรแบบ inset

    เราจะทำตัวอักษรแบบ inset ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

    [css]
    color: #CCC;
    text-shadow : 0px -1px 1px #000;
    [/css]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [5]

    text-shadow : ทำตัวอักษรแบบ embross

    เราจะทำตัวอักษรแบบ embross ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

    [css]
    color:#CCC;
    text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;
    [/css]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [6]

    text-shadow : ทำตัวอักษรแบบไฟนีออน

    เราจะทำตัวอักษรแบบไฟนีออน ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

    [css]
    color:#ffffff;
    text-shadow:0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
    [/css]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [7]

    ระหว่างที่เรากำลังดีใจกับการเรียนรู้ text-shadow อยู่นั่น ลองมาดูกันก่อนว่า Browser ไหนใช้งานกันได้บ้าง

    text-shadow กับ browser ที่สนับสนุน

    ผมก็เข้าไปเช็คดูในเว็บ When can I use ก็พบว่า text-shadow ยังไม่สนับสนุนใน IE9 แต่จะสนับสนุนเมื่อถึง IE10

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [8]

    ก่อน IE10 จะมา เราก็คงทำได้แค่ใช้อย่างอื่นแทนกันไปก่อน โดยสำหรับ IE นั้น text-shadow เราจะแทนด้วย

    [css]
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
    [/css]

    แต่ผมไม่ขออธิบายถึงมันนะครับ ผมนั่งรอ IE10 แล้วกัน ^^