Lập trình theme wordpress cho website blog

KỸ THUẬT THIẾT KẾ THEME

Tìm hiểu cấu trúc Theme Wordpress

Cấu trúc của một theme trong WordPress được thể hiện qua sơ đồ trong hình 2 Dựa vào sơ đồ này, chúng ta có thể phân tích các thành phần chính và cách chúng tương tác với nhau để tạo nên một theme hoàn chỉnh.

Cấu trúc của một theme WordPress được xây dựng từ bên trong ra ngoài, với file index.php đóng vai trò chốt chặn ở bên ngoài cùng 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 đã nêu, hệ thống sẽ tự động bỏ qua và tiếp tục theo luồng từ trong ra ngoài, chỉ xử lý các file hợp lệ.

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ẻ 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 rõ ràng và được hiển thị tự động trên trang web.

SVTN: Dương Minh Đức – MSSV: 1151070416 – Lớp 52K1 CNTT Trong thiết kế website, "page" là các trang tĩnh được tạo ra để hiển thị nội dung lâu dài, không có tính cập nhật thường xuyên, cho phép người dùng quyết định quyền truy cập Ngược lại, "post" là nội dung động, thường xuyên được cập nhật Cấu trúc Single Post được chia thành hai file tương ứng với hai loại nội dung: page và post, được lưu trữ trong file single.php và page.php.

404.php là một file quan trọng trong WordPress, hoạt động như một trạm dừng cho các liên kết dẫn đến các trang hoặc bài viết không tồn tại hoặc không có quyền truy cập Khi xảy ra lỗi đường dẫn 404, file này sẽ hiển thị thông báo cho người dùng biết rằng trang họ tìm kiếm không thể được tìm thấy.

File search.php trong WordPress là công cụ quan trọng để hiển thị và xử lý kết quả tìm kiếm, cho phép người dùng tùy chỉnh cách thức 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.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à 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:

Tập tin style.css là yếu tố quyết định giao diện bên ngoài của website, với hầu hết các định dạng CSS cho một theme đơn giản được viết trong đây Các dòng comment trong file style.css được thêm vào nhằm mục đích hướng dẫn và giải thích cho người dùng.

- Theme Name: Tên hiển thị của theme khi cài đặt

Bài viết này cung cấp thông tin về tác giả, bao gồm tên tác giả, liên kết đến trang cá nhân (author URL), phiên bản hiện tại của theme, mô tả chi tiết về theme, và liên kết đến theme (theme URL).

SVTN: Dương Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 11

Text-domain là một yếu tố quan trọng trong theme, giúp người dùng hiểu rõ hơn về cách thức dịch theme sang ngôn ngữ khác Việc xác định text-domain không chỉ hỗ trợ trong quá trình dịch thuật mà còn nâng cao khả năng tương tác của theme với người dùng toàn cầu.

Để tạo một theme đơn giản, bạn chỉ cần ba thành phần cơ bản: một file index.php, một file style.css và một ảnh đại diện có tên là screenshot.png được đặt trong thư mục theme Khi hoàn tất, theme của bạn sẽ có thể hoạt động như hình (3) sau.

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 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 toàn bộ đoạn code PHP cần thiết để website luôn được tải, ngoại trừ các code hiển thị nội dung.

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 chủ yếu khai báo cách lấy 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 template, giúp việc quản lý và sử dụng theme 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ƣ

Các plugin và các hỗ trợ cần thiết khác trong việc xây dựng theme

2.2.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 Sử dụng Redux Framework để xây dựng Theme Option:

The theme-option.php file is used to declare a class that contains simple default functions from the Redux Framework demo Within the setSections() function, various sections are created, each representing a distinct customization area for the website.

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

Hình 12: Theme Option hiển thị sau khi xây dựng code

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 có một key riêng do người dùng đặt tên Các thiết lập này được truy cập thông qua biến global, giúp chúng có thể được sử dụng trên toàn bộ theme.

Hình 13: Setting tên biến toàn cục cho theme option ($theme_green_option)

Trong cơ sở dữ liệu Redux Framework chứa biến theme_green_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_green_option trong cơ sở dữ liệu Để kiểm tra biến theme_green_option ta dung hàm để lấy biến ra:

Hình 15: Kiểm tra dữ liệu setting ở trong biến theme_green_option

