Tags

underscore, kirki, new core, customizer

Customizer, Basic theme

Overview

This document for newest BeauTheme’s core. About new core theme and new plugin core theme, how to do with this plugin and this core theme.

New core using Underscore a start theme and generated from http://underscore.me, integrate with Kirki for customizer.

Document for Kirki you can read more follow this link https://aristath.github.io/kirki/.

Some function were custom for Beautheme team as Kirki class to Beaupress_option class, function get option of Kirki was changed for get customize option and page option.

 

 

Cấu trúc theme

Theme có cấu trúc của Underscore hiện tại chỉ có các thư mục liên quan đến css, js, image được gom lại trong thư mục asset, và custom thêm vài thư mục chính cho theme Beaupress như:

  1.  vc_template
  2. inc
  3. core
  4. assets
  5. loop-item
  6. templates
  7. woocommerce

1/ Thư mục assets dùng để chứa các thư mục & các file js, css, image, scss, sass liên quan đến style của trang

2/ Thư mục core chứa các file thư viện và function dùng chung mà ko đụng đến chỉ thay đổi tên function & text domain ở đây. Không thay thế hoặc viết thêm hoặc chỉnh sửa gì khác trong thư mục này.

  • Thư mục này bao gồm các file function chính của theme và thư viện Kirki đã được đổi text domain & function để dùng chung với theme.
  • Ngoài ra trong thư mục này có những hàm & class dùng chung từ con theme này sang con theme khác chỉ đổi lại tên theo textdomain theme mới.

3/ Thư mục inc chứa các file include cho theme như :

  1. vc_map chứa file backend của shortcode các file này được include trong file vc_maps.php qua hàm beaupress_get_template() ví dụ beaupress_get_template(‘inc/vc_maps/beaupress_personal’);
  2. customizer chứa các file section cho customizer mỗi 1 file tương ứng với 1 section cho từng file trong các file chứa code add field cho customizer
  3. tmg chứa các file plugin tmg và khai báo require các plugin trong file beaupress-register-plugin.php

Assets

