Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Làm quen với Redux Framework: Giới thiệu và tích hợp nó vào trong Theme của bạn

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Getting Started With Redux Framework.
Getting Started With Redux Framework, Part 2: Sections, Fields & Config

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Khi những người chủ trang web cài đặt một theme WordPress mới, điều đầu tiên mà họ muốn làm là tinh chỉnh giao diện để phù hợp với nhãn hiệu cũng như sở thích cá nhân. Và phần lớn, những người mua, tải về, hoặc là cài đặt những theme WordPress có rất ít hoặc là không có kinh nghiệm viết code.

Vậy làm thế nào, với vai trò là một người phát triển theme, cho người dùng theme của bạn có khả năng tuỳ biến giao diện nhất có thể cho trang web của họ mà không cần phải học viết code?

Tất nhiên, bằng cách tạo các trang/bảng tuỳ chỉnh!

Tuy nhiên, trang tuỳ chỉnh của theme thì không dễ tạo — đặc biệt là đối với những nhà phát triển không có nhiều kinh nghiệm với WordPress hoặc thiếu kinh nghiệm lập trình. May mắn thay, có các options framework.

Options Framework là gì?

Options Framework là các thư viện code, các plugin, hoặc các lớp mà cung cấp một nền tảng đầy đủ để cho những nhà phát triển có thể dễ dàng và nhanh chóng xây dựng nên các trang tuỳ chỉnh cho theme của họ. Điều này cho phép những người không phải là nhà phát triển có thể sử dụng  bảng tuỳ chọn để tuỳ biến giao diện trang web của họ, mà không cần quan tâm đến code.

Các bảng tuỳ chọn có thể được sử dụng để:

  • tải lên một hình logo
  • thay đổi màu nền hoặc thuộc tính CSS của một phần tử (chẳng hạn như header hoặc footer của theme bạn)
  • chọn một skin hoặc một layout mặc định
  • thêm mã CSS hoặc JavaScript tuỳ biến
  • và nhiều hơn nữa

Về cơ bản, các bảng tuỳ chỉnh có thể mang đến sức mạnh cho người dùng theme của bạn bằng cách cho phép họ thay đổi hầu hết các khía cạnh thiết kết trang web của họ.

Trong loạt bài này, chúng ta sẽ tìm hiểu một options framework rất phổ biến và được sử dụng rộng rãi — Redux Framework.

Loạt bài viết này được chia thành hai phần:

  • Phần 1: Giới thiệu Redux Framework và tích hợp nó vào trong theme của bạn
  • Phần 2: Thêm các Section, Field và làm việc với các thiết lập cấu hình.
  • Phần 3: Sử dụng các tuỳ chọn trong theme của bạn (và widget)
  • Phần 4: Những frameword thay thế Redux
  • Phần 5: Kết luận

Options Framework là gì?

Redux Framework là một options framework được tạo ra bởi sự kiết hợp của bốn framework, có tên là:

  • NPH, được tạo bởi Lee Mason với mục tiêu tạo ra một framework mà tương thích với yêu cầu của ThemeForest.
  • SMOF
  • SimpleOptions, là một sự kết hợp của hai framework ở trên, được tạo bởi Dovy Paukstys
  • Phiên bản đầu tiên của Redux (Redux 2.0), được tạo bởi Daniel Griffiths và dựa trên NPH

Nhóm của Redux gồm những nhà phát triển sau đây. Dự án đang được phát triển, với các cập nhật được phát hành khá thường xuyên.

Các tính năng của Redux

  • Sử dụng WordPress Settings API
  • Nhiều trường dữ liệu
  • Tích hợp các lớp kiểm tra
  • Có thể mở rộng
  • Tình năng nhập/xuất, cho phép bạn đồng bọ trên nhiều trang web.

Tại sao Redux?

  • Miễn phí: Redux thì miễn phí 100%. Bạn có thể sử dụng trong cả các dự án cá nhân và thương mại mà không cần trả đồng nào.
  • Tương thích với ThemeForest: Redux đáp ứng các yêu cầu của Envato, làm cho nó trở thành một tùy chọn tốt cho các nhà phát triển theme muốn phát triển theme hoặc plugin của họ có thể bán trên Envato Market.
  • Phổ biến: Redux được sử dụng bởi hơn 250 sản phẩm trên Envato mà đã bán được hơn 6 triệu đô. Sự phổ biến nói lên sức mạnh của framework này.
  • Dễ dàng sử dụng: Nếu bạn hiểu cách mảng làm việc, thì bạn có thể sử dụng Redux. Làm quen với Redux thì đơn giản như là tạo một đối tượng cấu hình không có gì hơn ngoài các mảng lồng nhau.
  • Linh hoạt: Nếu nó không đúng với nhu cầu của bạn, Redux có thể được mở rộng để tạo các trường tuỳ biến và xủa lý lỗi.
  • Tài liệu hướng dẫn sử dụng đầy đủ: Redux được viết hướng dẫn sử dụng rất đầy đủ. Trang web của Redux có một kiến thức cơ bản, codex (tài liệu cho nhà phát triển), và video hướng dẫn sử dụng.
  • Cộng đồng lớn: Một cộng đồng lớn xung quanh Redux. Nếu bạn có một chút vấn đề và muốn được giúp, bạn sẽ có thể tìm thấy ai đó mà đã từng gặp vấn đề giống như bạn trước đây. Và nếu như một tính năng mà bạn yêu cầu, thì hơn 50 người đóng góp sẽ lắng nghe (và có thể thêm nó trong phiên bản tiếp).

