Thực hành phát triển theme WordPress: Xây dựng từ đầu một trang web doanh nghiệp thích ứng với mọi thiết bị

Cấu trúc dự án và công tác chuẩn bị

Trước khi bắt đầu viết mã, việc lập kế hoạch cấu trúc dự án một cách hợp lý là yếu tố then chốt để đạt được thành công. Thư mục chứa các tài liệu liên quan đến một chủ đề WordPress tiêu chuẩn nên được đặt tại địa chỉ sau:/wp-content/themes/Trong thư mục, tên các tệp hoặc thư mục nên được viết bằng chữ thường, dấu gạch ngang (-) và số, ví dụ:my-enterprise-themeTrước tiên, bạn cần tạo các tệp cốt lõi sau:style.css、index.php、functions.phpvàscreenshot.png。

style.cssKhông chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của chủ đề (theme) – khối chú thích ở phía trên chứa đựng toàn bộ thông tin meta của chủ đề đó. Thông tin đầu tiên của một chủ đề doanh nghiệp tiêu chuẩn được trình bày như sau:

/*
Theme Name: My Enterprise Theme
Theme URI: https://www.yourdomain.com/theme
Author: Your Name
Author URI: https://www.yourdomain.com
Description: 一个响应式、功能强大的企业级WordPress主题，专为现代企业官网设计。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-enterprise-theme
*/

functions.phpTệp tin chính là “bộ não” của trang web, được sử dụng để chứa các tập lệnh (script), kiểu dáng (styles), menu đăng ký (registration menu), thanh bên (sidebar), v.v. Ở giai đoạn đầu của quá trình phát triển, chúng ta nên đưa các tập tin kiểu dáng chính (main style sheet) và tập tin JavaScript vào tệp tin này một cách an toàn.wp_enqueue_style和wp_enqueue_scriptViệc sử dụng các hàm (functions) là phương pháp được WordPress khuyến nghị.

Đọc thêm Phân tích sâu về Tailwind CSS: Hướng dẫn thực hành chi tiết từ cơ bản đến nâng cao về framework CSS hiện đại。

Xây dựng các tệp mẫu cốt lõi

WordPress sử dụng hệ thống phân cấp các mẫu (templates) để quyết định trang nào sẽ sử dụng tệp nào để hiển thị. Để xây dựng một trang web doanh nghiệp, bạn cần bắt đầu từ các mẫu cơ bản (basic templates).

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Tạo mẫu bố cục cơ bản

Các phần có thể được sử dụng lại như phần đầu, phần chân trang, và thanh bên nên được tách ra thành các tệp riêng biệt. Chúng ta sẽ bắt đầu bằng việc tạo những tệp đó.header.phpTệp tin này cần chứa phần đầu của tài liệu HTML, biểu tượng thương hiệu (Logo) của trang web, và menu điều hướng chính. Menu điều hướng cần được thiết kế sao cho…wp_nav_menuFunction call, and then...functions.phphãy tải bản dịch thông qua hàmregister_nav_menusVị trí đăng ký hàm (Function registration location).

Tạo rafooter.phpTệp để đặt thông tin bản quyền, liên kết hỗ trợ và tập lệnh. Cuối cùng, tạosidebar.phpĐể định nghĩa nội dung của thanh bên cạnh, bạn cũng cần phải thực hiện các bước tương tự như trước đó.functions.phpTrung dụngregister_sidebarĐăng ký hàm (Function registration).

Thực hiện trang chủ và trang bài viết

index.phpĐây là tệp lưu trữ để quay lại phiên bản gốc của mẫu (template). Đối với các trang web doanh nghiệp, chúng ta thường cần một phiên bản mẫu được tùy chỉnh theo nhu cầu cụ thể của tổ chức đó.front-page.phpLà trang chủ, nó được sử dụng để hiển thị các mô-đun như biểu ngữ, giới thiệu dịch vụ, tin tức mới nhất, v.v. Tệp này thực hiện điều này bằng cách gọi (call) các chức năng liên quan.get_header()、get_footer()Sử dụng các hàm như `etc.` để tổ chức cấu trúc trang web.

single.phpDùng để hiển thị nội dung của một bài blog riêng lẻ hoặc các loại bài viết tùy chỉnh. Cốt lõi của phương thức này là sử dụng vòng lặp (The Loop) trong WordPress để truy xuất và hiển thị nội dung bài viết, tiêu đề, thông tin meta (tác giả, ngày xuất bản) cùng các bình luận. Nếu bài viết có hình ảnh đặc biệt, bạn có thể sử dụng chúng để trang trí nội dung.the_post_thumbnail()Hàm được sử dụng để gọi (thực thi).