Thư mục Assets này chứa các file thư viện js trong thư viện js, file css, file sass mặc định của WordPress

  • Css chứa file chính là main.css cho toàn trang ngoài ra còn có những file css khác cùng thư viện (phần này vứt file css trong main trong parttentlab sang.
  • Image cũng lấy từ các file trong parttentlab sang là được
  • Js là các file thư viện & file js chính cho toàn trang

Nói chung phần này vứt từ thư mục assets trong phần cắt HTML sang là ok

Các hàm chính

1/ beaupress_options() hàm lấy option của customizer hoặc page option với hàm này ưu tiên cao nhất là page options.

  1. Gọi hàm bằng cách gọi beaupress_options(‘ten-option’,’Number’,’gia-tri-mac-dinh’);
    1. Tên option dạng text (string)
    2. Number điền true hoặc false (True tương ứng với giá trị trả về là kiểu số nguyên, false tương ứng trả về sẽ là text)
    3. Giá trị mặc định sẽ luôn trả về giá trị này nếu tồn tại biến này (dùng khi test hoặc check 1 option nào đó khi chưa set giá trị trên customizer hoặc page options.

2/ Class Beaupress_Option class này biến tấu từ class Kirki của plugin kirki để tạo option riêng của mình (Phần này docs của bọn kirki bảo mình nên chuyển thành thế này chắc để tránh trùng với thằng customizer khác)

3/ Ngoài ra còn có các hàm chính do dội dev đã dev từ trước cho các dự án trước bổ sung dần vào đây nhé [Updating … … ]

01.Customizer

Danh sách các customizer đang có trên bộ core mới này đã có danh sách các option trong file options name

cách gọi xem lại phần các hàm chính hàm beaupress_getoptions()

Detail single

Hiện tại detail cho single ngoài chọn layout đã có thêm vài option & hook cho title, date time, & nhiều chỗ khác cụ thể như : date, title, thumbnail, tags, social, box_author, comment.

mỗi chỗ đều có hook before và after : view hook theo từng loại trong file /wp-content/themes/bnb/inc/blog-function.php

cách viết function hook cho từng loại đặt tên hàm tương tự các hàm trong file /wp-content/themes/bnb/inc/blog-hooks.php

dạng

bnb_{tenloaihook}_blog_{option}_[before/after]

Hỏi thêm bổ sung thêm nhé:

Sử dụng loadmore:

Để sử dụng được tính năng này thì phải tuân thủ theo các yêu cầu dưới đây

  1. yêu cầu trong thư mục loop-items phải có 1 file php đặt tên items-{ten postype}.php để loop khi query while ($loop->have_posts())  : $loop->the_post() ;
  2. gọi action bnb_loadmore_button với 2 tham số truyền vào  là $args của custom query$setting là phần cài đặt thành phần cho items loadmore như load thêm bao nhiêu, bỏ qua bao nhiêu,

bắt buộc phải có _selector, _template, _offset, _perpage để chạy chuẩn

Tuỳ chọn : _text, _class, _id, _callback, _isotope

Giải thích:

_selector : class (.ten_class) hoặc id (#ten_id)

_template: tên template load ví dụ items-{ten-template load} (file này vứt trong loop-items nhé

_offset: dùng bỏ qua những item đã load khi vào trang

_perpage: dùng để load số item mỗi khi click

_text: tuỳ chỉnh text trên button

_class: thêm class cho div bên ngoài button mặc định class ._loadmore_button_class

_btn_custom_class: thêm class cho nút bấm class mặc định .b-btn-load

_callback: (string) là tên hàm js muốn gọi sau khi ajax đã render được dữ liệu append vào phần conainer mà mình đã định nghĩa (Hàm này có thể viết ở bất kỳ chỗ nào & nó vẫn được gọi)

_isotope: (array) tham số này truyền vào là một mảng bao gồm :

       _container: là phần insert dữ liệu isotope khi gọi ajax

       _items: là item selector cho phần isotope

      _action: phương thức của isotope: insert, addItems, reloadItems

Ngoài ra có thể thêm vài biến qua hook sang bên file items bằng cách khai báo thêm phần tử cho mảng $setting này ví dụ biến $i sẽ đổi thành “i” => $i trong mảng

gọi hook bắt buộc phải có $setting, và $args để querry

$setting = array(

                        ‘_container’        => ‘#gallery-container-all’,

                        ‘_template’         => ‘gallery’,

                        ‘_offset’           => 0,

                        ‘_perpage’          => $number,

                        ‘tags_name’         => $term_list[0]->name,

                        ‘i’                 => $i

                         ‘_callback’ => ‘some_js_function_name’,

                         ‘_isotope’ => array(

                                         ‘_container’ =>’.class_name or #id_name’,

                                         ‘_items’        => ‘.class_name’,

                                         ‘_action’       =>’insert’,

                          ),

           );

$args = array(
‘post_type’ => ‘gallery’,
‘posts_per_page’ => $number,
);

Gọi: do_action(‘bnb_loadmore_button’, $args, $setting);

02.active_callback

Bnb_Option::add_config( 'my_config' );

Bnb_Option::add_section( 'my_section', array(
 'title' => __( 'My Section' ),
 'priority' => 10,
) );

Bnb_Option::add_field( 'my_config', array(
 'type' => 'checkbox',
 'settings' => 'my_checkbox',
 'label' => __( 'My Checkbox', 'my_textdomain' ),
 'section' => 'my_section',
 'default' => 0,
 'priority' => 10,
) );

Bnb_Option::add_field( 'my_config', array(
 'type' => 'radio',
 'settings' => 'my_radio',
 'label' => __( 'My Radio', 'my_textdomain' ),
 'section' => 'my_section',
 'default' => 'option-1',
 'priority' => 20,
 'choices' => array(
 'option-1' => __( 'Option 1', 'my_textdomain' ),
 'option-2' => __( 'Option 2', 'my_textdomain' ),
 'option-3' => __( 'Option 3', 'my_textdomain' )
 )
) );

Bnb_Option::add_field( 'my_config', array(
 'type' => 'text',
 'settings' => 'my_setting',
 'label' => __( 'Text Color', 'my_textdomain' ),
 'section' => 'my_section',
 'default' => __( 'my default text here', 'my_textdomain' ),
 'priority' => 30,
 'active_callback' => array(
 array(
 'setting' => 'my_checkbox',
 'operator' => '==',
 'value' => 1,
 ),
 array(
 'setting' => 'my_radio',
 'operator' => '!=',
 'value' => 'option-1',
 ),
 )
) );
Bnb_Option::add_field( 'my_config', array(
 'type' => 'text',
 'settings' => 'my_setting2',
 'label' => __( 'Text Color', 'my_textdomain' ),
 'section' => 'my_section',
 'default' => __( 'my default text here', 'my_textdomain' ),
 'priority' => 30,
 'active_callback' => array(
 array(
 'setting' => 'my_checkbox',
 'operator' => '==',
 'value' => 1,
 ),
 array(
 'setting' => 'my_radio',
 'operator' => '!=',
 array(
 'value' => 'option-1'
 ),
 array(
 'value' => 'option-3'
 )
 ),
 )
) );

Loop items

Phần này lấy từ phần core cũ sang các  anh em đã triển khai con cũ đề nghị bổ sung thêm phần này nhé.

Visualcomposer

Phần Visualcomposer được tổ chức lại cho dễ quản lý trong thư mục inc/vc_maps/vc_[shortcode_name].php

các file này đều được gọi lại trong file inc/vc_maps.php  và được include lại trong file function

Các file view của Visualcomposer shortcode trong thư mục vc_templates/

Main hooks

Các hook chính của site được bố trí như sau:

Content của 1 page dạng như sau:

 

 

 

Woocommerce

Phần woocommerce này mặc định chỉnh sửa file gì thì chỉnh tại đây vứt trong thư mục này. Chỉnh sửa file nào thì vứt tại đây.

Anh em bổ sung thêm nhé hiện tại cái con này chưa có dùng đến

Plugin

Phần plugin này cũng được cấu trúc lại dễ sử dụng hơn các phần class cũ là bỏ đi hết rồi tổ chức lại các thư mục rồi nhé. anh em có thể view trực tiếp hoặc.

Các phần custom css , js trong thư mục assets/css, assets/js đều đã được hook lên phần head của admin rồi mọi người chỉ việc viết thêm css, js trong file là được nhé.

Các phần include đều được include bằng tay vào file beautheme-beaupress.php  (Phần này mọi người chú ý nhé vì lúc trước mình để auto include)

Còn các thư mục đều được đặt tên theo chức năng của nó hết phần nào ko hiểu anh em có thể bổ sung nhé.

Custom postype

Hiện tại mình có các custom postype như sau: gallery, personal, portfolio, service, testimonial

Mỗi một postype cũng như các taxonomy đều được khai báo trong 1 file đặt tên tương ứng với postype đang dùng ví dụ gallery thì các setup tương ứng được tạo trong file gallery.php

và được chứa trong thư mục postype.

 

 

Custom field

Plugin custom field đã được include trong phần libs của plugin, hiện tại anh em có thể dùng phần backend để tự generate ra custom field và export thành php để pase vào trong file theme-customfield.php file này đã được include lại trong file chính của plugin rồi.

bật tắt chế độ tạo field của customfield mọi người đề ý phần

define(‘ACF_LITE’, false ); //Define show hide customfield

Để false thì sẽ show phần Custom Fields trong admin còn để true khi lên production nhé anh em.

Data import

Phần này chưa làm nhưng dự sẽ có các files content như:
1/ content.xml

2/ slider.json

3/ widget.json

4/ customizer.json

Libraries

Thư viện bao gồm thư viện customizer dùng Kirki, Custom field dùng advanced-custom-fields

MailChimp, wp-twitter-api

các thư viện này đều là các plugin được sử dụng lại nhiều trong con theme, và được dùng đi dùng lại nên được include trong plugin chính.

 

Page option with customizer

Phần page option này được đặt tên trùng với tên option của customizer và nó sẽ được ưu tiên lên trên cùng nếu cả 2 đều có options.

Phần page options này được tạo bởi customfield nên anh em có thể dùng customfield để thêm được option cho phần page này.

Source code được lưu trong file beautheme-beaupress/inc/functions/page-options.php

More item from Beautheme