KỸ THUẬT THIẾT KẾ THEME
Tìm hiểu cấu trúc Theme Wordpress
Hình 2: Sơ đồ cấu trúc Theme trong Wordpress
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 10
Cấu trúc của một theme được mô tả như sơ đồ ở hình (2) Dựa vào cấu trúc sơ đồ trên ta có thể phân tích như sau:
Cấu trúc của một theme WordPress bắt đầu từ bên trong và được kết thúc bằng file index.php ở bên ngoài Do đó, yêu cầu đầu tiên khi tạo một theme WordPress là phải có file index.php.
Trong trường hợp có bất kỳ file nào không có trong cấu trúc, hệ thống sẽ bỏ qua và tiếp tục theo luồng từ trong ra ngoài, đồng thời loại bỏ các file không tồn tại.
Và giống như sự khác nhau giữa tên mỗi cấu trúc trên có 1 nhiệm vụ khác nhau trong Theme
Trang Archive có chức năng hiển thị các bài viết đã được đăng, cung cấp thông tin cần thiết như Tác giả, Danh mục và Thẻ Tất cả các dữ liệu này được gọi từ file archive.php.
Single Post bao gồm hai loại post type: Post và Page Post là các bài viết được đăng tải với thông tin phân loại và hiển thị tự động trên website, trong khi Page là các trang tĩnh được người dùng tạo ra để hiển thị nội dung lâu dài mà không cần cập nhật thường xuyên Người dùng có thể quyết định cho phép khách tham quan đọc Page hay không, và Page hỗ trợ phân cấp, điều này không có ở Post Cả hai loại này đều được phân chia thành hai file trong hệ thống, cụ thể là file single.php cho Post và file page.php cho Page.
404.php là một file quan trọng trong WordPress, hoạt động như một điểm dừng cho các liên kết dẫn đến những trang, bài viết không tồn tại, không tìm thấy hoặc không có quyền truy cập.
- Search.php đây là file hiển thị kết quả hay xử lý tìm kiếm các kết quả trong
Wordpress Đây là file giúp chúng ta có thể hiển thị các kết quả theo ý muốn của mình
- Ngoài ra còn có 1 số tập tin template như header.php, footer.php, comment.php … nhằm phục vụ mục đích hiển thị các vùng trên website
2.2.2 Xây dựng cấu trúc Theme: Để xây dựng một theme, chọn thư mục wp-content/themes và tạo một thư mục muốn chứa theme, chẳng hạn ở đây sẽ đặt tên thư mục là blogducduong là folder theme Trong thư mục này, tạo ra một tập tin style css với nội dung như sau :
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 11
Hình 3: Mở đầu của file style css
Tập tin style.css là yếu tố quan trọng nhất quyết định giao diện của website Hầu hết các định dạng giao diện sẽ được viết trong tập tin này, đặc biệt với các theme đơn giản Các dòng comment được thêm vào trong style.css nhằm mục đích cung cấp thông tin và hướng dẫn cho người phát triển.
- Theme Name: Tên hiển thị của theme khi cài đặt
Tác giả của theme có thể bao gồm thông tin như tên, liên kết đến trang cá nhân, phiên bản hiện tại, mô tả về theme và liên kết đến theme.
Text-domain là một phần quan trọng trong theme, giúp người dùng nhận biết và dễ dàng dịch theme sang ngôn ngữ khác Việc hiểu rõ về text-domain sẽ hỗ trợ trong quá trình tùy chỉnh và nâng cao trải nghiệm người dùng.
Để tạo một theme đơn giản, bạn chỉ cần một file index.php, một file style.css và một ảnh đại diện có tên screenshot.png đặt trong thư mục theme Khi đó, theme sẽ hoạt động như hình (3) sau khi cài đặt.
Một file gần như là quan trọng nhất trong theme là file functions.php
File functions.php là một tệp quan trọng trong theme WordPress, chạy ngay sau khi kích hoạt các plugin Đây là tệp bắt buộc trong theme, chứa các đoạn mã nguồn cần thiết để luôn được tải lên.
Hoàng Đức Lộc, lớp 53B, Khoa CNTT 12, cho biết khi tải website, toàn bộ mã PHP cần thiết cho một theme (trừ các mã hiển thị nội dung) sẽ được ghi vào file này.
Tập tin functions.php chứa hầu hết các hàm cần thiết cho theme, ngoại trừ phần template hiển thị Trong tập tin này, chúng ta khai báo cách lấy các thư mục trong theme và các hàm liên quan, giúp việc truy xuất thư mục file, core và các template trở nên thuận tiện hơn.
Hình 4: Các hàm lệnh và khai báo để lấy các hàm, thư mục cần thiết
Cũng như các thiết lập khác cho theme như
Để thiết lập theme, bạn cần thiết lập text-domain, thêm post format cho bài viết và định nghĩa các tiêu đề cho từng trang mà không cần viết mã để hiển thị Hãy đặt màu nền là trắng (#fff), đồng thời đăng ký menu và sidebar để tối ưu hóa trải nghiệm người dùng.
- Các hàm lấy thông tin cho bài viết (Post) như tên bài viết (Title), nội dung dưới dạng media đại diện (Thumbnail), lấy nội dung (Content)
- Hàm lấy đến file shortcodes.php và đăng ký category của shortcode trên Theme, lấy thư viện font-icon (Fontawesome)
- Hàm wp_get_attachment lấy media trong type gallery trong Theme option
- Hàm kami_pagination Hàm hiển thị phân trang
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 13
Hình 5: Các hàm thiết lập và cần thiết được sử dụng trong theme
2.2.3 Cấu trúc từng khu vực của một website: Để xây dựng một theme hoàn chỉnh, trước tiên chúng ta cần khảo sát các website và hình dung qua và yêu cầu về 1 website có những khu vực nào và chúng ta cần những gì để có thế dựng lên được nhưng khu vực đấy:
Về tổng quan 1 Website sẽ có các khu vực chính sau:
- Content bao gồm: Main content và sidebar
Header: là phần trên cùng hay là phần đầu của một website, header thường xuyên chứa logo và Menu
Hình 6: Khu vực header và thiết kế header
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 14
Page Title: là phần hiển thị ảnh banner và thông tin cơ bản về page hay post như
Title (tên Page hoặc Post), sub title và breadcrumbs*
Các plugin và các hỗ trợ cần thiết khác trong việc xây dựng theme
2.3.1 Plugin Redux Framework (Hỗ trợ xây dựng Theme Option): Để cho khách hàng có thể lựa chọn tùy chỉnh theo ý muốn các style header, page title, blog style, single blog setting cũng như footer hay các setting khác ở đây chúng ta có thể sử dụng plugin Redux Framework:
Chúng ta login vào wordpress và vào plugin => add new => tìm plugin này với từ khóa (key): “Redux Framework” Và cài đặt và active giống một plugin bình thường:
Hình 10: Cài đặt plugin Redux Framework
2.3.1.2 Sử dụng Redux Framework để xây dựng Theme Option:
The theme-option.php file is where we declare a class that contains simple default functions based on the demo version of the Redux Framework Within the setSections() function, we organize various sections, with each section representing a distinct area for specific options.
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 17
Hình 11: Code cho Theme option dựa vào plugin Redux Framework
Sau khi xây dựng Theme Option ta sẽ được tùy chọn cho Theme Option trên Website như sau:
Hình 12: Theme Option hiển thị sau khi xây dựng code
2.3.1.3 Cơ chế làm việc của Redux Framework:
Redux Framework sử dụng một biến kiểu array duy nhất để lưu trữ tất cả các tùy chọn do người phát triển thiết lập Mỗi trường tùy chọn sẽ có một key riêng do người dùng đặt tên, và các thiết lập này được gọi thông qua biến global, cho phép sử dụng trên toàn bộ theme.
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 18
Hình 13: Setting tên biến toàn cục cho theme option ($theme_kami_option)
Trong cơ sở dữ liệu Redux Framework chứa biến theme_kami_option ở hình dưới đây và được lưu thành 1 bản ghi duy nhất:
Hình 14: Biến theme_kami_option trong cơ sở dữ liệu Để kiểm tra biến theme_kami_option ta dung hàm để lấy biến ra:
Hình 15: Kiểm tra dữ liệu setting ở trong biến theme_kami_option
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 19
2.3.1.4 Cách xử lý và lấy dữ liệu từ theme option để xây dựng các template: Đầu tiên nói về các trường tùy chọn đã được thiết lập trong theme option:
Hình 16: Code khai báo và hiển thị một trường tùy chọn đơn giản
Như hình 16 ta có thể thấy được, khai báo cơ bản của 1 trường cơ bản là:
Id - Key phân biệt các setting trong theme
Type - Kiểu dữ liệu đã được định nghĩa bởi Redux Framework
Tên hiển thị của thiết lập rất quan trọng, vì nó giúp xác định ID của các trường Những ID này là từ khóa cần thiết để phân biệt các biến trong mảng của theme_kami_option.
Hình 17: Lấy một dữ liệu đơn giản từ theme option để phục vụ xử lý
Khai báo global cho biến theme_kami_option
Gán giá trị của biến theme_kami_option với từ khóa (ID) theo kiểu mảng giúp rút ngắn và làm rõ quá trình xử lý dữ liệu Việc này tạo điều kiện thuận lợi cho việc quản lý các thiết lập một cách hiệu quả hơn.
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 20
2.3.2 Plugin Visual Composer (Hỗ trợ việc dựng Website):
Plugin hỗ trợ dựng trang với nhiều shortcode được định nghĩa bởi Visual Composer, cho phép người dùng phát triển các shortcode riêng Điều này mang lại tính tùy biến cao cho plugin, đặc biệt hữu ích cho các nhà phát triển Theme Họ có thể tạo danh mục các shortcode của riêng mình, giúp khách hàng dễ dàng và thuận tiện hơn trong việc xây dựng website.
Plugin này không thể cài đặt trong phiên bản miễn phí của WordPress do yêu cầu bản quyền Vì vậy, bạn cần sao chép plugin này trực tiếp vào thư mục wp-content/plugins/.
Sau khi cài đặt và kích hoạt plugin trên website WordPress, chúng ta sẽ thấy phần hỗ trợ dựng trang giống như một ứng dụng Plugin này đã tích hợp sẵn các shortcode cơ bản từ nhà phát triển Visual Composer, giúp người dùng dễ dàng tạo nội dung.
18) khi dựng trang người dùng có thể học cách sử dụng đơn giản về cách sử dụng build page vì hầu hết chỉ cần 1 vài click chuột , kéo thả và chọn lựa vì các shortcode đã được nhà phát triển làm sẵn và hỗ trợ tốt cho việc dựng trang:
Hình 18: Các shortcode có sẵn trong plugin Visual Composer
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 21
Để đăng ký một shortcode vào vc_map của Visual Composer, bạn cần khai báo danh mục KAMI_SHORTCODE_CATEGORY trong file functions.php Danh mục này giúp phân loại và lưu trữ các shortcode mới, giúp người sử dụng dễ dàng phân biệt giữa shortcode của theme và các shortcode có sẵn trong Visual Composer.
Hình 21: Tạo một danh mục mới để chứa shortcode
Khi có danh mục các shortcode sẽ hiển thị trong category riêng của theme:
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 22
Sau khi hoàn thành việc lập trình cho shortcode, người dùng sẽ thấy shortcode trong danh mục cùng với các tùy chọn đã được lập trình Tuy nhiên, khi người dùng thực hiện lựa chọn, nội dung vẫn chưa hiển thị do chưa có dữ liệu để hiển thị.
1 file hay hàm nào xử lý cho các dữ liệu mà người dùng đã setting vào shortcode:
Sau khi tạo ra shortcode và các thiết lập ta cần 1 file xử lý các dữ liệu đầu vào
Khi xây dựng shortcode cho một theme, việc tổ chức các shortcode thành các thư mục riêng biệt là rất quan trọng Đối với theme Blog, tôi đã tạo ra một số thư mục tương ứng với các shortcode như: button, call-to-action, heading, blog, banner, icon-box, và list Điều này giúp quản lý và sử dụng các shortcode một cách hiệu quả hơn.
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 23
Hì hình 25: Lấy các file shortcode đưa vào file shortcodes.php
Và 1 thành phần không thể thiếu là khai báo thư viện icon để có thể sử dụng nó trong Visual Composer:
Hình 26: Khởi tạo thư viện font-icon cụ thể ở đây là font-awesome
Hình 27: Khai báo để sử dụng font icon
HOÀNG ĐỨC LỘC – LỚP 53B – KHOA CNTT 24
Phân tích qua 1 file shortcode đơn giản ta sẽ thấy gồm 3 phần chính:
- Khai báo class gọi hàm chạy shortcode
- Khai báo biến và xử lý biến
Sử dụng biến và hàm để xử lý HTML và CSS giúp hiển thị đúng yêu cầu và tùy chọn của người dùng Nội dung chính của shortcode thường được xử lý qua class hoặc CSS inline Vì vậy, cách tiếp cận chung là phân biệt các kiểu style của một element shortcode bằng các class, từ đó tạo ra nhiều kiểu hiển thị khác nhau trên cùng một HTML.
Tuy nhiên, điều này không có nghĩa là tất cả các shortcode chỉ được xử lý bằng CSS Chúng ta có thể thay đổi kiểu dáng bằng cách sử dụng các câu lệnh if else dựa trên cài đặt của khách hàng, với mỗi trường hợp sẽ có một HTML khác nhau hoặc một hàm khác được gọi Ngoài ra, các đoạn JavaScript khác cũng có thể được áp dụng.