สวัสดีครับผม ในช่วงเดือนที่ผ่านมาผมมีโปรเจ็คทำเว็บให้ลูกค้าอยู่โปรเจ็คหนึ่ง เป็นเว็บไซต์แนวประกาศซื้อขายคอนโดและมีการรีวิวคอนโดด้วยครับ หลังจากที่เราคุยเนื้องานกันแล้ว ทางลูกค้าบอกว่าอยากจะได้เป็นระบบเว็บบอร์ด ซึ่งให้มีการประกาศแยกเป็นหมวดหมู่ด้วย พอทราบดังนั้นแล้ว Solution ที่ผมเตรียมไว้ให้ก็คือ ผมจะใช้ WordPress + bbPress ในการพัฒนาครับ เพราะตัว bbPress เองก็ตอบโจทย์ไป 80% แล้ว เดี๋ยวอีก 20% มาเขียนโค้ดเพิ่มเติมได้ครับ
อย่างไรก็แล้วแต่ตัว bbPress แม้จะเป็นปลักอินที่เจ๋งมากในการทำเว็บบอร์ด แต่ก็ยังไม่ตอบโจทย์ทั้งหมดครับ เนื่องจากว่าสิ่งที่ลูกค้าต้องการ มันเฉพาะมากๆ จึงต้องมีการโมครับ ความต้องการของลูกค้าหนึ่งในนั้นคือ ให้คนใช้งานที่มาตั้งกระทู้ เลือกได้ว่า กระทู้ที่ว่าเนี่ย เป็นกระทู้ขาย ซื้อ บลาๆ ซึ่งตัวเลือกของเขาก็คือ Sell, Buy, Rent, Info, Owner, Agency ครับ
จริงๆแล้ว กระทู้ ก็เป็น Custom Post Type รูปแบบหนึ่ง ซึ่งการที่จะให้กระทู้เราเก็บค่าตัวเลือกแบบที่ต้องการได้ เราต้องสร้าง Custom Field ขึ้นมาครับ วิธีการสร้างที่ง่ายที่สุดที่ผมเลือกใช้ก็คือใช้ปลักอิน Advanced Custom Fields
ตัว Advanced Custom Fields ใช้งานได้ดีมากครับ แต่ว่า มันกลับไม่สามารถเอามาแสดงผลเวลาจะแก้ไขที่หน้าเว็บได้นะสิครับ นี่จึงเป็นโจทย์ต่อมาที่ผมต้องทำการแก้ไข
และนี่จึงเป็นที่มาของการแบ่งปันความรู้ในการทำระบบตัวนี้ครับ มาดูกัน
ภาพด้านบนคือสิ่งที่ผมต้องการครับ เวลาตั้งกระทู้ จะให้มันมีตัวเลือกแบบนี้ขึ้นมาด้วย ตรงประเภทของกระทู้ครับ ซึ่งไอ้การเลือกได้หลายๆตัว เราเรียกว่า Options ครับ
และภาพนี้คือกรณีที่เราคลิกแก้ไข มันต้องขึ้นมาด้วยครับว่า กระทู้นี้เคยเลือกอะไรไปแล้วบ้าง
มาดูวิธีการทำกันครับ
[thetext]สร้าง Custom Filed ขึ้นมาก่อน[/thetext]
ผมสร้าง Custom Fields ขึ้นมาโดยใช้เป็น Options Field ครับ (ให้เขาเลือกได้หลายตัวเลือก) ผมตั้งชื่อ field ว่า my_custom_type โดยให้แสดงก็ต่อเมื่อ Post Type เป็นแบบ Topic (กระทู้)
[thetext]เขียนโค้ดลง functions.php [/thetext]
จากนั้นเราเริ่มให้เว็บของเราทำงานร่วมกับ bbPress ครับ ด้วยการเขียนโค้ดนี้ลงไปใน functions.php
// Add custom fields to bbpress topics on front end
add_action ( 'bbp_theme_before_topic_form_content', 'bbp_extra_fields');
function bbp_extra_fields() {
global $post;
$value = get_post_meta( bbp_get_topic_id(), 'my_custom_type', true);
//var_dump($value);
echo '<div class="misc-pub-section misc-pub-section-last">
<span id="timestamp">';
?>
<div class="checkbox checkbox-success checkbox-buy checkbox-inline">
<input id="inlineCheckbox1" class="styled" type="checkbox" <?php echo (in_array('Buy',$value)) ? 'checked="checked"' : null ; ?> value="Buy" name="my_custom_type[]" />
<label for="inlineCheckbox1">
Buy
</label>
</div>
<div class="checkbox checkbox-success checkbox-rent checkbox-inline">
<input id="inlineCheckbox2" class="styled" type="checkbox" <?php echo (in_array('Rent',$value)) ? 'checked="checked"' : null ; ?> value="Rent" name="my_custom_type[]" />
<label for="inlineCheckbox2">
Rent
</label>
</div>
<div class="checkbox checkbox-success checkbox-sell checkbox-inline">
<input id="inlineCheckbox3" class="styled" type="checkbox" <?php echo (in_array('Sell',$value)) ? 'checked="checked"' : null ; ?> value="Sell" name="my_custom_type[]" />
<label for="inlineCheckbox3">
Sell
</label>
</div>
<div class="checkbox checkbox-success checkbox-cost checkbox-inline">
<input id="inlineCheckbox4" class="styled" type="checkbox" <?php echo (in_array('At Cost',$value)) ? 'checked="checked"' : null ; ?> value="At Cost" name="my_custom_type[]" />
<label for="inlineCheckbox4">
At Cost
</label>
</div>
<div class="checkbox checkbox-success checkbox-info checkbox-inline">
<input id="inlineCheckbox5" class="styled" type="checkbox" <?php echo (in_array('Info',$value)) ? 'checked="checked"' : null ; ?> value="Info" name="my_custom_type[]" />
<label for="inlineCheckbox5">
Info
</label>
</div>
<div class="checkbox checkbox-success checkbox-owner checkbox-inline">
<input id="inlineCheckbox6" class="styled" type="checkbox" <?php echo (in_array('Owner',$value)) ? 'checked="checked"' : null ; ?> value="Owner" name="my_custom_type[]" />
<label for="inlineCheckbox6">
Owner
</label>
</div>
<div class="checkbox checkbox-success checkbox-agency checkbox-inline">
<input id="inlineCheckbox7" class="styled" type="checkbox" <?php echo (in_array('Agency',$value)) ? 'checked="checked"' : null ; ?> value="Agency" name="my_custom_type[]" />
<label for="inlineCheckbox7">
Agency
</label>
</div>
<div style="margin-top:20px;">
<p style="font-size:14px;font-weight:600;">เนื้อหา:</p>
</div>
<?php }
add_action ( 'bbp_new_topic', 'bbp_save_extra_fields', 10, 1 );
add_action ( 'bbp_edit_topic', 'bbp_save_extra_fields', 10, 1 );
function bbp_save_extra_fields($topic_id=0) {
if (isset($_POST) && $_POST['my_custom_type']!='')
update_post_meta( $topic_id, 'my_custom_type', $_POST['my_custom_type'] );
}
ซึ่งคำสั่งด้านบนนั้น เวลาเขียนเสร็จแล้ว มันก็จะขึ้นมาเวลาเรากดสร้างกระทู้ใหม่ หรือแก้ไขกระทู้ครับ ตำแหน่งก็จะอยู่ตามที่เราตั้งค่าไว้ตอนที่เราสร้าง custom field ด้วย Advanced Custom Fields อย่างของผมนั้นผมตั้งค่าไว้ให้มันแสดงผลต่อจาก Title ของกระทู้นั้นเอง
[thetext]แสดงผลข้อมูลในหน้าเว็บ[/thetext]
หลังจากที่ระบบของเราทำการบันทึกข้อมูลเสร็จแล้ว ต่อมาก็จะเอามาแสดงในหน้าเว็บครับ ซึ่งใน bbPress จะแบ่งออกเป็นตารางๆ ครับ ไฟล์ที่เราจะแก้ไขนั้น มีอยู่สองไฟล์
ก่อนอื่น ให้เราสร้างโฟลเดอร์ชื่อว่า bbpress ในโฟลเดอร์ธีมของเราเสียก่อน เพราะเราต้องการจะ override ไฟล์ต้นฉบับของ bbPress เวลามีการอัพเดทเวอร์ชั่น จะได้ไม่กระทบกับไฟล์ที่เราจะแก้ไข เสร็จแล้ว copy file ชื่อว่า loop-topics.php มาไว้ในโฟลเดอร์ bbpress ที่เราเพิ่งสร้างขึ้นมา (ตั้งชื่อโฟลเดอร์เป็นตัวพิมพ์เล็กให้หมดนะครับ เพราะถ้าเป็นตัวใหญ่ บาง Host มีปัญหาครับ) ไฟล์นี้จะอยู่ที่โฟลเดอร์ปลักอิน bbPress/templates/default/bbpress/
ก็อบมาแล้ว ก็ โมดิฟายได้เลยครับ อย่างของผมผมก็เพิ่มคอลัมน์ใหม่ โดยประมาณบรรทัดที่ 16 ครับ จากไฟล์เดิมเขียนแบบนี้
<li class="bbp-header"> <ul class="forum-titles"> <li class="bbp-topic-title"><?php _e( 'Topic', 'bbpress' ); ?></li> <li class="bbp-topic-voice-count"><?php _e( 'Voices', 'bbpress' ); ?></li> <li class="bbp-topic-reply-count"><?php bbp_show_lead_topic() ? _e( 'Replies', 'bbpress' ) : _e( 'Posts', 'bbpress' ); ?></li> <li class="bbp-topic-freshness"><?php _e( 'Freshness', 'bbpress' ); ?></li> </ul> </li>
ผมก็แก้เป็นแบบนี้ครับ โดยเพิ่มคอลัมน์ประเภทกระทู้เข้าไป
<li class="bbp-header"> <ul class="forum-titles"> <li class="bbp-topic-my-type">ประเภทกระทู้</li> <li class="bbp-topic-title"><?php _e( 'Topic', 'bbpress' ); ?></li> <li class="bbp-topic-voice-count"><?php _e( 'อ่าน', 'bbpress' ); ?></li> <li class="bbp-topic-reply-count"><?php bbp_show_lead_topic() ? _e( 'Replies', 'bbpress' ) : _e( 'Posts', 'bbpress' ); ?></li> <li class="bbp-topic-freshness"><?php _e( 'Freshness', 'bbpress' ); ?></li> </ul> </li>
ไฟล์ด้านบนเป็นแค่หัวกระทู้นะครับ จากนั้นรายละเอียดของแต่ละกระทู้ เราก็ต้องแก้ไขอีกไฟล์ครับ ชื่อว่าไฟล์ loop-single-topic.php เช่นเดิมครับให้เรา copy file จากปลักอินมาก่อน แล้วก็มาวางไว้ที่โฟลเดอร์ bbpress ในธีมของเรา
แก้ไขโค้ด โดยหาโค้ดนี้ก่อนครับ อยู่บรรทัดที่ 14 เราจะเอาข้อมูลที่สร้างใหม่มาแสดงไว้ก่อนหน้า
<li class="bbp-topic-title">
โค้ดของผม ผมก็แก้เป็นแบบนี้ครับ เพราะผมต้องการให้มันเป็นสีๆสำหรับแต่ละตัวด้วย ซึ่งท่านผู้อ่านก็เอาไปแก้ไขเองได้ตามความเหมาะสมนะครับ ผมก็วางโค้ดนี้ไปไว้ก่อนบรรทัดโค้ดด้านบน
<li class="bbp-topic-my-type">
<div class="labelme">
<!-- โค้ดสีๆ -->
<?php $url= home_url(); ?>
<?php $catenum = bbp_get_topic_forum_id(); ?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Buy', $selected) ) { ?>
<div class="linkme" style="background: #f44336;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Buy&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Buy</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Rent', $selected) ) { ?>
<div class="linkme" style="background: #039BE5;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Rent&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Rent</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Sell', $selected) ) { ?>
<div class="linkme" style="background: #3F51B5;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Sell&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Sell</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('At Cost', $selected) ) { ?>
<div class="linkme" style="background: #9C27B0;"><?php echo '<a href="'.$url.'/condo-type/?condotype=At Cost&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>At Cost</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Info', $selected) ) { ?>
<div class="linkme" style="background: #4CAF50;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Info&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Info</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Owner', $selected) ) { ?>
<div class="linkme" style="background: #607D8B;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Owner&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Owner</a></div>
<?php }
?>
<?php
$selected = get_field('my_custom_type');
if( in_array('Agency', $selected) ) { ?>
<div class="linkme" style="background: #FF9800;"><?php echo '<a href="'.$url.'/condo-type/?condotype=Agency&&cateid='; ?><?php echo $catenum; ?><?php echo '">'; ?>Agency</a></div>
<?php }
?>
<!-- จบโค้ดสีๆ -->
</div>
</li>
และนี่แหละครับ คือโค้ดทั้งหมดสำหรับการทำ options สำหรับกระทู้แต่ละกระทู้ของ bbPress ใครมีโปรเจ็คไหนที่มีความต้องการแนวๆนี้ก็สามารถนำไปปรับใช้ได้นะครับ
ขอบคุณลิงค์นี้ด้วยครับที่ช่วยเป็น guilde line ผมเอามาโมต่อครับ แล้วเจอกันใหม่ในบทความหน้าคร้าบ ช่วงนี้ทำเว็บด้วย bbPress มีโจทย์ท้าทายเยอะ มีอะไรมาเล่าสู่กันฟังเยอะเลยครับผม
