imkopkap

วิธีสร้าง Customize ให้กับ Theme WordPress

ใช้เวลา 30 นาที 21/12/2014

จากบทความที่แล้ว แก๊ปได้สอนวิธีการทำ Theme Option ด้วย Redux Framework  ไปกันแล้ว เจ้า Redux Framework คือ Theme Option ตัวนึงที่ใช้ในการจัดการ Theme WordPress ของเรา ไม่ว่าจะเป็นการเปลี่ยน Logo , เปลี่ยน Font , เปลี่ยนสีพื้นหลังหรือฟอนต์ ทุกอย่างที่มีการเปลี่ยนแปลง เจ้า Theme Option สามารถทำได้หมดทุกอย่าง เว้นแต่ว่า Theme ที่ใช้ จะมี Theme Option เป็นแบบไหน

 

 

Customize คืออะไร?

เจ้า Customize เรียกชื่อว่าภาษาไทยว่า ” ปรับแต่ง ” ซึ่งจะอยู่ใน wp-admin > appearance > Customize ถ้า WordPress ภาษาไทยก็จะเป็น wp-admin > รูปแบบบล๊อก > ปรับแต่ง

 

Customizer
หน้าตา Customize

 

ซึ่งทั้งหมดนี้เราสามารถทำการตั้งค่าต่างๆ ได้มากมาย เช่น site title ตัวนี้ก็จะเป็นการกำหนดชื่อส่วนหัว หรือ ชื่อไตเติ้ลให้แก่เว็บของเรา Customize จึงมีประโยชน์มากๆ สำหรับ User ที่พึ่งเข้ามาใช้ WordPress และลองหัดทำการปรับแต่งเว็บไซต์ และเหมาะสำหรับท่านที่เบื่อ Theme Option แล้ว เนื่องจากต้อง Refresh แสดงผลหลายครั้ง

 

Live Preview

จุดเด่นของ Customize คือ การทำ Live Preview หรือก็คือ เมื่อเราทำการเปลี่ยน Site Title หรือ Background Color หน้าของเว็บไซต์ที่อยู่ทางด้านขวาของ Customize ก็จะแสดงผลทันที โดยที่เราไม่จำเป็นต้อง Refresh ให้เหนื่อย

 

Customizer
สังเกตคำว่า Kopk

 

แก๊ปเป็นคนหนึ่งที่ชอบใช้ Theme Option ( แทบจะไม่เคยใช้  Customize เลยด้วยซ้ำ ) แต่เห็นว่า Customize สามารถ Live Preview ได้ก็เลยเริ่มสนใจอยากจะใช้ Customize บ้าง เพราะไม่อยากจะกด Refresh ทางหน้าเว็บบ่อยมากนัก

 

อีกทั้ง WordPress 4.1 ยังออกแบบมาเพื่อให้นักพัฒนาไม่จำเป็นต้องเขียนโค้ด Live Preview เมื่อต้องการทำ Customize ( ถ้าจะทำ  Customize , WordPress ที่ต่ำกว่า 4.1 ต้องเขียนโค้ด Live Preview ไม่งั้นจะไม่แสดงผลแบบ Live Preview)

 

วิธีการสร้าง Customize

อันดับแรกเราต้องทำการสร้าง Function ขึ้นมาหนึ่งตัวในไฟล์ functions.php มีค่า Parameter เป็น $wp_customize และสั่งเพิ่มค่าลงไปที่ customize_register ดังโค้ดด้านล่างนี้

add_action( 'customize_register' , 'my_theme_options' );

function my_theme_options( $wp_customize ) {
  // Sections, settings and controls will be added here
}

ภายใน function ก็จะมี 3 โค้ดหลักๆใหญ่ๆด้วยกัน คือ

  1. Section : ตัวนี้จะเป็นการสร้าง Section ให้กับ Customize ของเราดังรูปด้านล่างsection
  2. Setting : คือการกำหนด ID เพื่อเรียกใช้งาน เพื่อแสดงผล และเป็นการกำหนดค่า Default ของตัวนั้นๆ ( จำพวก input , radio , check box )
  3. Control : เป็นการสร้าง Input ,  ปุ่มอัปโหลดรูปภาพ , radio , และอื่นๆอีกมากมาย แล้วแต่จะกำหนด

    Control
    Select , Color คือ Control ที่อยู่ภายใน Section Color

การสร้าง Section

$wp_customize->add_section( 
  'mytheme_footer_options', 
  array(
    'title'       => __( 'Footer Settings', 'mytheme' ),
    'priority'    => 100,
    'capability'  => 'edit_theme_options',
    'description' => __('Change footer options here.', 'mytheme'), 
  ) 
);

จากโค้ดข้างบนเราจะใช้แบบนี้นะครับ อธิบายทีละบรรทัด

  1.  บรรทัดที่ 2 : เป็นการกำหนดชื่อ ID Section เพื่อที่จะใช้งานใน Control
  2. บรรทัดที่ 4 : ชื่อของ Section ที่แสดงผลบน Customize
  3. บรรทัดที่ 5 : เป็นการกำหนดตำแหน่งของ Section ถ้าเล็กน้อยจะได้อยู่บน ถ้าเล็กมากจะได้อยู่ข้างล่าง
  4. บรรัดที่ 6 : เป็น Standard ของ Customize
  5. บรรทัดที่ 7 : คำอธิบายของ Section

 

ให้ Copy โค้ดพวกนี้ไปวางไว้ใน Function ที่เราได้สร้างไว้เมื่อสักครู่

 

