Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Bắt đầu với Redux Framework, Phần 2: Phần, Fields & Config

by
Length:ShortLanguages:
This post is part of a series called Getting Started With Redux Framework.
Getting Started With Redux Framework: Introducing It and Integrating It Into Your Theme

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

Bài viết này giúp bạn, nhà phát triển, bắt đầu sử dụng Redux Framework theo cách cơ bản nhất: thêm các field. Trong quá khứ, làm việc với Redux yêu cầu một số hiểu biết về lớp trong PHP và cách chúng làm việc. Với Redux 3.5+ những khó khăn đó đã biến mất.

Tôi là một trong những người tạo ra Redux Framework, và trong hướng dẫn này, tôi sẽ thảo luận về cấu trúc bên trong của Redux, cách các field và section làm việc, và các tham số cấu hình toàn cục.

Redux đi kèm với tập tin sample-config.php chứa nhiều ví dụ về thiết lập Redux, cũng như các ví dụ cho hầu hết các field mà nó cung cấp. Để hiểu hơn, hãy xem cấu hình mẫu hoặc xem Redux Documentation.

Nạp Redux

Để bắt đầu sử dụng Redux Framework, thì trước tiên nó phải được nạp. Có hai cách để làm điều đó.

Đầu tiên, Redux có thể được cài đặt một cách dễ dàng như một plugin và kích hoạt nó. Plugin này miễn phí trên WordPress.org. Việc cài đặt sau đó được hoàn tất thông qua giao diện cài đạt plugin.

Cách thứ hai là nhúng Redux Framework vào bên trong theme hoặc plugin của bạn. Việc nhúng cũng khá dễ dàng. Đơn giản là sao chép thư mục ReduxCore vào trong theme hoặc plugin của bạn (đổi tên thư mục thành bất cứ tên gì mà bạn thích) và include tập tin framework.php, thông qua hàm include trong PHP.

Nếu các bước này là quá khó khăn, thì Redux cũng cung cấp Redux Builder cho phép bạn tạo ra theme đầy đủ tính năng cùng với Redux đã được nạp. Đặc biệt, dịch vụ builder là hoàn toàn miễn phí.

Bây giờ thì Redux Framework đã được nạp, chúng ta có thể bắt đầu sử dụng nó.

Hiểu cách Redux hoạt động.

Để hiểu cách Redux Framework hoạt động, cái đầu tiên phải hiểu là một Redux instance. Redux có thể được chạy bởi một theme và bất kỳ plugin nào tại cùng một thời điểm, tất cả từ bên trong một cài đặt WordPress. Mỗi instance có tập hợp các thuộc tính và tham số riêng của nó; mỗi cái có thể hoạt động rất khác nhau.

Lý do Redux hoạt động như vậy là để đảm bảo tính linh hoạt cao nhất. Có nhiều option framework chỉ cho phép một instance của framework đó chạy. Chúng tôi muốn các nhà phát triển theme và plugin không bị cản trở bởi code của một nhà phát triển khác.

Tham số opt_name

Làm thế nào điều này giữ cho các instance riêng biệt hoàn toàn? Nó được thực hiện thông qua một khoá duy nhất opt_name. Đây là nơi dữ liệu của bạn được lưu trữ trong WordPress và đồng thời đếm khoá duy nhất của bạn thông qua Redux Framework. Điều quan trọng cần phải hiểu là trước khi bạn bắt đầu làm việc với Redux Framework, bạn sẽ cần chọn một cái tên độc nhất cho opt_name. Một khi điều đó được xác định, là lúc để tìm hiểu sâu vào các tham số toàn cục.

Thiết lập các tham số toàn cục

Bảng tuỳ chọn của Redux Framework được xây dựng dựa trên mảng PHP. Các tham số toàn cục dưới đây chỉ áp dụng đối với instance mẫu của Redux Framework. Một danh sách đầy của của các tham số toàn cục có thể được tìm thấy trên trang web Redux. Với mục đích của bài viết này, chúng ta sẽ làm việc với một số tham số rất cơ bản, và cách để thiết lập nó.

Một khi code này được chạy, Redux Framework sẽ tạo ra một bảng đầy đủ tính năng. Hình ảnh ở bên dưới giải thích cách mỗi tham số tác động lên bảng tuỳ chọn.

How each argument affects this panel

Thiết lập các section

