[Lập trình theme WordPress] Thêm chức năng Theme Options

[Lập trình theme WordPress] Thêm chức năng Theme Options

Hướng dẫn thêm chức năng Theme Options vào theme trong serie Lập trình theme WordPress 2015. Mời các bạn xem bài viết tại đây!

https://www.youtube.com/watch?v=H9FyY3nIYZU

Một trong những yêu cầu của các theme WordPress hiện nay để nó thân thiện hơn với người sử dụng đó là có tích hợp một khu vực thiết lập và tùy chỉnh theme (gọi là Theme Options). Chẳng hạn bạn có thể cho phép người dùng tự đổi logo, màu chữ này nọ,…trong theme thông qua tính năng Theme Options này.

Để làm được Theme Options, bạn có thể sử dụng chức năng Settings API có sẵn trong WordPress hoặc sử dụng một framework/script riêng cho việc này. Trong khuôn khổ bài này, mình sẽ hướng dẫn bạn tích hợp Theme Options vào theme của serie Lập trình theme WordPress thông qua Redux Framework – một framework rất nổi tiếng trong việc tạo Theme Options cho WordPress, rất chuyên nghiệp và miễn phí.

Bước 1. Tích hợp TGM Plugin Activation

TGM Plugin Activation mình đã từng giới thiệu tại đây (Thêm tính năng bắt buộc cài plugin khi kích hoạt theme), nó là một script PHP giúp bạn thêm tính năng bắt buộc người dùng phải cài đặt các plugin yêu cầu khi kích hoạt theme. Sở dĩ chúng ta phải dùng TGM Plugin Activation ở đây đó là Redux Framework bây giờ hoạt động như một plugin WordPress, điều này sẽ giúp người dùng luôn luôn sử dụng phiên bản Redux Framework mà không cần phải chờ đợi các đợt cập nhật từ bạn.

Hãy tải TGM Plugin Activation tại đây, giải nén ra và copy file class-tgm-plugin-activation.php vào thư mục/themes/thachpham/core. Sau đó mở file init.php trong cùng thư mục lên và thêm đoạn này vào:

Sau đó tạo thêm một file tên là plugins.php trong cùng thư mục core và thêm đoạn này vào:

Và chèn thêm đoạn sau vào file init.php để file plugins.php này được gọi ra.

Kết quả sau khi thêm TGM Plugin Activation:

laptrinhtheme-themeoptions-01
Ảnh. Thông báo bắt buộc cài plugin

Bạn hãy ấn nút Begin installing plugin để cài plugin Redux Framework này vào để chút nữa chúng ta sẽ làm việc.

Bước 2. Cài đặt Redux Framework

Sau khi cài plugin Redux Framework vào website thì nó sẽ hiển thị thông báo thế này trên website.

laptrinhtheme-themeoptions-02

Tuy nhiên chúng ta sẽ không sử dụng cái sample config file của Redux Framework vì nó chứa rất nhiều option fields mà bạn không cần dùng tới, sẽ mất công sửa lại mà chúng ta sẽ tự tạo ra một file option riêng chứa các thiết lập riêng cần thiết.

Nếu bạn muốn tự tìm hiểu về các đoạn code của Redux Framework, hãy mở file sample-config.php trong thư mục plugins Redux Framework để xem hoặc file barebones-config.php để xem cấu trúc một file tạo theme options hoàn chỉnh từ framework này.

Bước 3. Lên kế hoạch tạo Theme Options

Trước khi tiến hành viết code tạo các tùy chọn trong Theme Options, chúng ta cần nên biết rõ sẽ tạo ra những tùy chọn nào để người dùng sử dụng. Trong khuôn khổ bài này, mình sẽ lấy ví dụ các tùy chọn cơ bản trong theme như:

  • Bật/tắt chức năng sử dụng ảnh làm logo.
  • Sửa/xóa ảnh làm logo.
  • Thay đổi màu sắc liên kết trong theme.
  • Thêm font chữ từ Google Fonts.

Bước 4. Viết code tạo tùy chọn cho Theme Options

Tạo file chứa code các tùy chọn (options.php)

Bây giờ bạn hãy vào thư mục /themes/thachpham/core/ và tạo một file mang tên options.php. Sau đó mở file init.php ra và chèn đoạn sau vào để kích hoạt file options.php để nó hoạt động:

Trong options.php, chúng ta khai báo một class để chứa các options như sau:

