Bạn đang xem bài viết cuối cùng trong serie hướng dẫn Starter Theme trên Thạch Phạm Blog được trình bày bởi Sáu Hỉ. Trong bài viết này Sáu sẽ up cho bạn 1 video hướng dẫn quá trình chỉnh sửa và hoàn thiện giao diện, bạn có thể xem thêm để hiểu rỏ hơn về HTML5 Blank.
Hôm nay Sáu sẽ trình bày với bạn cách tạo Customize cho giao diện, giúp hạn chế việc chỉnh sửa code trực tiếp trong quá trình sử dụng. Đối với WordPress thì kể cả plugin và theme thì chúng ta cũng nên viết code hướng đến người dùng, làm sao cho mọi người khi sử dụng sẽ cảm thấy dễ dàng và hài lòng nhất.
Tham khảo: Tìm hiểu về hàm tạo Customize
Tạo customize cho giao diện
Vì điều kiện không cho phép nên trong bài viết đôi lúc sẽ có sự thay đổi về tên tập tin cũng như một vài thông tin liên quan đến CSS và bố cục của giao diện, do vậy Sáu khuyến khích các bạn là đọc để hiểu và tự làm theo chứ không phải sao chép nguyên văn nhằm tránh lỗi không đáng có xảy ra.
Tạo customize cho giao diện
Đầu tiên thì bạn mở tập tin custom-function.php bên trong thư mục con (sau) và thêm vào dòng code bên dưới:
class STheme_Customize {
public static function register ( $wp_customize ) {
$wp_customize->add_section( ‘stheme_options_section’, array(
‘title’ => __( ‘Cài đặt giao diện’, ‘html5blank’ ),
‘priority’ => 35,
‘capability’ => ‘edit_theme_options’,
‘description’ => __(‘Cài đặt tùy chọn cho giao diện.’, ‘html5blank’),
)
);
$wp_customize->add_setting( ‘stheme_options[logo_url]’, array(
‘default’ => ”,
‘type’ => ‘option’,
‘capability’ => ‘edit_theme_options’,
‘transport’ => ‘postMessage’,
)
);
$wp_customize->add_control( ‘stheme_logo_url’, array(
‘label’ => __( ‘Logo Url’, ‘html5blank’ ),
‘section’ => ‘stheme_options_section’,
‘settings’ => ‘stheme_options[logo_url]’,
‘priority’ => 10,
)
);$wp_customize->add_setting( ‘stheme_options[banner_url]’, array(
‘default’ => ”,
‘type’ => ‘option’,
‘capability’ => ‘edit_theme_options’,
‘transport’ => ‘postMessage’,
)
);
$wp_customize->add_control( ‘stheme_banner_url’, array(
‘label’ => __( ‘Banner Url’, ‘html5blank’ ),
‘section’ => ‘stheme_options_section’,
‘settings’ => ‘stheme_options[banner_url]’,
‘priority’ => 10,
)
);$wp_customize->get_setting( ‘stheme_options[logo_url]’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘stheme_options[banner_url]’ )->transport = ‘postMessage’;
}
}
add_action( ‘customize_register’ , array( ‘STheme_Customize’ , ‘register’ ) );
Đoạn code trên sẽ tạo ra một class với tên là STheme_Customize, trong class này sẽ chứa hàm register nhằm khai báo các giá trị của customize.
Chúng ta sẽ thêm action này vào giao diện của WordPress bằng hàm sau:
add_action( ‘customize_register’ , array( ‘STheme_Customize’ , ‘register’ ) );
Như các bạn thấy bên trên, trong hàm register sẽ chứa 3 thông tin chính bao gồm section, setting và control.
1. Section: Đóng vai trò là một nhóm cài đặt nào đó, bên trong mỗi section sẽ chứa nhiều control đảm đương nhiệm vụ thiết lập cho 1 setting nào đó.
$wp_customize->add_section( ‘stheme_options_section’, array(
‘title’ => __( ‘Cài đặt giao diện’, ‘html5blank’ ),
‘priority’ => 35,
‘capability’ => ‘edit_theme_options’,
‘description’ => __(‘Cài đặt tùy chọn cho giao diện.’, ‘html5blank’),
)
);
Code bên trên có nghĩa là chúng ta sẽ tạo ra một section với ID là stheme_options_section, và section này chúng ta sẽ đặt tiêu đề là: Cài đặt giao diện, chỉ cho phép các tài khoản người dùng được cấp quyền chỉnh sửa giao diện xem được.
2. Setting: Đóng vai trò đảm nhiệm một cài đặt nào đó mà bạn muốn thiết lập trên giao diện, ví dụ thông tin cài đặt về tài khoản mạng xã hội, hay cài đặt được dẫn logo,…
$wp_customize->add_setting( ‘stheme_options[logo_url]’, array(
‘default’ => ”,
‘type’ => ‘option’,
‘capability’ => ‘edit_theme_options’,
‘transport’ => ‘postMessage’,
)
);
Đoạn code bên trên chúng ta sẽ tạo ra 1 setting với ID là: stheme_options[logo_url], giá trị mặc định là rỗng và kiểu setting này là option được cấp cho các tài khoản có quyền chỉnh sửa giao diện xem được. Bạn để ý, id ở đây Sáu làm theo kiểu mảng, có nghĩa là trong cơ sở dữ liệu sẽ lưu một dòng với key là stheme_options, và trong key này sẽ có nhiều giá trị cài đặt khác nhau, giá trị logo_url là một trong số đó.
3. Control: Đây là một textbox hoặc một textarea, hoặc selectbox,… cho phép bạn nhập giá trị vào cho setting, phần control sẽ hiển thị ra bên ngoài cho bạn thấy và nhập liệu.
$wp_customize->add_control( ‘stheme_logo_url’, array(
‘label’ => __( ‘Logo Url’, ‘html5blank’ ),
‘section’ => ‘stheme_options_section’,
‘settings’ => ‘stheme_options[logo_url]’,
‘priority’ => 10,
)
);
Một control phải được khai báo nằm trong section nào và nó đại diện cho setting nào. Như bạn thấy được bên trên thì control stheme_logo_url thuộc về section stheme_options_section và đại diện cho setting stheme_options[logo_url].
Lấy giá trị từ Customize
Bạn đã tạo ra chức năng cho phép người dùng nhập vào tùy chọn cài đặt cho giao diện, do vậy để các tùy chọn này có hiệu lực thì bạn phải viết code để cập nhật lại giao diện khi người dùng thay đổi tùy chọn.
Để lấy được tùy chọn thì chúng ta sẽ dùng hàm với cú pháp như sau:
get_option($key);
Biến $key ở đây chúng ta đã đặt là stheme_options nên bây giờ mình sẽ dùng hàm sau để lấy options và lấy thông tin đường dẫn của logo từ options này nhé.
Bạn mở tập tin header.php của giao diện lên và tìm tới dòng sau:
[html]<!– svg logo – toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script –>[/html]
Thay đoạn code sau:
<!– svg logo – toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script –>
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img">
Thành đoạn code sau:
<!– svg logo – toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script –>
<?php $logo = get_template_directory_uri().’/sau/images/logo.png’; ?>
<?php $options = get_option(‘stheme_options’); ?>
<?php if($options) : ?>
<?php if($options[‘logo_url’]) : ?>
<?php $logo = $options[‘logo_url’]; ?>
<?php endif; ?>
<?php endif; ?>
<img src="<?php echo $logo; ?>" alt="Logo" class="logo-img">
Đoạn code trên Sáu sẽ gán một đường dẫn của hình ảnh logo mặc định là hình logo.png trong thư mục /sau/images của giao diện.
<?php $logo = get_template_directory_uri().’/sau/images/logo.png’; ?>
Sau đó lấy thông tin tùy chọn từ cơ sở dữ liệu, nếu như giá trị trả về là có đường dẫn thì chúng ta sẽ cập nhật lại đường dẫn mới của logo.
Hoàn tất giao diện
Đến đây thì giao diện của bạn đã được hoàn thành, để giao diện có phần đẹp hơn trong phần quản lý giao diện của WordPress thì chúng ta sẽ cập nhật một hình ảnh screenshot của giao diện.
Hình ảnh demo mặc định của giao diện
Bạn mở phần mềm photoshop hoặc một phần mềm xử lý ảnh bất kỳ, tạo một tập tin ảnh mới với kích thước là 600×450. Sau đó bạn có thể chụp hình giao diện và bỏ vào bên trong file này.
Lưu tập tin này lại với tên là screenshot.png, sau đó sao chép đè lên tập tin cũ trong thư mục gốc của giao diện, sau khi hoàn thành bạn vào lại trang quản lý giao diện của WordPress xem nào.
Hình ảnh demo giao diện HTML5 Blank mới
Kết luận
Bạn vừa hoàn thành xong serie viết giao diện cho WordPress với Starter Theme, cụ thể ở đây là HTML5 Blank. Hy vọng rằng các bài viết của Sáu sẽ phần nào giúp ích được bạn trong quá trình làm quen và nghiên cứu chuyên sâu về WordPress.
Nếu có điều kiện thì Sáu khuyên bạn nên mua giao diện, đừng nên tìm mấy giao diện premium nhưng share lại plublic trên mạng, rất có thể trong này đã chứa mã độc. Nếu các bạn muốn tìm giao diện miễn phí của WordPress thì cũng có thể lựa nhiều trang cung cấp uy tín, đó là không kể đến WordPress.org.
Sáu cũng khuyến khích bạn nên tự viết giao diện nếu không có điều kiện mua giao diện premium, điều này sẽ giúp ích bạn rất nhiều trong bước đường đi đến thành công với WordPress bởi khi viết giao diện nó sẽ làm tăng thêm đam mê và nhiệt huyết cho bạn. Ngay bây giờ bạn cũng có thể tải bản giao diện sau khi hoàn thành bài viết này về máy tính để so sánh với những gì bạn đã làm.
Link tải: html5blank_final.zip