Đọc thêm Xây dựng chủ đề WordPress mà không cần code: Hướng dẫn đầy đủ từ đầu đến nâng cao。

Triển khai thiết kế đáp ứng và kiểu dáng

Trang web của các doanh nghiệp hiện đại phải mang lại trải nghiệm truy cập tốt trên mọi loại thiết bị. Việc triển khai thiết kế thích ứng (responsive design) cần bắt đầu với nguyên tắc ưu tiên cho các thiết bị di động.

Sử dụng thiết kế bố cục CSS hiện đại

Chúng tôi không còn phụ thuộc vào các framework cũ nữa, mà thay vào đó chúng tôi sử dụng rộng rãi các công cụ thiết kế web như CSS Flexbox và CSS Grid để tạo ra giao diện người dùng (UI) hiệu quả và linh hoạt hơn. Bằng cách áp dụng những công cụ này trong thiết kế trang chủ…style.cssViệc định nghĩa các thuộc tính tùy chỉnh trong CSS (CSS Variables) để quản lý các yếu tố thiết kế như màu sắc, khoảng cách và phông chữ có thể giúp nâng cao đáng kể mức độ bảo trì của mã nguồn.

:root {
  --primary-color: #0073aa;
  --spacing-unit: 1rem;
  --font-heading: 'Helvetica Neue', sans-serif;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-unit);
}

Thêm truy vấn phương tiện truyền thông (media query)

Các truy vấn truyền thông (media queries) là yếu tố then chốt để tạo ra các điểm phân chia (breakpoints) phản ứng linh hoạt trên trang web. Bạn nên điều chỉnh bố cục của trang web dựa trên kích thước màn hình khác nhau bằng cách thêm các câu lệnh truy vấn truyền thông ở cuối tập lệnh định dạ

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

/* 平板电脑及更大屏幕 */
@media (min-width: 768px) {
  .content-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing-unit) * 2);
  }
}

