Year: 2012

[WordPress Plugin] เริ่มหัดสร้าง Plugin สำหรับ WordPress กัน
ในการทำเว็บ WordPress นั้น คงไม่ใช่ทุกครั้งที่ตัว WordPress จะตอบสนองความต้องการในการทำเว็บเราได้ทั้งหมด ดังนั้นเราจึงต้องมีการปรับแต่งตัว WordPress ของเราในรูปแบบต่าง ๆ

ทำไมถึงต้องสร้าง Plugin

บางครั้งเราก็ทำการปรับแต่ง code โดยตรง ซึ่งจะมีปัญหาเมื่อ WordPress มีการอัพเดต เพราะ code ที่เราเขียนไว้ก็จะถูกทับโดย code ของตัวอัพเดตจาก WordPress ซึ่งแก้ไขได้โดย
1. อย่าไปอัพเดต WordPress มันเลย
2. อัพเดตตามปรกตินั่นละ แต่มาเขียนใหม่อีกที
3. สร้าง Plugin เพื่อที่เมื่ออัพเดต code ที่เราปรับแต่ง WordPress ไปก็ยังอยู่
ที่พูดถึงไม่เฉพาะตัว WordPress อย่างเดียวนะครับ ยังรวมไปถึง Theme ของ WordPress ด้วย ในการแก้ functions.php เมื่อเวลา Theme ตัวนั้นมีการอัพเดต สิ่งที่เราเขียนเพิ่มเติมลงไป ก็จะถูกทับด้วยไฟล์ที่อัพเดตมา

ทำให้ WordPress เห็น Plugin ที่เราสร้างขึ้น

ก่อนจะสร้าง Plugin มาลองทำให้ WordPress เห็น Plugin ที่เราสร้างขึ้นมาก่อน โดยผลลัพธ์จะเป็นแบบนี้นะครับ

ไปที่ path /wp-content/plugins/ นะครับ แล้วสร้าง folder Plugin ของเรา ผมตั้งชื่อ folder เป็น rabbitinblack แล้วสร้างไฟล์ขึ้นมา ชื่อ rabbitinblack.php

สังเกตจาก Plugin ที่ลง ๆ ไว้ในเว็บตัวเอง ทุกอันชื่อ folder กับชื่อไฟล์ php ที่ใช้ระบุรายละเอียด Plugin จะมีชื่อเหมือนกัน แต่ผมลองตั้งชื่อต่างกัน ก็ได้ผลเหมือนกันนะ แต่ทำตามสากลเค้าไปดีกว่า

มาถึงส่วนที่จะทำให้ WordPress เห็น Plugin ของเราแล้วครับ คือการใส่ code นี้เข้าไป

[php]
<?php
/*
Plugin Name: Test Plugin
Plugin URI: rabbitinblack.com/test
Description: ทดสอบเขียน Plugin WordPress
Author: Rabbitinblack
Author URI: https://rabbitinblack.com/
Version: 1.0
*/
?>
[/php]

และในหน้า Plugin ของเราก็จะปรากฎชื่อ Plugin ที่เราสร้างขึ้นมา

ทดลองสร้าง Plugin

คราวนี้เรามาทดลองสร้าง Plugin กันดูนะครับ ผมจะลองสร้าง Plugin ที่จะใส่คำว่า Title : ไว้ด้านหน้าของหัวข้อทุกตัวนะครับ code ก็จะประมาณนี้

[php]
<?php
/*
Plugin Name: Test Plugin
Plugin URI: rabbitinblack.com/test
Description: ทดสอบเขียน Plugin WordPress
Author: Rabbitinblack
Author URI: https://rabbitinblack.com/
Version: 1.0
*/

function add_title_word($text) {
return ‘Title : ‘.$text;
}

add_filter(‘the_title’,’add_title_word’);

?>
[/php]

ซึ่งผลลัพธ์ที่ได้ ก็เป็นแบบนี้ครับ

