สวัสดีครับ กลับมาเจอกันอีกแล้วนะครับ สำหรับบทความเกี่ยวกับการทำเว็บ วันนี้ผมมีประเด็นอีกตัวหนึ่งที่น่าสนใจมาเล่าสู่กันฟังครับ สืบเนื่องมาจาก มีครั้งหนึ่งลูกค้าซื้อธีม Premium มาให้ผมทำการ Customize ให้ และธีมนั้นใช้ Page Builder ที่เรียกว่า Visual Composer ครับ เป็นปลักอินสำหรับ WordPress ช่วยให้การทำงานง่ายขึ้นมาก (แต่โดยส่วนตัวก็มองว่าโค้ดที่มัน Output รกไปหน่อย) แล้วผมก็สังเกตเห็นว่า เห้ย! ธีมนี้มีปุ่ม Custom Shortcode ของตัวเองที่พ่วงกับ Visual Composer ด้วย นั่นจึงเป็นต้นเหตุให้ผมอยากทำของตัวเองดูบ้างครับ
ประกอบกับลูกค้าล่าสุดของผม ก็ทำเว็บไว้ใช้งาน และมีฟังก์ชั่นบางอย่างที่ผมมองว่า ถ้าเขียน Custom Shortcode เองให้ลูกค้าไว้ใช้ น่าจะตอบโจทย์มากกว่า เลยได้หัดทำทั้งแบบง่ายๆ และแบบมีลูกเล่นซ้อนๆกัน (Nested shortcode) ซึ่งวันนี้ผมจะมาพูดถึงการทำแบบง่ายๆก่อนครับ
โดยตัวง่ายๆที่ผมจะกล่าวถึงวันนี้ จะเป็นรูปแบบการใช้งานแบบไม่มีการซ้อนลูปข้างในนะครับ คือเอาท์พุทข้อมูลออกมาเป็นก้อนโต้งๆ ก้อนเดียวจบเลย
ยกตัวอย่างประกอบครับ ผมอยากทำ Elements สำหรับป้อนข้อมูลแล้วได้ผลลัพธ์ประมาณนี้ครับ
โดย Mock Up ด้านบน จะเห็นว่าผมจะแสดงรูปไว้ด้านซ้าย และด้านขวาเอาไว้ใส่ข้อมูลพวก Rich Text ครับ เราก็แยกได้แล้วว่า Input ที่เราต้องรับค่าเข้าไปก็จะประกอบไปด้วยสองอย่างคือ
- Media Upload ประเภทรูป
- Text Block สำหรับเขียนข้อความ (เรียกว่า Content Editor)
ทีนี้ลองดูโค้ด HTML ของม็อคอัพด้านบนกันก่อน
<section class="omg_component content-3 full-height">
<div class="bg-color bg-white full-height">
<div class="col-md-6 bg-img full-height mobile-block" style="background-image: url('https://unsplash.it/1425/792?image=859');"></div>
<div class="col-md-6 full-height mobile-block text-center">
<div class="v-align">
<div class="h-align">
Sometimes it is appropriate to place various typographic elements on the outside of the fucking left margin of text to maintain a strong vertical axis. This practice is referred to as exdenting and is most often used with bullets and quotations. Make your work consistent but not fucking predictable. Remember it’s called the creative process, it’s not the creative fucking moment.
</div>
</div>
</div>
</div>
</section>
เอาละครับ ทีนี้มามะ มาเริ่มเขียนฟังก์ชั่นสำหรับสร้าง Shortcode กัน ให้เราไปที่ไฟล์ functions.php ใน Theme ที่เราใช้งานอยู่เลยครับ แล้วก็ใส่โค้ดนี้ไปครับ เดี๋ยวผมจะอธิบายทีละส่วน
add_shortcode( 'contentright', 'contentright_func' );
function contentright_func( $atts, $content = null ) {
extract( shortcode_atts( array(
'image_url' => 'https://static.pexels.com/photos/93834/pexels-photo-93834-large.jpeg',
), $atts ) );
$content = wpb_js_remove_wpautop($content, true);
$img = wp_get_attachment_image_src($atts["image_url"], "large");
$imgSrc = $img[0];
return '<section class="omg_component content-3 full-height">
<div class="bg-color bg-white full-height">
<div class="col-md-6 bg-img full-height mobile-block" style="background-image: url('.$imgSrc.');"></div>
<div class="col-md-6 full-height mobile-block text-center">
<div class="v-align">
<div class="h-align">
<div class="col-md-10 col-md-offset-1 padd-bottom-xs">'.$content.'</div>
</div>
</div>
</div>
</section>';
}
โค้ดด้านบน ผมอธิบายโดยใช้ภาษาง่ายๆละกันนะครับ ว่ามันเป็นการลงทะเบียน Shortcode ให้กับ Visual Composer ก่อนครับ บอกให้ WordPress รับรู้ว่าต่อจากนี้ธีมนี้จะใช้งาน Shortcode แล้วนะ และก็เป็นการเรียกข้อมูลที่ได้เมื่อเราป้อนข้อมูลลงแต่ละตัวแล้ว โดยจะเรียกมาเก็บไว้ในตัวแปรชื่อต่างๆ ลองดูภาพประกอบนะครับ ผมทำเป็นสีๆไว้
ตรงสีเขียว ให้เราตั้งชื่อ สำหรับเอาไว้แมพกับตัวรับข้อมูลครับ ชื่อตรงนี้จะไปเกี่ยวข้องกับโค้ดชุดต่อไปที่จะกล่าวถึงครับ อย่างในตัวอย่างนี้ผมตั้งชื่อว่า contentright ส่วนที่เป็นสีแดง ก็ตั้งชื่อสำหรับฟังก์ชั่นของ shortcode ตัวนี้ สังเกตดูนะครับว่า ชื่อนี้ถูกเรียกสองครั้ง ในโค้ดด้านบน
คำสั่ง extract เป็นคำสั่งสำหรับแยกข้อมูลแต่ละส่วนออกมาเก็บในตัวแปรของเราครับ อย่างในตัวอย่าง ก็คือสีฟ้า ผมตั้งชื่อตัวแปรว่า image_url ส่วนที่เป็นสีม่วงคือค่า Default ของตัวแปรนั้นๆในกรณีที่เราไม่ได้ป้อนค่าใดๆเข้าไปครับ จริงๆจะใส่เป็น ‘ ‘ (เครื่องหมาย single quote) แบบนี้ก็ได้นะครับ แต่ผมลองดูแล้วปรากฎว่า ถ้าใช้แค่ ‘ ‘ มันดันทำงานผิดปกติ ผมก็เลยเอาค่าใดๆใส่เข้าไปเป็นค่าตั้งต้นซะเลย (เป็นเฉพาะสำหรับ input media upload ครับ)
บรรทัด $content ตัวนี้ก็เอาไว้รับค่าข้อมูลที่เราพิมพ์ลงไปในรูปแบบ Text Editor ครับผม ซึ่ง Visual Composer บอกว่า ในหนึ่ง Shortcode เราสามารถใช้ input type แบบ Text Editor ได้แค่ตัวเดียวครั้งเดียวเท่านั้น และต้องตั้งชื่อว่า $content ด้วย บังคับครับ
บรรทัด $img เป็นการใช้คำสั่งเพื่อต้องการดึงค่า URL ของรูปที่เราอัพลงไปครับ โดยใช้ wp_get_attachment_image_src แล้วเอาไปจัดเก็บลงในตัวแปร $imgSrc อีกทีครับผม ใครใช้ปุ่มอัพรูปให้นำโค้ดนี้ไปใช้ได้เลยครับ
ส่วนบรรทัด return ก็เป็นการ บอกว่า Shortcode ของเราตัวนี้ จะให้ output ข้อมาเป็นอะไร ก็ให้เราเอาโค้ด HTML ตาม mock up ของเรามาใช้ครับ ลองสังเกตผมดูก็ได้ครับว่าเขียนอย่างไร ตรงนี้ไม่ยากเลย ใช้รูปแบบ PHP ธรรมดา
หลังจากที่เราลงทะเบียน Shortcode ของเราเรียบร้อยแล้ว ก็ให้เราบอกให้ Visual Composer รู้ครับว่า เราจะให้มันรับข้อมูลเป็นข้อมูลประเภทใดบ้าง ลองดูโค้ดด้านล่างประกอบครับ
add_action( 'vc_before_init', 'chill_contentright_integrateWithVC' );
function chill_contentright_integrateWithVC() {
vc_map( array(
"name" => __( "Content Right", "my-text-domain" ),
"base" => "contentright",
"class" => "",
"icon" =>"https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png",
"category" => __( "Chills", "my-text-domain"),
'admin_enqueue_js' => array(get_template_directory_uri().'/vc_extend/bartag.js'),
'admin_enqueue_css' => array(get_template_directory_uri().'/vc_extend/bartag.css'),
"params" => array(
array(
"type" => "attach_image",
"class" => "",
"heading" => __( "รูปภาพ color", "my-text-domain" ),
"param_name" => "image_url",
"value" => 'https://static.pexels.com/photos/93834/pexels-photo-93834-large.jpeg', //Default Red color
"description" => __( "เลือกรูปภาพ", "my-text-domain" )
),
array(
"type" => "textarea_html",
"holder" => "div",
"class" => "",
"heading" => __( "Content", "my-text-domain" ),
"param_name" => "content", // Important: Only one textarea_html param per content element allowed and it should have "content" as a "param_name"
"value" => __( "<p>I am test text block. Click edit button to change this text.</p>", "my-text-domain" ),
"description" => __( "Enter your content.", "my-text-domain" )
)
)
) );
}
ทีนี้มาทำความเข้าใจโค้ดชุดนี้กันครับ
โค้ดนี้เป็นการ Add ตัวรับข้อมูล เพื่อใช้งานร่วมกับ Visual Composer ครับ บรรทัดแรกให้เราเปลี่ยนชื่อตรงสีแดงๆ เป็นชื่อฟังก์ชั่นของเราครับ สังเกตนะครับว่า ต้องเปลี่ยนสองจุด ซึ่งต้องเป็นชื่อเดียวกันด้วย
ทีนี้ไอ้การบอกให้ Visual Composer รู้ว่าจะใช้ตัวรับ Input อะไรบ้าง เราเรียกมันว่า vc_map ครับ โดยข้อมูลแต่ละอย่างแบบละเอียด สามารถอ่านได้ที่ลิงค์นี้ครับ
จุดที่ควรทำความเข้าใจ คือตรง ‘base’=>’contentright’ หรือที่ผมทำเป็นสีเขียวๆ ชื่อนี้ ต้องเป็นชื่อเดียวกับโค้ดด้านบนก่อนหน้า ที่ผมทำเป็นสีเขียวๆด้วย จำได้ไหมครับ? เพราะตัวนี้จะบอกว่า ข้อมูลทั้งหลายต่อจากนี้ใช้งานร่วมกับ Shortcode ตัวนี้นะ
ตรง ‘category’ นั้นเอาไว้สำหรับจัดหมวดหมู่ของปุ่ม shortcode ที่เราสร้างครับ บรรทัดนี้จะมีหรือไม่มีก็ได้ แต่ผมอยากให้มีเพราะจะได้แยกไปเลยว่าอันนี้เป็นปุ่มพิเศษของธีมผมนะ ผมก็เลยใส่ตั้งชื่อว่า Chills
โค้ด สีเหลืองๆ จะเป็น param_name หรือชื่อตัวแปรครับ (เรียกง่ายๆ) ชื่อตรงนี้ห้ามซ้ำกันใน Shortcode ก้อนนั้นนะครับ เป็นชื่อเฉพาะของแต่ละตัว จะตั้งชื่ออะไรก็ได้ ยกเว้น ข้อมูลประเภท Text Editor (หรือ textarea_html) เขาบังคับว่าให้ใช้ชื่อว่า content เท่านั้น และใช้ได้แค่หนึ่งครั้งต่อหนึ่ง Shortcode (Input Type ตัวอื่นๆจะใช้กี่คร้ังก็ได้) ชื่อตัว param_name ก็จะเป็นชื่อเดียวกับโค้ดก่อนหน้า ที่เรา extract มันออกมาครับ ต้องเป็นชื่อเดียวกันด้วย
เสร็จแล้วก็กดบันทึกไปเลยครับ แล้วไปดูตอนเพิ่มข้อมูลว่ามันมีปุ่มนี้ปรากฎขึ้นมาไหมนะ
นี่ไง มาแล้วครับ เห็นไหม มันอยู่ในหมวดหมู่ Chills ด้วย
มีปุ่มเพิ่มข้อมูลตามที่เราระบุไว้เลย เย่ๆ!
ตรวจสอบ Output
ได้แบบที่เราคาดหวังไว้แล้วครับ ไชโย!!
และนี่แหละครับ คือเทคนิคในการใช้งาน Custom Shortcode กับ Visual Composer หรือเรียกอีกอย่างว่าการใช้งาน vc_map ครับ
หวังว่าบทความนี้จะช่วยให้ทุกท่านเข้าใจการทำงานมากขึ้นนะครับ ตอนหน้าผมจะพาไปทำ Shortcode แบบซับซ้อนมากขึ้น ที่เรียกว่า Nested Shortcode ไว้เคลียร์งานเสร็จแล้ว จะมาอัพตอนใหม่ให้อ่านกันอีกทีครับ
สำหรับข้อมูลต่างๆในบทความนี้ สามารถอ่านเพิ่มเติมได้จากเว็บของ Visual Composer นะครับ
https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332
