KỸ THUẬT THIẾT KẾ THEME
Tìm hiểu cấu trúc Theme Wordpress
Hình 2.1 Sơ đồ cấu trúc Theme trong WordPres
Cấu trúc của một theme đƣợc mô tả nhƣ giao diện hình 2.1 Dựa vào cấu trúc trên ta có:
1 Cấu trúc Theme Wordpress đi từ trong ra ngoài và đƣợc chốt chặn ngoài cùng bằng file index.php nên khi làm một theme wordpress yêu cầu đầu tiên phải có file index.php
2 Với cấu trúc như trên thì trong trường hợp có bất kỳ file nào không có nó sẽ bỏ qua và đi theo luồng giống hình bên trên đi từ trong ra ngoài và bỏ qua các file không có
3 Và giống nhƣ sự khác nhau giữa tên mỗi cấu trúc trên có một 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, bao gồm thông tin quan trọng như Tác giả, Danh mục và Thẻ Các thông tin này được lấy 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 tạo ra để trình bày 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 Tương tự, Single Post được phân chia thành hai file cho hai post type là page và post trong file single.php và file page.php.
File 404.php trong WordPress đóng vai trò quan trọng khi xử lý các lỗi đường dẫn Khi người dùng gặp phải lỗi 404, đây chính là nơi tiếp nhận các liên kết dẫn đến trang, bài viết không tồn tại hoặc không có quyền truy cập.
File search.php trong WordPress là công cụ quan trọng để hiển thị và xử lý các kết quả tìm kiếm Nó cho phép người dùng tùy chỉnh cách hiển thị kết quả theo ý muốn, mang lại trải nghiệm tìm kiếm tốt hơn.
- Ngoài ra còn có một 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.1.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à greenblog Trong thƣ mục này, tạo ra một tập tin style.css với nội dung nhƣ sau:
Hình 2.2 Mở đầu của file Style.css
Tập tin style.css đóng vai trò quan trọng trong việc xác định giao diện bên ngoài của website Đối với một theme đơn giản, hầu hết các định dạng và phong cách giao diện sẽ được quy định trong tập tin này.
Mục đích các dòng comment đƣợc thêm vào trong tập tin style.css là nhƣ sau:
- Theme Name: Tên hiển thị của theme khi cài đặt
- Author: Tên tác giả ngoài ra có thể có một số thông tin khác nhƣ:
Author URL (link tác giả), Version (phiên bản hiện tại của theme), Description (mô tả về theme), Theme URL v.v
Text-domain là một phần quan trọng trong việc giúp người dùng hiểu rõ hơn về theme, cũng như hỗ trợ quá trình dịch theme sang ngôn ngữ khác một cách dễ dàng.
- Ngoài ra cần thêm một tấm ảnh và đặt tên là screenshot.png rồi đặt vào thƣ mục theme để làm ảnh hiển thị khi cài đặt theme
Nhƣ vậy, chúng ta đã có 1 theme đơn giản tối thiểu và có thể hoạt động đƣợc
Hình 2.3 Ảnh nền hiển thị của Theme khi vào active Theme
File function.php là một tập tin quan trọng trong theme WordPress, chạy ngay sau khi kích hoạt các plugin Đây là file bắt buộc trong theme, chứa các đoạn code PHP cần thiết để website luôn được tải Tóm lại, toàn bộ code PHP liên quan đến chức năng của theme (ngoại trừ code hiển thị nội dung) sẽ được viết vào file này.
Về tập tin function.php chứa hầu hết các hàm trừ phần template hiển thị theme
Chúng ta chủ yếu khai báo phương thức truy cập các thư mục trong theme cùng với các hàm liên quan, bao gồm cách lấy thư mục file, core, và các khai báo giúp truy cập các template một cách thuận tiện hơn.
Hình 2.4 Khai báo cách lấy và lấy các thư mục trong theme
Các thiết lập cho theme bao gồm việc cấu hình định dạng bài viết, đăng ký sidebar và menu, cũng như lấy thumbnail, tiêu đề và nội dung Ngoài ra, cần khai báo các hàm khác và các hàm xử lý phân trang để đảm bảo theme hoạt động hiệu quả.
Hình 2.5 Các hàm thiết lập và cần thiết được sử dụng trong theme setup
Và cũng không thể thiếu các function trong theme, nó đƣợc sử dụng rất nhiều để lấy các giá trị của theme Option:
Hình 2.6 Các hàm function quan trọng của theme
2.1.3 Cấu trúc từng khu vực của một website Để xây dựng theme hoàn chỉnh, chúng ta trước tiên hình dung qua và yêu cầu về một 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: Đầu tiên một website sẽ có các khu vực sau:
Header: là phần trên cùng của một website, header thường xuyên chứa logo và Menu
Hình 2.7 Khu vực Header và thiết kế header
Page Title: là phần hiển thị và ảnh banner thông tin cơ bản về page hay post nhƣ Title (Tên Page hoặc Post), sub title và breadcrumbs*
Breadcrumbs, hay còn gọi là Breadcrumbs Trail, là một thẻ điều hướng phụ giúp tối ưu hóa trải nghiệm người dùng trên website Chúng là tập hợp các đường link phân cấp, cho phép người dùng nhận biết vị trí hiện tại của mình trên trang và dễ dàng di chuyển giữa các trang khác nhau.
Hình 2.8 Khu vực Page Title thường nằm dưới header và trên body
Body: là khu vực chính hiển thị nội dung của một page một post hay tất cả những gì chúng ta muốn hiển thị ra bên ngoài
Content: Nội dung của website
Sidebar là phần nội dung quan trọng trên website, giúp thu hút sự chú ý của khách hàng Nó thường chứa các thông tin ngắn gọn và có thể chiếm từ 1/3 đến 1/2 diện tích của trang Sidebar có thể được đặt ở bên phải, bên trái hoặc cả hai bên của thân website.
Hình 2.9 Khu vực body bao gồm Nội Dung và Sidebar
Footer: Đây là khu vực phía dưới website giúp chúng ta có thể thêm các nội dung nhƣ logo footer, thông tin liên hệ, thời gian làm việc, v.v…
Hình 2.10 Khu vực Footer và các content footer
Định hướng
Sau khi nắm rõ các khu vực hiển thị trên website ta có các file sau sử dụng để hiển thị các khu vực nhƣ phân tích bên trên:
Template cho khu vực header, page-title:
Hình 2.11 Các file template cho header và page title
Template cho khu vực footer:
Hình 2.12 Các file template cho footer
Template cho khu vực body:
Hình 2.13 Các file template cho khu vực body
Các Plugin cần thiết
2.3.1 Plugin Redux Framework (Hỗ trợ theme option) Để cho khách hàng có thể lựa chọn tùy chỉnh theo ý muốn các style header cũng nhƣ footer hay các setting khác ở đây chúng ta có thể sử dụng plugin Redux Framework:
1 Cài đặt plugin:Chúng ta login vào wordpress và vào plugin add new tìm với key: Redux Framework Và cài đặt giống plugin bình thường:
Hình 2.14 Cài đặt Redux Framwork
2 Sử dụng theme option của Redux Framework:
The setSection() function is a crucial method within the Redux Framework theme options, as it allows for the categorization of settings Within this method, we can declare various sections such as header, footer, page title, and blog settings, enabling us to configure the theme options effectively.
Hiển thị của Theme Option trong Wordpress:
Hình 2.16 Giao diện thiết lập tùy chọn Theme option cho người dùng
3 Cơ chế làm việc của ReduxFramework
Redux Framework sử dụng một biến kiểu mảng với một bản ghi duy nhất để lưu trữ tất cả các tùy chọn mà nhà phát triển thiết lập Mỗi tùy chọn sẽ có một key riêng do người dùng đặt tên Các thiết lập này được gọi qua biến global, cho phép sử dụng trên toàn bộ theme.
Hình 2.17 Tên biến chứa dữ liệu theme option
Trong cơ sở dữ liệu Redux framework chứa biến speci_options ở hình dưới đây và được lưu thành một bản ghi duy nhất:
Hình 2.18 Cách lấy dữ liệu của biến speci_options
Việc lưu trữ dữ liệu trong theme option được thực hiện qua biến speci_options, mà nhà phát triển theme đã định nghĩa Các tùy chọn được phân biệt bằng các key khác nhau, giúp người dùng dễ dàng truy xuất dữ liệu chỉ với key mà không cần thực hiện nhiều truy vấn.
4 Cách xử lý để lấy các tùy chọn của người dùng trong theme option Để có thể xử lý các thiết lập theme option trong template ta cần lấy đƣợc các giá trị đã được người dùng thiết lập:
Hình 2.19 Lấy các giá trị trong theme option và xử lý
Biến $g5plus_get_option cho phép lấy giá trị từ các thiết lập trong theme option Để giảm thiểu việc viết lại nhiều lần trong các hàm, chúng ta có thể gán giá trị của thiết lập vào một biến, giúp việc sử dụng trở nên dễ dàng hơn Khi đã có biến và giá trị thiết lập, chúng ta có thể dựa vào đó để xây dựng các template đã được đề cập cho người dùng trong Theme Option.
2.3.2 Plugin Visual Composer (Hỗ trợ việc dựng Website)
Visual Composer: Là một plugin trả phí phát triển mạnh trong các plugin để xây dựng trang website
Plugin này không thể cài đặt trong phiên bản miễn phí của WordPress vì yêu cầu bản quyền Do đó, chúng ta 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 plugin, người dùng sẽ có quyền truy cập vào phần hỗ trợ dựng trang giống như một ứng dụng, với các shortcode cơ bản được cung cấp bởi nhà phát triển Visual Composer Việc xây dựng trang trở nên đơn giản hơn nhờ vào khả năng kéo thả và lựa chọn chỉ với vài cú click chuột, nhờ vào các shortcode đã được thiết lập sẵn, giúp tối ưu hóa quá trình dựng trang.
Hình 2.20 Giao diện sử dụng của Plugin
Plugin này cung cấp nhiều shortcode do nhà phát triển Visual Composer định nghĩa, đồng thời cho phép phát triển thêm các shortcode khác Nhờ khả năng tùy biến cao, plugin rất phù hợp cho các nhà phát triển Theme, giúp họ tạo danh mục shortcode riêng để khách hàng dễ dàng lựa chọn khi xây dựng website.
2 Cơ chế hoạt động khi tạo một shortcode mới cho Theme Ở plugin Visual Composer để tạo 1 shortcode mới chúng ta cần khai báo file shortcode.php include các file cần thiết vào để tạo thành 1 shortcode hoàn chỉnh
Hình 2.21 File shortcodes.php với các khai báo và đăng ký
After including all necessary files, we need to create a file named lean-map.php to register vc_map, allowing us to add shortcodes to the Visual Composer library.
Hình 2.22 File lean-map.php
Sau khi đăng ký class hoạt động vào Visual composer, chúng ta tạo một project có tên của shortcode cần tạo
Có ba file php quan trọng trong project này:
+ config.php: file nay có nhiệm vụ khai báo các trường cần thiết của shortcode đó cần thiết
File template.php được sử dụng để lấy giá trị từ các trường của file config.php từ bên ngoài website và xử lý chúng Ngoài ra, file này còn có chức năng tải các file CSS và JavaScript cần thiết bằng cách sử dụng hai hàm có sẵn của WordPress là wp_enqueue_style() và wp_enqueue_script().
+ file cuối cùng là file có tên trùng với project của shortcode đó: nó có nhiệm vụ khai báo một class riêng của shortcode đó
3 Cách khai báo xử lý và hiển thị shortcode
Trong file Config.php, chúng ta bắt đầu bằng việc khai báo một shortcode cùng với các tùy chọn của nó theo định dạng của Visual Composer Điều này bao gồm các thông tin như tên (name), id (base), biểu tượng (icon) hiển thị của shortcode trên Visual Composer, và danh mục (category) giúp người dùng phân biệt giữa các shortcode của theme và các shortcode cơ bản của Visual Composer.
Yếu tố quan trọng nhất trong việc sử dụng shortcode là 'params', cho phép người dùng tùy chỉnh kiểu dáng và cách hiển thị Các tham số này là đầu vào cần thiết để xử lý và hiển thị đúng các shortcode.
Sau khi khai báo Shortcode trong vc_map, chúng ta cần phân chia các shortcode vào từng file riêng biệt để xử lý các tùy chọn đã được khai báo và người dùng lựa chọn.
Dưới đây là một file xử lý shortcode đơn giản:
Phân tích qua một file shortcode đơn giản ta sẽ thấy gồm ba phần chính:
- Khai báo class gọi hàm chạy shortcode
- Khai báo biết và xử lý biến (config.php)
CODE CÁC TEMPLATE TRONG THEME
Code cho khu vực header
Unlike standard HTML code that requires linking to necessary CSS and JS files, the header file only needs to include the code snippet `do_action('g5plus_header_before')` to enqueue all the essential CSS and script links into the theme.
+ g5plus_get_option() là để lấy dữ liệu khi chúng ta setting từ theme option ở ngoài website đƣa vào để xử lý
Hàm wp_head() là một hook trong WordPress, giúp hệ thống nhận diện phần đầu (head) của trang Nó cho phép tự động thêm các thành phần cần thiết và tạo điều kiện cho các plugin khác can thiệp thông qua wp_head().
The website header display is configured by the website administrator in the theme options Within the templates/header section, multiple header files can be created based on the styles applied by the developer for that specific header.
Biến $header_layout ở trên để lấy ra phần header mà quản trị website cấu hình trong theme_option của thêm Mặc định của theme là header-1
Hình 3.2 Các layout của phần header
Header sẽ đƣợc phân chia thành 2 phần header nhỏ hơn là left và right:
The left header will feature the logo, while the right header will contain the menu Utilizing plugins and variables discussed in Chapter 2, we can easily manage the code and style formatting for each option.
Header Logo: Ở đây chúng ta sẽ đọc ảnh mà người dùng nhập vào và config ở theme option để lấy đường dẫn write sang html để hiển thị logo:
Code cho phần Footer
Tương tự với header ta sẽ có 1 file footer.php:
The footer content is sourced from the Theme Option and sidebar using the do_action('g5plus_main_wraper_footer') function This section can be divided into various components.
4 cột do người dùng setting
Hình 3.5 Cấu hình chọn số column và layout trong Theme Option
Nội dung của các cột được lấy từ các sidebar trong widgets, mang lại khả năng tùy biến cao Nội dung sẽ thay đổi tùy thuộc vào các widget có trong sidebar và cách chúng được hiển thị.
Hình 3.6 Setting content cho từng column
Similar to the wp_head() function, WordPress also provides the wp_footer() function to incorporate essential components into your theme To enable a sidebar for theme options that can retrieve data, you need to declare four sidebars: Footer 1, Footer 2, Footer 3, and Footer 4 using the register_sidebar() function.
'before_widget' => '',
'before_title' => '
',
'before_widget' => '',
'before_title' => '
',
'before_widget' => '',
'before_title' => '
',
'before_widget' => '',
'before_title' => '
',
Sidebar là khu vực chứa các widget, đóng vai trò quan trọng trong việc quyết định nội dung của trang web Người dùng có thể tận dụng các widget có sẵn trong WordPress hoặc tạo ra các widget tùy chỉnh để phù hợp với theme, từ đó mang đến nhiều lựa chọn phong phú khi xây dựng website.
Hình 3.7 Khu vực chứa widget của theme
Code cho Page Title
Yêu cầu cho Page Title bao gồm các thông tin nhƣ Title, Sub Title, Padding, Breadcrumbs, Background Image, Background-overlay…:
Phần tùy chọn cho page title:
Hình 3.8 Khu vực setting Page Title trong Theme Option
Page Title Option có các tùy chọn nhƣ:
- Hiển thị hay không hiển thị page title
- Lựa chọn Style cho Page Title
- Do Title đƣợc lấy mặc định nên chỉ cho phép nhập subtitle
- Các tùy chọn màu sắc cho title, sub title, breadcrumbs
Overlay là một lớp màu nền trong suốt được sử dụng để cải thiện độ tương phản giữa văn bản và hình ảnh nền, giúp nội dung trở nên dễ đọc hơn Thiết lập overlay và hình ảnh nền (Background Image) đóng vai trò quan trọng trong việc tạo ra trải nghiệm người dùng tốt hơn trên các trang web.
- Các thiết lập về Breadcrumbs cho phép thiết lập breadcrumbs hiển thị hay không
Bạn có thể điều chỉnh độ cao của tiêu đề trang bằng cách thay đổi padding trên và dưới, cũng như sử dụng margin dưới để tạo khoảng cách rõ ràng giữa tiêu đề trang và nội dung bên dưới.
Viết code cho khu vực nội dung website
Khu vực hiển thị website đối với một theme Blog bao gồm các thành phần chính là:
- Archive: Trang hiển thị các bài viết trong Post (file archive.php)
- Page: Trang tĩnh có nội dung ít thay đổi cũng là 1 loại post.(file page.php)
- Post: Các bài viết đƣợc đăng có thông tin hình ảnh và các định dạng khác nhau (file single.php)
File index.php nằm ở vị trí bên ngoài cùng của theme Trong các file này, để lấy nội dung, điều quan trọng không phải là lấy nội dung ngay lập tức, mà trước tiên chúng ta cần hiển thị các phần chung của theme, chẳng hạn như tiêu đề, menu và footer.