[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 แบบง่าย ๆ เพื่อสะดวกเวลาใช้งาน

ถ้าเคยใช้งาน 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="http://www.youtube.com/watch?v=’.$id.’" target="_blank"><img src="http://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="http://www.youtube.com/watch?v='.$id.'" target="_blank"><img src="http://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="http://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 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 นั้น เราจะทราบกันอยู่แล้วว่า บทความของเราจะถูกแบ่งออกเป็น 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 ช่วยในการสร้าง ลองนำไปประยุกต์ใช้งานกับเว็บเราดูนะครับ

[Plugin WordPress] Pinterest Pinboard Widget

หลังจากที่เคยแนะนำการใส่ปุ่ม Pin it ของ Pinterest ในเว็บ WordPress ของเราแล้ว ([WordPress] เพิ่มปุ่ม Pin it ของ Pinterest) มาครั้งนี้ก็มาแนะนำ Plugin สำหรับดึงข้อมูลใน Pinboard ของเรามาโชว์ Plugin ตัวนั้นก็คือ

[Plugin WordPress] Pinterest Pinboard Widget [1]

หลังจากที่โหลดตัว Plugin มาติดตั้งแล้ว ให้เข้าไปในส่วน Widget เราจะได้พบ Widget ตัวใหม่ ชื่อ Pinterest Pinboard ก็กรอกข้อมูลลงไปนะครับ ว่าจะให้ดึงข้อมูลมาจาก User ไหน

[Plugin WordPress] Pinterest Pinboard Widget [2]

และเมื่อไปดูที่หน้าเว็บ เราก็จะได้ตัว Pinboard มาโชว์ในหน้าเว็บของเราแล้ว

[Plugin WordPress] Pinterest Pinboard Widget [3]

Download Plugin ได้ที่ : Pinterest Pinboard Widget