Bây giờ thì bảng tuỳ chọn đã được tạo, hãy thêm một số section và trường dữ liệu. Redux sử dụng các mảng lồng nhau cho các trường và tham số, tuỳ vậy với Redux 3.5+ những điều này được phân chia khá dễ dàng. Hãy bắt đầu tạo một section mà chúng ta có thể thêm các trường vào. Để tìm hiểu thêm về section, hãy xem tài liệu hướng dẫn cho section.

Developer Mode

Các biểu tượng

Nhóm đứng đằng sau Redux Framework cũng duy trì một bộ icon gọi là Elusive Icons. Như vậy, bộ Elusive icon được tích hợp trực tiếp vào lõi Redux. Thêm biểu tượng dễ dàng như cách xác định một lớp, như trong ví dụ. Nếu bạn muốn có một bộ icon khác, chẳng hạn như FontAwesome, thì tài liệu hướng dẫn sẽ giúp bạn.

Section con

Section có thể được chuyển đổi thành section con để dễ dàng quan lý bảng điều khiển của bạn. Dưới đây là một ví dụ, với một ví dụ.

Framework Icons

Các field

Các field không khác so với các section hoặc tham số; nó bắt đầu với một mảng. Trước khi tìm hiểu thêm, chúng ta cần biết rằng Redux có trên 30 field khác nhau, mỗi cái có một bộ tham số riêng của nó. Để xem các kiểu khác nhau, một lần nữa đọc tài liệu của chúng tôi, trong mục Redux Documentation on Fields.

Các trường có thể được thêm vào section theo hai cách. Đầu tiên, nối các mảng của trường với hàm setSections được đề cập ở trên. Trong ví dụ ở trên bạn có thể dễ dàng thêm một tham số field và thêm bao nhiêu field tuỳ ý vào section đó.

Cách thứ hai yêu cầu một hàm Redux API được gọi, nhưng nó cũng đơn giản.

Hãy xem những gì mà điều này thực hiện với bảng tuỳ chọn mẫu.

Our Example Panel

Hãy dành thời gian để xem xét các kiểu field khác nhau. Redux Framework có chứa một số field mạnh mẽ. Ví dụ, field typography tự động nạp Google font được chọn vào trang của bạn. Field background — sẽ xuất ra tham số được thiết lập vào CSS selector của bạn —sẽ tạo ra các CSS cần thiết và thêm nó vào trang web của bạn. Nói một cách đơn giản Redux Framework thật sự thực hiện rất nhiều công việc nặng nhọc cho bạn!

Cảm thấy chưa đủ?

Cách dễ nhất để bắt đầu là xem trang demo của Redux. Nó minh hoạ tất cả các field khác nhau mà Redux cung cấp với một tá các cấu hình.

Điều thật sự hữu ích là cấu hình trang demo đi kèm với Redux. Bên trong ~/sample/sample-config.php là tất cả mọi thứ mà bạn thấy trên trang demo.

Nếu bạn vẫn thấy chưa đủ, có một cộng đồng Redux đằng sau sẽ giúp bạn, do đó bạn sẽ tìm thấy hầu hết mọi thứ mà bạn cần trên trang tài liệu của Redux.

Lấy toàn bộ ví dụ

Cấu cấu hình mẫu đầy đủ được trình bày trong hướng dẫn này được kèm theo để bạn có thể tải về ở phần bên phải. Đây chỉ là một ví dụ. sample-config của Redux có rất nhiều ví dụ mở rộng.

Kết luận

Trong phần thứ hai của loạt bài này, chúng ta đã tìm hiểu sâu hơn cách Redux hoạt động, và làm thế nào để bắt đầu với nó. Chúng ta cũng kiểm tra cách thức để thêm section và field cho một instance của Redux.

Chúng ta cũng tìm hiểu các section và cách chúng có thể được hiển thị khác nhau, dựa trên các tham số và cách các field được gắn vào các section, và cách chúng có thể dễ dàng được tuỳ biến để phù hợp với nhu cầu của bạn.

Trong phần tiếp theo của loạt bài này, chúng ta sẽ tìm hiểu các bước tiếp theo trong việc sử dụng Redux trong theme và plugin của bạn. Chúng tôi sẽ đề cập cách sử dụng Redux để tự động hoá CSS và phông chữ. Chúng ta cũng thảo luận về các tính năng nổi bật khác mà Redux cung cấp cho bạn.

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.