Tags
Overview

Hướng dẫn và quy định bắt đầu dev theme

Trước khi bắt đầu sử dụng và dev hãy đọc document về Vấn đề cần tránh khi dev theme tại đây để cài đặt 1 số plugin để test và sử dụng.

Sơ đồ thư mục

 screen-shot-2016-10-18-at-5-41-55-pm

Thư mục chính

  • Asset: Chứa css, scss,js, thư viện sass của theme
  • Core: Chứa các hàm viết sẵn cho các theme, các hook và function của hook.
  • Inc : Chứa plugin đi kèm theme như TMG plugin, vc_customs thư mục khai báo shortcode của visualcomposer. File theme option
  • Language: Thư mục chứa file ngôn ngữ, đuôi .pot
  • vc_templates: Thư mục hiển thị của từng shortcode

Tạo shortcode visualcomposer

Visual composer để làm gì và hoạt động ra sao? Hãy đọc document và xem video tại đây.

 

 

Làm thế nào để tạo được shortcode visualcomposer?

 

  1. Khai báo 1 shortcode visualcomposer:
  • Vào thư mục inc -> vc_custom -> Tạo 1 file với [Tên theme]-[Tên shortcode].php.
  • Nội dung trong file:
    screen-shot-2016-10-18-at-5-52-19-pm
  • Như ảnh phía trên thì shortcode này tên là citysoul_video, tên file cũng giống như tên shortcode
  • Có 1 field tên là title_element có kiểu là textfield dùng để điền text thường.
  • Có thể thêm fields và có rất nhiều kiểu field mặc định có thể tham khảo trong document và comment trong file inc/vc_custom/citysoul_video.php

 

2. Hiển thị shortcode ra font-end:

  • Vào thư mục vc_templates -> Tạo 1 file có tên cùng với class cuối cùng ở file khai báo shortcode

VD: class WPBakeryShortCode_citysoul_video extends WPBakeryShortCode thì tên file là citysoul_video.

  • Đầu file sẽ phải khai báo toàn bộ các field đã khai báo ở trên:

screen-shot-2016-10-18-at-6-22-37-pm

Như ảnh trên là đã khai báo và hiển thị được field title_element ra font-end.

 

1 số field cần chú ý : 

+ textarea_html: Field chỉ được khai báo sử dụng 1 lần duy nhất với param_name là content, nếu đổi tên hay khai báo thêm đều không hoạt động.

autocomplete: Phải tạo array đúng để truyền vào field này, đã có sẵn 1 số function để hỗ trợ tạo field.

+ param_group : repeat field

Tạo hook

Hook là gì và sử dụng thế nào? Hãy đọc và xem video tại đây:

Action hook

Filter hook

 

  1. Khai báo function và add action hook riêng cho hook ở đâu ?
  • Vào thư mục core -> includes -> custom -> Tạo 1 file function_[tên postype].php cho function hook và 1 file hook_[tên postype].php cho add action hook .

Hàm có sẵn

Đây là 1 số hàm được xây dựng sẵn trong bộ core, có thể sử dụng lại:

1 . citysoul_check_option_theme($option);
Hàm check theme option cùng với page option:

+ Hàm này sẽ lấy ra giá trị của của option được truyền tên vào và kiểm tra xem page option có truyền vào giá trị này không nếu có thì sẽ ưu tiên page option.

+ Để sử dụng hàm này thì khi tạo theme option và page option phải đặt tên giống nhau để nó có thể check được

Hỗ trợ theme đa ngôn ngữ

Hỗ trợ đa ngôn ngữ tức là theme của mình phải hỗ trợ cho khách hàng được dịch sang nhiều thứ tiếng khác nhau.
Để có thể dịch được sang trong code sẽ phải viết hỗ trợ dịch.
VD: Để hiển thị 1 chuỗi thường có thể viết như sau:
screen-shot-2016-10-19-at-10-40-56-am
Nhưng nếu viết như thế thì chuỗi abc này không thể được dịch sang ngôn ngữ ả rập hoặc là trung quốc gì đấy đc. Phải viết lại như sau:

screen-shot-2016-10-19-at-10-41-13-am

Trong đó textdomain là tên được định nghĩa trong file style.css, thường là tên viết tắt của theme. 1 theme chỉ được có 1 textdomain để dịch toàn bộ trang.

 

 

Ngoài esc_html còn có những hàm khác để dịch các thành phần như url hoặc đoạn văn bản, tham khảo tại đây.

Tạo file ngôn ngữ .pot

Ngoài việc viết code để hỗ trợ theme dịch ra ta còn phải tạo file ngôn ngữ, người sử dụng theme sẽ dịch lại các chuỗi trong file này.

 

Để dịch theme ta cần dùng đến phần mềm Poedit . Hãy download và cài đặt lên máy.

Ở đây có 1 template file ngôn ngữ sẵn, hãy download nó về:

DOWNLOAD

 

Copy file này vào thư mục theme -> language. Đổi tên file sang textdomain của theme.

 

VD: Theme tên Citysoul thì textdomain là citysoul và file ngôn ngữ là citysoul.pot.

 

screen-shot-2016-10-19-at-10-50-45-am

 

 

Mở file này lên bằng Poedit. Trên thanh Menu chọn Catelog -> Properties:
Đây là giao diện chụp từ macbook lên Windown giao diện có thể khác 1 chút.

 

screen-shot-2016-10-19-at-10-55-47-am

screen-shot-2016-10-19-at-10-56-48-am screen-shot-2016-10-19-at-10-57-01-am

 

Tại đây bạn sửa các thông tin sang theme của bạn.
VD:

Theme của tôi là Citysoul tôi sẽ đổi Nextop theme v1.0.0 sang Citysoul theme V1.0.1, hãy điền đủ cả phần team và support.
Sau khi đổi thành công chọn Catalog -> Update form Sources, file ngôn ngữ sẽ tự get các chuỗi từ theme update vào file save lại là ok. 

 

screen-shot-2016-10-19-at-10-56-26-am

Tạo theme option

More item from Beautheme