Và từ bây giờ, chúng ta sẽ viết code tạo từng khu vực options và từng options vào bên trongclass ThachPham_Theme_Options.

Khai báo các đoạn code cần thiết vào class ThachPham_Theme_Options.

Tất cả các code dưới đây đều phải viết vào bên trong cặp class ThachPham_Theme_Options {}.

Trước tiên, bạn phải khai báo lại các biến toàn cục mà Redux Framework có sử dụng để chúng ta có thể tái sử dụng lại.

Kế tiếp là thêm code để Redux Framework được kích hoạt.

Thêm nữa, trong class ReduxFramework nó có một số phương thức mà nếu bạn muốn sử dụng thì sẽ cần phải khai báo vào một phương thức khác tên là initSettings. Chúng ta có đoạn code khai báo các phương thức cần sử dụng như sau:

Nghĩa là chúng ta sẽ cần sử dụng 3 phương thức là:

  • setArguments: Phương thức này sẽ thiết lập một số tùy chọn cho cái Theme Options.
  • setHelpTabs: Phương thức này để tạo mục hướng dẫn ngay bên trong phần hiển thị Theme Options.
  • setSections: Đây là phương thức quan trọng nhất, dùng để chia phân mục các tùy chọn trong Theme Options, và chúng ta cũng sẽ khai báo các field tùy chọn bên trong phương thức này.

Ok, bây giờ chúng ta sẽ code cho từng phương thức một.

Viết code cho phương thức initSettings

Như mình đã nói ở trên rằng phương thức này sẽ được dùng để khai báo một số tùy chọn chung chung cho khu vực Theme Options, chúng ta có đoạn code sau (nhớ là đặt bên trong class ThachPham_Theme_Options {}):

Ở mỗi đoạn mình đã có viết chú thích rồi nên bạn có thể đọc bên trong đó nhé.

Viết code cho phương thức setHelpTabs:

Help Tabs là tính năng rất hữu dụng để bạn viết các đoạn hướng dẫn và người đùng có thể nhìn thấy tại nút Help nằm bên phải góc trên trong trang Theme Options:

Tạo khu vực tùy chọn với setSections:

Đây là phương thức quan trọng nhất, nó dùng để khai báo các khu vực tùy chọn (option section) và các tùy chọn nằm bên trong mỗi section.

Trước tiên mình có đoạn code ban đầu như sau để tạo một section trước:

Ngay tại code trên, từ đoạn //Home Section đến // end section là một code tạo một khu vực tùy chọn, trong đó có các tham số sau:

  • title: Tên của section
  • desc: Mô tả của section
  • icon: đường dẫn hoặc tên của icon (trong bộ Elusive Icon http://elusiveicons.com/icons/).
  • fields: Các đoạn code tạo tùy chọn cho section này

Ngay sau khi xong đoạn code trên, bạn đã có thể vào Dashboard để xem phần Theme Options đã được hiển thị ra rồi.

laptrinhtheme-themeoptions-03

Bây giờ ngay tại tham số fields trong đoạn tạo section trên, chúng ta sẽ tạo ra hai options cho tùy chọn bật chức năng hiển thị logo là ảnh và field upload ảnh làm logo lên. Chúng ta có thêm code như sau vào tham số fields:

Ở đoạn trên, rõ ràng mình có hai mảng array bên trong tham số fields, như vậy điều này tương đương với ta có 2 options. Trong code tạo options trên, các tham số này là của từng loại field trong Redux Framework nên tốt hơn hết bạn xem các tùy chọn của từng loại fields trong Redux Framework tại đây.

Trong các đoạn code tạo options, bạn lưu ý nhất là tham số id, đó chính là tên của mỗi field để sau này chúng ta có thể sẽ gọi giá trị của nó ra ngoài theme theo kiểu $opt_name['field_id']. Biến $opt_name chính là tham số opt_name trong phương thức setArguments().

Sau khi đặt các đoạn code tạo option kia vào section Header mà ta đã tạo ở trên, khi vào Theme Options ta sẽ thấy như thế này:

laptrinhtheme-themeoptions-04

Bây giờ để có thể mang dữ liệu ra bên ngoài, trước tiên bạn hãy vào Theme Options và thử chọn các tùy chọn bất kỳ để nó gán giá trị vào database, sau đó ấn Save Changes lại để lưu.

Như bạn biết thì trong phương thức setArgrument ta đã sử dụng tham số opt_name để khai báo một biến để chứa các dữ liệu mảng cho mỗi option. Trong bài này thì mình đã gán cho nó với tên là tp_options, vậy thì chúng ta phải đặt biến này thành dạng global ở file mà chúng ta muốn gọi giá trị ra như thế này:

Bạn có thể đặt thử đoạn trên vào đầu file header.php để chúng ta xem các giá trị trong options:

laptrinhtheme-themeoptions-05

Dựa theo giá trị debug đó, chúng ta có thể lấy giá trị dựa theo tên của từng key trong mảng đó là được.

Bây giờ bạn mở file functions.php lên, tìm đến hàm thachpham_logo() như thế này:

Việc của chúng ta cần làm là thêm đoạn code kiểm tra cái tùy chọn bật logo bằng hình ảnh, sau đó thêm đoạn code hiển thị logo nếu cái tùy chọn Enable Logo Image đang On (giá trị là 1):

Giờ thì bạn có thể thử vào Theme Options và thiết lập bật chức năng hiển thị logo lên, đồng thời upload ảnh muốn làm logo và ta có kết quả sau khi bật:

laptrinhtheme-themeoptions-06

Tiếp tục tạo thêm một section cho Theme Options:

Ở phần này, chúng ta sẽ tạo thêm một section mang tên Typography trong phần Theme Options, tại đây chúng ta sẽ cho phép người dùng thiết lập font chữ và màu chữ, màu liên kết:

Ngay tại phương thức setSections, chúng ta sẽ thêm một section mới như sau:

Kết quả:

laptrinhtheme-themeoptions-07

Ngay tại tham số fields, chúng ta có một số options như sau:

Đồng thời, bạn phải khai báo thêm Google API Key để cái Google Font có thể làm việc được. Hãy thêm tham số này vào phương thức setArguments:

Trong đó, *** là Google API Key của bạn, bạn hãy xem thêm hướng dẫn lấy API Key tại https://developers.google.com/fonts/docs/developer_api#Auth. Hoặc bạn có thể sử dụng tạm AIzaSyAs0iVWrG4E_1bG244-z4HRKJSkg7JVrVQ để test.

Ngay đoạn fields ở trên, mình có các tham số cơ bản trong một options, tuy nhiên các bạn nên lưu ý tham số ouput. Tham số ouput nghĩa là chúng ta sẽ khai báo vùng chọn để nó tự tạo ra CSS, ví dụ như trên mình khai báo vùng chọn body thì nó sẽ tự tạo ra CSS với kiểu body {....} để hiển thị các giá trị.

Tham số default là chúng ta sẽ khai báo các giá trị mặc định nếu như typography không được chọn. Như vậy, bạn hãy vào file style.css, tìm đến vùng chọn body và xóa các giá trị CSS liên quan đến tham số default để nó khỏi xung đột nhé.

Kết quả sau khi tạo xong option:

laptrinhtheme-themeoptions-08

Hãy thử chọn các tùy chọn mà bạn thích rồi ấn Save lại. Bây giờ khi xem source của website, bạn sẽ thấy các tùy chọn đã được tạo ra như một đoạn CSS với vùng chọn là tham số output.

laptrinhtheme-themeoptions-09

Mình nhắc lại là nếu bạn tạo tùy chọn Typography cho vùng chọn nào thì hãy đảm bảo rằng bạn hãy xóa hết các đoạn CSS liên quan đến vùng chọn đó trong file style.css vì nếu nó vẫn còn thì các CSS trong file style.css sẽ được ưu tiên.

Bây giờ bạn có thể ứng dụng tạo ra thêm các tùy chọn typography dành cho các vùng chọn khác mà bạn thích rồi đấy.

Lời kết

Trong bài viết dài này, mình đã nói rất chi tiết về việc sử dụng Redux Framework để tạo theme options và cách thêm các options cơ bản. Như mình đã nói ở trên, bài viết này mình chỉ lướt qua Redux Framework nên nếu có gì bạn chưa hiểu thì xem thêm Redux Documentation để hiểu thêm framework này.

Tải toàn bộ code sau khi làm xong bài này tp_final.

WordPress FAQ  » Học WordPress > Lập trình WordPress > Lập trình Themes


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin

Ảnh. [Lập trình theme WordPress] Thêm chức năng Theme Options
Ảnh. [Lập trình theme WordPress] Thêm chức năng Theme Options

Chia sẻ bài viết

Bình luận