Qua 2 hình trên ta thấy rõ việc lưu dữ liệu trong theme option như thế nào:

Các tùy chọn sẽ được lưu trữ trong biến theme_green_option và được phân biệt bằng các key khác nhau, giúp việc truy xuất dữ liệu option trở nên dễ dàng hơn chỉ với key đã cài đặt mà không cần thực hiện nhiều truy vấn.

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

Tiêu đề - Tên hiển thị của thiết lập Chúng ta cần chú ý đến ID của các trường, vì đây là từ khóa quan trọng để phân biệt các biến trong mảng theme_green_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_green_option

Gán giá trị của biến theme_green_option với từ khóa (ID) theo kiểu mảng giúp tối ưu hóa quá trình xử lý dữ liệu Việc chuyển các thiết lập này sang một biến mới không chỉ rút ngắn mã nguồn mà còn làm cho nó trở nên rõ ràng và dễ hiểu hơn.

2.2.2 Plugin Visual Composer (Hỗ trợ việc dựng Website):

Plugin Visual Composer là một công cụ mạnh mẽ hỗ trợ người dùng trong việc tạo trang web với nhiều shortcode được định nghĩa bởi nhà phát triển Người dùng có khả năng phát triển các shortcode riêng, mang lại tính tùy biến cao cho plugin Điều này đặc biệt hữu ích cho các nhà phát triển Theme, cho phép họ tạo danh mục shortcode riêng, giúp khách hàng dễ dàng lựa chọn và xây dựng website một cách thuận tiện.

Plugin này không thể cài đặt qua giao diện của WordPress vì yêu cầu bản quyền, do đó cần sao chép trực tiếp vào thư mục wp-content/plugins/ Sau khi cài đặt, người dùng cần kích hoạt plugin trên trang web WordPress của mình Plugin cung cấp các shortcode cơ bản từ Visual Composer, giúp việc dựng trang trở nên đơn giản với chỉ vài cú nhấp chuột, kéo thả và lựa chọn, nhờ vào sự hỗ trợ từ nhà phát triển.

Hình 18: Các shortcode có sẵn trong plugin Visual Composer

2 Cơ chế thêm mới và hiển thị một shortcode trong Visual Composer: Ở plugin Visual Composer để tạo 1 shortcode mới chúng ta cần khai báo file shortcode.php để đăng ký vc_map nhằm thêm shortcode vào thƣ viện của Visual Composer:

Để đăng ký một shortcode vào vc_map của Visual Composer, bạn cần khai báo danh mục GREEN_SHORTCODE_CATEGORY trong file functions.php Danh mục này giúp tạo ra một không gian riêng cho các shortcode mới, giúp người dùng dễ dàng phân biệt giữa shortcode của theme và các shortcode có sẵn của 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:

Sau khi 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 cài đặt Tuy nhiên, khi người dùng thực hiện lựa chọn, kết quả vẫn chưa hiển thị do chưa có file hoặc hàm nào xử lý dữ liệu mà người dùng đã thiết lập cho 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ạo ra nhiều shortcode là điều phổ biến Do đó, cần thiết lập các thư mục riêng biệt để chứa các file PHP cho từng shortcode Trong theme Blog, tôi chỉ sử dụng một số thư mục tương ứng với các shortcode đã được xây dựng như: button, call-to-action, heading, blog, banner, icon-box, và list.

Để xử lý dữ liệu từ shortcode button, cần phải bao gồm hàm includes() từ file shortcodes.php, vì việc tạo file chỉ là bước khởi đầu.

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

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 trong HTML và CSS là cách hiệu quả để đáp ứ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, tức là viết trực tiếp CSS vào HTML Do đó, cần phân biệt các kiểu style của một element shortcode thông qua các class Dựa vào các class này, chúng ta có thể tạo ra những kiểu hiển thị khác nhau trên cùng một HTML.

CODE TEMPLATE CHO THEME

Template khu vực header

Đầu tiên, ta sẽ có file header.php khai báo định dạng html cho trang web và kèm theo một số thiết lập cần thiết:

- Setting về responsive trên các thiết bị khác nhau (meta name=”view post”)

Hình 32 Code cho template header.php

Vì để dễ dàng hơn trong quá trình code cũng nhƣ sửa chữa theme ta sử dụng từng template nhỏ hơn nằm trong thƣ mục templates

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 Hàm này tự động thêm các thành phần cần thiết và cho phép các plugin khác can thiệp thông qua wp_head().