หัวข้อนี้คงจบแค่นี้ ไว้ผมหัดทำเพิ่มเติมได้ขนาดไหนแล้ว จะมาเขียนหัีวข้อต่อ ๆ ไปนะครับ ^^
January 11, 2012
[WordPress] ใส่ class ให้ tag body เพื่อใช้ในการปรับแต่ง
ในการเขียนเว็บนั้น ตัว tag body ถือว่าเป็น tag ที่คลุมตัวเนื้อหาของเราไว้ ดังนั้นการที่เราใส่ class ให้กับตัว body ก็จะทำให้เราสามารถใช้ CSS ในการควบคุมการแสดงผลได้หลากหลายมากขึ้น โดย WordPress เองได้เตรียมคำสั่งที่ใช้สำหรับใส่ class ให้กับตัว tag body อยู่แล้ว นั่นก็คือ body_class เรามาดูวิธีการใช้งาน body_class กันนะครับ

body_class

วิธีใช้ง่าย ๆ ครับ ก็แค่ใส่ body_class ไปใน tag body เลยครับ

[php gutter=”false”]
<body <?php body_class(); ?>>
[/php]

แล้ว WordPress จะสร้าง class มาให้เราเอง โดยตัวอย่าง class ที่สร้างขึ้นให้ เช่น
- home : ถ้าเป็นหน้า home
- search : ถ้าเป็นหน้า search
- postid-XXX : ถ้าเป็นหน้า post จะใส่ postid- ตามด้วยเลข ID ของ post นั้น
- logged-in : ถ้าเราทำการ login ไว้อยู่
- page-id-XXX : ถ้าเป็นหน้า page จะใส่ page-id- ตามด้วยเลข ID ของ page นั้น
เป็นต้น

ตัวอย่าง class ที่ WordPress สร้างขึ้น

[php gutter=”false”]
<body class="page page-id-18 page-template page-template-page-tools-php logged-in admin-bar">
[/php]

จะเห็นว่า มันได้สร้าง class ต่าง ๆ ขึ้นมา โดย class ที่สร้างขึ้นมานั้นก็บอกได้ว่า นี่เป็นหน้า page โดยเป็น id เลขที่ 18 ใช้ template คือ page-tools.php และ login อยู่ รวมถึง admin-bar ปรากฎอยู่ แต่ class ที่ WordPress สร้างขึ้นนั้น จะไม่มีเกี่ยวกับ category เลย เราจะมีวิธียังไง ให้มันมี class เกี่ยวกับ category ละ

เพิ่ม class เกี่ยวกับ category ลงใน body_class

ให้นำ code นี้ไปแปะใน functions.php

[php]
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter(‘body_class’, ‘category_id_class’);
[/php]

โดยเราสามารถนำไปประยุกต์ใช้งานได้ ว่าอยากจะให้เป็น class อย่างไรบ้าง อย่าง code ที่ยกตัวอย่างนั้น จะมี class เป็นชื่อของ category ผสมไปใน body_class ปรกติด้วย

วิธีใช้งาน body_class เพิ่มเติม

เราสามารถเพิ่ม class ที่เราต้องการได้ในคำสั่ง body_class ได้ง่าย ๆ โดย

[php gutter=”false”]
<body <?php body_class( ‘rabbitinblack’ ); ?>>
[/php]

คือ การใส่ class ชื่อ rabbitinblack เข้าไปเพิ่มเติมจาก body_class เดิม

นำ body_class ไปประยุกต์ใช้กับ CSS

การที่เราใส่ class ให้ tag body นั้น จะทำให้เราสามารถควบคุมการแสดงผลได้มากขึ้น โดยสมมติว่า ปรกติ div ที่มี id ชื่อ content กว้าง 900px แต่ในหน้า page ที่มี id เป็น 18 จะให้กว้างแค่ 500px เราก็สร้าง CSS แบบนี้ครับ

[css]
#content { width:900px; }
.page-id-18 #content { width:500px; }
[/css]

ซึ่ง class ที่สร้างมาก็มีอยู่หลากหลาย ดังนั้นเราก็ทำ CSS ของเราในการควบคุมได้มากขึ้นจากเดิม ลองไปประยุกต์ใช้งานดูนะครับ
January 9, 2012
[Plugin WordPress] ทำให้ PHP ใช้ได้ใน Posts และ Pages

