Tag: wordpress

[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 เอง ซึ่งเราสามารถนำไปปรับเปลี่ยนได้ตามที่เราต้องการนะครับ

July 30, 2012
[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 ช่วยในการสร้าง ลองนำไปประยุกต์ใช้งานกับเว็บเราดูนะครับ
July 23, 2012
[Plugin WordPress] Pinterest Pinboard Widget

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

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

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

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

February 28, 2012
[WordPress] ปรับแต่งส่วน Contact Info

ถ้าเราอยู่ในส่วนของ Dashboard ลองเข้าไปดูที่หัวข้อ Users -> Your Profile นะครับ เราจะพบว่าในส่วนของ Contact Info จะมีช่องให้กรอกข้อมูลแบบนี้

แต่ผมคิดว่า เดี๋ยวนี้เนี่ยไอ้เจ้า AIM, Yahoo IM แล้วก็ Jabber มันไม่ค่อยจะมีใครกรอกเท่าไหร่แล้ว

มาเปลี่ยนให้มันอินเทรนกันหน่อย เป็นพวก Facebook, Twitter แล้วก็ LinkedIn กันดีกว่านะครับ

WordPress : ลบ AIM, Yahoo IM และ Jabber แล้วใส่ Facebook, Twitter และ LinkedIn ลงไป

ให้เราเข้าไปใน functions.php แล้วแปะโค้ดเพิ่มเติมครับ

[php]
/* BEGIN Custom User Contact Info */
function extra_contact_info($contactmethods) {
unset($contactmethods[‘aim’]);
unset($contactmethods[‘yim’]);
unset($contactmethods[‘jabber’]);
$contactmethods[‘facebook’] = ‘Facebook’;
$contactmethods[‘twitter’] = ‘Twitter’;
$contactmethods[‘linkedin’] = ‘LinkedIn’;
return $contactmethods;
}
add_filter(‘user_contactmethods’, ‘extra_contact_info’);
/* END Custom User Contact Info */
[/php]

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

แถม : วิธีเรียกใช้งานข้อมูลในส่วนที่เราเพิ่มลงไป

แน่นอนว่า เมื่อเราเปลี่ยนมาใช้เป็น Facebook, Twitter และ LinkedIn ก็อยากมีวิธีที่เรียกใช้งานข้อมูลเหล่านี้ โดยเราใช้โค้ดแบบนี้เพื่อเรียกใช้งาน

[php]
<a href="<?php the_author_meta(‘facebook’, $current_author->ID); ?>">Facebook</a>
<a href="<?php the_author_meta(‘twitter’, $current_author->ID); ?>">Twitter</a>
<a href="<?php the_author_meta(‘linkedin’, $current_author->ID); ?>">LinkedIn</a>
[/php]

February 27, 2012
[WordPress] ตั้งค่า FTP ไว้ จะได้ไม่ต้องใส่บ่อย ๆ

เวลาที่เราอัพเดต หรือติดตั้ง Plugin ตัวใหม่ เราต้องคอยมาใส่ข้อมูลเกี่ยวกับ FTP เพื่อใช้ในการเชื่อมต่อ แต่ถ้าเราไม่อยากจะต้องมากรอกข้อมูลเหล่านี้ตลอดเวลา ให้เข้าไปแก้ไขที่ File wp-config.php โดยเพิ่ม Code นี้เข้าไปนะครับ

[php]
/**
* FTP
**/
define(‘FTP_HOST’, ‘ชื่อ Host ที่เราใช้ หรือจะใส่เป็น localhost ก็ได้’);
define(‘FTP_USER’, ‘ชื่อ Username ที่ใช้’);
define(‘FTP_PASS’, ‘Password ที่ใช้สำหรับ FTP นี้’);
define(‘FTP_BASE’, ‘path ของ FTP ตัวอย่างเช่น /public_html/’);
[/php]

แค่นี้เวลาอัพเดต หรือติดตั้ง Plugin ตัวใหม่ เราก็ไม่ต้องคอยมากรอกข้อมูลเหล่านี้แล้ว

February 22, 2012
[WordPress] เพิ่มปุ่ม Pin it ของ Pinterest

ตอนนี้เว็บ Social Network อีกอันที่ผมว่าน่าสนใจก็คือ Pinterest

Pinterest มันคืออะไร น้อง Bluemoon ได้เขียนอธิบายไว้อันนี้ครับ Pinterest

ส่วนผมจะมาอธิบายวิธีการใส่ปุ่ม Pin it ของมันให้ได้ไปใช้กันครับ โดยปุ่ม Pin it นั้นทางเว็บมีให้เรานำไปใช้งานได้อยู่แล้วที่ Pin it Button แต่เราจะนำมาประยุกต์ใช้งานกับเว็บ WordPress ของเรา

โดยเราเปิด footer.php เพื่อใส่ Code นี้ลงไปครับ

[js]
<script type="text/javascript">
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>
[/js]

และตำแหน่งไหนที่เราจะแปะปุ่ม Pin it ลงไป ก็ให้ใช้ Code นี้ครับ

[php]
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ ); ?>
<a href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>
[/php]

เราก็จะได้ปุ่ม Pin it มาใช้งานแล้วครับ

February 2, 2012