การสร้าง Setting

$wp_customize->add_setting( 'footer_bg_color',
  array(
    'default' => 'f1f1f1'
  )
);

อธิบายโค้ด คำว่า footer_bg_color คือชื่อ ID ที่เราจะต้องทำการเพิ่มลงไปในส่วนของ Control  ส่วน Default ก็คือค่าเริ่มต้นของ input , checkbox แล้วแต่จะกำหนด

 

การสร้าง Control

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, footer_bg_color_control', array(
    'label'    => __( 'Footer Background Color', 'mytheme' ), 
    'section'  => 'mytheme_footer_options',
    'settings' => 'footer_bg_color',
    'priority' => 10,
  ) 
));

อธิบายโค้ด

  1. บรรทัดที่ 1 : เป็นการกำหนดลักษณะของ Control จากโค้ดคือ Option เลือกสี  , Footer_bg_color มาจาก ID ของ Setting
  2. บรรทัดที่ 2 : ชื่อของ Option Control นั้นๆ
  3. บรรทัดที่ 3 : ชื่อ ID ของ Section
  4. บรรทัดที่ 4 : ชื่อ ID ของ Setting
  5. บรรทัดที่ 5 : เป็นการจัดลำดับของ Control เลขน้อยอยู่ด้านบน  เลขมากอยู่ด้านล่าง

 

การแสดงผลของ Customize

สำหรับโค้ดการแสดงผลออกทางหน้าเว็บ เมื่อเราได้ทำการปรับแต่งเรียบร้อยแล้วก็คือ โค้ดตัวด้านล่างนี้

<?php echo get_theme_mod(' ชื่อ ID Setting '); ?>

หรืออีกแบบนึง ถ้าเราอยากจะปรับแต่ง CSS

add_action( 'wp_head' , 'my_dynamic_css' );

function my_dynamic_css() {
  ?>
  <style type='text/css'>
  #site-footer {
    background-color:#<?php echo get_theme_mod('footer_bg_color') ?> ;
  }
  </style>
  <?php
}

Function ตัวนี้จะนำ CSS ไปไว้ในตำแหน่งก่อนปิดแท็ก </head> เพื่อแสดงผล CSS ออกทางหน้าเว็บ

 

การทำ Live Previews

สำหรับ WordPress ที่ต่ำกว่าเวอร์ชั่น 4.1 จำเป็นต้องใช้ โค้ดด้านล่างนี้เพื่อทำการแสดงผลแบบ Live Previews

add_action( 'customize_preview_init' , 'my_customizer_preview' );
function my_customizer_preview() {
  wp_enqueue_script( 
    'my_theme_customizer',
    get_template_directory_uri() . '/js/theme-customizer.js',
    array(  'jquery', 'customize-preview' ),
    '',
    true
  );

}

โค้ดด้านบนนี้ สามารถกำหนดไปวางไว้ได้เลย และที่สำคัญใน Theme ของเราต้องมีไฟล์ที่เรียก Jquery ด้วยนะครับ wp_enqueue_script(‘jquery’) สำหรับการทำ register และ enqueue ของ Script แนะนำให้อ่านบล๊อกของ WordPress เพิ่มเติมครับ  และให้สร้างไฟล์ theme-customizer.js ในโฟลเดอร์ JS ด้วยนะครับ

การทำ Live Preview ต้องเพิ่มโค้ดด้านล่างนี้ใน Setting

'transport' => 'postMessage'

ฉะนั้น Setting ของเราจะเป็นแบบนี้

$wp_customize->add_setting( 'footer_bg_color',
  array(
    'default' => 'f1f1f1',
    'transport' => 'postMessage'
  )
);

 

สั่งให้ Live Previews ด้วยไฟล์ theme-customizer.js

เมื่อสักครู่เราได้ทำการสร้างไฟล์ที่ชื่อว่า theme-customizer.js  ภายในไฟล์นี้ก็จะมีโค้ด ดังโค้ดข้างล่างนี้ สามารถ Copy ไปใช้งานได้เลย

( function( $ ) {
 
  wp.customize( 'footer_bg_color', function( value ) {
    value.bind( function( newval ) {
      $('#footer').css( 'background-color', newval );
    } );
  } );
  
} )( jQuery );

อธิบายโค้ด

  1. บรรทัดที่ 3 : คำว่า footer_bg_color คือ ชื่อ ID ของ Setting
  2. บรรทัดที่ 5 : คือ ให้ <div id=”footer”> เปลี่ยนสีพื้นหลังเป็นไปตามที่ newval ( ที่เรากำหนดไว้ใน  Customize ) ออกมาแสดง

 

สำหรับเว็บประกอบ Video  Youtube คือเว็บ  wpmudev เป็นเว็บความรู้เกี่ยวกับ WordPress ถ้าท่านใดเก่งภาษาอังกฤษก็ต้องลองเข้าไปศึกษากันดูบ้างนะครับ แล้วเอามาแชร์แบ่งปันกันครับ นักพัฒนา WordPress ไทยแลนด์จะได้ไปลุยเมืองนอกกับเขาบ้าง

 

อีกเว็บหนึ่ง ของ GitHub  ในเว็บนี้จะมี Demo ของ Theme-customizer.js ให้เราได้ศึกษากันดูครับ เผื่อท่านใดอยากได้วิธีการทำ Background Image หรือการทำ Select Page Dropdown สามารถเข้าไปศึกษากันได้นะครับ

 

ขอบคุณเว็บบทความจากเว็บ : wpmudev

บันทึกแนะนำ