Hình 33: Code cho file header.php trong folder templates

The header is divided into two smaller sections: header-left and header-right The header-left section contains the logo, while the header-right section features the menu Utilizing the Redux Framework plugin and accessing user-defined variables in the theme options makes it easy to manage the code and style formatting for each customization.

Hàm lấy logo cho header-left trong file header-logo.php:

Hình 34: Code xử lý setting và hiển thị logo cho website Các header của website có thể setting trong Theme Option:

Hình 35: Header với logo nằm ở vị trí giữa và trên menu

Hình 36: Header với logo nằm ngang và bên trái menu

Hình 37: Header với nội dung nổi lên page title

Template khu vực Footer

Tương tự với header ta sẽ có 1 file footer.php:

Hình 38: Code cho template footer.php Ở phần footer, đƣợc chia ra làm 4 cột và lấy dữ liệu thông qua Theme Option và sidebar

Tương tự với hàm wp_head(); ta cũng có hàm wp_footer() để thêm các thành phần cần thiết của Wordpress vào theme

Và tương tự với các template ở đây footer được chia làm 4 column khác nhau Nội dung sẽ đƣợc lấy lần lƣợt ở các template trong folder footer:

Nội dung ở footer 1 và footer 2 đƣợc fix cố định với form trong theme option và lấy thông tin từ setting trong theme option để hiển thị nội dung:

Footer 1: Cho phép nhập logo footer và nội dung mô tả về website:

Hình 39: Code cho nội dung foote-column-01.php

Footer 2: Hiển thị cố định 1 gallery các ảnh đƣợc lấy bằng cách add gallery mặc định trong theme option:

Hình 40: Code lấy và hiển thị bộ sưu tập theo thiết lập của người dùng

Footer 3 và Footer 4 trong tùy chọn giao diện có khả năng tùy biến cao nhờ vào việc sử dụng nội dung từ sidebar Với mỗi sidebar phụ thuộc vào các widget, hai footer này cho phép người dùng linh hoạt trong việc tùy chỉnh nội dung.

The theme options allow for the selection of sidebars for footer-3 and footer-4 To enable sidebars for these options, you must declare two sidebars specifically for displaying widgets in footer 3 and footer 4, named Footer 1 and Footer 2.

Hàm khai báo 2 sidebar trong functions.php:

Hình 42: Code đăng ký sidebar cho footer

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ể sử dụng các widget có sẵn từ WordPress hoặc tạo ra các widget tùy chỉnh để phù hợp với giao diện theme, mang lại nhiều lựa chọn khi xây dựng website.

Template khu vực Page Title

Page Title cần bao gồm các thông tin quan trọng như Title (tên của trang hoặc bài viết, thẻ, danh mục), Sub Title (nội dung tên phụ), Breadcrumbs (phân cấp đường dẫn đến trang hiện tại) và Background Image (ảnh nền cho page title).

Phần tùy chọn cho page title:

Hình 44: Phần tùy chọn cho 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 text Title, Sub title, Breadcrumbs

Các thiết lập về hình nền và lớp phủ hình nền rất quan trọng trong việc cải thiện khả năng hiển thị nội dung văn bản trên ảnh Lớp phủ (Overlay) là một màu nền trong suốt được sử dụng để tạo ra sự tương phản màu sắc, giúp nội dung text nổi bật hơn trên nền hình ảnh.

- Các thiết lập về Breadcrumbs nhƣ việc có hay không hiển thị breadcrumbs, kiểu hiển thị , vị trí của breadcrumbs tương ứng với từng kiểu hiển thị

Bài viết cung cấp các tùy chọn điều chỉnh độ cao của tiêu đề trang thông qua padding trên và dưới, cùng với margin dưới để tạo khoảng cách rõ ràng giữa tiêu đề và nội dung phía dưới.

Template cho việc hiển thị nội dung website

Khu vực hiển thị website đối với 1 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í ngoài cùng của theme Trong các file này, nhiệm vụ đầu tiên không phải là lấy nội dung mà là hiển thị các phần chung trong theme, như header, footer và sidebar.

Hình 47: Các hàm cần thiết ngoài content nhƣ headet, footer, page title