บางครั้งในแต่ละหน้าของ Post หรือ Page รวมถึงในส่วนของ Widget ของเรานั้น เราก็อยากจะแทรก code PHP โดยที่เราไม่ต้องไปเขียนแก้ที่ตัวไฟล์ อยากจะใส่ในช่องที่ให้ edit content มากกว่า ลอง Plugin ตัวนี้ครับ

Exec-PHP

โดย Exec-PHP นั้นเมื่อติดตั้งแล้วจะอยู่ในเมนูหัวข้อ Settings นะครับ

ตัว Exec-PHP ไม่ได้มีอะไรให้เราปรับแต่งมากมาย

เรามาลองเขียน Post ขึ้นมาทดสอบการใช้งานเบื้องต้นนะครับ

ผลลัพธ์ที่ได้ เหมือนที่เราเขียน code PHP ลงในไฟล์ตามปรกติ

แต่ในหน้าที่เราเขียน Post นั้นคงจะเห็นกล่องข้อความเตือนสีเหลืองด้านบนนะครับ ถ้าเราต้องการปิด ไม่ให้มันแสดงผล ให้เข้าไปที่ส่วนของเมนู Users ในหัวข้อ Your Profile นะครับ

ที่หัวข้อด้านล่างจะมีหัวข้อแบบนี้ครับ

ให้ติ๊กเลือกเพื่อที่จะปิดไม่ให้มันมีกล่องสีเหลืองเตือนทุกครั้ง

Plugin : Exec-PHP

January 3, 2012
วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme

สิ่งหนึ่งที่ทำให้ WordPress เป็นที่นิยมก็คือ มี Theme ให้เลือกมากมาย ไม่ว่าจะเป็นแบบฟรี หรือแบบเสียเงิน เรามาดูวิธีการปรับแต่ง Theme กันนะครับ

วิธีใช้ WordPress : Themes

ที่เมนู Appearance จะมีหัวข้อ Themes อยู่

โดยในส่วน Current Theme นั้นคือ Theme ที่เราใช้งานอยู่ และมีรายละเอียดต่าง ๆ ของ Theme อยู่

ส่วน Available Themes คือ Theme ที่เราได้ติดตั้งไว้

เราสามารถติดตั้ง Theme เพิ่มได้ในหัวข้อ Install Themes ซึ่งเราสามารถ search หา Theme เพื่อใช้งานได้

แต่ถ้าไม่อยากค้นหา แนะนำให้เลือกหัวข้อ Featured ซึ่งจะมี Theme ที่แนะนำอยู่

สมมติว่าผมเจอ Theme ที่ผมต้องการแล้ว เราสามารถกดที่ preview เพื่อดูตัวอย่างก่อน

หรือกด Install เพื่อติดตั้ง

กรอกข้อมูลของ FTP ของเราเพื่อทำการอัพโหลด Theme เข้าเว็บเรา

หลังติดตั้งเสร็จแล้ว เราก็กด Activate เลยครับ

ในส่วนของ Current Theme จะเปลี่ยนไปเป็น Theme ที่เราเพิ่งติดตั้งไป

หน้าเว็บของเราก็จะเป็น Theme ที่เราติดตั้งแล้วครับ

แต่ถ้าเรามีไฟล์ Theme ที่เราต้องการอยู่แล้ว ให้ทำการ Upload ได้เลยครับ

ซึ่งขั้นตอนต่าง ๆ ก็คล้าย ๆ กับการ Search หาเพื่อติดตั้งเลยครับ ก็ใส่ข้อมูล FTP ของเรา และ Activate Theme ที่เราติดตั้ง

หลังจากนี้เวลาเจอ theme ที่ถูกใจ เราก็ดาวน์โหลดมาติดตั้งเว็บของเราได้แล้วนะครับ ^^

January 2, 2012
ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ
คงมีหลาย ๆ คนที่อยากมีเว็บเป็นของตัวเอง แต่ก็กลัวที่จะเสียเงินไปแล้วไม่คุ้มค่ากับสิ่งที่ได้มา ถ้าแบบนั้นลองมีเว็บของตัวเองแบบฟรี ๆ ที่ WordPress.com ดิ