Cài đặt Redux

Có một số cách để cài đặt Redux. Nhưng đối với mục đích của bài viết này, chúng ta sẽ cài đặt nó từ WordPress.org.

Cài đặt plugin giống như bạn cài các plugin khác:

  • Vào Plugins > Add New.
  • Trong hộp tìm kiếm, nhập Redux Framework và sau đó nhấp vào Search Plugins.
  • Từ trang web kết quả, nhấp vào Install Now trên mục đầu tiên.
  • Sau khi bạn cài đặt nó, tiến hành kích hoạt nó như bạn làm đối với bất kỳ plugin nào khác.

Kích hoạt chế độ Demo

Để kích hoạt chế độ demo, vào Plugins > Installed Plugins và cuộn xuống Redux Framework. Bạn sẽ thấy một thứ giống như thế này:

A Redux Framework entry on the installed plugin list

Nhấp vào Activate Demo Mode.

Điều này sẽ kích hoạt chế độ demo và tạo một bảng tuỳ chọn mẫu được gọi là Sample Options trong bảng điều khiển của WordPress.

WordPress Dashboard menu showing Sample Options and its submenus

Chế độ demo và trang Sample Options sẽ cho phép bạn chơi với Redux và khám phá các trường dữ liệu khác nhau mà nó cho phép bạn tạo.

Redux Options Panel showing the Home Settings Tab

Tích hợp nó vào trong theme của bạn

Đến lúc này chúng ta đã cài đặt Redux và kích hoạt chế độ Demo để cho phép chúng ta khám phá các trường khác nhau mà Redux cho phép chúng ta tạo.

Để tích hợp Redux vào trong theme của bạn, chúng ta khởi tạo nó với một tập tin cấu hình. Làm theo các bước này để khởi tạo một thể hiện mới của Redux:

  • Chuyển đến thư mục redux-framework bên trong thư mục WordPress Plugins của bạn (wp-content/plugins/) và sao phép thư mục sample vào theme của bạn.
  • Mở tập tin functions.php và thêm các dòng code sau:

Khi bạn làm mới lại bảng điều khiển WordPress của bạn và di chuyển chuột lên Sample Options, bạn sẽ thấy không có gì thay đổi — bạn vẫn có các thư mục con tương tự như trước. Điều này là bởi vì cấu hình của chúng ta giống hoàn toàn như trước. Chúng ta đơn giản di chuyển tập tin cấu hình từ thư mục plugin Redux vào thư mục theme của chúng ta.

Hơn nữa, bạn có thể thấy thông báo lỗi sau:

An error message caused by including duplicate configuration classes

Điều này là do thực tế rằng chúng ta đang nạp hai tập tin cấu hình giống nhau. Bạn có thể khắc phục lỗi này bằng cách vào bảng Plugins và tắt chế độ Demo.

A Redux Framework entry in the Plugins panel - with Deactivate Demo Mode option

Những gì chúng ta muốn làm là bắt đầu với một tập tin cấu hình rỗng. Redux đi kèm với một cái cho sự tiện lợi của bạn. Vì vậy hãy liên kết với nó.

Để làm điều đó, thay đổi dòng code mà bạn vừa mới thêm vào tập tin functions.php từ:

Thành:

Nếu bạn trở lại bảng điều khiển của bạn, bạn sẽ nhận thấy rằng bảng Sample Options của chúng ta chứa một phần — Home Settings — và một trường, một trình tải lên đa phương tiện đặt tên là Web Fonts.

Sample Options Page with barebones config activated

Bây giờ chúng ta có một bộ khung lớp cấu hình mà chúng ta có thể thêm các phần và các trường vào nó.

Kết luận

Trong phần đầu tiên của loạt bài này, chúng ta đã tìm hiểu về Redux Framework, nó là gì và tại sao nó đáng để sử dụng trong các dự án của bạn. Chúng ta tiến hành cài đặt mới Redux và đánh giá các tính năng khác nhau mà nó cung cấp cho chúng ta cũng như là các nhà phát triển theme.

Chúng ta cũng tạo một bộ khung tập tin cấu hình cho chính mình để minh hoạ cách chúng ta có thể bắt đầu tinh chỉnh Redux để phù hợp với nhu cầu của chúng ta.

Trong hướng dẫn tiếp theo của loạt bài này, chúng ta sẽ học về cách chúng ta có thể thêm các section, và đồng thời tìm hiểu cách thêm các trường vào trong các section này.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.