Hàm get_header() và get_footer() được sử dụng để lấy các template cho header và footer, trong khi hàm get_template_part(„template/page-heading‟) dùng để lấy nội dung tiêu đề trang Mỗi hàm này tương ứng với các template riêng biệt cho từng khu vực, giúp hiển thị nội dung một cách hiệu quả Để thuận tiện cho việc xử lý và lập trình, các file được chia nhỏ thành các template riêng biệt cho từng trường hợp, và khi cần thiết, ta sẽ gọi đến template phù hợp Ví dụ, trong file page.php, sử dụng green_get_template('page'); trong file archive.php, dùng green_get_template('archive'); và trong file single.php.

Hình 48: Code cho file Single.php

Trong file single.php, khi xử lý các bài viết với định dạng post format khác nhau, hệ thống sẽ gọi template tương ứng với định dạng đó Nếu không có định dạng cụ thể, hàm content sẽ được sử dụng Ngoài ra, để hiển thị và cho phép người dùng bình luận về bài viết, hàm comment_template() sẽ được gọi khi có bình luận cho bài viết.

Template archive tương tự như file single.php và archive.php trong thư mục template, sẽ gọi đến các template trong thư mục archive để xử lý hiển thị cho các định dạng bài viết khác nhau.

Các Post Format khác nhau cần xử lý:

- Post Format Image và Standard

Hầu hết việc hiển thị nội dung của các post là giống nhau bao gồm:

- Ngày đăng tải bài viết

- Các thông tin cơ bản nhƣ tác giả đăng, số comment, tag, category

- Nội dung giới thiệu, hay 1 đoạn mô tả ngắn về vài viết

- Ảnh, video, audio, quote, link tương ứng với từng post format, đây là điểm khác nhau gần nhƣ là cơ bản của các post format khác nhau

Hiển thị các nội dung không liên quan đến Thumbnail:

- Nhƣ lấy tên bài viết bằng hàm đã khai báo trong file functions.php

- Hàm expert lấy ra 1 đoạn mô tả về bài viết

- Entry meta lấy ra các thông tin cần thiết của 1 bài viết

Hình 49: Code cho content chung của archive.php Hiển thị các Thumbnail trong các template content của archive:

- Hiển thị nội dung thumbnail hay ảnh đối với định dạng chuẩn(Post Format Standard) hay dạng bài viết hình ảnh(Post Format Image):

Để đảm bảo tính nhất quán về kích thước ảnh, trước tiên cần sử dụng hàm resize để điều chỉnh ảnh về một kích thước đồng nhất, phù hợp với từng kiểu dáng khác nhau.

Để tối ưu hóa hình ảnh cho bài viết, chúng ta sử dụng 3 kích thước khác nhau dựa trên 3 kiểu blog: style full với kích thước 1170x700 px, style two column với kích thước 570x400 px, và style grid list medium với kích thước 370x245 px Các kích thước này được xử lý thông qua URL của ảnh bằng hàm resize.

To display images using Post Format: Image and Standard, it is essential to use the image tag along with the "src" attribute, which should contain the URL of the image that has been processed using the resize function.

Hình 51: Code hiển thị ảnh cho post format image standard nếu có ảnh

Hiển thị video với Post Format Video:

Hình 53: Code cho việc hiển thị video trong post format video

Dữ liệu video được truy xuất từ meta box bằng hàm get_post_meta thông qua meta key Tiếp theo, cần sử dụng hàm hiển thị nội dung của WordPress để xử lý việc hiển thị thông qua liên kết của youtube.com.

Hiển thị audio trên post format của audio hoàn toàn tương tự với video:

Việc hiển thị link và blockquote có định dạng tương tự, với cấu trúc cơ bản bao gồm một ảnh nền làm background và lớp overlay để nổi bật dữ liệu Bên cạnh đó, icon được sử dụng để phân biệt và làm rõ định dạng bài viết Nội dung sẽ được lấy từ meta-box, hiển thị trên ảnh nền và dưới icon thể hiện loại bài viết Biến $style được sử dụng để viết style inline, đưa feature image làm ảnh nền cho nội dung.

Hình 57-58: Code lấy dữ liệu người dùng nhập từ meta-box

Hình 59-60: Code hiển thị nội dung của link và quote

Việc hiển thị của trang đơn (single) tương tự như trang lưu trữ (archive), nhưng đơn giản hơn vì mỗi trang đơn chỉ hiển thị một định dạng bài viết duy nhất Do đó, cách trình bày của trang đơn có nhiều điểm tương đồng với trang lưu trữ.