WordPress.com มีอะไรให้เราบ้าง

มาดูกันนะครับ ว่าทำเว็บฟรีที่ WordPress.com นั้นมีอะไรให้เราบ้าง
- Domain name ที่เราสามารถตั้งเองได้ แต่ต้องอยู่ภายใต้ wordpress.com เช่น rabbitinblack.wordpress.com หรือ snsd.wordpress.com อะไรแบบนั้น
- Theme มากมายให้เราเลือกใช้งาน
- พื้นที่ 3 GB ในการใช้งาน
- มีการเก็บข้อมูลผู้เข้าชมเว็บให้ และแสดงข้อมูลให้เราดูเข้าใจง่าย
- ได้เว็บทันที หลังสมัครใช้งาน
แต่เนื่องจากเป็นของฟรี เราก็ต้องเข้าใจถึงข้อจำกัดต่าง ๆ ที่เราไม่สามารถใช้งานได้ หรืออะไรที่เว็บที่ทำด้วย WordPress ทำได้ แต่เว็บฟรีใน wordpress.com ทำไม่ได้

ข้อจำกัดของ WordPress.com

ข้อจำกัดหลัก ๆ ที่น่าจะรู้ไว้ในการทำเว็บฟรีที่ WordPress.com นั้นก็คือ
- ไม่สามารถลง Theme เพิ่มได้จากที่ WordPress.com มีให้ใช้ (แต่ที่มีให้ก็เยอะพอสมควรแล้ว แค่อาจจะยังไม่ถูกใจเรา)
- ไม่สามารถเปลี่ยน Layout ของ Theme ที่ใช้ได้
- ลง Plugin เพิ่มไม่ได้ ใช้ได้เพียง Plugin ที่ทาง WordPress.com กำหนดไว้ให้
แต่ข้อจำกัดบางอย่าง ก็แก้ไขได้ด้วยเงินครับ 555

WordPress.com เองก็มีให้เราจ่ายเงินเพื่อเปิดใช้งานในส่วนที่ถูกจำกัดไว้ เป็นราคารายปีแล้วแต่ส่วนที่เราต้องการใช้งาน

เริ่มต้นสมัคร WordPress.com

ไปที่เว็บ WordPress.com เลยครับ

หลังจากที่เราคลิ๊ก Sign Up แล้ว จะเป็นหน้าให้เราสมัคร WordPress.com กรอกข้อมูลต่าง ๆ ของเรา

โดยข้อมูลที่เราต้องกรอกก็มีดังนี้
- Blog Address : URL ของเว็บเรานั่นละ จะตามด้วย .wordpress.com หรือจะเลือกอย่างอื่นก็ได้ แต่ต้องเสียเงิน
- Username : ชื่อที่ใช้ในการเข้าใช้งาน
- Password : Password ที่จะใช้คู่กับ Username เพื่อเข้าใช้งาน
- E-mail Address : ให้ใช้ E-mail ที่มีการใช้งานจริง เพราะทาง WordPress.com จะส่งเมลไปเพื่อให้เรายืนยันการใช้งาน
- What language will you be blogging in ? : คือเว็บที่เราจะทำ จะทำเป็นภาษาอะไร
เลือก Create Blog เพื่อสมัคร หรือจะ Upgrade ซึ่งจะเสียเงิน แต่มีคุณสมบัติเพิ่มขึ้น หลังจากนั้นจะพบข้อความนี้ ให้ไปเช็คเมลที่เราใช้สมัครไว้

ในส่วนด้านล่างให้เรากรอกข้อมูลของเราลงไปครับ

เนื้อหาของอีเมลจะประมาณแบบนี้ครับ

และแล้วก็ได้เว็บฟรี ๆ เป็นของเราเองแล้ว

ถ้ากลัวว่า WordPress จะใช้งานยาก ลองศึกษาการใช้งานได้นะครับ แต่มันก็ฟรีอยู่แล้ว ดังนั้นลองใช้ก่อนก็ได้ไม่เสียหายอะไรนะครับ ^^

บทความสอน วิธีใช้ WordPress
January 1, 2012