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ó:
Trang lưu trữ cho tác giả trên website được cấu hình thông qua các tập tin như author-ten-tac-gia.php, nơi bạn có thể tạo tập tin riêng cho từng tác giả, ví dụ Author-A.php Nếu không có tập tin riêng cho tác giả, hệ thống sẽ tự động sử dụng tập tin Author.php cho tất cả các tác giả Trong trường hợp không có cả Author.php, tập tin Archive.php sẽ được sử dụng, và nếu tập tin này cũng không tồn tại, cuối cùng hệ thống sẽ sử dụng tập tin Index.php, tập tin có phạm vi sử dụng rộng nhất trong các tập tin lưu trữ.
Đọc từ trái qua, bên tay trái thể hiện ý nghĩa của các trang, ví dụ như trang lưu trữ (Archive Page) bao gồm các loại trang như Author Archive, Categories Archive, và Custom Archive.
Các phần màu đen trong bài viết giúp chúng ta nhận biết thuộc về Template nào Ví dụ, Sigula Page là một trang độc lập dùng để hiển thị nội dung riêng biệt Trong Sigula Page, có hai phần chính là Single Post page (hiển thị nội dung của một bài viết) và Single Page (hiển thị nội dung của một trang) Các tập tin khác cũng tuân theo quy trình tương tự.
Trong cấu trúc này, nếu có bất kỳ tệp nào thiếu, hệ thống sẽ bỏ qua và tiếp tục theo luồng từ trong ra ngoài, chỉ xử lý các tệp có sẵn.
- 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ả, Thể loại và Thẻ Tệp tin archive.php sẽ được sử dụng để gọi trang Archive này.
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 do người dùng tạo ra để hiển thị nội dung lâu dài, không có tính cập nhật, và có thể kiểm soát quyền truy cập của khách tham quan Page hỗ trợ phân cấp, điều này không có ở Post Tương tự, Single Post cũng được phân chia thành hai file chứa.
2 post type là page và post ở 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 liên quan đến đường dẫn Khi người dùng truy cập vào một liên kết không hợp lệ, 404.php sẽ hiển thị thông báo rằng trang, bài viết hoặc nội dung mà họ tìm kiếm không tồn tại hoặc không có quyền truy cập.
Tập tin search.php là thành phần quan trọng trong WordPress, chịu trách nhiệm 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 thức hiển thị kết quả theo nhu cầu 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à graphsign 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 của Website Đối với một theme đơn giản, hầu hết các quy tắc CSS và định dạng giao diện sẽ được viết trong tập tin này.
Khi bạn tải lên theme này vào thư viện WordPress.Org, tag này sẽ giúp người dùng dễ dàng tìm kiếm theme thông qua các từ khóa phù hợp.
Text-domain là một khái niệm quan trọng trong việc phát triển 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 đúng cách sẽ tạo điều kiện thuận lợi cho việc dịch thuật và tối ưu hóa trải nghiệm người 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ị
File function.php là một phần quan trọng trong theme WordPress, được kích hoạt ngay sau khi các plugin được khởi động Đây là tập tin bắt buộc trong theme, chứa mã nguồn PHP cần thiết để website luôn hoạt động ổn định Tất cả các đoạn mã PHP không liên quan đến việc hiển thị nội dung sẽ được viết trong file này, đảm bảo rằng các chức năng cần thiết luôn được tải mỗi khi người dùng truy cập website.
Tập tin function.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, bao gồm cách lấy thư mục file, core, và các template để thuận tiện hơn trong việc sử dụng.
Hình 2.3 Khai báo cách lấy và lấy các thƣ mục trong theme
Cấu hình theme bao gồm các thiết lập quan trọng 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à xử lý phân trang để tối ưu hóa trải nghiệm người dùng.
Hình 2.4 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:
Đị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.2.1 Các file template cho header và page title
Template cho khu vực footer:
Hình 2.2.2 Các file template cho footer
Các Plugin cần thiết
Plugin là một thành phần mở rộng được lập trình dựa trên các API và hàm mở của WordPress, nhằm tạo ra tính năng mà WordPress không có sẵn Nói một cách đơn giản, plugin là một module bổ sung chức năng cho WordPress.
Hiện nay, số lượng plugin cho WordPress rất phong phú, với hàng chục nghìn plugin chính thức có sẵn trên thư viện của WordPress.org Điều này cho thấy sự đa dạng và khả năng tùy chỉnh của nền tảng WordPress, giúp người dùng dễ dàng tìm kiếm các giải pháp phù hợp cho nhu cầu của mình.
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:
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.3.1: Cài đặt Redux Framwork
Hình 2.3.2 Giao diện thiết lập tùy chọn Theme option cho người dùng
2.3.2 Plugin Visual Composer (Hỗ trợ việc dựng Website)
Visual Composer: Là 1 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ó được hỗ trợ dựng trang giống như một ứng dụng, với các shortcode cơ bản đã được nhà phát triển Visual Composer cung cấp Như hình minh họa bên dưới, việc xây dựng trang trở nên đơn giản hơn bao giờ hết, chỉ cần vài cú click chuột, kéo thả và lựa chọn Các shortcode đã được chuẩn bị sẵn giúp tối ưu hóa quá trình dựng trang một cách hiệu quả.
Hình 2.3.3 Hình ảnh giao diện sử dụng của Plugin
Plugin này cung cấp nhiều shortcode được định nghĩa bởi nhà phát triển Visual Composer, đồng thời cho phép phát triển các shortcode ngoài Visual Composer Điều này giúp plugin hỗ trợ xây dựng trang với tính tùy biến cao, rất phù hợp cho các nhà phát triển Theme trong việc tạo danh mục shortcode của riêng họ, mang lại sự lựa chọn dễ dàng và thuận tiện cho khách hàng khi xây dựng Website.
Hình 2.3.4 Giao diện hiển thị để thêm các shortcode khi dựng trang
Hình 2.3.5 Thêm shortcode và các tùy chọn trong shortcode
CODE CÁC TEMPLATE TRONG THEME
Viết code cho tập tin Function
Chức năng của tập tin function
Tập tin functions.php là một trong những tập tin quan trọng nhất trong theme WordPress, bắt buộc phải có và chứa các đoạn mã nguồn cần thiết Tập tin này được tải mỗi khi website được truy cập, bao gồm toàn bộ mã PHP cần thiết cho theme, ngoại trừ mã hiển thị nội dung.
Để tối ưu hóa việc sử dụng lại dữ liệu quan trọng và các hằng dữ liệu, bạn nên thiết lập chúng trong tập tin này và khai báo các đoạn mã cần thiết trong tập tin functions.php.
Viết code cho tập tin Header.php
Trong tập tin này, chúng ta sẽ khai báo các thẻ HTML cần thiết cho một tài liệu HTML chuẩn, bao gồm các thẻ như , , , trong đó thẻ đóng vai trò quan trọng nhất Bên cạnh đó, chúng tôi sẽ thêm mã code để hiển thị tên Website và menu, sử dụng tập tin header.php, vì các thành phần này sẽ xuất hiện trên tất cả các trang.
3.2.2 Viết code cho tập tin Header
Hook wp_head() là một hook quan trọng trong WordPress, giúp xác định khu vực thẻ của theme Nó cho phép WordPress tự động thêm các thành phần cần thiết và cho phép các plugin can thiệp vào khu vực này thông qua hook wp_head().
Thẻ mở trong mã nguồn bao gồm hàm template tag body_class(), cho phép trả về các class tượng trưng cho từng trang Điều này giúp người dùng tùy biến CSS cho từng trang dựa vào các class này Để tải tập tin header.php, cần thêm hàm vào tập tin index.php.
- Để hiển thị khu vực tên Website trên Header, nên tạo một hàm riêng trong tập tin Function.php cho gọn
- Để lấy dữ liệu của header thì sẽ sử dụng các action đã đƣợc viết trong các template của theme
Header được chia thành hai phần nhỏ: bên trái chứa logo và bên phải chứa menu Sử dụng các plugin và biến từ Chương II, việc xử lý mã và định dạng style cho từng tùy chọn trở nên dễ dàng hơn.
Viết code cho tập tin Footer.php
3 3.1 Ý nghĩa của tập tin Footer.php
Việc nhảy từ header.php đến footer.php là do sự liên kết chặt chẽ giữa hai tập tin này trong cấu trúc HTML Cụ thể, trong header.php, thẻ mở được khai báo nhưng thẻ đóng sẽ được viết trong footer.php Tương tự như header, footer cũng là một tập tin quan trọng để hiển thị trên mọi trang web.
3.3.2 Viết code cho footer.php Để gọi footer ra mỗi khi tải trang thì trong tập tin index.php, viết thêm hàm get_footer() nhƣ sau:
Trong tập tin header.php, các thẻ chỉ mới có thẻ mở mà chưa có thẻ đóng sẽ được hoàn tất ở tập tin footer.php Tương tự như wp_head(), hook wp_footer() giúp WordPress xác định phần footer của trang web, cho phép một số plugin có thể kết nối và thực hiện các chức năng cần thiết.
The opening tags , , and in the Header.php file have not been closed; ensure to include the closing tags in the footer.php file along with the wp_footer() hook as follows.
Viết code cho tập tin index.php
3.4.1 Ý nghĩa của tập tin Index.php
Tập tin index.php là một trong ba tập tin quan trọng của theme WordPress, cần thiết để hiển thị thông tin khi các tập tin khác không tồn tại Trong index.php hiện có hai đoạn code chèn vào, với header.php được tải ở đầu và footer.php ở dưới Để hiển thị nội dung giữa website, bạn cần viết mã giữa hai đoạn code này.
3.4.2 Viết code cho tập tin Index.php Đoạn HTML dưới đây sẽ chia cột phần hiển thị nội dung để hiển thị post mới nhất nằm bên trái và sidebar nằm bên phải trang web
Nội dung của index.php sẽ đƣợc lấy ra từ các template của theme do người dùng cấu hình.
Viết code hiển thị Sidebar
3.5.1 Bản chất của SideBar Ở phần viết code cho functions.php chúng ta đã tạo ra một sidebar đƣợc với đoạn code như dưới đây :
Tham số ID trong biến $sidebar, như main-sidebar, là tên slug của sidebar được tạo trong functions.php Sau khi khởi tạo, sidebar sẽ xuất hiện trong phần Appearance → Widgets SideBar thực chất là tập hợp các Widgets, cho phép người dùng chỉnh sửa thông tin thông qua các Widget có trong Sidebar Việc tạo ra nhiều sidebar sẽ dẫn đến việc hiển thị nhiều tùy chọn khác nhau.
Hình 2.12 Sidebar và các vùng của sidebar 3.5.2 Hiển thị SideBar ra Website
Để hiển thị sidebar trên Website, ngoài việc tạo mã code, bạn cần sử dụng hàm dynamic_sidebar() Trong các tập tin như index.php, single.php, archive.php,… có hàm get_sidebar() để tải tập tin sidebar.php từ theme, hoặc dùng get_sidebar('index') để tải sidebar-index.php Để sidebar hiển thị, trong sidebar.php, bạn cần chèn đoạn code kiểm tra bằng hàm is_activate_sidebar() xem có widget nào trong main-sidebar chưa Nếu có, hàm dynamic_sidebar() sẽ hiển thị sidebar; nếu không, một thông báo yêu cầu thêm widget sẽ xuất hiện Sau khi thực hiện, sidebar sẽ hiển thị trên Website.
Hình 2.13 Hiển thị Sidebar của Theme
Viết code cho khu vực 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
File index.php nằm ở vị trí ngoài cùng của theme Trong các file này, để lấy nội dung, điều đầu tiên không phải là trích xuất nội dung mà là hiển thị các phần chung trong theme như tiêu đề, menu và footer.