Tạo mới một Widget

Widget trong WordPress là một khối nội dung được đặt trong khu vực xác định, thường gọi là Widget Area hoặc Sidebar Để tạo một widget, trước tiên bạn cần có kiến thức về PHP, bao gồm hiểu về Class và đối tượng trong PHP.

Trong WordPress, lớp WP_Widget đã được tích hợp sẵn với các phương thức cần thiết Để sử dụng lớp này, bạn phải tuân thủ đúng chuẩn viết các phương thức, không được thiếu hoặc thừa Có tổng cộng ba phương thức bắt buộc trong lớp WP_Widget mà bạn cần phải thực hiện chính xác.

- construct: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget

- form: Phương thức này sẽ hỗ trợ tạo các form nhập liệu bên trong một widget

- update: Phương thức này sẽ hỗ trợ lưu dữ liệu mà người dùng đã nhập vào các form mà đã tạo bằng phương thức form

- widget: Phương thức này sẽ giúp gọi dữ liệu và hiển thị ra ngoài website khi gắn cái widget này lên Đăng ký widget đã tạo:

Hình 63: Đăng ký widget vào action widget_init.

Quy trình làm việc của Cơ sở dữ liệu

WordPress được lập trình với nhiều tính năng cho phép tương tác với cơ sở dữ liệu MySQL, giúp người dùng lưu trữ dữ liệu mềm hiệu quả trên website.

Tất cả dữ liệu mềm lưu trữ trong cơ sở dữ liệu bao gồm nội dung văn bản nhập vào website, các thiết lập và một số dữ liệu khác Khi xem cơ sở dữ liệu qua phpMyAdmin hoặc các ứng dụng tương tự, có thể thấy WordPress chứa nhiều bảng để lưu trữ dữ liệu Các tính năng trong mã nguồn tương tác với các bảng này và hiển thị thông tin ra trình duyệt dưới dạng HTML thông qua các tập tin khuôn mẫu trong theme Khi người dùng truy cập vào website, các dữ liệu này sẽ được trình bày một cách trực quan.

WordPress sẽ tự động xử lý theo quy trình sau:

Bước 1 – Khởi động mã nguồn:

Tập tin index.php trong mã nguồn WordPress (không phải của theme hay plugin) được tải lên đầu tiên và sau đó truy xuất các tập tin cốt lõi khác như wp-config.php để kết nối đến cơ sở dữ liệu, và wp-settings.php Bằng cách mở tập tin index.php, người dùng có thể theo dõi quy trình tải các tập tin theo thứ tự Tại bước này, WordPress thiết lập kết nối đến cơ sở dữ liệu đã được cấu hình trong wp-config.php, sau đó tải các tính năng cần thiết từ các tập tin như /wp-includes/functions.php và /wp-includes/options.php để chuẩn bị tiếp nhận dữ liệu.

Trong bước này, tất cả dữ liệu trong bảng wp_options có giá trị cột autoload là true sẽ được lấy ra, bất kể thiết lập đó có được sử dụng hay không Mục đích là chuẩn bị sẵn các tùy chọn của website và các plugin, nhằm hỗ trợ cho các bước tiếp theo, đặc biệt là việc tải plugin để đảm bảo hoạt động chính xác.

Các plugin đang kích hoạt trên website sẽ được tải ngay sau khi mã nguồn WordPress khởi động Các tính năng trong WordPress Core thường được gắn vào hook init, cho phép tích hợp dễ dàng với các chức năng của hệ thống.

SVTN: Dương Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 39 neo để kích hoạt kịch bản nào đó) nên nó sẽ tải ngay sau khi WordPress khởi động là vậy

Bước 3 – Thực thi tập tin functions.php trong theme

At this stage, WordPress searches for the functions.php file in the currently activated theme to load the features defined by the theme creator To identify which theme the website is using, WordPress connects to the database in the first step and references the current_theme key in the option_name column of the wp_options table.

Bước 4 trong quy trình phát triển website là phân tích và khởi tạo truy vấn, điều này rất quan trọng để nội dung có thể hiển thị ra bên ngoài Các truy vấn được gửi vào database sẽ trả về thông tin cần thiết, giúp người dùng truy cập và tương tác với nội dung của website.