/* 桌面电脑 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Integrate advanced features with customizations.

Các trang web doanh nghiệp thường cần vượt ra ngoài những chức năng cơ bản của một blog thông thường, chẳng hạn như khả năng tùy chỉnh loại bài viết (Custom Post Types – CPT), các tùy chọn xây dựng trang (page building options), và tối ưu hóa hiệu suất (performance optimization).

Tạo loại bài viết tùy chỉnh

Ví dụ, hãy tạo các loại nội dung riêng biệt cho “thành viên nhóm” hoặc “các trường hợp thành công”. Điều này đòi hỏi phải…functions.phpsử dụngregister_post_typeHàm này: Nếu các tham số được thiết lập đúng cách, nó sẽ có một menu biên tập riêng biệt ở phía sau nền (trong hệ thống), và hỗ trợ tất cả các tính năng chuẩn của bài viết như phân loại, thẻ, hình ảnh nổi bật, v.v.

function register_team_post_type() {
    $args = array(
        'public' => true,
        'label'  => '团队成员',
        'supports' => array('title', 'editor', 'thumbnail'),
        'menu_icon' => 'dashicons-groups',
        'has_archive' => true,
    );
    register_post_type('team', $args);
}
add_action('init', 'register_team_post_type');

Thêm hỗ trợ cho công cụ tùy chỉnh chủ đề (Theme Customizer).

WordPress Customizer cho phép người dùng thay đổi giao diện của theme mà không cần phải sửa đổi mã nguồn.functions.phptrongadd_action('customize_register', 'your_theme_customizer')Các “hook” (móc) cho phép thêm các thiết lập và công cụ điều khiển, chẳng hạn như màu sắc của phần đầu trang hoặc văn bản ở phần chân trang.

Đọc thêm Phát triển chủ đề WordPress từ cơ bản đến nâng cao: Hướng dẫn toàn diện về cách xây dựng các chủ đề thích ứng với mọi thiết bị。

Các biện pháp tối ưu hóa hiệu suất

Tốc độ là một yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng trên trang web doanh nghiệp và hiệu quả của các chiến lược SEO (Search Engine Optimization). Các biện pháp tối ưu hóa bao gồm:add_image_size()Tạo ra những hình ảnh có kích thước phù hợp cho các khu vực hiển thị khác nhau; sử dụng (Use)get_template_part()Các mẫu mã lập trình được thiết kế theo nguyên tắc mô-đun hóa để tối ưu hóa việc sử dụng bộ nhớ đệm (cache); đồng thời, cách thức tải các tập lệnh (script) và thành phần giao diện (components) được thiết lập một cách chính xác nhằm tránh gây trì hoãn quá trình hiển thị tr

Tóm lại

Việc phát triển một chủ đề WordPress cấp doanh nghiệp là một quá trình công việc có hệ thống, bắt đầu từ một cấu trúc dự án rõ ràng, sau đó xây dựng khung cơ bản bằng cách tạo các tệp tin phù hợp với cấu trúc của các lớp mẫu (templates). Thiết kế thích ứng (responsive design) là nền tảng quan trọng để đảm bảo tính tương thích trên nhiều loại thiết bị khác nhau; để thực hiện điều này, cần sử dụng các công nghệ CSS hiện đại và áp dụng nguyên tắc ưu tiên cho thiết bị di động (mobile-first). Cuối cùng, bằng cách tích hợp các loại bài viết tùy chỉnh, các tùy chọn tùy chỉnh chủ đề (theme customizers) và các biện pháp tối ưu hóa hiệu năng nghiêm ngặt, bạn có thể cung cấp cho khách hàng một giải pháp trang web mạnh mẽ, linh hoạt và hiệu quả. Bằng cách tuân theo những bước này, bạn không chỉ tạo ra một chủ đề đáp ứng nhu cầu hiện tại mà còn xây dựng một nền tảng mã nguồn dễ dàng bảo trì và mở rộng trong tương lai.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

FAQ 常见问题

Làm thế nào để bổ sung tính năng hỗ trợ các chủ đề con (subtopics) cho chủ đề của tôi?
Để đảm bảo rằng các thay đổi của người dùng không bị ghi đè khi chủ đề được cập nhật, người dùng được khuyến khích tạo các chủ đề con (sub-threads). Trong chủ đề chính của bạn, bạn nên tránh sử dụng các đường dẫn tệp mẫu (template paths) được khai báo cứng (hard-coded), và thay vào đó nên sử dget_template_directory_uri()mà không phảiget_stylesheet_directory_uri()Hãy trích dẫn các nguồn tài nguyên cần thiết. Đồng thời, hãy giải thích rõ cách thức để tạo ra các chủ đề con (sub-topics) trong tài liệu chính.

Tại sao loại bài viết tùy chỉnh của tôi không hiển thị sau khi được lưu?

Điều này thường xảy ra do các quy tắc định tuyến (rewrite rules) chưa được cập nhật. Sau khi bạn đăng ký các loại bài viết hoặc thể loại tùy chỉnh, bạn cần truy cập trang “Cài đặt” -> “Liên kết cố định” (Settings -> Fixed Links) trong giao diện quản trị WordPress, sau đó nhấp vào nút “Lưu thay đổi” (Save Changes) một lần để cập nhật các quy tắc định tuyến và làm cho cấu trúc URL mới có hiệu lực.

Làm thế nào để tôi bổ sung hỗ trợ nhiều ngôn ngữ cho chủ đề này?

Bạn cần sử dụng hàm quốc tế hóa để bao bọc tất cả văn bản người dùng có thể nhìn thấy. Ví dụ, sử dụng__('Hello World', 'my-enterprise-theme')和_e('Hello World', 'my-enterprise-theme')Sau đó, sử dụng các công cụ như Poedit để thực hiện công việc tạo ra sản phẩm cần thiết..potDịch tệp mẫu và yêu cầu người dùng tạo ra các sản phẩm dựa trên tệp này..po和.moCuối cùng, về tệp tin…functions.phphãy tải bản dịch thông qua hàmload_theme_textdomain().

Làm thế nào để đảm bảo chủ đề của tôi đáp ứng các tiêu chuẩn đăng ký trên danh mục chính thức của WordPress?

Chủ đề phải tuân thủ nghiêm ngặt Hướng dẫn Kiểm tra Chủ đề của WordPress. Điều này bao gồm: sử dụng các thực hành lập trình an toàn (như mã hóa dữ liệu, xác thực dữ liệu đầu vào), không tích hợp các thư viện hoặc tiện ích bổ sung từ bên thứ ba không cần thiết, tuân theo các tiêu chuẩn của PHP và HTML, hỗ trợ người dùng khiếm thính hoặc khuyết tật khác, và vượt qua tất cả các công cụ kiểm thử tự động. Được khuyến nghị sử dụng tiện ích Theme Check để tự kiểm tra trong quá trình phát triển chủ đề.