Truy vấn ở đây là truy vấn SQL gửi vào MySQL Server

Trước tiên, WordPress sẽ chạy hàm wp() được thiết lập trong

/wp-include/functions.php vốn để gọi phương thức $wp->main() cho mục đích thiết lập truy vấn Đối tƣợng $wp đƣợc tạo ra bởi lớp WP trong

/wp-include/class-wp.php function wp( $query_vars = '' ) { global $wp, $wp_query, $wp_the_query;

$wp->main( $query_vars ); if ( !isset($wp_the_query) ) $wp_the_query = $wp_query;

Phương thức `$wp->parse_request()` trong WordPress được kích hoạt để phân tích truy vấn dựa trên đường dẫn của website Khi người dùng truy cập vào một đường dẫn như `http://domain.com/?p3`, WordPress sẽ tự động tạo ra một truy vấn đến cơ sở dữ liệu để lấy thông tin của bài viết có ID tương ứng.

Sau khi phân tích truy vấn, WordPress thiết lập các hàm điều kiện thông qua phương thức $wp_query → parse_query() Tiếp theo, nó chuyển đổi các truy vấn thành các lệnh SQL để gửi đến MySQL, nhằm lấy dữ liệu bài viết bằng phương thức $wp_query->get_posts().

Khi cơ sở dữ liệu có dữ liệu, các bài viết sẽ được truy xuất sau khi gửi truy vấn và lưu vào đối tượng $wp_query, giúp sử dụng trong các vòng lặp để hiển thị bài viết.

Trong quá trình gửi truy vấn, nếu không tìm thấy dữ liệu, hệ thống sẽ phân tích và hiển thị lỗi 404 Ngược lại, nếu có dữ liệu, biến $post sẽ được thiết lập để sử dụng trong vòng lặp, với $post là đối tượng chứa các dữ liệu bài viết thông qua các thuộc tính của nó.

Bước 5 – Thực thi các tập tin khuôn mẫu (template) trong theme

Sau khi nó đã có dữ liệu bài viết và các dữ liệu liên quan mà nó đã làm ở bước

Quá trình xử lý các tập tin template của theme diễn ra qua cấu trúc template, dẫn đến việc hiển thị nội dung và trang chủ của website sau 5 bước làm việc với cơ sở dữ liệu Kết quả là các nội dung sẽ được trình bày dưới dạng HTML thông qua các template tags, cho phép người sử dụng thấy hình ảnh và văn bản trên website.

Khả năng can thiệp vào mã nguồn WordPress

Một câu hỏi đƣợc đặt ra là chúng ta có thể làm gì để can thiệp vào mã nguồn

WordPress nhằm điều khiển nó hoạt động theo ý mình, hoặc hiểu theo cách khác là tạo thêm tính năng và thay đổi giao diện hiển thị

Chúng ta có thể can thiệp vào các tính năng của WordPress và tái tạo chúng nhờ vào mã nguồn được thiết kế cho phép can thiệp gián tiếp Việc này được thực hiện thông qua các lớp (Class), cho phép chúng ta tạo ra các tính năng mới Những tính năng này có thể được khai báo dưới dạng plugin và sẽ được sử dụng ngay khi WordPress khởi động các chức năng cần thiết.

Chúng ta có thể can thiệp vào lớp WP_Query để tạo truy vấn riêng nhằm lấy dữ liệu từ database, sử dụng nhiều hàm như get_post_meta() WP_Query thường được ứng dụng để lấy dữ liệu các bài viết, bao gồm post, page và attachment.

Chúng ta có thể tạo một theme và tùy chỉnh các tập tin template để hiển thị nội dung WordPress theo ý muốn của mình.

Sau khi WordPress gửi truy vấn để lấy dữ liệu, cách hiển thị dữ liệu đó trên website phụ thuộc vào các template Các template này sử dụng mã PHP kết hợp với HTML/CSS để trình bày nội dung một cách hiệu quả.

Tiêu đề	Lập Trình Theme Wordpress Cho Website Blog
Tác giả	Dương Minh Đức
Người hướng dẫn	ThS. Phạm Thị Thu Hiền
Trường học	Trường Đại Học Vinh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	báo cáo đồ án tốt nghiệp
Năm xuất bản	2016
Thành phố	Nghệ An

Định dạng
Số trang	45
Dung lượng	2,36 MB